:root {
  --white: rgba(255, 253, 250, 1);
  --branding: rgba(255, 128, 64, 1);
  --black: rgba(3, 14, 15, 1);
  --white-64: rgba(255, 253, 250, 0.64);
  --black-40: rgba(3, 14, 15, 0.4);
  --black-64: rgba(3, 14, 15, 0.64);
  --active: rgba(255, 201, 173, 1);
  --black-80: rgba(3, 14, 15, 0.8);
  --heart-fillminus: rgba(255, 97, 80, 1);
  --note: rgba(224, 224, 224, 1);
  --black-56: rgba(3, 14, 15, 0.56);
  --white-80: rgba(255, 253, 250, 0.8);
  --appt-stagedone: rgba(163, 163, 163, 1);
  --appt-stageno-show-cancel: rgba(51, 51, 51, 0.8);
  --categoriesacrylic: rgba(244, 167, 185, 1);
  --categoriesdip: rgba(245, 92, 88, 1);
  --categoriesmani: rgba(251, 150, 110, 1);
  --categoriespedi: rgba(246, 197, 85, 1);
  --categorieswax: rgba(202, 173, 95, 1);
  --categorieslash: rgba(190, 194, 63, 1);
  --categoriesfacial: rgba(59, 163, 95, 1);
  --categoriesmakeup: rgba(20, 102, 78, 1);
  --categorieshead: rgba(30, 136, 168, 1);
  --categoriesgiftcard: rgba(138, 107, 190, 1);
  --stagesconfirm-unconfirm: rgba(87, 179, 220, 1);
  --stagescheckin: rgba(235, 175, 48, 1);
  --stagesin-service: rgba(0, 170, 144, 1);
  --stagesdone: rgba(215, 84, 85, 1);
  --stagesin-service-fill: rgba(173, 255, 243, 1);
  --stagescheckin-fill: rgba(255, 229, 173, 1);
  --stagesdone-fill: rgba(255, 173, 174, 1);
  --h3-font-family: Sora, Helvetica;
  --h3-font-weight: 600;
  --h3-font-size: 14px;
  --h3-letter-spacing: 0px;
  --h3-line-height: normal;
  --h3-font-style: normal;
  --body-font-family: Sora, Helvetica;
  --body-font-weight: 400;
  --body-font-size: 14px;
  --body-letter-spacing: 0px;
  --body-line-height: normal;
  --body-font-style: normal;
  --h2-font-family: Sora, Helvetica;
  --h2-font-weight: 600;
  --h2-font-size: 20px;
  --h2-letter-spacing: 0px;
  --h2-line-height: 120.00000476837158%;
  --h2-font-style: normal;
  --h1-font-family: Sora, Helvetica;
  --h1-font-weight: 600;
  --h1-font-size: 30px;
  --h1-letter-spacing: 0px;
  --h1-line-height: 120.00000476837158%;
  --h1-font-style: normal;
  --extra-font-family: Sora, Helvetica;
  --extra-font-weight: 400;
  --extra-font-size: 12px;
  --extra-letter-spacing: 0px;
  --extra-line-height: normal;
  --extra-font-style: normal;
  --popup: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  --calculator: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  --red: rgba(215, 84, 85, 1);
  --green: rgba(0, 170, 144, 1);
  --yellow: var(--bs-yellow);
  --red-o: rgba(255, 173, 174, 1);
  --green-o: rgba(173, 255, 243, 1);
  --yellow-o: rgb(255, 242, 215, 1);
  --brand-color: #ff8040;
  --brand-sub-color: #ffc9ad;
  --backgroud: #f1f1f1;
  --confirm-color: #57b3dc;
  --checkin-color: #ebaf30;
  --in-service-color: #00aa90;
  --done-color: #d75455;
  --close-color: #a3a3a3;
  --main-color-o: rgba(255, 201, 173, 1);
  --qs-txt: var(--theme-mode-text-gray);
  --qs-txt-solid: var(--theme-mode-text);
  --shadow-qs-solid: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  --shadow-qs-light: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --red-simpli: rgba(255, 97, 80, 1);
  --backgroud-gray: rgba(224, 224, 224, 1);
  --side-bar: var(--px-80);
  --bs-body-bg: #ffffff;
  --bs-opacity: #f7cdb0;
  --bs-green-o: #e1fff1;
  --bs-yellow: #f8a400;
  --bs-yellow-o: #f8a40020;
  --bs-blue-o: #d2f2f9;
  --bs-pink-o: #ffe6e6;
  --bs-purple-o: #f0d9ff;
  --bs-green-l-o: #e4fb96;
  --bs-orange-o: #ffe5d6;
  --bs-green-grd: linear-gradient(180deg, #41c7af, #54e38e);
  --bs-orange-grd: linear-gradient(180deg, #ff9967, #ff8282);
  --bs-blue-grd: linear-gradient(180deg, #6cacff, #8debff);
  --bs-purple-grd: linear-gradient(180deg, #a16bfe, #deb0df);
  --bg-room-type: var(--bs-gray-200);
  --bg-num-availble: #f0f0f0;
  --text-room-color: #475569;
  --room-grid-min: var(--px-244);
  --room-grid-gap: var(--px-8);
}

:root {
  --vh: 1;
  --scale: 1;
  --px-2: calc(2px * var(--scale));
  --px-4: calc(4px * var(--scale));
  --px-8: calc(8px * var(--scale));
  --px-12: calc(12px * var(--scale));
  --px-16: calc(16px * var(--scale));
  --px-20: calc(20px * var(--scale));
  --px-24: calc(24px * var(--scale));
  --px-28: calc(28px * var(--scale));
  --px-32: calc(32px * var(--scale));
  --px-36: calc(36px * var(--scale));
  --px-40: calc(40px * var(--scale));
  --px-44: calc(44px * var(--scale));
  --px-48: calc(48px * var(--scale));
  --px-52: calc(52px * var(--scale));
  --px-56: calc(56px * var(--scale));
  --px-60: calc(60px * var(--scale));
  --px-64: calc(64px * var(--scale));
  --px-68: calc(68px * var(--scale));
  --px-72: calc(72px * var(--scale));
  --px-76: calc(76px * var(--scale));
  --px-80: calc(80px * var(--scale));
  --px-84: calc(84px * var(--scale));
  --px-88: calc(88px * var(--scale));
  --px-92: calc(92px * var(--scale));
  --px-96: calc(96px * var(--scale));
  --px-100: calc(100px * var(--scale));
  --px-104: calc(104px * var(--scale));
  --px-108: calc(108px * var(--scale));
  --px-112: calc(112px * var(--scale));
  --px-116: calc(116px * var(--scale));
  --px-120: calc(120px * var(--scale));
  --px-124: calc(124px * var(--scale));
  --px-128: calc(128px * var(--scale));
  --px-132: calc(132px * var(--scale));
  --px-136: calc(136px * var(--scale));
  --px-140: calc(140px * var(--scale));
  --px-144: calc(144px * var(--scale));
  --px-148: calc(148px * var(--scale));
  --px-152: calc(152px * var(--scale));
  --px-156: calc(156px * var(--scale));
  --px-160: calc(160px * var(--scale));
  --px-164: calc(164px * var(--scale));
  --px-168: calc(168px * var(--scale));
  --px-172: calc(172px * var(--scale));
  --px-176: calc(176px * var(--scale));
  --px-180: calc(180px * var(--scale));
  --px-184: calc(184px * var(--scale));
  --px-188: calc(188px * var(--scale));
  --px-192: calc(192px * var(--scale));
  --px-196: calc(196px * var(--scale));
  --px-200: calc(200px * var(--scale));
  --px-204: calc(204px * var(--scale));
  --px-208: calc(208px * var(--scale));
  --px-212: calc(212px * var(--scale));
  --px-216: calc(216px * var(--scale));
  --px-220: calc(220px * var(--scale));
  --px-224: calc(224px * var(--scale));
  --px-228: calc(228px * var(--scale));
  --px-232: calc(232px * var(--scale));
  --px-236: calc(236px * var(--scale));
  --px-240: calc(240px * var(--scale));
  --px-244: calc(244px * var(--scale));
  --px-248: calc(248px * var(--scale));
  --px-252: calc(252px * var(--scale));
  --px-256: calc(256px * var(--scale));
  --px-260: calc(260px * var(--scale));
  --px-264: calc(264px * var(--scale));
  --px-268: calc(268px * var(--scale));
  --px-272: calc(272px * var(--scale));
  --px-276: calc(276px * var(--scale));
  --px-280: calc(280px * var(--scale));
  --px-284: calc(284px * var(--scale));
  --px-288: calc(288px * var(--scale));
  --px-292: calc(292px * var(--scale));
  --px-296: calc(296px * var(--scale));
  --px-300: calc(300px * var(--scale));
  --px-304: calc(304px * var(--scale));
  --px-308: calc(308px * var(--scale));
  --px-312: calc(312px * var(--scale));
  --px-316: calc(316px * var(--scale));
  --px-320: calc(320px * var(--scale));
  --px-324: calc(324px * var(--scale));
  --px-328: calc(328px * var(--scale));
  --px-332: calc(332px * var(--scale));
  --px-336: calc(336px * var(--scale));
  --px-340: calc(340px * var(--scale));
  --px-344: calc(344px * var(--scale));
  --px-348: calc(348px * var(--scale));
  --px-352: calc(352px * var(--scale));
  --px-356: calc(356px * var(--scale));
  --px-360: calc(360px * var(--scale));
  --px-364: calc(364px * var(--scale));
  --px-368: calc(368px * var(--scale));
  --px-372: calc(372px * var(--scale));
  --px-376: calc(376px * var(--scale));
  --px-380: calc(380px * var(--scale));
  --px-384: calc(384px * var(--scale));
  --px-388: calc(388px * var(--scale));
  --px-392: calc(392px * var(--scale));
  --px-396: calc(396px * var(--scale));
  --px-400: calc(400px * var(--scale));
  --px-420: calc(420px * var(--scale));
  --px-430: calc(430px * var(--scale));
  --px-440: calc(440px * var(--scale));
  --px-450: calc(450px * var(--scale));
  --px-460: calc(460px * var(--scale));
  --px-480: calc(480px * var(--scale));
  --px-500: calc(500px * var(--scale));
  --px-550: calc(550px * var(--scale));
  --px-570: calc(570px * var(--scale));
  --px-600: calc(600px * var(--scale));
  --px-620: calc(620px * var(--scale));
  --px-640: calc(640px * var(--scale));
  --px-650: calc(650px * var(--scale));
  --px-690: calc(690px * var(--scale));
  --px-700: calc(700px * var(--scale));
  --px-710: calc(710px * var(--scale));
  --px-800: calc(800px * var(--scale));
  --px-820: calc(820px * var(--scale));
  --px-860: calc(860px * var(--scale));
  --px-880: calc(880px * var(--scale));
  --px-900: calc(900px * var(--scale));
  --px-950: calc(950px * var(--scale));
  --px-970: calc(970px * var(--scale));
  --px-988: calc(988px * var(--scale));
  --px-998: calc(998px * var(--scale));
  --px-1100: calc(1100px * var(--scale));
  --px-1200: calc(1200px * var(--scale));
  /**/
  --s-8: calc(8px * var(--scale)) / calc(11px * var(--scale)) Sora, sans-serif;
  --s-10:
    calc(10px * var(--scale)) / calc(13px * var(--scale)) Sora, sans-serif;
  --s-11:
    calc(11px * var(--scale)) / calc(14px * var(--scale)) Sora, sans-serif;
  --s-12:
    calc(12px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
  --s-13:
    calc(13px * var(--scale)) / calc(16px * var(--scale)) Sora, sans-serif;
  --s-14:
    calc(14px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
  --s-15:
    calc(15px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
  --s-16:
    calc(16px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
  --s-17:
    calc(17px * var(--scale)) / calc(20px * var(--scale)) Sora, sans-serif;
  --s-18:
    calc(18px * var(--scale)) / calc(22px * var(--scale)) Sora, sans-serif;
  --s-19:
    calc(19px * var(--scale)) / calc(23px * var(--scale)) Sora, sans-serif;
  --s-20:
    calc(20px * var(--scale)) / calc(24px * var(--scale)) Sora, sans-serif;
  --s-22:
    calc(22px * var(--scale)) / calc(27px * var(--scale)) Sora, sans-serif;
  --s-24:
    calc(24px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
  --s-25:
    calc(25px * var(--scale)) / calc(30px * var(--scale)) Sora, sans-serif;
  --s-26:
    calc(26px * var(--scale)) / calc(32px * var(--scale)) Sora, sans-serif;
  --s-28:
    calc(28px * var(--scale)) / calc(34px * var(--scale)) Sora, sans-serif;
  --s-30:
    calc(30px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
  --s-32:
    calc(32px * var(--scale)) / calc(39px * var(--scale)) Sora, sans-serif;
  --s-38:
    calc(38px * var(--scale)) / calc(42px * var(--scale)) Sora, sans-serif;
  --s-45:
    calc(45px * var(--scale)) / calc(55px * var(--scale)) Sora, sans-serif;
  --s-50:
    calc(50px * var(--scale)) / calc(61px * var(--scale)) Sora, sans-serif;
  --s-54:
    calc(54px * var(--scale)) / calc(66px * var(--scale)) Sora, sans-serif;
  --s-80:
    calc(80px * var(--scale)) / calc(98px * var(--scale)) Sora, sans-serif;
  --shadow:
    0px 1px 3px 0px rgba(60, 64, 67, 0.3),
    0px 4px 8px 3px rgba(60, 64, 67, 0.15);
  --bdr-1: 1px solid rgb(218, 220, 224);
  --bdr-2: 2px solid rgb(218, 220, 224);
  --bs-main-o: #f4f8ed;
  --bs-main-50: #f4f8ed;
  --bs-main-100: #e6f0d7;
  --bs-main-200: #cfe2b4;
  --bs-main-300: #b0cf87;
  --bs-main-400: #92ba61;
  --bs-main-500: #7fad49;
  --bs-main-600: #5a7e32;
  --bs-main-700: #45612a;
  --bs-main-800: #3a4e26;
  --bs-main-900: #334324;
  --bs-main-950: #19240f;
  --bs-main-rgb: 127, 173, 73;
  --bs-main: var(--bs-main-500);
  --color-chart: var(--bs-main);
  --color-chart-o: var(--bs-main-o);
  --chart-gray: var(--bs-gray-100);
  --chart-gradiant: linear-gradient(
    90deg,
    var(--bs-main) 0%,
    var(--bs-main-300) 100%
  );
  --bard-color-brand-text-gradient-stop-1: #4285f4;
  --bard-color-brand-text-gradient-stop-1-rgb: 66, 133, 244;
  --bard-color-brand-text-gradient-stop-2: #9b72cb;
  --bard-color-brand-text-gradient-stop-2-rgb: 155, 114, 203;
  --bard-color-brand-text-gradient-stop-3: #d96570;
  --bard-color-brand-text-gradient-stop-3-rgb: 217, 101, 112;
  --gem-sys-color--surface: #fff;
  --transform-page: 100%;
  --w-day: var(--px-100);
  --w-day-c: var(--px-160);
  --bg-inp: #fafcfe;
  --bs-gray-100: #edf2f3;
  --left-table-fit: var(--px-180);
  /*--bg-main: #fcf7f2;*/
  --bg-main: #ececec;
  --bg-black: #091a0a;
  --shadow-h: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --room-status-width: calc(200px * var(--scale));
  --room-status-collapsed: calc(56px * var(--scale));
}

body {
  font-family: 'Sora', sans-serif;
}

/* Ensure SweetAlert2 is always on top of EVERYTHING */
.swal2-container {
  z-index: 99999 !important;
}

.cursor-move {
    cursor: move;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle:hover {
    color: var(--bs-primary) !important;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: var(--bs-light) !important;
}

.btn-primary {
    background-color: var(--bs-main) !important;
    border-color: var(--bs-main) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--bs-main-600) !important;
    border-color: var(--bs-main-600) !important;
}

/* Custom Filter Switch */
.custom-filter-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    height: 28px;
    width: fit-content;
}

.custom-filter-switch span {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.custom-filter-switch .switch-label-off {
    background-color: var(--bs-main);
    color: white;
}

.custom-filter-switch .switch-label-on {
    background-color: transparent;
    color: #666;
}

.custom-filter-switch input:checked ~ .switch-label-off {
    background-color: transparent;
    color: #666;
}

.custom-filter-switch input:checked ~ .switch-label-on {
    background-color: var(--bs-main);
    color: white;
}

.filter-group label {
    font-size: 11px;
}

/* Premium Report Table Styles */
.report-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #eef2f6;
    margin-bottom: 3rem;
    padding: 1.25rem;
    position: relative;
    transition: transform 0.3s ease;
}

.report-card .table-responsive {
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.custom-report-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.custom-report-table thead th {
    background: linear-gradient(180deg, var(--bs-main-50) 0%, var(--bs-main-100) 100%);
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--bs-main-200) !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 20;
}

.custom-report-table tbody td {
    padding: 10px 16px !important;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.custom-report-table tbody tr:hover td {
    background-color: #f8fafc;
}

.custom-report-table tbody tr:last-child td {
    border-bottom: none;
}

.custom-report-table tfoot td {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0 !important;
    padding: 10px 16px !important;
    font-weight: 700;
    color: #334155;
    font-size: 0.875rem;
}

.custom-report-table tfoot tr:first-child td {
    border-top: 2px solid #cbd5e1 !important;
}

/* Footer Aggregation Labels */
.agg-label {
    color: #64748b;
    font-family: var(--extra-font-family);
    font-size: 0.7rem;
    font-weight: 600;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Sticky Header Adjustment */
.custom-report-table thead {
    z-index: 10;
}

.custom-report-table .text-end {
    text-align: right;
}

/* User Column Config Modal Styles */
.column-config-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.column-config-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.column-config-item.ghost {
    opacity: 0.5;
    background: #f1f5f9;
    border: 2px dashed #94a3b8;
}

.column-config-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drag-handle {
    cursor: move;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.drag-handle:hover {
    color: #64748b;
}

.column-config-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-left: 32px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

.config-toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #64748b;
}

.config-toggle-group input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.config-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.config-label-input {
    font-size: 0.875rem;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    width: 100%;
}

.config-label-input:focus {
    outline: none;
    border-color: var(--bs-main);
    box-shadow: 0 0 0 2px var(--bs-main-100);
}

.btn-config-columns {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-config-columns svg {
    width: 18px;
    height: 18px;
}

/* Table Header Sorting styles */
.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    position: relative;
}

.sortable-th:hover {
    background-color: #f1f5f9 !important;
}

.sortable-th .sort-icon {
    opacity: 0.4;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 2.5; /* Slightly thicker stroke */
}

.sortable-th:hover {
    background-color: rgba(var(--bs-main-rgb), 0.05) !important;
}

.sortable-th:hover .sort-icon,
.sortable-th.sorted-asc .sort-icon,
.sortable-th.sorted-desc .sort-icon {
    opacity: 1;
}

.sortable-th .sort-icon.active {
    color: var(--bs-main);
    stroke-width: 3.5; /* Even thicker for active state */
    filter: drop-shadow(0 0 1px rgba(var(--bs-main-rgb), 0.4));
}

.sortable-th .sort-icon.neutral {
    opacity: 0.25; /* Increased from 0.1 */
}

.sortable-th:hover .sort-icon.neutral {
    opacity: 0.7; /* Increased from 0.5 */
}

.sortable-th.sorted-asc,
.sortable-th.sorted-desc {
    background-color: rgba(var(--bs-main-rgb), 0.03) !important;
}

/* Admin Setting Tab Styles */
#adminSettingTabs .nav-link {
    color: #64748b;
    background-color: white !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease;
}

#adminSettingTabs .nav-link.active {
    background-color: var(--bs-main) !important;
    border-color: var(--bs-main) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(var(--bs-main-rgb), 0.2);
}

#adminSettingTabs .nav-link:hover:not(.active) {
    background-color: #f8fafc !important;
    color: var(--bs-main);
}

/* ========================================================= */
/* MOBILE OPTIMIZATION (Pure CSS - No JS side effects)       */
/* ========================================================= */
@media (max-width: 768px) {
    /* Base text scaling */
    :root {
        --body-font-size: 11px;
    }

    /* Core Layout Layout Adjustments */
    .top-header { height: 48px; padding: 0 10px; }
    .brand-wrapper { font-size: 13px; }
    .brand-icon { height: 18px; }
    .current-time { font-size: 11px; }
    #mainContent { padding-top: 48px; padding-bottom: 28px; }

    /* Report Title Area */
    #lblReportName { font-size: 1.15rem !important; margin-bottom: 0.2rem !important; }
    #lblReportDesc { font-size: 0.75rem !important; margin-top: 0 !important; }
    #reportPrintMeta { font-size: 0.6rem !important; margin-top: -8px !important; }
    #reportPrintMeta b { font-size: 0.6rem !important; }
    #settingActiveState { padding-top: 0 !important; }

    /* Toolbar Action Buttons (App-like grid for mobile) */
    #settingActiveState .d-flex.flex-wrap.gap-2.justify-content-end.w-100 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    #settingActiveState .d-flex.flex-wrap.gap-2 .btn {
        padding: 0.3rem 0.2rem !important;
        font-size: 0.65rem !important;
        border-radius: 6px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.15rem !important;
        height: 100%;
        text-wrap: nowrap;
    }
    
    #settingActiveState .d-flex.flex-wrap.gap-2 .btn svg {
        margin: 0 !important;
        width: 14px;
        height: 14px;
        display: block;
    }

    /* Table & Card Optimizations */
    .report-card { 
        padding: 0 !important; 
        border-radius: 0 !important; 
        box-shadow: none !important; 
        border: none !important;
    }

    /* Important: Let the table scroll horizontally rather than squashing too much */
    .custom-report-table { min-width: 600px; }
    
    .custom-report-table thead th {
        padding: 6px 8px !important;
        font-size: 0.65rem;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .custom-report-table tbody td {
        padding: 6px 8px !important;
        font-size: 0.7rem;
        line-height: 1.25;
    }

    /* Header & Summary Row Text */
    .combined-group-header td { padding: 6px 10px !important; }
    .combined-group-header .d-flex.flex-wrap { gap: 0.35rem !important; }
    .combined-group-header b { font-size: 0.7rem !important; }
    .combined-group-header .text-muted.extra-small { font-size: 0.65rem !important; opacity: 0.8; }
    
    .group-summary-row td { padding: 6px 8px !important; font-size: 0.7rem; }
    /* Mobile Filter Popup (Absolute Dropdown Centered via math) */
    #reportFilterPopup {
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-65%) !important;
        width: 92vw !important;
        max-width: 360px !important;
        max-height: 60vh !important;
        overflow-y: visible !important; /* Layout internal */
        margin: 12px 0 0 0 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important;
        z-index: 1050 !important;
        animation: none !important;
        padding-bottom: 2rem !important; /* safe padding for clear/apply buttons */
    }
    
    .report-filter-area {
        max-height: calc(60vh - 130px) !important; 
        overflow-y: auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Footer Fixes */
    .app-footer { height: 26px; padding: 0 6px; font-size: 9px; }
    .footer-divider { height: 10px; margin: 0 4px; }
    .footer-left { gap: 6px; }
    .powered-text { font-size: 6.5px; }
    .footer-logo { height: 8px; }
}

/* Extra small devices */
@media (max-width: 420px) {
    .app-footer { padding: 0 4px; font-size: 8px; }
    .footer-label { display: none; }
    .footer-divider { display: none; }
    .footer-left { gap: 8px; }
    
    #settingActiveState .d-flex.flex-wrap.gap-2 .btn { font-size: 0.6rem !important; }
}