/* ======================
   Global Overlay & Container
   ====================== */
   .ticket-overlay {
    font-family: Gilroy;
    font-size: 19px;
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 10000;
    align-items: center;
    justify-content: center;
  }
  
  .ticket-overlay .wrap {
    background: #fff;
    width: 90%;
    max-width: 700px;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  .ticket-overlay .wrap-bus {
    background: #fff;
    width: 90%;
    max-width: 700px;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  
  /* Global Close Button */
  .ticket-overlay .close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  /* ======================
     Common Styles for Layers
     ====================== */
  .ticket-layer {
    /* Only one layer will be visible at a time */
    display: none;
  }
  
  .ticket-layer h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 20px;
  }
  
  /* ======================
     Overview Layer (Ticket History)
     ====================== */
  #ticketOverviewLayer {
    display: block; /* Default visible layer on overlay open */
  }
  
  .ticket-history {
    margin-bottom: 20px;
  }
  
  .ticket-history h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }
  
  
  /* Container to hold the table and enable scrolling */
  .ticket-history {
      overflow-y: auto; /* Enables scrolling for tbody */
      position: relative; /* Ensures positioning works correctly */
  }
  
  /* Table Styling */
  .ticket-history table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* Ensures consistent column width */
  }
  
  /* Fixed Header */
  .ticket-history thead {
      display: table; /* Keeps header part of the table */
      width: 100%;
      position: sticky;
      top: 0; /* Sticks to the top */
      z-index: 10; /* Ensures it stays above scrolling content */
      border: none;         /* Remove border */
      background: none;      /* Remove background */
  }
  
  /* Scrollable Table Body */
  .ticket-history tbody {
      display: block;
      width: 100%;
      max-height: 350px; /* Adjust as needed */
      overflow-y: auto; /* Enables vertical scrolling */
      width: 100%;
  }
  
  /* Table Cells */
  .ticket-history th, .ticket-history td {
      padding: 6px;
      text-align: center;
      border: 1px solid #ddd;
  }
  
  .ticket-history thead th {
    padding: 12px;
    text-align: center;
    border: none; 
    background-color: #f5f5f5;
    font-family: Gilroy, sans-serif;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
  }
  
  /* Column Widths (Adjustable Based on Your Needs) */
  .ticket-history th:nth-child(1), .ticket-history td:nth-child(1) { width: 10%; } /* ID */
  .ticket-history th:nth-child(2), .ticket-history td:nth-child(2) { width: 20%; } /* Name */
  .ticket-history th:nth-child(3), .ticket-history td:nth-child(3) { width: 25%; } /* Subject */
  .ticket-history th:nth-child(4), .ticket-history td:nth-child(4) { width: 25%; } /* Create Time */
  .ticket-history th:nth-child(5), .ticket-history td:nth-child(5) { width: 20%; } /* Status */
  
  /* Header Styling */
  .ticket-history th {
      background-color: #f5f5f5;
      font-weight: bold;
  }
  
  /* Row Hover Effect */
  .ticket-history tr.ticket-row {
    cursor: pointer;
  }
  
  .ticket-history tr.ticket-row:hover {
      background-color: #f2f2f2;
  }
  
  /* Ensuring Scrollbar Doesn't Affect Width */
  .ticket-history tbody::-webkit-scrollbar {
      width: 4px;
  }
  
  .ticket-history tbody::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 4px;
  }
  
  .ticket-history tbody::-webkit-scrollbar-track {
      background: #f0f0f0;
  }
  
  
  #newTicketBtn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #348641;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
  }
  
  #newTicketBtn:hover {
    background-color: #2a6b34;
  }
  
  /* ======================
     Chat Layer (Existing Ticket Details)
     ====================== */
  #ticketChatLayer .back-btn {
    background: none;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    margin-bottom: 10px;
    color: #348641;
  }
  
  .chat-message {
    padding: 5px 8px;       /* Reduced padding */
    margin: 4px 0;          /* Smaller vertical margin */
    max-width: 80%;
    clear: both;
    border-radius: 5px;
    line-height: 1.2;       /* Reduced line height */
  }
  
  
  /* Admin messages: left aligned */
  .left-message {
    background-color: #e9ecef;
    float: left;
    text-align: left;
  }
  
  /* Client messages: right aligned */
  .right-message {
    background-color: #e9ecef;
    float: right;
    text-align: right;
  }
  
  .chat-header {
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .chat-time {
    margin-left: 10px;
    font-size: 0.9em;
    color: #666;
  }
  
  .ticket-reply textarea {
    font-size: 14px;
    font-family: Gilroy, sans-serif;
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
  }
  
  .ticket-reply textarea:focus {
    outline: none;
    border-color: #348641;
    box-shadow: 0 0 0 3px rgba(52, 134, 65, 0.1);
  }
  
  .ticket-reply .reply-btn {
    background-color: #348641;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
  }
  
  .ticket-reply .reply-btn:hover {
    background-color: #2c7438;
  }
  
  /* ======================
     New Ticket Layer (Creation Form)
     ====================== */
  #ticketNewLayer .back-btn {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 1.1em;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    margin-bottom: 10px;
    color: #348641;
  }
  
  #ticketNewLayer form {
    display: flex;
    flex-direction: column;
  }
  
  #ticketNewLayer label {
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  #ticketNewLayer input[type="text"],
  #ticketNewLayer textarea {
    font-family: Gilroy, sans-serif;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  
  #ticketNewLayer button[type="submit"] {
    background-color: #348641;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  #ticketNewLayer button[type="submit"]:hover {
    background-color: #2a6b34;
  }
  
  
  #access-control-list {
    margin-top: 20px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
  }
  
  .user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
  }
  
  .user-name {
    flex: 1;
    font-weight: bold;
    font-size: 18px;
  }
  
  .radio-group-access {
    display: flex;
    gap: 20px;
  }
  
  .radio-option {
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    font-size: 19px;
  }
  
  .radio-option input[type="radio"] {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
  }
  
  .radio-circle {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #888;
    background-color: #fff;
  }
  
  .radio-option input[type="radio"]:checked + .radio-circle {
    background-color: #348641;
    border-color: #348641;
  }
  
  .access-heading {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    padding: 20px 0 10px 0;
    color: #111;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
    border-radius: 8px 8px 0 0;
  }
  
  .profile-wrap {
    width: 90%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
  }
  
  .profile-heading {
    margin-bottom: 0;
  }
  
  .profile-content {
    padding: 24px 30px 30px;
  }

  :root {
    --profile-field-height: 36px;
    --profile-field-border-width: 2px;
  }
  
  .profile-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    position: relative;
    padding-top: 52px;
  }
  
  .profile-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    min-height: 56px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    transition: background-color 0.2s;
  }
  
  .profile-row:hover {
    background-color: #f8f9fa;
  }
  
  .profile-row:last-of-type {
    border-bottom: none;
  }
  
  .profile-label {
    color: #333;
    font-size: 14px;
    font-weight: 600;
  }
  
  .profile-value {
    display: flex;
    align-items: center;
    color: #555;
    font-size: 14px;
    min-width: 0;
    min-height: var(--profile-field-height);
    height: var(--profile-field-height);
    line-height: 1.2;
  }

  .profile-value > span {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--profile-field-height);
    height: var(--profile-field-height);
    padding: 0 12px;
    border: var(--profile-field-border-width) solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    line-height: calc(var(--profile-field-height) - (var(--profile-field-border-width) * 2));
  }

  .profile-row:nth-child(1) .profile-value,
  .profile-row:nth-child(2) .profile-value {
    padding: 0 12px;
    border: var(--profile-field-border-width) solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    line-height: calc(var(--profile-field-height) - (var(--profile-field-border-width) * 2));
  }
  
  .edit-field {
    width: 100%;
    height: var(--profile-field-height);
    min-height: var(--profile-field-height);
    padding: 0 12px;
    border: var(--profile-field-border-width) solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: Gilroy, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s;
    line-height: calc(var(--profile-field-height) - (var(--profile-field-border-width) * 2));
    vertical-align: middle;
    margin: 0;
  }
  
  .edit-field:focus {
    outline: none;
    border-color: #348641;
    box-shadow: 0 0 0 3px rgba(52, 134, 65, 0.1);
  }
  
  .profile-preference {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    color: #333;
    font-size: 14px;
    height: 100%;
    box-sizing: border-box;
  }
  
  .profile-preference strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
  }

  .profile-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 20px;
    align-items: start;
  }

  .profile-settings-grid .radio-group {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .profile-settings-grid .radio-group label {
    white-space: normal;
    padding: 8px 10px;
    font-size: 13px;
  }

  .profile-mfa {
    margin-top: 0;
    padding: 16px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    color: #333;
    font-size: 14px;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .profile-mfa > strong {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
  }

  .profile-mfa-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
  }

  .profile-mfa-status-label {
    min-width: 0;
    font-weight: 600;
    color: #333;
    font-size: 13px;
  }

  .profile-mfa-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
  }

  .profile-mfa-badge--enabled {
    background: #e8f5ea;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
  }

  .profile-mfa-badge--disabled {
    background: #f3f4f6;
    color: #666;
    border: 1px solid #e0e0e0;
  }

  .profile-mfa-badge--loading {
    background: #fff8e1;
    color: #8d6e00;
    border: 1px solid #ffe082;
  }

  .profile-mfa-hint {
    margin: 6px 0 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }

  .profile-mfa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .profile-mfa-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
  }

  .profile-mfa-panel-actions .profile-mfa-btn--primary {
    margin-left: auto;
  }

  .profile-mfa-enable-steps .profile-mfa-verify-step.hidden {
    display: none;
  }

  .profile-mfa-btn {
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
  }

  .profile-mfa-btn:hover:not(:disabled) {
    background: #f5f5f5;
  }

  .profile-mfa-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .profile-mfa-btn--primary {
    background: #348641;
    border-color: #348641;
    color: #fff;
  }

  .profile-mfa-btn--primary:hover:not(:disabled) {
    background: #2d7538;
    border-color: #2d7538;
  }

  .profile-mfa-btn--danger {
    background: #fff;
    border-color: #d9534f;
    color: #c9302c;
  }

  .profile-mfa-btn--danger:hover:not(:disabled) {
    background: #fdf0ef;
  }

  .profile-mfa-btn--secondary {
    background: #eef5ef;
    border-color: #c8e6c9;
    color: #2e7d32;
  }

  .profile-mfa-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .profile-mfa-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .profile-mfa-modal.hidden {
    display: none;
  }

  .profile-mfa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 42, 36, 0.45);
  }

  .profile-mfa-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: min(85vh, 520px);
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    padding: 22px 22px 18px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    z-index: 1;
    box-sizing: border-box;
  }

  .profile-mfa-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #666;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  .profile-mfa-modal-close:hover {
    background: #f3f4f6;
    color: #333;
  }

  .profile-mfa-modal-content .profile-mfa-panel {
    display: block;
  }

  .profile-mfa-modal-content .profile-mfa-panel.hidden {
    display: none;
  }

  .profile-mfa-panel-title {
    margin: 0 0 10px;
    font-weight: 600;
    color: #333;
  }

  .profile-mfa-choice-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .profile-mfa-choice-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
  }

  .profile-mfa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }

  .profile-mfa-field label,
  .profile-mfa-field span {
    font-size: 13px;
    font-weight: 600;
    color: #444;
  }

  .profile-mfa-field input,
  .profile-mfa-code-input {
    width: 100%;
    max-width: 100%;
    height: var(--profile-field-height);
    padding: 0 12px;
    border: var(--profile-field-border-width) solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: Gilroy, sans-serif;
    box-sizing: border-box;
  }

  .profile-mfa-code-input {
    letter-spacing: 0.14em;
    text-align: center;
    font-size: 16px;
  }

  .profile-mfa-code-input--solo {
    letter-spacing: 0.14em;
    text-align: center;
  }

  .profile-mfa-field input:focus,
  .profile-mfa-code-input:focus {
    outline: none;
    border-color: #348641;
    box-shadow: 0 0 0 3px rgba(52, 134, 65, 0.1);
  }

  .profile-mfa-verify-flow {
    margin-top: 4px;
  }

  .profile-mfa-verify-form {
    margin: 0;
    position: relative;
  }

  .profile-mfa-hidden-username {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .profile-mfa-verify-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .profile-mfa-verify-step {
    margin: 0;
    padding: 0;
  }

  .profile-mfa-verify-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .profile-mfa-verify-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #348641;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .profile-mfa-verify-step-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .profile-mfa-verify-step .profile-mfa-field {
    margin-top: 0;
  }

  .profile-mfa-send-code-btn {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
  }

  .profile-mfa-code-status {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #eef5ef;
    border: 1px solid #c8e6c9;
    color: #2e7d32;
    font-size: 13px;
    line-height: 1.45;
  }

  .profile-mfa-code-status:empty {
    display: none;
  }

  .profile-mfa-code-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }

  .profile-mfa-code-row .profile-mfa-code-input {
    flex: 1;
    min-width: 0;
  }

  .profile-mfa-code-row .profile-mfa-btn {
    flex-shrink: 0;
    min-width: 76px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .profile-mfa-totp-secret {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px dashed #cfd8dc;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    word-break: break-all;
  }

  .profile-mfa-totp-qr-mount {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-height: 168px;
  }

  .profile-mfa-totp-qr-mount canvas,
  .profile-mfa-totp-qr-mount img,
  .profile-mfa-totp-qr-mount table {
    display: block;
  }

  .profile-mfa-totp-manual-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
  }

  @media (max-width: 720px) {
    .profile-settings-grid {
      grid-template-columns: 1fr;
    }

    .profile-wrap {
      max-width: 650px;
    }
  }
  
  .radio-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
  }
  
  .radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
  }
  
  .radio-group input[type="radio"] {
    accent-color: #348641;
  }
  
  .edit-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    text-align: right;
  }
  
  .edit-control::before {
    content: "Profile Information";
    float: left;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 34px;
  }
  
  .edit-control button {
    background: #f8f9fa;
    color: #666;
    border: 2px solid #ddd;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: Gilroy, sans-serif;
  }
  
  .edit-control button:hover {
    background: #e9ecef;
    color: #333;
  }
  
  .profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
  }
  
  .profile-actions button {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .btn-edit-profile,
  .btn-save-profile {
    background: #348641;
    color: #fff;
    border: none;
  }
  
  .btn-edit-profile:hover,
  .btn-save-profile:hover {
    background: #2a6b34;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .btn-cancel-profile {
    background: #f8f9fa;
    color: #666;
    border: 2px solid #ddd;
  }
  
  .btn-cancel-profile:hover {
    background: #e9ecef;
    color: #333;
  }
  
  .pref-update-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px 24px;
    background: #348641;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    font-family: Gilroy, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .pref-update-btn:hover {
    background: #2a6b34;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .hidden {
    display: none !important;
  }
  
  
  
  #busStatusOverlay .wrap-bus {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1200px;
    min-height: 70vh;
    max-height: 70vh;       /* increased height for bus status overlay */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  
  .bus-controls {
    padding: 12px 24px;
  }
  #bus-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 19px;
    font-family: Gilroy, sans-serif;
    border: 1px solid #ccc;
    border-radius: 6px;
  }
  
  /* Table */
  .bus-table {
    width: 100%;
    border-collapse: collapse;
    flex-grow: 1;
    overflow-y: auto;
  }
  .bus-table thead {
    background: #f9f9f9;
  }
  .bus-table th, .bus-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 19px;
    border-bottom: 1px solid #eee;
  }
  .bus-table th {
    cursor: pointer;
    user-select: none;
  }
  .bus-table tbody tr:nth-child(even) {
    background: #fcfcfc;
  }
  
  /* Dropdown */
  .status-select {
    padding: 6px 8px;
    font-size: 19px;
    font-family: Gilroy, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
  }
  
  /* Actions */
  .bus-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #eee;
  }
  .bus-actions button {
    padding: 8px 16px;
    font-size: 20px;
    font-family: Gilroy, sans-serif;
    border: none; border-radius: 6px;
    cursor: pointer;
  }
  #bus-cancel {
    background: #f5f5f5;
    color: #333;
  }
  #bus-cancel:hover {
    background: #e0e0e0;
  }
  #bus-submit {
    background: #348641;
    color: #fff;
  }
  #bus-submit:hover {
    background: #2a6b34;
  }
  
  .bus-table th, .bus-table td {
    padding: 12px 16px;
    font-size: 19px;
    border-bottom: 1px solid #eee;
  }
  
  .bus-table-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 24px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  
  /* Make the thead row stick at the top of the scrollable area */
  .bus-table thead th {
    position: sticky;
    top: 0;
    background: #f9f9f9;  /* match your header background */
    z-index: 2;           /* above the body rows */
  }
  
  /* Optional: add a subtle bottom border on the header so it stands out */
  .bus-table thead th {
    border-bottom: 2px solid #ddd;
  }
  
  .access-heading,
  .bus-controls,
  .bus-actions {
    flex-shrink: 0;
  }
  .bus-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;    /* lock in column widths */
  }
  
  /* Ensure no wrapping or overflow changes */
  .bus-table th,
  .bus-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Bus table column widths - all columns */
  .bus-table th:nth-child(1),
  .bus-table td:nth-child(1) {
    width: 180px;    /* Bus ID column */
  }
  
  .bus-table th:nth-child(2),
  .bus-table td:nth-child(2) {
    width: 200px;    /* Status column */
  }
  
  .bus-table th:nth-child(3),
  .bus-table td:nth-child(3) {
    width: 170px;    /* Start Date column */
  }
  
  .bus-table th:nth-child(4),
  .bus-table td:nth-child(4) {
    width: 170px;    /* End Date column */
  }
  
  /* Date cell styling for hidden inputs */
  .bus-table .date-cell {
    min-height: 40px; /* Maintain consistent row height */
  }
  
  .bus-table .date-cell input[type="date"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 19px;
    font-family: Gilroy, sans-serif;
    box-sizing: border-box;
  }
  
  /* Required date field styling */
  .bus-table .date-cell input[type="date"].date-required {
    border-color: #dc3545;
    background-color: #fff5f5;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }
  
  .bus-table .date-cell input[type="date"].date-required:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  }
  
  /* Readonly start date styling */
  .bus-table .date-cell input[type="date"][readonly] {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
    opacity: 0.7;
  }
  
  .bus-table .date-cell input[type="date"][readonly]:focus {
    outline: none;
    box-shadow: none;
  }
  
  .bus-table tr.status-available .bus-id {
    color: inherit;
  }
  
  /* Any unavailable state turns the ID red */
  .bus-table tr.status-unavailable .bus-id {
    color: #e00; /* or your preferred red */
  }
  
    .close {
      position: absolute;
      top: 100px;
      right: 100px;
      font-size: 60px;
      color: rgba(52,134,65,1);
      background-color: transparent;
      border-color: transparent;
    }
  
  /* ======================
     USER MANAGEMENT SYSTEM
     ====================== */
  
  /* Main Container - extends existing .wrap */
  .user-management-wrap {
      width: 90%;
      max-width: 650px;
      height: 80vh;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
  }
  
  /* Actions Bar */
  .user-management-actions {
      padding: 20px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      background: #fafafa;
  }
  
  .btn-create {
      background: #348641;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
  }
  
  .btn-create:hover {
      background: #2a6b34;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .btn-create i {
      margin-right: 8px;
  }
  
  .user-search {
      position: relative;
      display: flex;
      align-items: center;
  }
  
  .user-search i {
      position: absolute;
      left: 12px;
      color: #666;
      z-index: 1;
  }
  
  .user-search input {
      padding: 10px 12px 10px 35px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      width: 250px;
      font-family: Gilroy, sans-serif;
      transition: border-color 0.2s;
  }
  
  .user-search input:focus {
      outline: none;
      border-color: #348641;
  }
  
  /* List Container */
  .user-list-container {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      /* max-height: 450px; */
  }
  
  .user-list-header {
      display: grid;
      grid-template-columns: 100px 140px 150px 100px 100px;
      gap: 10px;
      padding: 15px 20px;
      background: #f8f9fa;
      font-weight: 600;
      font-size: 14px;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      box-sizing: border-box;
      margin: 0;
  }
  
  .user-list-header .header-actions {
      text-align: center;
  }
  
  .user-list-header > div {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .user-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      min-height: 0;
      max-height: 500px;
  }
  
  /* Custom scrollbar for user list */
  .user-list::-webkit-scrollbar {
      width: 8px;
  }
  
  .user-list::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
  }
  
  .user-list::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
  }
  
  .user-list::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
  }
  
  /* User Rows - Override the existing .user-row class */
  .user-management-wrap .user-row {
      display: grid !important;
      grid-template-columns: 100px 140px 150px 100px 100px;
      gap: 10px;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      justify-content: unset !important;
      transition: background-color 0.2s;
      box-sizing: border-box;
      margin: 0;
  }
  
  .user-management-wrap .user-row:hover {
      background-color: #f8f9fa;
  }
  
  /* User Info - Override existing .user-name class */
  .user-management-wrap .user-name {
      font-weight: 600;
      color: #333;
      font-size: 16px;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .user-management-wrap .user-fullname {
      color: #555;
      font-size: 14px;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .user-management-wrap .user-email {
      color: #666;
      font-size: 14px;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .user-management-wrap .user-role {
      display: flex;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .user-management-wrap .user-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .user-management-wrap .role-select {
      width: 100%;
      padding: 4px 8px;
      border: 2px solid #ddd;
      border-radius: 4px;
      font-size: 12px;
      box-sizing: border-box;
      font-weight: 500;
      font-family: Gilroy, sans-serif;
      background: white;
      cursor: pointer;
      transition: border-color 0.2s;
      box-sizing: border-box;
  }
  
  .user-management-wrap .role-select:hover {
      border-color: #348641;
  }
  
  .user-management-wrap .role-select:focus {
      outline: none;
      border-color: #348641;
      box-shadow: 0 0 0 2px rgba(52, 134, 65, 0.1);
  }
  
  .user-management-wrap .user-actions {
      display: flex;
      gap: 8px;
      justify-content: center;
  }
  
  .btn-delete {
      background: #ea4335;
      color: white;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      white-space: nowrap;
  }
  
  .btn-delete:hover {
      background: #d33b2c;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(234, 67, 53, 0.3);
  }
  
  .btn-delete i {
      margin-right: 4px;
  }
  
  /* Create User Modal - using consistent design */
  .create-user-wrap {
      width: 90%;
      max-width: 750px;
      max-height: 90vh;
      overflow: visible;
  }
  
  .create-user-form {
      padding: 30px;
  }
  
  .create-user-form .form-group {
      margin-bottom: 20px;
  }
  
  .create-user-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
  }
  
  .create-user-form .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
      font-size: 16px;
  }
  
  .create-user-form .form-group label i {
      margin-right: 8px;
      color: #666;
      width: 18px;
  }
  
  .create-user-form .form-group input,
  .create-user-form .form-group select {
      width: 100%;
      padding: 12px;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 16px;
      font-family: Gilroy, sans-serif;
      transition: border-color 0.2s;
      box-sizing: border-box;
  }
  
  .create-user-form .form-group input:focus,
  .create-user-form .form-group select:focus {
      outline: none;
      border-color: #348641;
      box-shadow: 0 0 0 3px rgba(52, 134, 65, 0.1);
  }
  
  .create-user-form .form-group input::placeholder {
      color: #999;
  }
  
  .create-user-form .form-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e0e0e0;
  }
  
  .create-user-form .btn-cancel {
      background: #f8f9fa;
      color: #666;
      border: 2px solid #ddd;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
  }
  
  .create-user-form .btn-cancel:hover {
      background: #e9ecef;
      color: #333;
  }
  
  .create-user-form .btn-submit {
      background: #348641;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
  }
  
  .create-user-form .btn-submit:hover {
      background: #2a6b34;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .create-user-form .btn-submit i {
      margin-right: 8px;
  }
  
  /* ======================
     Ticket User Styles (My Tickets)
     ====================== */
  .ticket-wrap {
      width: 95%;
      max-width: 900px;
      height: 80vh;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      padding: 15px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Main ticket actions container (for new ticket button) */
  .ticket-main-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
  }
  
  .btn-new-ticket {
      background: #348641;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s;
  }
  
  .btn-new-ticket:hover {
      background: #2a6b34;
  }
  
  .btn-new-ticket i {
      font-size: 12px;
  }
  
  /* Individual ticket row actions container (for view/edit buttons) */
  .ticket-row .ticket-actions {
      padding: 0;
      margin: 0;
      justify-content: center;
      display: flex;
      align-items: center;
  }
  
  /* ======================
     New Ticket Form Styles
     ====================== */
  .new-ticket-form {
      padding: 20px;
      max-width: 600px;
      margin: 0 auto;
  }
  
  .form-group {
      margin-bottom: 20px;
  }
  
  .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333;
      font-size: 14px;
  }
  
  .form-group input,
  .form-group textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      font-family: Gilroy;
      box-sizing: border-box;
  }
  
  .form-group textarea {
      min-height: 120px;
      resize: vertical;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
      outline: none;
      border-color: #348641;
      box-shadow: 0 0 0 2px rgba(52, 134, 65, 0.25);
  }
  
  .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #e0e0e0;
  }
  
  .btn-cancel {
      background: #6c757d;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.2s;
  }
  
  .btn-cancel:hover {
      background: #545b62;
  }
  
  .btn-submit {
      background: #348641;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.2s;
  }
  
  .btn-submit:hover {
      background: #2a6b34;
  }
  
  /* ======================
     Ticket Chat Styles
     ====================== */
  .ticket-chat-wrap {
      width: 95%;
      max-width: 800px;
      height: 80vh;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      padding: 15px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Admin back button */
  .ticket-details-wrap .back-btn {
      position: absolute;
      top: 15px;
      left: 15px;
      background: #6c757d;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      z-index: 10;
  }
  
  .ticket-details-wrap .back-btn:hover {
      background: #545b62;
  }
  
  /* Back button removed from user ticket chat interface */
  
  .ticket-chat-history {
      flex: 1;
      overflow-y: auto;
      padding: 20px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid #e0e0e0;
  }
  
  /* User ticket reply container - using admin style */
  .reply-input-container {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      padding: 15px 0;
      border-top: 1px solid #e0e0e0;
      margin-top: 10px;
  }
  
  .reply-input-container textarea {
      flex: 1;
      min-height: 80px;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      font-family: Gilroy;
      resize: vertical;
  }
  
  .reply-input-container textarea:focus {
      outline: none;
      border-color: #348641;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
  
  /* Admin reply button */
  .ticket-details-wrap .reply-btn {
      background: #348641;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: background-color 0.2s;
  }
  
  .ticket-details-wrap .reply-btn:hover {
      background: #2a6b34;
  }
  
  /* User ticket send button - using admin style */
  .ticket-chat-wrap .btn-send-reply {
      background: #348641;
      color: white;
      border: 2px solid #348641;
      padding: 0;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      transition: all 0.2s;
      width: 70px;
      height: 40px;
      box-sizing: border-box;
  }
  
  .ticket-chat-wrap .btn-send-reply:hover:not(:disabled) {
      background: #2a6b34;
      border-color: #2a6b34;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .ticket-chat-wrap .btn-send-reply:disabled {
      background: #e1e5e9;
      border-color: #e1e5e9;
      color: #9ca3af;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
  }
  
  .ticket-chat-wrap .btn-send-reply i {
      font-size: 16px;
  }
  
  .ticket-chat-wrap .btn-send-reply .btn-text {
      display: none;
  }
  
  /* ======================
     Ticket Admin Styles
     ====================== */
  .ticket-admin-wrap {
      width: 95%;
      max-width: 950px;
      height: 85vh;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      padding: 15px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  .ticket-admin-actions {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      background: #fafafa;
      margin-bottom: 12px;
  }
  
  .ticket-count-display {
      font-weight: 600;
      color: #333;
      font-size: 16px;
  }
  
  .ticket-count-display i {
      margin-right: 8px;
      color: #348641;
  }
  
  .ticket-search {
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      border: 2px solid #ddd;
      border-radius: 6px;
      padding: 8px 12px;
      font-family: Gilroy, sans-serif;
  }
  
  .ticket-search i {
      color: #666;
  }
  
  .ticket-search input {
      border: none;
      outline: none;
      font-size: 14px;
      font-family: Gilroy, sans-serif;
      min-width: 200px;
  }
  
  .ticket-search input:focus {
      outline: none;
  }
  
  .ticket-list-container {
      flex: 1;
      overflow-x: hidden;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      position: relative;
      padding: 0 15px;
  }
  
  .ticket-list-header {
      display: grid;
      grid-template-columns: 65px 110px 170px 85px 85px 90px;
      gap: 5px;
      padding: 12px 0;
      background: #f8f9fa;
      font-weight: 600;
      font-size: 14px;
      color: #333;
      border-bottom: 2px solid #e0e0e0;
      box-sizing: border-box;
  }
  
  .ticket-list-header > div {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .ticket-list-header .header-id {
          text-align: center;
  }
  
  .ticket-list-header .header-customer {
      text-align: left;
  }
  
  .ticket-list-header .header-subject {
      text-align: left;
  }
  
  .ticket-list-header .header-date {
      text-align: center;
  }
  
  .ticket-list-header .header-status {
      text-align: center;
  }
  
  .ticket-list-header .header-actions {
      text-align: center;
  }
  
  .ticket-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      min-height: 0;
      max-height: 500px;
  }
  
  /* Custom scrollbar for ticket list */
  .ticket-list::-webkit-scrollbar {
      width: 8px;
  }
  
  .ticket-list::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
  }
  
  .ticket-list::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
  }
  
  .ticket-list::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
  }
  
  /* Ticket Rows - Override the existing .ticket-row class */
  .ticket-admin-wrap .ticket-row {
      display: grid !important;
      grid-template-columns: 65px 110px 170px 85px 85px 90px;
      gap: 5px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      justify-content: unset;
      transition: background-color 0.2s;
      box-sizing: border-box;
      margin: 0;
  }
  
  /* User ticket list specific styles - 5 columns (no customer column) */
  .ticket-wrap .ticket-row {
      display: grid !important;
      grid-template-columns: 80px 1fr 100px 100px 80px;
      gap: 15px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
      justify-content: unset;
      transition: background-color 0.2s;
      box-sizing: border-box;
      margin: 0;
  }
  
  .ticket-wrap .ticket-list-header {
      display: grid !important;
      grid-template-columns: 80px 1fr 100px 100px 80px;
      gap: 15px;
      padding: 12px 0;
      border-bottom: 2px solid #ddd;
      align-items: center;
      background: #f8f9fa;
      font-weight: 600;
      font-size: 15px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }
  
  .ticket-admin-wrap .ticket-row:hover,
  .ticket-wrap .ticket-row:hover {
      background-color: #f8f9fa;
  }
  
  /* Ticket Info - Override existing classes */
  .ticket-admin-wrap .ticket-id,
  .ticket-wrap .ticket-id {
      font-weight: 600;
      color: #333;
      font-size: 16px;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .ticket-admin-wrap .ticket-customer {
      color: #333;
      font-size: 14px;
      font-weight: 500;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .ticket-admin-wrap .ticket-subject,
  .ticket-wrap .ticket-subject {
      color: #666;
      font-size: 16px;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
  }
  
  .ticket-admin-wrap .ticket-date,
  .ticket-wrap .ticket-date {
      color: #666;
      font-size: 14px;
      text-align: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .ticket-admin-wrap .ticket-status,
  .ticket-wrap .ticket-status {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .ticket-admin-wrap .ticket-actions,
  .ticket-wrap .ticket-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .status-badge {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
  }
  
  .status-open {
      background-color: #fff3cd;
      color: #856404;
  }
  
  .status-closed {
      background-color: #d1ecf1;
      color: #0c5460;
  }
  
  .btn-view {
      background: #348641;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      display: flex;
      align-items: center;
      gap: 4px;
  }
  
  .btn-view:hover {
      background: #2a6b34;
      transform: translateY(-1px);
  }
  
  .btn-view i {
      font-size: 10px;
  }
  
  /* Ticket Details Modal Button Styles */
  .btn-primary {
      background: #348641;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }
  
  .btn-primary:hover {
      background: #2a6b34;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .btn-primary i {
      font-size: 12px;
  }
  
  .btn-danger {
      background: #ea4335;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 6px;
  }
  
  .btn-danger:hover {
      background: #d33b2c;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
  }
  
  .btn-danger i {
      font-size: 12px;
  }
  
  /* Ticket Details Modal Styles */
  .ticket-details-modal {
      z-index: 10001;
  }
  
  
  /* Ticket Details Modal Main Container */
  .ticket-details-wrap {
      width: 90%;
      font-family: Gilroy;
      max-width: 700px;
      height: 85vh;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      padding: 0;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  
  /* Ticket Details Header Section */
  .ticket-header-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 20px; /* Simplified padding since close button is moved */
      border-bottom: 2px solid #e9ecef;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  }
  
  /* Ticket Reply Actions Section */
  .ticket-reply-actions {
      display: flex;
      justify-content: flex-end;
      padding: 15px 20px 10px;
      border-bottom: 1px solid #e9ecef;
      background: #f8f9fa;
  }
  
  .ticket-reply-actions .btn-danger-sm {
      margin: 0;
  }
  
  .ticket-header-info {
      flex: 1;
  }
  
  .ticket-title {
      display: flex;
      align-items: center;
          gap: 10px;
      margin-bottom: 8px;
  }
  
  .ticket-title i {
      color: #2a6b34;
      font-size: 18px;
  }
  
  .ticket-title span {
      font-size: 18px;
      font-weight: 600;
      color: #333;
  }
  
  .ticket-meta {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 14px;
  }
  
  .ticket-customer {
      color: #555;
      font-weight: 500;
      font-size: 15px;
  }
  
  .ticket-status-badge {
      font-size: 14px;
      font-weight: 600;
  }
  
  
  .btn-danger-sm {
      background: #ea4335;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 4px;
  }
  
  .btn-danger-sm:hover {
      background: #d33b2c;
      transform: translateY(-1px);
  }
  
  .btn-danger-sm i {
      font-size: 10px;
  }
  
  /* Main Chat Container */
  .ticket-chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }
  
  /* Chat History Section */
  .ticket-chat-history-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
  }
  
  .chat-history-header {
      padding: 18px 20px 12px;
      border-bottom: 1px solid #e9ecef;
      background: #fafbfc;
  }
  
  .chat-history-header h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  .chat-history-header h4 i {
      color: #2a6b34;
  }
  
  /* Ticket Details Modal Chat History */
  .ticket-details-wrap .ticket-chat-history {
      flex: 1;
      padding: 24px 20px;
      overflow-y: auto;
      background: #ffffff;
      min-height: 350px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
  }
  
  .chat-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #666;
      font-style: italic;
      padding: 40px;
  }
  
  /* Reply Section */
  .ticket-reply-section {
      border-top: 2px solid #e9ecef;
      background: #fafbfc;
      padding: 0;
  }
  
  .reply-input-container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 20px;
      background: #ffffff;
      border-radius: 0 0 8px 8px;
  }
  
  .reply-input-left {
      flex: 1;
      display: flex;
      flex-direction: column;
  }
  
  .reply-input-right {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center;
  }
  
  .reply-input-container textarea {
      width: 100%;
      min-height: 80px;
      max-height: 140px;
      padding: 14px 18px;
      border: 2px solid #e1e5e9;
      border-radius: 10px;
      font-family: Gilroy, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      resize: vertical;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
  }
  
  .reply-input-container textarea:focus {
      outline: none;
      border-color: #348641;
      box-shadow: 0 0 0 3px rgba(52, 134, 65, 0.1);
  }
  
  .reply-input-container textarea::placeholder {
      color: #9ca3af;
  }
  
  .btn-send-reply {
      background: #348641;
      color: white;
      border: 2px solid #348641;
      padding: 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: Gilroy, sans-serif;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 70px !important;
      height: 40px;
      box-sizing: border-box;
  }
  
  .btn-send-reply:not(:disabled):hover {
      background: #2a6b34;
      border-color: #2a6b34;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 134, 65, 0.3);
  }
  
  .btn-send-reply:disabled {
      background: #e1e5e9;
      color: #9ca3af;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
  }
  
  .btn-send-reply i {
      font-size: 16px;
  }
  
  .btn-send-reply .btn-text {
      display: none;
  }
  
  /* File Upload Button for User Chat */
  .file-upload-btn-user {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      height: 40px;
      background: #f8f9fa;
      border: 2px solid #dee2e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      color: #495057;
      box-sizing: border-box;
  }
  
  .file-upload-btn-user:hover {
      background: #e9ecef;
      border-color: #348641;
      color: #348641;
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .file-upload-btn-user i {
      font-size: 16px;
  }
  
  .clear-file-user {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #fff;
      border: 2px solid #dc3545;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      color: #dc3545;
      box-sizing: border-box;
      flex-shrink: 0;
  }
  
  .clear-file-user:hover {
      background: #dc3545;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
  }
  
  .clear-file-user i {
      font-size: 16px;
  }
  
  .file-previews-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
  }
  
  .file-preview-item {
      position: relative;
      display: flex;
      align-items: center;
      padding: 8px;
      background: #f8f9fa;
      border-radius: 6px;
      border: 2px solid #e9ecef;
  }
  
  .file-preview-item img {
      display: block;
      max-width: 80px;
      max-height: 80px;
      border-radius: 4px;
      margin-right: 8px;
  }
  
  .remove-file-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: #fff;
      border: 2px solid #dc3545;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      color: #dc3545;
      box-sizing: border-box;
      flex-shrink: 0;
  }
  
  .remove-file-btn:hover {
      background: #dc3545;
      color: #fff;
      transform: scale(1.1);
      box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
  }
  
  .remove-file-btn i {
      font-size: 14px;
  }
  
  /* New Ticket Upload Styling */
  .new-ticket-upload {
      margin-top: 8px;
  }
  
  .new-ticket-upload .file-upload-btn-user {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto;
      height: 38px;
      padding: 0 16px;
      background: #f8f9fa;
      border: 2px solid #dee2e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
      color: #495057;
      margin-bottom: 12px;
      box-sizing: border-box;
      white-space: nowrap;
  }
  
  .new-ticket-upload .file-upload-btn-user:hover {
      background: #e9ecef;
      border-color: #348641;
      color: #348641;
      transform: translateY(-1px);
  }
  
  .new-ticket-upload .file-previews-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
  }
  
  /* Chat Image Styling */
  .chat-image {
      display: block;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.2s ease;
      border: 1px solid #e1e5e9;
  }
  
  .chat-image:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* Enhanced Chat Message Styling */
  .chat-message {
      margin-bottom: 0;
      padding: 16px 20px;
      border-radius: 16px;
      max-width: 75%;
      line-height: 1.5;
      word-wrap: break-word;
      position: relative;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .chat-message.left-message {
      background: #f1f3f4;
      color: #333;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
  }
  
  .chat-message.right-message {
      background: linear-gradient(135deg, #348641 0%, #2a6b34 100%);
      color: white;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
  }
  
  .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
      opacity: 0.9;
  }
  
  .chat-author {
      font-weight: 600;
  }
  
  /* Author names in admin messages (blue background) */
  .right-message .chat-author {
      color: rgba(255, 255, 255, 0.95);
  }
  
  /* Author names in customer messages (grey background) */
  .left-message .chat-author {
      color: #333;
  }
  
  .chat-time {
      font-size: 13px;
      font-weight: 500;
      opacity: 0.8;
      color: #555;
  }
  
  /* Time stamps in admin messages (blue background) */
  .right-message .chat-time {
      color: rgba(255, 255, 255, 0.9);
  }
  
  /* Time stamps in customer messages (grey background) */
  .left-message .chat-time {
      color: #666;
  }
  
  .chat-body p {
      margin: 0;
      font-size: 15px;
      line-height: 1.5;
  }
  
  .message-subject {
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      font-weight: 600;
      font-size: 15px;
  }
  
  /* Subject lines in admin messages (blue background) */
  .right-message .message-subject {
      color: rgba(255, 255, 255, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.3);
  }
  
  /* Subject lines in customer messages (grey background) */
  .left-message .message-subject {
      color: #333;
      border-bottom-color: #e1e5e9;
  }
  
  /* Responsive Design for Ticket Details */
  @media (max-width: 768px) {
      .ticket-header-section {
          padding: 18px 15px; /* Simplified padding since close button is moved */
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
      }
  
      .ticket-reply-actions {
          padding: 12px 15px 8px;
          justify-content: center;
      }
  
  
      .ticket-customer {
          font-size: 14px;
      }
  
      .ticket-status-badge {
          font-size: 13px;
      }
  
      .ticket-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }
  
      .reply-input-container {
          padding: 18px 15px;
          flex-direction: column;
          gap: 12px;
      }
  
      .reply-input-left {
          width: 100%;
      }
  
      .reply-input-right {
          width: 100%;
          flex-direction: row;
          justify-content: flex-end;
      }
  
      .reply-input-container textarea {
          min-height: 90px;
          padding: 16px;
      }
  
      .btn-send-reply {
          flex: 1;
          padding: 0;
          min-width: auto;
          height: 45px;
      }
  
      .file-upload-btn-user {
          width: 60px;
          height: 45px;
      }
  
      .chat-history-header {
          padding: 15px 15px 10px;
      }
  
      .ticket-details-wrap .ticket-chat-history {
          padding: 18px 15px;
          min-height: 280px;
          gap: 12px;
      }
  
      .chat-message {
          max-width: 75%;
          padding: 14px 18px;
          margin-bottom: 0;
      }
  
      .chat-header {
          font-size: 13px;
      }
  
      .chat-body p {
          font-size: 14px;
      }
  
      .chat-time {
          font-size: 12px;
      }
  
      .message-subject {
          font-size: 14px;
      }
  }
  
  #ticketDetailsContent {
      flex: 1;
      overflow-y: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  
  .ticket-info-section {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
  }
  
  .ticket-info-item {
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .ticket-info-item strong {
      color: #333;
      min-width: 120px;
  }
  
  .ticket-actions-section {
      margin-top: 15px;
          text-align: center;
      padding-top: 15px;
      border-top: 1px solid #e0e0e0;
  }
  
  .ticket-chat-section {
      flex: 1;
      display: flex;
      flex-direction: column;
  }
  
  .ticket-chat-section h3 {
      margin-bottom: 15px;
      color: #333;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 8px;
  }
  
  
  /* Responsive Design for Ticket Admin and User Tickets */
  @media (max-width: 768px) {
      .ticket-admin-wrap,
      .ticket-wrap {
          width: 98vw;
          height: 90vh;
          max-height: 90vh;
          max-width: 98vw;
          padding: 10px;
      }
  
      .ticket-list-container {
          max-height: 350px;
      }
  
      .ticket-list {
          max-height: 300px;
      }
      
      .ticket-admin-actions,
      .ticket-main-actions {
          flex-direction: column;
          gap: 10px;
          align-items: stretch;
          padding: 10px 0;
      }
  
      /* Individual ticket row actions remain centered on mobile */
      .ticket-row .ticket-actions {
          justify-content: center;
          padding: 0;
          margin: 0;
      }
  
      .ticket-search input {
          min-width: 120px;
      }
  
      .ticket-list-header {
          grid-template-columns: 1fr;
          gap: 5px;
          padding: 10px 0;
      }
  
      .ticket-admin-wrap .ticket-row {
          grid-template-columns: 1fr;
          gap: 5px;
          padding: 10px 0;
      }
  
      .ticket-wrap .ticket-row {
          grid-template-columns: 1fr;
          gap: 5px;
          padding: 10px 0;
      }
  
      .ticket-list-header > div,
      .ticket-admin-wrap .ticket-row > div,
      .ticket-wrap .ticket-row > div {
          text-align: left;
      }
  
      .ticket-list-header .header-id,
      .ticket-admin-wrap .ticket-id,
      .ticket-wrap .ticket-id,
      .ticket-list-header .header-date,
      .ticket-admin-wrap .ticket-date,
      .ticket-wrap .ticket-date,
      .ticket-list-header .header-status,
      .ticket-admin-wrap .ticket-status,
      .ticket-wrap .ticket-status,
      .ticket-list-header .header-actions,
      .ticket-admin-wrap .ticket-actions,
      .ticket-wrap .ticket-actions {
          text-align: center;
      }
  
      .ticket-admin-wrap .ticket-subject,
      .ticket-wrap .ticket-subject {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          white-space: normal;
          line-height: 1.3;
          max-height: 2.6em;
      }
  
      /* New ticket form responsive */
      .new-ticket-form {
          padding: 15px;
      }
  
      .form-actions {
          flex-direction: column;
          gap: 10px;
      }
  
      /* Chat responsive */
      .ticket-chat-wrap {
          width: 98vw;
          height: 90vh;
          max-height: 90vh;
          max-width: 98vw;
          padding: 10px;
      }
  
      .reply-input-container {
          flex-direction: column;
          gap: 10px;
      }
  
      .ticket-chat-wrap .btn-send-reply {
          align-self: flex-end;
          padding: 10px 16px;
          font-size: 13px;
          min-width: 80px;
      }
  
      .ticket-details-wrap .reply-btn {
          align-self: flex-end;
          padding: 10px 16px;
          font-size: 13px;
      }
  
      .ticket-details-wrap {
          width: 98vw;
          max-width: 98vw;
          height: 90vh;
          max-height: 90vh;
          padding: 10px;
      }
  
      .ticket-details-wrap .close {
          top: 10px;
          right: 10px;
          width: 28px;
          height: 28px;
      }
  
      .ticket-details-wrap .access-heading {
          font-size: 16px;
          padding: 10px 0;
          margin-bottom: 15px;
      }
  
      .btn-primary,
      .btn-danger {
          padding: 8px 12px;
          font-size: 13px;
      }
  
      .btn-primary i,
      .btn-danger i {
          font-size: 11px;
      }
  
      .ticket-reply textarea {
          font-size: 13px;
          padding: 10px;
          min-height: 70px;
      }
  }