body {
      font-family: 'Cairo', 'Inter', sans-serif;
      background-color: #f1f5f9;
      color: #0f172a;
      overflow-x: hidden;
    }
    .tab-btn.active {
      background-color: #1e3a8a;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
    }
    .modal-backdrop {
      background-color: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(3px);
    }
    @media print {
      body * {
        visibility: hidden;
      }
      #printableArea, #printableArea * {
        visibility: visible;
      }
      #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        box-shadow: none !important;
      }
      .no-print {
        display: none !important;
      }
    }
    /* ================= UNIFIED WEB & MOBILE LAYOUT + INLINE SEARCHABLE COMBOBOX ================= */
    html, body {
      max-width: 100%;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    /* Single-height Inline Searchable Select (preserves exact row height across all Web & Mobile grids) */
    .searchable-select-wrap {
      position: relative;
      display: block;
      width: 100%;
    }
    .flex > .searchable-select-wrap,
    .inline-flex > .searchable-select-wrap {
      width: auto;
      min-width: 190px;
      flex: 1 1 auto;
    }
    .searchable-select-wrap > select {
      width: 100%;
      padding-left: 2.25rem !important;
    }
    .searchable-trigger-btn {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      cursor: pointer;
      z-index: 5;
      transition: all 0.15s ease;
      padding: 0;
      line-height: 1;
    }
    .searchable-trigger-btn:hover {
      background: #dbeafe;
      border-color: #60a5fa;
    }
    .searchable-dropdown-list {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      left: 0;
      min-width: 230px;
      z-index: 90;
      background: #ffffff;
      border: 1px solid #93c5fd;
      border-radius: 0.75rem;
      box-shadow: 0 14px 30px -5px rgba(15, 23, 42, 0.25);
      padding: 0.45rem;
    }
    .searchable-select-input {
      transition: all 0.15s ease;
      width: 100%;
      margin-bottom: 0.35rem;
    }
    .searchable-select-input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }
    .searchable-options-scroll {
      max-height: 185px;
      overflow-y: auto;
    }
    /* Desktop (Web) Header, Navigation, KPI & Table Polish */
    header.sticky {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    #quickHeaderToolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.375rem;
      padding-top: 0.25rem;
    }
    table th, table td {
      vertical-align: middle;
    }
    table th {
      white-space: nowrap;
    }
    /* Mobile & Tablet Responsive Layout */
    @media (max-width: 768px) {
      body {
        padding-bottom: 76px !important;
      }
      input, select, textarea {
        font-size: 15px !important; /* Prevents iOS auto-zoom while keeping clean fit */
      }
      /* Collapse desktop quick action buttons by default on mobile so header stays compact */
      #quickHeaderToolbar:not(.mobile-expanded) {
        display: none !important;
      }
      #quickHeaderToolbar.mobile-expanded {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        width: 100%;
        padding-top: 0.5rem;
        margin-top: 0.35rem;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
      }
      #quickHeaderToolbar.mobile-expanded > button {
        width: 100%;
        justify-content: center;
        padding: 0.45rem 0.5rem !important;
        font-size: 11px !important;
      }
      .modal-backdrop > div {
        max-height: 92vh !important;
        margin-top: auto;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }
      .tab-btn {
        flex-shrink: 0;
        padding: 0.45rem 0.7rem !important;
        font-size: 0.73rem !important;
      }
      table th, table td {
        padding: 0.45rem 0.5rem !important;
        font-size: 0.73rem !important;
      }
    }