:root {
    --primary: #00A651;        /* FamilyMart green */
    --primary-dark: #00823e;
    --secondary: #0051ba;      /* FamilyMart blue */
    --accent-blue: #4f46e5;    /* Modern purple-indigo from reference */
    --accent-blue-hover: #4338ca;
    --accent-light: #eef2ff;
    --danger: #ef4444;
    --bg-color: #f1f5f9;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
    overflow-y: auto;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
}

/* Sleek modern 8px scrollbar (replaces default thick Windows scrollbar) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.hidden { display: none !important; }

/* ============================================================== */
/* ENTERPRISE DUAL-PANEL AUTHENTICATION SCREEN                    */
/* ============================================================== */
.auth-screen {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 10% 20%, #062343 0%, #021226 95%);
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
}

/* Ambient background light spheres */
.auth-screen::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 166, 81, 0.22) 0%, transparent 70%);
    top: -120px;
    left: -120px;
    border-radius: 50%;
    filter: blur(50px);
}

.auth-screen::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 81, 186, 0.25) 0%, transparent 70%);
    bottom: -120px;
    right: -120px;
    border-radius: 50%;
    filter: blur(50px);
}

.auth-wrapper-dual {
    display: flex;
    width: 1100px;
    max-width: 95vw;
    min-height: 640px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* LEFT SIDE: HERO BRANDING */
.auth-hero-side {
    flex: 1.15;
    background: linear-gradient(145deg, #021b38 0%, #004d26 100%);
    color: #ffffff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.hero-brand-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-icon-box {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 8px 18px rgba(0, 166, 81, 0.35);
}

.hero-brand-top h2 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #ffffff;
}

.brand-subtitle {
    font-size: 11.5px;
    color: #86efac;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.hero-content h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 14px;
    color: #f8fafc;
}

.hero-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 28px;
}

.hero-feature-pills {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pill-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 18px;
    border-radius: 12px;
    transition: 0.2s;
}

.pill-item:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(4px);
}

.pill-item i {
    font-size: 18px;
    color: #4ade80;
    width: 24px;
    text-align: center;
}

.pill-item strong {
    display: block;
    font-size: 13.5px;
    color: #ffffff;
}

.pill-item small {
    font-size: 11.5px;
    color: #94a3b8;
}

.hero-footer-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 24px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
}

/* RIGHT SIDE: INTERACTIVE FORM */
.auth-form-side {
    flex: 1;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
}

/* TAB TOGGLER */
.auth-tab-switch {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.auth-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: #64748b;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-intro {
    margin-bottom: 22px;
}

.form-intro h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.form-intro p {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* FORM FIELDS WITH INSIDE ICONS */
.input-field-group {
    margin-bottom: 16px;
}

.input-field-group label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 14px;
}

.input-with-icon input {
    width: 100%;
    height: 46px;
    padding: 10px 14px 10px 42px !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    transition: 0.2s;
    margin-bottom: 0 !important;
}

.input-with-icon input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.15);
}

/* REMEMBER & FORGOT */
.form-row-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 22px 0;
    font-size: 12.5px;
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    cursor: pointer;
}

.remember-label input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.forgot-link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
}
.forgot-link:hover { text-decoration: underline; }

/* ACTION SUBMIT BUTTON */
.btn-auth-submit {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, var(--primary) 0%, #008744 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 166, 81, 0.3);
    transition: all 0.2s ease;
}

.btn-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 166, 81, 0.4);
}

.auth-security-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 11.5px;
    margin-top: 20px;
}

/* RESPONSIVE LAYOUT FOR MOBILE / TABLET */
@media(max-width: 900px) {
    .auth-wrapper-dual {
        flex-direction: column;
        max-width: 480px;
    }
    .auth-hero-side { display: none; }
    .auth-form-side { padding: 32px 24px; }
}

/* NAVBAR */
.navbar {
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    border-bottom: 1px solid var(--border-color);
}

.nav-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* NAVBAR PROFILE PILL BUTTON */
.user-profile-trigger {
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.user-profile-trigger:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

#user-display-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
}

.caret-icon {
    font-size: 11px;
    color: #94a3b8;
}

.btn-logout {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
    padding: 7px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: 0.2s;
}
.btn-logout:hover { background: var(--danger); color: white; }

/* 1200px PANEL CONTAINER */
.panel-container-1200 {
    max-width: 1200px !important;
    width: 95% !important;
    margin: 30px auto !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

.app-wrapper {
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 30px;
}

.admin-panel { 
    display: none;
    min-height: auto !important;
    margin-bottom: 0 !important; 
}
.admin-panel.active { display: block; }

.panel-header h2 {
    font-size: 24px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}
.panel-header p { color: var(--text-muted); font-size: 14px; margin-top: 4px; margin-bottom: 20px; }

.panel-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 25px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

/* ============================================================== */
/* USER ACCOUNT & BILLING MODAL (Match Sample Screenshot Exactly)   */
/* ============================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 2. Chat Modal (Must be above Billing Center) */
#modal-user-chat-backdrop,
#modal-admin-inspect-backdrop,
#modal-manage-macros-backdrop {
    z-index: 2000 !important;
}

.billing-modal {
    background: #ffffff;
    width: 1150px;
    max-width: 95vw;
    height: 720px;
    max-height: 92vh;
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* MODAL HEADER */
.billing-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header-avatar {
    font-size: 28px;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
}

.modal-title h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.modal-close-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    font-size: 15px;
    transition: 0.15s ease;
}
.modal-close-btn:hover { background: #fee2e2; border-color: #fca5a5; color: var(--danger); }

/* MODAL BODY (Sidebar + Content Viewport) */
.billing-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

/* LEFT SIDEBAR TABS */
.billing-tabs-sidebar {
    width: 250px;
    background: #f8fafc;
    border-right: 1px solid var(--border-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.billing-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}

.billing-tab-btn i {
    font-size: 16px;
    width: 20px;
    color: #64748b;
}

.billing-tab-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.billing-tab-btn.active {
    background: #eef2ff;
    color: var(--accent-blue);
}
.billing-tab-btn.active i { color: var(--accent-blue); }

.badge-pro {
    font-size: 10px;
    background: #e0e7ff;
    color: var(--accent-blue);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: auto;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* RIGHT TAB CONTENT AREA */
.billing-tabs-content {
    flex: 1;
    padding: 32px 36px;
    overflow-y: auto;
    background: #ffffff;
}

.billing-tab-pane { display: none; }
.billing-tab-pane.active { display: block; }

.tab-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.tab-pane-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.tab-pane-header p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

.btn-save-pill {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}
.btn-save-pill:hover { background: var(--accent-blue-hover); }

/* ============================================================== */
/* CLEAN MODAL FORM STYLING (Matching Reference Screenshots)      */
/* ============================================================== */
.clean-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    width: 100%;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group-item.full-span {
    grid-column: span 2;
}

.form-group-item label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.clean-form-grid input[type="text"],
.clean-form-grid input[type="email"],
.clean-form-grid input[type="number"],
.clean-form-grid input[type="password"],
.clean-form-grid textarea {
    width: 100% !important;
    height: 42px;
    padding: 10px 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clean-form-grid textarea {
    min-height: 120px !important;
    max-height: 280px !important;
    resize: vertical !important;
    padding: 12px 14px !important;
    font-family: inherit;
}

.clean-form-grid input:focus,
.clean-form-grid textarea:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

.input-readonly {
    background: #f8fafc !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed;
}

.input-hint {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 5px;
}

/* ============================================================== */
/* TAB 3: BILLING HISTORY & VOUCHERS TABLE (Matching Screenshot)   */
/* ============================================================== */
.table-card-container {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow-x: auto;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
     margin-bottom: 0 !important;
}

/* Fix Voucher Table inside Billing Modal */
.vouchers-table {
    width: 100% !important;
    border-collapse: collapse;
    text-align: left;
    table-layout: auto;
}

.vouchers-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 12px 14px;
    border-bottom: 1.5px solid var(--border-color);
    white-space: nowrap;
}

.vouchers-table tbody tr {
    transition: background 0.15s ease;
}

.vouchers-table tbody tr:hover {
    background: #f8fafc;
}

.vouchers-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: #334155;
    vertical-align: middle;
}

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

.voucher-id {
    font-weight: 700;
    color: #0f172a;
}

.payment-method-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-method-cell i {
    font-size: 18px;
    color: #6366f1;
}

.badge-paid {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.btn-voucher-pdf {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-voucher-pdf:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.badge-refunded {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

/* ============================================================== */
/* TAB 2: PURCHASED PLAN (Cards & Banner Layout)                  */
/* ============================================================== */
.active-plan-banner {
    border: 2px solid #a5b4fc;
    background: #fafbff;
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.badge-pill-blue {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.plan-banner-left h3 {
    font-size: 19px;
    color: #1e1b4b;
    margin: 8px 0 4px 0;
}

.plan-banner-left p {
    font-size: 13px;
    color: #475569;
    margin-bottom: 14px;
}

.plan-meta-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.plan-meta-tags span {
    font-size: 11.5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 5px 12px;
    border-radius: 8px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================== */
/* FIXED ACTIVE PLAN STATUS BADGE (Pill Style)                    */
/* ============================================================== */
.plan-meta-tags .tag-status {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.plan-meta-tags .tag-status i {
    color: #15803d !important;
    font-size: 12px !important;
}

.plan-banner-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.switch-container {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.switch-container input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 26px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #10b981; }
input:checked + .slider:before { transform: translateX(22px); }

.toggle-text { font-size: 12.5px; font-weight: 600; color: #1e293b; }
.plan-banner-right small { font-size: 11px; color: var(--text-muted); }

.subheading-plans {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pricing-tier-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.pricing-tier-card.highlight-card {
    border: 2px solid var(--accent-blue);
    background: #fbfbfe;
}

.ribbon-popular {
    position: absolute;
    top: -11px;
    right: 18px;
    background: #f59e0b;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
}

.tier-tag {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 6px;
    width: fit-content;
    margin-bottom: 10px;
}

.pricing-tier-card h4 { font-size: 17px; margin-bottom: 8px; }
.tier-price strong { font-size: 26px; color: #0f172a; }
.tier-price span { font-size: 12.5px; color: var(--text-muted); }

.tier-perks {
    list-style: none;
    margin: 18px 0 22px 0;
    flex: 1;
}

.tier-perks li {
    font-size: 12.5px;
    color: #475569;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tier-perks li i { color: #10b981; font-size: 12px; }

.btn-tier-select {
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    width: 100%;
}
.btn-tier-select.disabled { background: #f8fafc; color: #94a3b8; cursor: default; }
.btn-tier-select.primary { background: #e0e7ff; color: var(--accent-blue); border-color: #c7d2fe; }
.btn-tier-select.highlight { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }

/* ============================================================== */
/* MACRO MANAGER POPUP MODAL STYLING                              */
/* ============================================================== */
.macro-manager-box {
    width: 980px !important;
    max-width: 95vw !important;
    height: 650px !important;
    max-height: 92vh !important;
    display: flex;
    flex-direction: column;
}

.macro-modal-grid {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #ffffff;
}

.macro-create-side {
    width: 380px;
    background: #f8fafc;
    border-right: 1px solid var(--border-color);
    padding: 24px;
    overflow-y: auto;
}

.macro-list-side {
    flex: 1;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}

.macro-section-heading {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}
.macro-section-heading i { color: var(--primary); }

.macro-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.macro-cards-scroller {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}

.macro-item-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    transition: all 0.15s ease;
    position: relative;
}

.macro-item-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 12px rgba(0, 81, 186, 0.06);
}

.macro-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.macro-card-cat {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--secondary);
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.macro-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.macro-card-snippet {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #f1f5f9;
}

.btn-delete-macro {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: 0.15s;
}
.btn-delete-macro:hover {
    color: #ef4444;
    background: #fee2e2;
}

@media(max-width: 850px) {
    .macro-modal-grid { flex-direction: column; }
    .macro-create-side { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); }
}

/* ============================================================== */
/* UNIVERSAL DIALOG, CONFIRM & TOAST NOTIFICATION STYLING         */
/* ============================================================== */

/* 1. FLOATING TOAST CONTAINER (Top-Right) */
.ui-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100000 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.ui-toast {
    pointer-events: auto;
    min-width: 300px;
    max-width: 420px;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.ui-toast-exit {
    transform: translateX(120%);
    opacity: 0;
}

.ui-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ui-toast-success .ui-toast-icon { color: var(--primary); }
.ui-toast-error .ui-toast-icon { color: #ef4444; }
.ui-toast-warning .ui-toast-icon { color: #f59e0b; }
.ui-toast-info .ui-toast-icon { color: var(--secondary); }

.ui-toast-text {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}

.ui-toast-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    transition: 0.15s;
    border-radius: 4px;
}
.ui-toast-close:hover { color: #0f172a; background: #f1f5f9; }

/* 2. UNIVERSAL MODAL DIALOG */
.ui-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s ease;
}

.ui-fade-hidden {
    opacity: 0;
    pointer-events: none;
}

.ui-dialog-card {
    background: #ffffff;
    width: 440px;
    max-width: 92vw;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Wider card when prompt requires a textarea */
.ui-dialog-card.ui-dialog-card-wide {
    width: 520px !important;
    max-width: 94vw !important;
}

/* Ensure the inner content takes 100% full width */
.ui-dialog-content {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ensure the wrapper stretches edge-to-edge matching the buttons */
.ui-dialog-input-wrap {
    width: 100% !important;
    margin-bottom: 22px !important;
    display: block !important;
}

/* Full Width, Vertically-Resizable Textarea matching button edges */
.ui-dialog-textarea {
    width: 100% !important;
    min-height: 100px !important;
    max-height: 280px !important;
    resize: vertical !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    display: block !important;
    outline: none !important;
    font-family: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-dialog-textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

.ui-dialog-open {
    transform: scale(1);
}

.ui-dialog-icon-wrapper {
    font-size: 42px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-dialog-icon-wrapper .text-green { color: var(--primary); }
.ui-dialog-icon-wrapper .text-red { color: #ef4444; }
.ui-dialog-icon-wrapper .text-amber { color: #f59e0b; }
.ui-dialog-icon-wrapper .text-blue { color: var(--secondary); }

.ui-dialog-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.ui-dialog-content p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
}

.ui-dialog-input {
    width: 100%;
    height: 44px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    color: #0f172a;
    outline: none;
    transition: 0.15s;
}
.ui-dialog-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12);
}

.ui-dialog-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.ui-btn {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 166, 81, 0.25);
}
.ui-btn-primary:hover {
    background: var(--primary-dark);
}

.ui-btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.ui-btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.ui-btn-danger {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25);
}
.ui-btn-danger:hover {
    background: #dc2626;
}

.ui-hidden { display: none !important; }

/* ============================================================== */
/* UNREAD NOTIFICATION BADGE (HIGH-DPI CRISP CIRCLE)              */
/* ============================================================== */
.ui-counter-badge {
    background: #ef4444;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    
    /* Pixel Crisp Rendering & Anti-Blur */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    backface-visibility: hidden;
    transform: translateZ(0); /* Forces GPU integer pixel alignment */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* Gentle opacity pulse instead of fuzzy transform scaling */
    animation: badgeGlow 2.5s infinite ease-in-out;
}

/* Badge on top navbar button */
.btn-admin-hub .ui-counter-badge {
    margin-left: 8px;
    background: #ef4444;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Crisp non-scaling pulse animation */
@keyframes badgeGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* ============================================================== */
/* MODERN SEAMLESS CHAT BUBBLES (CLEAN & NO BROKEN CORNER LINES)  */
/* ============================================================== */

.inspect-chat-viewport {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Base bubble styling */
.chat-bubble {
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.55;
    position: relative;
    max-width: 75%;
    word-break: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Completely remove the clunky pseudo-element lines */
.chat-bubble::before,
.chat-bubble::after {
    display: none !important;
}

/* 1. Header spacing (Separates Sender Name & Timestamp) */
.bubble-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.bubble-header span:last-child {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.65;
    white-space: nowrap;
}

/* 2. INCOMING MESSAGES (Left side, Clean White Card) */
.chat-bubble.admin-incoming-bubble,
.chat-bubble.user-msg {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    /* Smooth modern speech-tail: flat top-left corner, soft rounded everywhere else */
    border-radius: 4px 16px 16px 16px !important;
}
.chat-bubble.admin-incoming-bubble .bubble-header span:first-child,
.chat-bubble.user-msg .bubble-header span:first-child {
    color: var(--secondary) !important;
}

/* 3. OUTGOING MESSAGES (Right side, Mint-Green Card) */
.chat-bubble.user-outgoing-bubble,
.chat-bubble.admin-reply {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #14532d !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    /* Smooth modern speech-tail: flat top-right corner, soft rounded everywhere else */
    border-radius: 16px 4px 16px 16px !important;
}
.chat-bubble.user-outgoing-bubble .bubble-header span:first-child,
.chat-bubble.admin-reply .bubble-header span:first-child {
    color: var(--primary) !important;
}

/* 4. SYSTEM AUTO-REPLY (Centered subtle announcement pill) */
.chat-bubble.system-reply {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e3a8a !important;
    margin: 4px auto 10px auto !important;
    max-width: 90% !important;
    border-radius: 12px !important;
}
.chat-bubble.system-reply .bubble-header span:first-child {
    color: #2563eb !important;
}

/* Centered Locked Ticket Banner */
.chat-locked-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    color: #64748b;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}
.chat-locked-banner i {
    color: #ef4444;
    font-size: 16px;
}

/* ============================================================== */
/* INSTANT APP SPLASH LOADER (ELIMINATES LOGIN FLASH ON RELOAD)   */
/* ============================================================== */
.app-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #061c33;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.splash-logo-box {
    width: 64px;
    height: 64px;
    background: var(--primary);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 166, 81, 0.4);
    margin-bottom: 18px;
    animation: splashPulse 1.8s infinite ease-in-out;
}

.splash-content h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin-bottom: 16px;
    color: #ffffff;
}

.splash-spinner-ring {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: splashSpin 0.75s linear infinite;
    margin-bottom: 14px;
}

.splash-content p {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

@keyframes splashSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes splashPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.splash-fade-out {
    opacity: 0;
    visibility: hidden;
}

/* ============================================================== */
/* PRICING HEADER ACTION BUTTONS (CLEAN, MODERN PILLS)            */
/* ============================================================== */

/* Save Pricing to Cloud Button (Vibrant Green Action) */
.btn-cloud-save {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 10px rgba(0, 166, 81, 0.3) !important;
    white-space: nowrap !important;
    transition: all 0.18s ease !important;
}

.btn-cloud-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 166, 81, 0.4) !important;
}

.btn-cloud-save i {
    font-size: 15px;
}

/* + Add New Plan Button */
.btn-add-plan {
    background: #ffffff !important;
    color: var(--secondary) !important;
    border: 1.5px solid var(--secondary) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.18s ease !important;
}

.btn-add-plan:hover {
    background: #eff6ff !important;
    transform: translateY(-1px);
}

.btn-add-plan i {
    font-size: 13px;
}

/* Exchange Rate Input Pill Alignment */
.exchange-rate-pill {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 12px;
    gap: 8px;
    height: 40px;
    box-sizing: border-box;
}

.exchange-rate-pill .rate-input {
    width: 80px !important;
    height: 28px !important;
    padding: 0 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--secondary) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

/* ============================================================== */
/* PRO FEATURE LOCKED UPGRADE WALL                                */
/* ============================================================== */
.plan-feature-locked-box {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 14px;
}

.locked-icon-circle {
    width: 64px;
    height: 64px;
    background: #f1f5f9;
    color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
    border: 2px solid #e2e8f0;
}

.plan-feature-locked-box h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.plan-feature-locked-box p {
    font-size: 13.5px;
    color: #64748b;
    max-width: 440px;
    line-height: 1.5;
    margin-bottom: 22px;
}

.locked-perks-list {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.locked-perks-list span {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-upgrade-redirect {
    background: linear-gradient(135deg, var(--secondary), #2563eb);
    color: white;
    border: none;
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 81, 186, 0.25);
    transition: 0.18s ease;
}

.btn-upgrade-redirect:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 81, 186, 0.35);
}

/* ============================================================== */
/* STORE OWNER CHECKOUT MODAL (LIGHT THEME - GREEN & BLUE PALETTE)*/
/* ============================================================== */
.checkout-modal-card {
    background: #ffffff;
    width: 560px;
    max-width: 95vw;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.checkout-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: #ffffff;
}

.checkout-modal-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
}

/* 1. Summary Box (Light subtle blue background) */
.checkout-summary-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chk-plan-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.chk-plan-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.chk-mmk-price {
    font-size: 21px;
    font-weight: 800;
    color: var(--primary); /* Emerald Green highlight */
    display: block;
    line-height: 1.2;
}

.chk-usd-price {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* 2. Form Field Wrappers */
.checkout-field-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.checkout-field-wrap label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.checkout-select,
.checkout-input {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin-bottom: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-select:focus,
.checkout-input:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* 3. Gateway Details Instruction Box (Light Slate Card) */
.checkout-gateway-details-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
}

.chk-gw-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.chk-gw-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--secondary);
}

.btn-copy-no {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s ease;
}
.btn-copy-no:hover {
    background: #eef2ff;
    color: var(--secondary);
    border-color: #c7d2fe;
}

.chk-gw-info-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

.chk-gw-info-text strong {
    color: #0f172a;
}

.chk-gw-info-text code {
    color: var(--primary);
    font-weight: 800;
    font-size: 14px;
    background: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.chk-gw-instructions {
    font-size: 12px;
    color: #64748b;
    margin-top: 10px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
    line-height: 1.45;
}

/* 4. Footer Buttons */
.checkout-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.btn-checkout-cancel {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}
.btn-checkout-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-checkout-submit {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 3px 8px rgba(0, 166, 81, 0.25);
    transition: 0.15s;
}
.btn-checkout-submit:hover {
    background: var(--primary-dark);
}

/* Square Branding Logo in Checkout Gateway Card */
.chk-gw-branding-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chk-gw-logo-square {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.chk-gw-logo-square img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    display: block;
}

.chk-gw-logo-square i {
    font-size: 16px;
    color: var(--secondary);
}

/* ============================================================== */
/* PAYMENT GATEWAY TABLE STYLING (FIXED SIZING & BUTTONS)         */
/* ============================================================== */

/* Flex cell to align logo and title */
.gateway-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* STRICT IMAGE SIZING: Never let any uploaded image expand past 32x32px! */
.gateway-table-icon {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Fallback wallet box when no logo link is provided */
.gateway-table-icon-fallback {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #eef2ff;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.gateway-title-text {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
}

.gw-account-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: #1e293b;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* Modern Styled Buttons for Gateway Table */
.btn-gw-action {
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    transition: 0.15s ease;
}

.btn-gw-action.edit {
    background: #eff6ff;
    color: var(--secondary);
    border-color: #bfdbfe;
}
.btn-gw-action.edit:hover {
    background: var(--secondary);
    color: #ffffff;
}

.btn-gw-action.disable {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
}
.btn-gw-action.disable:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-gw-action.enable {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}
.btn-gw-action.enable:hover {
    background: #059669;
    color: #ffffff;
}

.btn-gw-action.delete {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
    padding: 6px 10px;
}
.btn-gw-action.delete:hover {
    background: #ef4444;
    color: #ffffff;
}

/* ============================================================== */
/* VERTICALLY RESIZABLE PAYMENT INSTRUCTION TEXTAREAS            */
/* ============================================================== */

/* 1. Main Page Gateway Form Textarea */
.clean-textarea {
    width: 100% !important;
    min-height: 80px !important;
    max-height: 250px !important;
    resize: vertical !important; /* Enables vertical drag resizing */
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    outline: none !important;
    font-family: inherit !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clean-textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* 2. Modal Gateway Edit Textarea */
#modal-edit-gateway-backdrop .dark-textarea {
    width: 100% !important;
    min-height: 90px !important;
    max-height: 240px !important;
    resize: vertical !important; /* Enables vertical drag resizing */
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    outline: none !important;
    font-family: inherit !important;
}

#modal-edit-gateway-backdrop .dark-textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* ============================================================== */
/* NOTIFICATION BELL & INTERACTIVE DROPDOWN                       */
/* ============================================================== */
.notification-wrapper {
    position: relative;
    display: inline-block;
}

.btn-notification-bell {
    position: relative;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-notification-bell:hover {
    background: #eef2ff;
    color: var(--secondary);
    border-color: #c7d2fe;
}

/* Red counter badge positioned at the top-right corner of the bell */
.btn-notification-bell .ui-counter-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* DROPDOWN POPUP CARD */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 380px;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    z-index: 10005;
    overflow: hidden;
    animation: notifSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.notif-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-header-title h4 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}

.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-notif-action {
    background: transparent;
    border: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--secondary);
    cursor: pointer;
    transition: 0.15s;
}
.btn-notif-action:hover { text-decoration: underline; color: #1d4ed8; }
.notif-sep { font-size: 11px; color: #cbd5e1; }

/* LIST SCROLLER */
.notification-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
    cursor: pointer;
    position: relative;
}

.notif-item:hover {
    background: #f8fafc;
}

.notif-item.unread {
    background: #fafcff;
}

.notif-item.unread::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
}

.notif-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* Category Color Highlights */
.notif-icon-box.payment { background: #dcfce7; color: #166534; }
.notif-icon-box.status { background: #fef3c7; color: #b45309; }
.notif-icon-box.ticket { background: #e0e7ff; color: var(--secondary); }
.notif-icon-box.maintenance { background: #fee2e2; color: #ef4444; }

.notif-body-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notif-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.notif-time {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 500;
}

.notif-msg {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

/* DIRECTORY ACTION LINK BUTTON */
.notif-dir-link {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--secondary);
    background: #eff6ff;
    padding: 3px 9px;
    border-radius: 6px;
    width: fit-content;
    border: 1px solid #bfdbfe;
    transition: all 0.15s ease;
}

.notif-dir-link:hover {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

.notif-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.notif-empty-state i {
    font-size: 32px;
    color: #cbd5e1;
}

/* ============================================================== */
/* SYSTEM MAINTENANCE 2-COLUMN CONTROL PANEL                      */
/* ============================================================== */
.maint-panel-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 15px;
}

.maint-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.maint-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.maint-card-header i { font-size: 22px; margin-top: 2px; }
.maint-card-header h4 { font-size: 17px; font-weight: 700; color: #0f172a; }
.maint-card-header small { color: #64748b; font-size: 12.5px; display: block; margin-top: 3px; }

/* Status Toggle Box */
.maint-status-box {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.maint-status-info strong { font-size: 14.5px; color: #0f172a; display: block; }
.maint-status-info span { font-size: 12px; color: #64748b; }

.maint-select-status {
    height: 40px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: 0.15s;
}

.maint-select-status.status-locked {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Date Dropdown Rows */
.maint-date-group {
    margin-bottom: 18px;
}

.maint-date-group label,
.maint-field-wrap label {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: block;
    text-transform: uppercase;
}

.date-dropdown-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 12px;
}

.maint-date-select {
    height: 42px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 13.5px;
    background: #ffffff;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}
.maint-date-select:focus { border-color: var(--secondary); }

.maint-field-wrap {
    margin-bottom: 22px;
}

/* Action Buttons */
.maint-actions-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.btn-maint-clear {
    background: #ffffff;
    border: 1.5px solid #ef4444;
    color: #ef4444;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}
.btn-maint-clear:hover { background: #fee2e2; }

.btn-maint-alert {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    color: var(--secondary);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}
.btn-maint-alert:hover { background: var(--secondary); color: #ffffff; }

.btn-maint-save {
    flex: 1;
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 166, 81, 0.25);
    transition: 0.15s;
}
.btn-maint-save:hover { background: var(--primary-dark); }

/* Right Column Rules */
.maint-compliance-card {
    background: #fafbfd;
}

.compliance-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

.maint-best-practices h5 {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}

.maint-best-practices ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
}

.maint-best-practices li {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.maint-best-practices li i { font-size: 15px; margin-top: 3px; }

.maint-support-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.maint-support-footer a { color: var(--secondary); text-decoration: none; font-weight: 600; }

/* Full-Screen Tenant Lockout Overlay */
.maintenance-lock-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.maint-lock-card {
    background: #ffffff;
    max-width: 520px;
    width: 100%;
    border-radius: 20px;
    padding: 40px 36px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3);
}

.maint-lock-icon-box {
    width: 72px; height: 72px;
    background: #fef2f2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px auto;
    border: 2px solid #fee2e2;
}

.maint-lock-card h2 { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.maint-lock-card p { font-size: 14.5px; color: #475569; line-height: 1.6; margin-bottom: 24px; }

.maint-lock-meta-pill {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 22px;
}

.maint-lock-footer small { color: #94a3b8; font-size: 11.5px; }

@media(max-width: 950px) {
    .maint-panel-grid { grid-template-columns: 1fr; }
}

/* ============================================================== */
/* CUSTOMER MAINTENANCE DETAILS MODAL STYLES                      */
/* ============================================================== */
.maint-detail-card {
    background: #ffffff;
    width: 480px;
    max-width: 92vw;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.maint-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.maint-detail-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.maint-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.maint-icon-badge.locked {
    background: #fef2f2;
    color: #ef4444;
}

.maint-detail-title-group h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.maint-detail-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
}

.maint-schedule-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.maint-schedule-box i { font-size: 20px; }
.maint-sub-label {
    display: block;
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#maint-popup-date-window {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.maint-msg-box {
    background: #fafbfd;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--secondary);
    border-radius: 8px;
    padding: 14px 16px;
}
.maint-msg-box label,
.maint-impact-box label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.maint-msg-box p {
    font-size: 13.5px;
    color: #1e293b;
    line-height: 1.5;
    font-weight: 600;
}

.maint-impact-box ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.maint-impact-box li {
    font-size: 12.5px;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}
.maint-impact-box li i { margin-top: 2px; font-size: 13px; }

.maint-detail-footer {
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}

/* ============================================================== */
/* REGISTRATION FIREWALL & IP BLOCKER STYLES                      */
/* ============================================================== */
.fw-top-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fw-toggle-pill {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s ease;
}

.fw-toggle-pill strong {
    color: #ef4444;
}

.fw-toggle-pill.active {
    border-color: var(--primary);
    background: #ecfdf5;
    color: #166534;
}

.fw-toggle-pill.active strong {
    color: var(--primary);
}

.fw-grid-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 15px;
}

.fw-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.02);
}

.fw-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.fw-card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fw-card-title-group h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.fw-card-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.45;
}

.fw-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.fw-input {
    flex: 1;
    height: 40px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}
.fw-input:focus { border-color: var(--secondary) !important; outline: none; }

.mb-10 { margin-bottom: 12px !important; }
.mt-24 { margin-top: 24px !important; }

.btn-fw-primary {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.btn-fw-primary:hover { background: var(--primary-dark); }

.btn-fw-secondary {
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.btn-fw-secondary:hover { background: #e2e8f0; }

.btn-fw-gold {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.btn-fw-gold:hover { background: #fde68a; }

.btn-fw-danger-sm {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.btn-fw-danger-sm:hover { background: #fecaca; }

/* Test Box */
.fw-test-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.fw-result-badge {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.fw-result-badge.blocked { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.fw-result-badge.allowed { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }

/* Scrollable Table Viewport */
.fw-table-scroller {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.fw-table th, .fw-table td {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
}

.fw-pattern-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
    color: #b45309;
    background: #fffbeb;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fef3c7;
}

.btn-fw-del {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: 0.15s;
}
.btn-fw-del:hover { color: #ef4444; background: #fee2e2; }

@media(max-width: 900px) {
    .fw-grid-dual { grid-template-columns: 1fr; }
}

/* Import / Export Action Group */
.fw-action-btn-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-fw-mini {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: 0.15s ease;
}

.btn-fw-mini:hover {
    background: #eff6ff;
    border-color: var(--secondary);
    color: var(--secondary);
}

.fw-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fw-search-row .btn-fw-gold {
    height: 40px;
    white-space: nowrap;
    padding: 0 14px;
}

/* ============================================================== */
/* SECURITY & PIN RADAR STYLES                                    */
/* ============================================================== */
.sec-grid-dual {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    margin-top: 15px;
    align-items: start;
}

.sec-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.02);
}

.sec-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.sec-card-header i { font-size: 20px; margin-top: 2px; }
.sec-card-header h4 { font-size: 16.5px; font-weight: 700; color: #0f172a; }
.sec-card-header small { color: #64748b; font-size: 12px; display: block; margin-top: 2px; }

.sec-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sec-field { display: flex; flex-direction: column; }
.sec-field.full-col { grid-column: span 2; }
.sec-field label {
    font-size: 11px; font-weight: 700; color: #475569;
    letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px;
}

.sec-rules-card { background: #f8fafc; }

.sec-rule-box {
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.sec-rule-box.yellow { background: #fefce8; border-left: 4px solid #eab308; color: #713f12; }
.sec-rule-box.green { background: #f0fdf4; border-left: 4px solid var(--primary); color: #14532d; }
.sec-rule-box.red { background: #fef2f2; border-left: 4px solid #ef4444; color: #7f1d1d; }
.sec-rule-box strong { font-weight: 700; }

.sec-compliance-footer {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: right;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Full-Width Vibrant Green Save Policy Button */
.btn-sec-save {
    grid-column: span 2;
    height: 46px;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    box-shadow: 0 3px 8px rgba(0, 166, 81, 0.25);
    transition: all 0.15s ease;
}

.btn-sec-save:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 166, 81, 0.35);
}

/* Header Flex Alignment for Threat Radar Card */
.sec-card-header-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.sec-card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-card-title-group h4 {
    margin-bottom: 0 !important;
    font-size: 16px;
    font-weight: 700;
}

.sec-card-header-flex .btn-fw-danger-sm {
    margin-left: auto;
    white-space: nowrap;
}

/* 6-DIGIT PIN LOCKSCREEN OVERLAY */
.pin-lock-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: radial-gradient(circle, #062343 0%, #021226 95%);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pin-lock-modal {
    background: #0b192c;
    border: 1px solid rgba(255,255,255,0.12);
    width: 380px;
    max-width: 92vw;
    border-radius: 24px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 35px 80px rgba(0,0,0,0.6);
    color: #ffffff;
}

.pin-lock-avatar {
    width: 64px; height: 64px;
    background: rgba(0, 166, 81, 0.15);
    color: var(--primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 18px auto;
    border: 2px solid rgba(0, 166, 81, 0.3);
}

.pin-lock-modal h3 { font-size: 20px; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px; }
.pin-lock-modal p { font-size: 13px; color: #94a3b8; margin-bottom: 24px; }

.pin-dots-row {
    display: flex; justify-content: center; gap: 12px; margin-bottom: 20px;
}
.pin-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #475569; background: transparent; transition: 0.15s;
}
.pin-dot.filled { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 10px rgba(0,166,81,0.5); }

.pin-input-box {
    position: relative; width: 220px; margin: 0 auto 24px auto;
}
#pin-secure-input {
    width: 100%; height: 42px; background: #040e1a; border: 1.5px solid #334155;
    border-radius: 10px; color: #ffffff; font-size: 20px; text-align: center; letter-spacing: 6px; outline: none;
}
#btn-toggle-pin-visibility {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 14px;
}

.pin-keypad-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 260px; margin: 0 auto 24px auto;
}
.pin-key {
    width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1); color: #ffffff; font-size: 22px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: 0.15s;
}
.pin-key:hover { background: rgba(255,255,255,0.14); border-color: var(--primary); color: var(--primary); }
.pin-key:active { transform: scale(0.94); }
.pin-key.pin-clear { font-size: 18px; color: #f59e0b; }
.pin-key.pin-back { font-size: 16px; color: #ef4444; }

.pin-lock-footer-links {
    display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12.5px;
}
.pin-lock-footer-links a { color: #94a3b8; text-decoration: none; transition: 0.15s; }
.pin-lock-footer-links a:hover { color: #ffffff; text-decoration: underline; }
.pin-lock-footer-links span { color: #475569; }

@media(max-width: 900px) {
    .sec-grid-dual { grid-template-columns: 1fr; }
}

/* ============================================================== */
/* USER SECURITY PASSCODE CARD & PILL BADGES                      */
/* ============================================================== */
.user-security-passcode-card {
    background: #f8fafc;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 24px;
}

/* 1. Aligned Card Header */
.user-pin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.user-pin-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-pin-title-group i {
    font-size: 20px;
}

.user-pin-title-group h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.user-pin-title-group p {
    font-size: 12.5px;
    color: #64748b;
}

/* 2. Clean Pill Badges (Not Set / Active) */
.badge-pin-pill {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.badge-pin-pill.not-set {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.badge-pin-pill.active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

/* 3. Status Box */
.pin-state-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
}

.pin-state-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pin-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.pin-icon-circle.disabled {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.pin-icon-circle.active {
    background: #ecfdf5 !important;
    color: var(--primary) !important; /* Brand Emerald Green */
    border: 1.5px solid #a7f3d0 !important;
    box-shadow: 0 0 12px rgba(0, 166, 81, 0.15);
}

.pin-icon-circle.active i {
    color: var(--primary) !important;
    font-size: 19px !important;
    display: inline-block !important;
}

.pin-state-info strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.pin-state-info span {
    font-size: 12px;
    color: #64748b;
}

.pin-action-group {
    display: flex;
    gap: 10px;
}

/* 4. PIN Action Buttons */
.btn-pin-primary {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 166, 81, 0.25);
    transition: 0.15s ease;
}
.btn-pin-primary:hover {
    background: var(--primary-dark);
}

.btn-pin-secondary {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.btn-pin-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-pin-danger {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.btn-pin-danger:hover {
    background: #ef4444;
    color: #ffffff;
}

.btn-pin-cancel {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.btn-pin-cancel:hover { background: #e2e8f0; }

/* 5. Setup Drawer */
.pin-setup-drawer {
    background: #ffffff;
    border: 1.5px solid var(--secondary);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 16px;
    box-shadow: 0 4px 15px rgba(0, 81, 186, 0.08);
}

.pin-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.pin-drawer-header h5 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
}

.pin-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pin-digit-input {
    width: 100% !important;
    height: 44px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-size: 18px !important;
    letter-spacing: 5px !important;
    text-align: center !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    outline: none !important;
}
.pin-digit-input:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

.pin-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

/* ============================================================== */
/* DATABASE BACKUP & RECOVERY STYLES                              */
/* ============================================================== */
.backup-grid-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 15px;
}

.backup-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.backup-card.border-red {
    border-color: #fecaca;
    background: #fffafa;
}

.backup-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.backup-card-header i { font-size: 22px; margin-top: 2px; }
.backup-card-header h4 { font-size: 16.5px; font-weight: 700; color: #0f172a; }
.backup-card-header small { color: #64748b; font-size: 12.5px; display: block; margin-top: 3px; line-height: 1.45; }

/* Export Buttons Stack */
.backup-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-backup-action {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.18s ease;
}

.btn-backup-action.csv {
    background: #ffffff;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.btn-backup-action.csv:hover {
    background: #ecfdf5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.15);
}

.btn-backup-action.json {
    background: #ffffff;
    border: 2px solid var(--secondary);
    color: var(--secondary);
}
.btn-backup-action.json:hover {
    background: #eff6ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 81, 186, 0.15);
}

/* Restore Box */
.restore-form-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.restore-form-group label {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.backup-file-picker {
    width: 100%;
    padding: 10px 12px;
    background: #ffffff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-run-sync {
    width: 100%;
    height: 48px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
    transition: all 0.18s ease;
}
.btn-run-sync:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

/* Instructions Card */
.backup-instructions-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-left: 5px solid #f59e0b;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02);
}

.instructions-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.instructions-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.instructions-header i { font-size: 18px; }

.instructions-list {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    line-height: 1.55;
}
.instructions-list code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}

@media(max-width: 900px) {
    .backup-grid-dual { grid-template-columns: 1fr; }
}

/* ============================================================== */
/* EMAIL CAMPAIGNS & WIDGET BUILDER STYLES                        */
/* ============================================================== */
.camp-grid-dual, .campaign-builder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 15px;
    align-items: stretch; /* ⚡ Matches both column heights */
}

.camp-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.camp-widgets-scroller {
    max-height: 440px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    padding-right: 4px;
    flex: 1;
}

.camp-widget-item-box {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    position: relative;
}

.camp-widget-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    color: var(--secondary);
    text-transform: uppercase;
}

/* Right Column Preview Card Wrapper */
.campaign-builder-grid .camp-card:last-child {
    background: #e2e8f0;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.camp-preview-viewport {
    flex: 1 !important;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    overflow-y: auto;
    padding: 16px;
    max-height: none !important;
    min-height: 580px;
}

@media(max-width: 1000px) {
    .campaign-builder-grid { grid-template-columns: 1fr; }
}

/* ============================================================== */
/* FIX CAMPAIGN WIDGET INPUT STYLING & WIDTHS                     */
/* ============================================================== */

/* Make all text inputs and textareas inside widgets span 100% width neatly */
.camp-widget-item-box input[type="text"],
.camp-widget-item-box textarea {
    width: 100% !important;
    height: 38px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin-bottom: 8px !important;
}

.camp-widget-item-box textarea {
    height: 60px !important;
    resize: vertical !important;
}

.camp-widget-item-box input[type="text"]:focus,
.camp-widget-item-box textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* Fix dual-column bottom checkbox & button text row layout */
.camp-widget-item-box div[style*="display:flex; justify-content:space-between"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.camp-widget-item-box div[style*="display:flex; justify-content:space-between"] input[type="text"] {
    margin-bottom: 0 !important;
    height: 34px !important;
}

/* ============================================================== */
/* CAMPAIGN BUILDER BOTTOM BUTTONS STYLING                        */
/* ============================================================== */
.campaign-builder-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* 1. Save Template Button (Neutral Slate Style) */
.campaign-builder-actions-row .btn-save-neutral {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.campaign-builder-actions-row .btn-save-neutral:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* 2. Select Recipients & Send Button (Primary Green Action) */
.campaign-builder-actions-row .btn-primary-action {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 10px rgba(0, 166, 81, 0.25) !important;
    transition: all 0.15s ease !important;
}

.campaign-builder-actions-row .btn-primary-action:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
}

/* Campaign Builder Back Button Style */
.btn-camp-back {
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-camp-back:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

/* ============================================================== */
/* MYANMAR FONT LINGUISTIC ADAPTATION                              */
/* ============================================================== */
body.lang-my {
    font-family: 'Pyidaungsu', 'Myanmar Text', 'Tharlon', sans-serif !important;
    line-height: 1.65 !important;
}

body.lang-my input, 
body.lang-my button, 
body.lang-my select, 
body.lang-my textarea {
    font-family: 'Pyidaungsu', 'Myanmar Text', 'Tharlon', sans-serif !important;
}

/* ============================================================== */
/* CONTACT US SPLIT MODAL STYLES                                  */
/* ============================================================== */
.contact-split-card {
    display: flex;
    width: 850px;
    max-width: 95vw;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-left-panel {
    width: 340px;
    background: linear-gradient(135deg, #021b38 0%, #004d26 100%);
    color: #ffffff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.contact-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}
.contact-brand h3 { font-size: 18px; font-weight: 800; }

.contact-left-panel h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 18px;
    color: #ffffff;
}

.contact-left-panel p {
    font-size: 13.5px;
    color: #93c5fd;
    line-height: 1.6;
    margin-bottom: 40px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #e2e8f0;
}
.contact-info-item i {
    font-size: 16px;
    color: #4ade80;
    width: 20px;
    text-align: center;
}

.contact-right-panel {
    flex: 1;
    padding: 40px;
    background: #ffffff;
}

/* Navbar Contact Button */
.btn-nav-contact {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-nav-contact:hover {
    background: #eff6ff;
    color: var(--secondary);
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

/* Contact Form Submit Button */
.btn-contact-submit {
    background: var(--primary);
    color: #ffffff;
    border: none;
    height: 48px;
    width: 100%;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.25);
    transition: all 0.2s ease;
}

.btn-contact-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 166, 81, 0.35);
}

.btn-contact-submit:disabled {
    background: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media(max-width: 800px) {
    .contact-split-card { flex-direction: column; }
    .contact-left-panel { width: 100%; padding: 30px; }
    .contact-right-panel { padding: 30px; }
}

/* ============================================================== */
/* STORE OPERATIONS 6-TAB SUB-NAVIGATION                          */
/* ============================================================== */
.store-nav-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.store-nav-tab {
    background: transparent;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.store-nav-tab i {
    font-size: 15px;
    color: #64748b;
}

.store-nav-tab:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.store-nav-tab.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 166, 81, 0.25);
}

.store-nav-tab.active i {
    color: #ffffff;
}

/* Tab Content Visibility */
.store-tab-pane {
    display: none;
}

.store-tab-pane.active {
    display: block;
}

/* ============================================================== */
/* SUPERMARKET / CONVENIENCE POS CHECKOUT ENGINE                  */
/* ============================================================== */
.pos-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    height: calc(100vh - 190px);
    min-height: 580px;
}

/* POS DUAL INPUT BAR (BARCODE + SEARCH) */
.pos-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    position: relative;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    height: 42px;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.pos-input-group:focus-within {
    border-color: var(--secondary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12);
}

.pos-input-group input {
    flex: 1;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-width: 0;
}

.pos-scanner-icon {
    font-size: 20px;
    color: var(--primary);
    flex-shrink: 0;
}

.pos-search-icon {
    font-size: 15px;
    color: var(--secondary);
    flex-shrink: 0;
}

.btn-pos-clear-search {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-pos-clear-search:hover {
    color: #ef4444;
}

/* LEFT SIDE: CATALOG & SCANNER */
.pos-catalog-side {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-barcode-bar {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.pos-scanner-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-scanner-icon {
    font-size: 24px;
    color: var(--primary);
}

#pos-barcode-input {
    flex: 1;
    height: 44px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

/* Docked Enter Button inside Barcode Box */
.btn-pos-add-sku {
    background: #ffc619;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 5px 10px;
    height: 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-pos-add-sku:hover {
    background: #00A651;
    border-color: #00A651;
    color: #ffffff;
}

.btn-pos-add-sku i {
    font-size: 11px;
}

/* Category Chips */
.pos-category-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.pos-cat-chip {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.15s;
}
.pos-cat-chip:hover { background: #f8fafc; color: #0f172a; }
.pos-cat-chip.active {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

/* ============================================================== */
/* CORRECTED POS TOUCH CARD & SQUARE IMAGE THUMBNAIL              */
/* ============================================================== */
.pos-product-cards-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 16px !important; /* ⚡ Gives nice breathing room / margin between cards */
    padding: 4px 4px 16px 4px !important;
    align-content: start;
}

/* 1. Expand card height slightly to accommodate 2 or 3 lines of full text */
.pos-touch-card {
    background: #ffffff !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    height: 210px !important; 
}

.pos-touch-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.12);
}

/* 2. The image container inside is a strict 1:1 SQUARE */
.pos-touch-img-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.pos-touch-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.pos-touch-img-box i {
    font-size: 24px !important;
    color: #cbd5e1 !important;
}

.pos-touch-name {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    overflow: visible !important;
    text-overflow: unset !important; 
    display: block !important; 
    max-height: 2.6em !important;
    word-break: break-word !important;
    margin-bottom: 4px !important;
}

.pos-touch-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-top: auto !important;
}

.pos-touch-price {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
}

.pos-touch-qty {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.pos-touch-card:active { transform: scale(0.97); }

/* RIGHT SIDE: CART */
.pos-cart-side {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.pos-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.pos-cart-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-cart-title h4 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }

.pos-cart-quick-actions { display: flex; gap: 4px; }
.btn-cart-tool {
    background: transparent;
    border: 1px solid #cbd5e1;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}
.btn-cart-tool:hover { background: #e2e8f0; color: #0f172a; }

/* Cart Items List */
.pos-cart-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-cart-empty {
    text-align: center;
    color: #94a3b8;
    padding: 60px 20px;
    font-size: 13px;
    line-height: 1.6;
}
.pos-cart-empty i { font-size: 38px; color: #cbd5e1; margin-bottom: 12px; }

.pos-cart-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-cart-row-info {
    flex: 1;
    margin-right: 10px;
}

.pos-cart-row-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.pos-cart-row-price {
    font-size: 11.5px;
    color: #64748b;
}

.pos-cart-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-qty-adj {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-qty-adj:hover { background: #e2e8f0; }

.pos-cart-qty-num {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    min-width: 20px;
    text-align: center;
}

.pos-cart-line-total {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    min-width: 60px;
    text-align: right;
}

/* Cart Summary & Tender Footer */
.pos-cart-summary {
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}

.pos-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
}

.pos-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 8px;
    border-top: 1.5px solid #cbd5e1;
    margin-bottom: 14px;
}
.pos-total-row span:first-child { font-size: 14px; font-weight: 800; color: #0f172a; }
.pos-big-total { font-size: 26px; font-weight: 900; color: var(--primary); }

.btn-pos-tender {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.3);
    transition: 0.15s;
}
.btn-pos-tender:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-pos-tender:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 166, 81, 0.4);
}

/* TENDER MODAL STYLES */
.tender-amount-banner {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.tender-due-label { font-size: 11px; font-weight: 800; color: #166534; letter-spacing: 0.6px; display: block; }
.tender-due-value { font-size: 32px; font-weight: 900; color: #15803d; }

.tender-method-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}
.tender-pill {
    height: 42px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.tender-pill.active {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

.tender-cash-large-input {
    width: 100%;
    height: 52px;
    border: 2px solid var(--secondary) !important;
    border-radius: 10px !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-align: center;
    color: #0f172a;
    box-sizing: border-box;
    margin-bottom: 12px !important;
}

.tender-quick-bills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.btn-quick-bill {
    height: 36px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.btn-quick-bill:hover { background: #e2e8f0; }

.tender-change-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 18px;
}
.tender-change-box span { font-size: 13px; font-weight: 700; color: #1e40af; }
.tender-change-box strong { font-size: 22px; font-weight: 900; color: #1d4ed8; }

/* ============================================================== */
/* STORE UI COMPONENTS (NAVBAR SELECT, STAT CARDS, PILLS & TABLE) */
/* ============================================================== */

/* 1. Sleek Navbar Language Selector (Matches Contact Us Pill) */
#app-lang-selector {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    height: 36px;
    display: inline-flex;
    align-items: center;
}

#app-lang-selector:hover {
    background: #eff6ff;
    color: var(--secondary);
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

/* 2. Inventory 4-Grid Stat Cards */
.ticket-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card-dark {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1.5px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.stat-card-dark.card-total { border-top: 4px solid #64748b; }
.stat-card-dark.card-resolved { border-top: 4px solid var(--primary); }
.stat-card-dark.card-pending { border-top: 4px solid #f59e0b; }
.stat-card-dark.card-urgent { border-top: 4px solid #ef4444; }

.stat-card-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    display: block;
    white-space: nowrap;      
    overflow: hidden;          
    text-overflow: ellipsis;   
}

.stat-card-dark h3 {
    font-size: 21px !important;
    font-weight: 800 !important;
    margin-top: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
}

/* 3. Filter Pills Bar */
.member-metrics-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: 12px;
}

.member-filter-pill {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s ease;
}

.member-filter-pill:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.member-filter-pill.active {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

.member-filter-pill.active i {
    color: #ffffff !important;
}

/* 4. Search Inputs & Dropdowns */
.dark-search-input, .dark-select-input, .dark-text-input {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: 0.15s ease !important;
}

.dark-search-input:focus, .dark-select-input:focus, .dark-text-input:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* 5. Inventory & Management Table */
.table-card-container {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    width: 100%;
}

.member-management-table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: auto;
}

.member-management-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--border-color);
    white-space: nowrap;
}

.member-management-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13.5px;
    white-space: nowrap;
}

.member-management-table tbody tr:hover {
    background: #fafbfd;
}

/* 6. Action Buttons Inside Inventory Table */
.member-uid-code {
    font-size: 11.5px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f8fafc;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.btn-gw-action {
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    transition: 0.15s ease;
}

.btn-gw-action.edit {
    background: #eff6ff;
    color: var(--secondary);
    border-color: #bfdbfe;
}
.btn-gw-action.edit:hover { background: var(--secondary); color: #ffffff; }

.btn-gw-action.enable {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}
.btn-gw-action.enable:hover { background: #059669; color: #ffffff; }

.btn-gw-action.delete {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}
.btn-gw-action.delete:hover { background: #ef4444; color: #ffffff; }

/* ============================================================== */
/* STORE HEADER BAR & ACTION PILLS (FLEX ALIGNMENT)               */
/* ============================================================== */

/* 1. Header Flex Container (Positions Title on Left, Badges on Right) */
.panel-header-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap;
    gap: 16px;
}

.panel-header-flex h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.panel-header-flex p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

/* 2. Right-Side Actions Group */
.header-actions-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* 3. Global Status Pill (Register Open / Active Status) */
.tag-status {
    background: #ecfdf5 !important;
    color: #15803d !important;
    border: 1.5px solid #bbf7d0 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* 4. Global Icon Colors */
.text-green { color: #16a34a !important; }
.text-red { color: #ef4444 !important; }
.text-amber { color: #f59e0b !important; }
.text-blue { color: #2563eb !important; }

/* ============================================================== */
/* STORE POPUP MODALS (REGISTER PRODUCT, EDIT & STOCK-IN FORMS)   */
/* ============================================================== */

/* 1. Modal Card Wrapper */
.dark-modal-box {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 95vw !important;
    animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* 2. Modal Header */
.dark-modal-header {
    padding: 18px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: #ffffff !important;
}

.modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.modal-header-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #ecfdf5 !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.dark-close-btn {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    color: #64748b !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.15s ease !important;
}

.dark-close-btn:hover {
    background: #fee2e2 !important;
    color: var(--danger) !important;
    border-color: #fca5a5 !important;
}

/* 3. Modal Form Body & 2-Column Grid Rows */
.dark-modal-body {
    padding: 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
}

.dark-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 14px !important;
}

.dark-field {
    display: flex !important;
    flex-direction: column !important;
}

.dark-field.full {
    margin-bottom: 14px !important;
}

.dark-field label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

/* 4. Modal Footer & Action Buttons */
.dark-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--border-color) !important;
}

.btn-dark-cancel {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.15s ease !important;
}

.btn-dark-cancel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.btn-dark-gold-submit {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 3px 8px rgba(0, 166, 81, 0.25) !important;
    transition: 0.15s ease !important;
}

.btn-dark-gold-submit:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0, 166, 81, 0.35) !important;
}

/* Auto SKU Generate Button */
.btn-fw-mini {
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #334155 !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.15s ease !important;
    white-space: nowrap !important;
}

.btn-fw-mini:hover {
    background: #eff6ff !important;
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}

/* ============================================================== */
/* 24/7 SHIFT HANDOVER & DRAWER MANAGEMENT STYLING                */
/* ============================================================== */
.shift-live-banner {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.shift-banner-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shift-avatar-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eef2ff;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 1.5px solid #c7d2fe;
}

.shift-live-metrics {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.shift-metric-col {
    display: flex;
    flex-direction: column;
}
.shift-metric-col span {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.shift-metric-col strong {
    font-size: 18px;
    font-weight: 800;
    margin-top: 2px;
}

/* Discrepancy Badges */
.badge-discrepancy-exact {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 11px;
}
.badge-discrepancy-short {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 11px;
}
.badge-discrepancy-over {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 11px;
}

@media (max-width: 900px) {
    .shift-live-banner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================== */
/* P&L ANALYTICS & INTERACTIVE CHART LAYOUT                       */
/* ============================================================== */
.analytics-charts-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}

@media (max-width: 950px) {
    .analytics-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================== */
/* FRESH FOOD HOURLY MARKDOWN BADGES & STRIKETHROUGH PRICING       */
/* ============================================================== */
.pos-markdown-tag {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

.pos-strike-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 11px;
    margin-right: 4px;
    font-weight: normal;
}

/* ============================================================== */
/* FIX: POS CART HEADER OVERFLOW & BADGE SIZING (ADMIN + USER)    */
/* ============================================================== */

/* 1. Give the Cart column slightly more breathing room & stable height */
.pos-workspace-grid {
    grid-template-columns: 1fr 395px !important;
    gap: 16px !important;
    height: calc(100vh - 210px) !important;
    min-height: 520px !important;
}

/* 2. Prevent "Current Sale" from ever splitting onto two lines */
.pos-cart-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.pos-cart-title h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 3. Keep the Cart Badge compact so admin.css cannot bloat it */
#pos-cart-items-count {
    font-size: 11px !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* 4. Keep Hold, Recall & Clear buttons clean and aligned */
.pos-cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 14px !important;
    flex-wrap: nowrap !important;
}

.pos-cart-quick-actions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.btn-cart-tool {
    padding: 5px 9px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
}

/* ============================================================== */
/* ADMIN SIDEBAR: "MY STORE / POS VIEW" DYNAMIC ACTIVE STATES     */
/* ============================================================== */

/* 1. Default Inactive State (Clean Mint Green) */
.admin-nav-item.admin-nav-item-store {
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #059669 !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.admin-nav-item.admin-nav-item-store i {
    color: #059669 !important;
    transition: color 0.2s ease !important;
}

.admin-nav-item.admin-nav-item-store:hover {
    background: #d1fae5 !important;
    border-color: #6ee7b7 !important;
    color: #047857 !important;
    transform: translateX(-4px);
}

/* 2. Active Selected State (Vibrant Solid Emerald Green) */
.admin-nav-item.admin-nav-item-store.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.35) !important;
}

.admin-nav-item.admin-nav-item-store.active i {
    color: #ffffff !important;
}

/* ============================================================== */
/* FIX: SINGLE CLEAN SCROLLBAR & FAST 60FPS SIDEBAR SCROLL        */
/* ============================================================== */

/* 1. Freeze BOTH html and body so the outer scrollbar vanishes completely */
html.sidebar-open-lock,
body.sidebar-open-lock {
    overflow: hidden !important;
}

/* 2. Fast, Snappy Sidebar Scroll with Zero Chaining */
.popup-sidebar-right {
    overflow: hidden !important;
}

.popup-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important; /* ⚡ Kills scroll lag & isolates wheel momentum */
    -webkit-overflow-scrolling: touch !important;
    will-change: scroll-position !important;  /* ⚡ Hardware-accelerated smooth scrolling */
    padding: 16px 18px 30px 18px !important;
}

/* 3. Eliminate button hover lag during scrolling */
.admin-nav-item {
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important; /* GPU layer avoids repaint stutter */
}

/* 4. Sleek, thin 5px scrollbar for the sidebar */
.popup-nav::-webkit-scrollbar {
    width: 5px;
}
.popup-nav::-webkit-scrollbar-track {
    background: transparent;
}
.popup-nav::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.popup-nav::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================================== */
/* FIX: ROUNDED BORDER-RADIUS FOR PROFILE STORE CURRENCY SELECT   */
/* ============================================================== */
#prof-store-currency,
.clean-form-grid select {
    width: 100% !important;
    height: 42px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important; /* ⚡ Matches Phone Number rounded corners */
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#prof-store-currency:focus,
.clean-form-grid select:focus {
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* ============================================================== */
/* BULLETPROOF POS CART HEADER (HANDLES 1 TO 10,000+ ITEMS)         */
/* ============================================================== */
.pos-cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border-color) !important;
    gap: 8px !important;
}

.pos-cart-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.pos-cart-title h4 {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}

/* ⚡ Allow badge to flex-shrink if numbers get large (e.g. 1,000 Items) */
#pos-cart-items-count {
    font-size: 11px !important;
    padding: 3px 7px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.pos-cart-quick-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important; /* Never allows action buttons to be squished or pushed out */
}

.btn-cart-tool {
    padding: 4px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

/* Safety guard: Keep Admin Sidebar invisible if admin.css is not loaded */
.popup-sidebar-right {
    display: none !important;
}

/* SIDEBAR INSPECT BUTTON */
.admin-nav-item.admin-nav-inspect {
    background: #eff6ff !important;
    border: 1.5px solid #bfdbfe !important;
    color: var(--secondary) !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}
.admin-nav-item.admin-nav-inspect i {
    color: var(--secondary) !important;
}
.admin-nav-item.admin-nav-inspect:hover {
    background: var(--secondary) !important;
    color: #ffffff !important;
    border-color: var(--secondary) !important;
}
.admin-nav-item.admin-nav-inspect:hover i {
    color: #ffffff !important;
}

/* ============================================================== */
/* SLIDE-OUT STORE MANAGEMENT DRAWER & EXPANDED POS TERMINAL      */
/* ============================================================== */

/* 1. Compact POS Control Bar */
.pos-top-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pos-bar-left, .pos-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-store-badge {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pos-store-badge i { color: var(--primary); }

.pos-clock-pill {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, monospace;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================== */
/* DEDICATED SINGLE-LINE STORE BRANDING & LOCATION (ON TOP)       */
/* ============================================================== */
.pos-store-top-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 6px 4px;
    margin-bottom: 2px;
    width: 100%;
}

.store-top-strip-left {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.store-top-strip-left i.text-primary {
    font-size: 14px;
    color: var(--primary);
    flex-shrink: 0;
}

.strip-store-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}

.strip-divider {
    color: #cbd5e1;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.strip-loc-icon {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
}

.strip-store-address {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure the control bar below stays compact and never overflows */
.pos-top-control-bar {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    padding: 8px 16px !important;
}

/* Adjust cashier height calculation so screen never scrolls vertically */
body.cashier-mode-locked .pos-workspace-grid {
    height: calc(100vh - 145px) !important;
}

/* 2. Management Drawer Trigger Button */
.btn-store-drawer-trigger {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #1e293b;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.btn-store-drawer-trigger:hover {
    background: #eef2ff;
    color: var(--secondary);
    border-color: #c7d2fe;
    transform: translateY(-1px);
}

.btn-return-pos-pill {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    color: #059669;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.15s ease;
}
.btn-return-pos-pill:hover {
    background: #059669;
    color: #ffffff;
}

/* 3. Slide-Out Drawer Panel */
.store-drawer-right {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.18);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.store-drawer-right.open {
    right: 0 !important;
}

.store-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.drawer-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.drawer-title-group h4 {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.drawer-title-group small {
    font-size: 11.5px;
    color: #64748b;
}

.store-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-section-heading {
    font-size: 10.5px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.6px;
    padding: 14px 10px 4px 10px;
}

.drawer-nav-item {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.15s ease;
}

.drawer-nav-item i {
    font-size: 17px;
    color: #64748b;
    width: 22px;
    text-align: center;
}

.drawer-nav-item .nav-item-text strong {
    display: block;
    font-size: 13.5px;
    color: #0f172a;
}
.drawer-nav-item .nav-item-text small {
    font-size: 11px;
    color: #64748b;
}

.drawer-nav-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateX(-3px);
}

.drawer-nav-item.active-pos {
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
}
.drawer-nav-item.active-pos i { color: #059669; }

.drawer-nav-item.active {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}
.drawer-nav-item.active i { color: var(--secondary); }

.store-drawer-footer {
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
}

/* 4. EXPAND POS WORKSPACE HEIGHT (Full-screen immersion) */
.pos-workspace-grid {
    height: calc(100vh - 140px) !important;
    min-height: 600px !important;
}

#pos-cashier-pin-input {
    color: #0f172a !important;
    background-color: #ffffff !important;
    caret-color: #0f172a !important;
}

/* ============================================================== */
/* CLEAN CASHIER VIEW (HIDES TOP NAVBAR & KEEPS TENDER VISIBLE)   */
/* ============================================================== */

/* 1. HIDE the top master navbar completely when in cashier mode */
body.cashier-mode-locked .navbar {
    display: none !important;
}

/* 2. Lock outer window scrollbar completely without clipping content */
html:has(body.cashier-mode-locked),
body.cashier-mode-locked {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-color) !important;
}

/* 3. Hide the main window scrollbar track on WebKit/Chrome */
html:has(body.cashier-mode-locked)::-webkit-scrollbar,
body.cashier-mode-locked::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* 4. Main container stretches cleanly to fill the window with bottom breathing room */
body.cashier-mode-locked .app-wrapper {
    height: 100vh !important;
    max-height: 100vh !important;
    /* ⚡ Changed bottom padding to 18px for clean space above the taskbar */
    padding: 10px 16px 18px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.cashier-mode-locked .panel-container-1200 {
    margin: 0 auto !important;
    max-width: 1400px !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.cashier-mode-locked #owner-store-view,
body.cashier-mode-locked .store-workspace-viewport,
body.cashier-mode-locked .store-tab-pane.active {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 5. Top control bar spacing */
.pos-top-control-bar {
    margin-bottom: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* 6. Dynamic POS grid: Cart & Pay button are 100% anchored and visible */
.pos-workspace-grid {
    flex: 1 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 390px !important;
    gap: 14px !important;
    overflow: hidden !important;
}

/* 7. Product catalog scrolls internally if there are many items */
.pos-catalog-side {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.pos-product-cards-grid {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 16px !important;
}

/* 8. Cart panel stays pinned with Pay button always in view */
.pos-cart-side {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.pos-cart-items-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.pos-cart-summary {
    flex-shrink: 0 !important; /* Never allows Pay/Tender button to be pushed down */
}

/* Center the catalog loading state in the POS grid */
.pos-loading-state {
    grid-column: 1 / -1 !important; /* Spans full width of the grid */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 20px !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    gap: 12px !important;
}

.pos-loading-state i {
    font-size: 32px !important;
    color: var(--primary) !important; /* Brand Emerald Green */
}

/* UNIFIED SEGMENTED TIME PICKER */
.unified-time-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease !important;
}

.unified-time-box:focus-within {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

.time-seg-select {
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 2px !important;
    height: 36px !important;
}

.time-seg-colon {
    font-weight: 800 !important;
    color: #64748b !important;
    font-size: 15px !important;
    user-select: none !important;
}

.time-seg-ampm {
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: var(--secondary) !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
    outline: none !important;
}

/* AUTH SCREEN LANGUAGE TOGGLE PILLS */
.auth-lang-toggle-group {
    display: flex;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
}

.auth-lang-pill {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-lang-pill:hover {
    color: #ffffff;
}

.auth-lang-pill.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* AUTH SCREEN LANGUAGE TOGGLE PILLS (Clean Top-Right Floating Design) */
.auth-lang-toggle-group {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    z-index: 5;
}

.auth-lang-pill {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.auth-lang-pill:hover {
    color: #ffffff;
}

.auth-lang-pill.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ============================================================== */
/* ENTERPRISE MULTI-STAFF ANALYTICS (100+ SCALE, L1/L2, SCROLLBAR) */
/* ============================================================== */

/* Metrics in Left Sidebar */
.chart-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-metric-label-group {
    display: flex;
    flex-direction: column;
}
.chart-metric-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
}
.chart-metric-val {
    font-size: 17px;
    font-weight: 900;
    color: #0f172a;
    margin-top: 2px;
}
.chart-line-swatch-box {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-swatch-dashed {
    width: 26px;
    height: 3px;
    border-top: 3px dashed;
}

.staff-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.staff-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.5px;
}

/* Quick Search Input for 100+ Staff */
.staff-search-input {
    width: 100% !important;
    height: 32px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    outline: none !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
}
.staff-search-input:focus { border-color: #0051ba !important; background: #ffffff !important; }

/* "All Staff" Button */
.btn-all-staff {
    width: 100%;
    height: 36px;
    background: #f1f5f9;
    color: #334155;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}
.btn-all-staff.active {
    background: #0051ba;
    border-color: #0051ba;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(0, 81, 186, 0.25);
}

/* ⚡ DEDICATED SCROLLABLE STAFF CONTAINER (Supports 100+ Staff smoothly) */
.staff-list-box {
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overscroll-behavior: contain;
}

#staff-role {
    font-size: 12.5px !important;
    padding: 0 24px 0 10px !important;
    white-space: nowrap !important;
}

/* Sleek Modern Scrollbar */
.staff-list-box::-webkit-scrollbar {
    width: 6px;
}
.staff-list-box::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.staff-list-box::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
.staff-list-box::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.staff-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.staff-item:last-child { border-bottom: none; }
.staff-item:hover { background: #f8fafc; }
.staff-item.selected {
    background: #eff6ff;
    border-left: 4px solid #0051ba;
}

.staff-info-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

/* Line identifier badge (L1, L2, L3...) with color box */
.staff-line-badge {
    font-size: 10px;
    font-weight: 900;
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.staff-item-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini Toggle Switch */
.staff-toggle-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 15px;
    flex-shrink: 0;
}
.staff-toggle-switch input { opacity: 0; width: 0; height: 0; }
.staff-toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: #cbd5e1; border-radius: 20px; transition: 0.2s;
}
.staff-toggle-slider:before {
    position: absolute; content: ""; height: 11px; width: 11px; left: 2px; bottom: 2px;
    background: white; border-radius: 50%; transition: 0.2s;
}
.staff-toggle-switch input:checked + .staff-toggle-slider { background: #00A651; }
.staff-toggle-switch input:checked + .staff-toggle-slider:before { transform: translateX(13px); }

/* ⚡ DEAD-CENTER TITLE */
.chart-top-bar {
    position: relative;
    display: flex;
    justify-content: center; /* Horizontally centered */
    align-items: center;
    margin-bottom: 12px;
    min-height: 32px;
}
.chart-title {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    text-align: center;
    letter-spacing: -0.2px;
}
.chart-mode-pill {
    position: absolute;
    right: 0;
    font-size: 11.5px;
    font-weight: 700;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #bfdbfe;
}

.chart-viewport {
    flex: 1;
    position: relative;
    min-height: 370px;
}

/* ⚡ DYNAMIC TIMEFRAME BAR */
.timeframe-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1.5px dashed #e2e8f0;
    flex-wrap: wrap;
}

.time-presets-group { display: flex; gap: 6px; }
.btn-time {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 5px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s;
}
.btn-time:hover { background: #f1f5f9; color: #0f172a; }
.btn-time.active {
    background: #0051ba;
    color: #ffffff;
    border-color: #0051ba;
    box-shadow: 0 2px 6px rgba(0, 81, 186, 0.25);
}

.timeframe-divider { color: #cbd5e1; font-weight: 300; font-size: 14px; }

.custom-time-picker {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 2px 4px;
    gap: 4px;
}
.btn-step {
    width: 24px;
    height: 24px;
    border: none;
    background: #ffffff;
    border-radius: 4px;
    color: #0f172a;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.btn-step:hover { background: #e2e8f0; }

.time-number-input {
    width: 38px;
    height: 26px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    outline: none;
}

.time-unit-select {
    height: 28px;
    border: none;
    background: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    padding: 0 6px;
    outline: none;
    cursor: pointer;
    border: 1px solid #cbd5e1;
}

.btn-apply-dynamic {
    background: #00A651;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.15s;
}
.btn-apply-dynamic:hover { background: #008744; }

/* ============================================================== */
/* COMPACT POS CASHIER LANGUAGE TOGGLE PILL STYLING               */
/* ============================================================== */
.pos-lang-toggle-pill-group {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    padding: 2px;
    border-radius: 10px; /* Matches control bar buttons */
    height: 38px;
    box-sizing: border-box;
}

.pos-lang-pill-btn {
    background: transparent;
    border: none;
    color: #475569;
    font-size: 11.5px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pos-lang-pill-btn:hover {
    color: #0f172a;
}

.pos-lang-pill-btn.active {
    background: #0f172a; /* Sleek dark slate active state */
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Hide POS language toggle on full admin/owner pages by default to save space */
.pos-lang-toggle-pill-group {
    display: none !important;
}

/* Only show it when the screen is locked to cashier mode (navbar is hidden) */
body.cashier-mode-locked .pos-lang-toggle-pill-group {
    display: flex !important;
}

/* Sleek custom rounded scrollbar for attendance history table */
div[style*="max-height: 160px"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div[style*="max-height: 160px"]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 0 12px 12px 0;
}

div[style*="max-height: 160px"]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}

div[style*="max-height: 160px"]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================================== */
/* BARCODE STICKER LABEL PREVIEW & PRINT STYLING                  */
/* ============================================================== */
.barcode-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Outer Wrapper (Holds item guide name + sticker box) */
.barcode-sticker-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.barcode-sticker-wrapper.format-thermal-40x30 {
    width: 175px;
}
.barcode-sticker-wrapper.format-thermal-50x30 {
    width: 215px;
}
.barcode-sticker-wrapper.format-a4-sheet {
    width: 190px;
}

/* Guide Name ABOVE the barcode sticker (Full Multiline Display) */
.sticker-item-guide-name {
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
    
    /* ⚡ Allow full multiline wrapping so no words are cut off */
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: unset !important;

    /* Keeps all barcode cards aligned in a straight row */
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
}

.sticker-item-guide-name i {
    color: var(--secondary);
    font-size: 10px;
    margin-right: 4px;
    flex-shrink: 0;
}

/* The Pure Barcode Sticker Box */
.barcode-sticker-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 8px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #ffffff;
}

.sticker-barcode-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================== */
/* UNIFIED PRINT ENGINE (80mm RECEIPTS, BARCODE STICKERS & A4 P&L)*/
/* ============================================================== */
@media print {

    /* ========================================================== */
    /* 1. THERMAL CASHIER RECEIPT & Z-REPORT MODE (80mm ESC/POS)  */
    /* ========================================================== */
    body.print-mode-receipt {
        width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.print-mode-receipt > *:not(#thermal-receipt-printable) {
        display: none !important;
    }

    body.print-mode-receipt #thermal-receipt-printable {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        width: 72mm !important;          /* Standard 72mm printable width on 80mm rolls */
        margin: 0 auto !important;
        padding: 2mm 1mm 6mm 1mm !important; /* Bottom padding for auto-cutter */
        box-sizing: border-box !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 11.5px !important;
        color: #000000 !important;
        line-height: 1.4 !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-receipt #thermal-receipt-printable * {
        visibility: visible !important;
    }

    body.print-mode-receipt #thermal-receipt-printable table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 4px 0 !important;
    }

    body.print-mode-receipt #thermal-receipt-printable thead {
        display: table-header-group !important;
    }

    body.print-mode-receipt #thermal-receipt-printable tbody {
        display: table-row-group !important;
    }

    body.print-mode-receipt #thermal-receipt-printable tr {
        display: table-row !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-receipt #thermal-receipt-printable th,
    body.print-mode-receipt #thermal-receipt-printable td {
        display: table-cell !important;
        padding: 3px 0 !important;
        vertical-align: top !important;
        font-size: 11.5px !important;
    }

    /* ⚡ 4-Column Table proportions with clear gaps */
    body.print-mode-receipt #thermal-receipt-printable table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    body.print-mode-receipt #thermal-receipt-printable th:first-child,
    body.print-mode-receipt #thermal-receipt-printable td:first-child {
        text-align: left !important;
        width: 46% !important;
        word-break: break-word !important;
        white-space: normal !important;
        padding-right: 4px !important;
    }

    body.print-mode-receipt #thermal-receipt-printable th:nth-child(2),
    body.print-mode-receipt #thermal-receipt-printable td:nth-child(2) {
        text-align: center !important;
        width: 10% !important;
    }

    body.print-mode-receipt #thermal-receipt-printable th:nth-child(3),
    body.print-mode-receipt #thermal-receipt-printable td:nth-child(3) {
        text-align: right !important;
        width: 22% !important;
        white-space: nowrap !important;
        padding-right: 6px !important; /* ⚡ Creates visible gap before TOTAL */
    }

    body.print-mode-receipt #thermal-receipt-printable th:last-child,
    body.print-mode-receipt #thermal-receipt-printable td:last-child {
        text-align: right !important;
        width: 22% !important;
        white-space: nowrap !important;
        padding-left: 4px !important;
    }

    body.print-mode-receipt #thermal-receipt-printable div[style*="display: flex"],
    body.print-mode-receipt #thermal-receipt-printable div[style*="display:flex"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        line-height: 1.6 !important;
    }

    body.print-mode-receipt #thermal-receipt-printable div[style*="display: flex"] span,
    body.print-mode-receipt #thermal-receipt-printable div[style*="display:flex"] span {
        display: inline-block !important;
    }

    body.print-mode-receipt #thermal-receipt-printable strong {
        display: inline !important;
    }

    body.print-mode-receipt #thermal-receipt-printable svg {
        display: block !important;
        width: 100% !important;
    }

    /* ========================================================== */
    /* 2. BARCODE STICKERS MODE (A4 SHEET & THERMAL ROLLS)        */
    /* ========================================================== */
    body.print-mode-barcode {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    body.print-mode-barcode > *:not(#barcode-stickers-printable) {
        display: none !important;
    }

    body.print-mode-barcode #barcode-stickers-printable {
        display: flex !important;
        visibility: visible !important;
    }

    body.print-mode-barcode #barcode-stickers-printable * {
        visibility: visible !important;
    }

    body.print-mode-barcode #barcode-stickers-printable.print-a4 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3mm 4mm !important;
        width: 195mm !important;
        margin: 0 auto !important;
        padding: 8mm 4mm !important;
        box-sizing: border-box !important;
    }

    body.print-mode-barcode #barcode-stickers-printable.print-a4 .barcode-sticker-wrapper {
        width: 100% !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    body.print-mode-barcode #barcode-stickers-printable.print-a4 .barcode-sticker-card {
        border: 0.5px dashed #cbd5e1 !important;
        box-shadow: none !important;
        padding: 4px !important;
        background: #ffffff !important;
    }

    body.print-mode-barcode #barcode-stickers-printable.print-thermal {
        display: block !important;
        padding: 0 !important;
    }

    body.print-mode-barcode #barcode-stickers-printable.print-thermal .barcode-sticker-wrapper {
        margin: 0 auto 4mm auto !important;
        page-break-after: always !important;
        break-after: page !important;
    }

    /* ========================================================== */
    /* 3. P&L ANALYTICS STATEMENT (A4 CLEAN PRINT ENGINE)         */
    /* ========================================================== */
    body.print-mode-pnl {
        background: #ffffff !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 10mm 12mm 10mm 12mm;
    }

    /* 1. Hide all non-printable wrappers, navigation, and editing controls */
    body.print-mode-pnl #app-splash-screen,
    body.print-mode-pnl #auth-container,
    body.print-mode-pnl .navbar,
    body.print-mode-pnl .pos-top-control-bar,
    body.print-mode-pnl .pos-store-top-strip,
    body.print-mode-pnl #store-management-drawer,
    body.print-mode-pnl .sidebar-backdrop,
    body.print-mode-pnl .modal-backdrop,
    body.print-mode-pnl .thermal-receipt-print-area,
    body.print-mode-pnl .barcode-print-only-area,
    body.print-mode-pnl #tab-pos-register,
    body.print-mode-pnl #tab-inventory-stock,
    body.print-mode-pnl #tab-suppliers-freight,
    body.print-mode-pnl #tab-staff-shifts,
    body.print-mode-pnl #tab-capital-expenses,
    body.print-mode-pnl #tab-attendance-hub,
    body.print-mode-pnl #admin-popup-sidebar,
    body.print-mode-pnl .admin-panel:not(#owner-store-view),
    body.print-mode-pnl [style*="border: 1.5px solid var(--border-color); padding: 12px 16px; border-radius: 12px;"], /* Hides date filter toolbar & Print button */
    body.print-mode-pnl #btn-save-revenue-goal, /* Hides the save button */
    body.print-mode-pnl #input-monthly-rev-goal { /* Hides the raw input */
        display: none !important;
    }

    /* 2. Unclamp all width constraints so everything stays strictly inside the paper margins */
    body.print-mode-pnl #main-app,
    body.print-mode-pnl .panel-container-1200,
    body.print-mode-pnl #owner-store-view,
    body.print-mode-pnl .store-workspace-viewport,
    body.print-mode-pnl #tab-pnl-analytics {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Top 4 KPI Stat Boxes */
    body.print-mode-pnl .ticket-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-pnl .stat-card-dark {
        padding: 8px 10px !important;
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 68px !important; /* Ensures all 4 cards stay uniform height */
    }

    /* ⚡ FIX: Allow multi-line text wrapping for Myanmar titles so no words are cut off */
    body.print-mode-pnl .stat-card-title {
        white-space: normal !important;        /* Allows wrapping to 2 lines */
        overflow: visible !important;          /* Shows full text */
        text-overflow: unset !important;       /* Removes clipping */
        font-size: 10px !important;            /* Clean, readable size */
        line-height: 1.35 !important;
        word-break: break-word !important;
        height: auto !important;
    }

    body.print-mode-pnl .stat-card-dark h3 {
        font-size: 14px !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
    }

    /* 4. Charts Grid (Display side-by-side cleanly scaled to fit within page width) */
    body.print-mode-pnl .analytics-charts-grid {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-pnl .analytics-card {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    body.print-mode-pnl .chart-canvas-wrap {
        height: 190px !important;
        max-height: 190px !important;
        width: 100% !important;
    }

    body.print-mode-pnl canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 5. Target Budget Pacing Card */
    body.print-mode-pnl [style*="border-radius: 12px;"][style*="background: #f8fafc;"],
    body.print-mode-pnl [style*="border-radius: 12px;"][style*="background: #ffffff;"] {
        padding: 10px 14px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-pnl .ticket-stats-grid[style*="repeat(3, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    /* 6. P&L Formal Income Statement Table */
    body.print-mode-pnl .table-card-container {
        width: 100% !important;
        max-width: 100% !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        page-break-inside: avoid !important;
    }

    body.print-mode-pnl .table-card-container table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

    body.print-mode-pnl .table-card-container th,
    body.print-mode-pnl .table-card-container td {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
}

/* ============================================================== */
/* INVENTORY TABLE PAGINATION BAR (FIXED COMPACT ALIGNMENT)       */
/* ============================================================== */
.inv-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    font-size: 13px;
    color: #475569;
    flex-wrap: wrap;
    gap: 16px;
}

/* ============================================================== */
/* FUSE TABLE AND PAGINATION FOOTER INTO ONE SEAMLESS CARD        */
/* ============================================================== */

/* 1. Flatten the bottom corners of the table container */
.table-card-container {
    border-bottom: 1px solid var(--border-color) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
}

/* 2. Seamlessly attach the pagination bar to the bottom of the table */
.inv-pagination-bar {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    margin-top: 0 !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
}

/* 3. Sleek thin 5px scrollbar so it doesn't look like an ugly thick divider */
.table-card-container::-webkit-scrollbar {
    height: 8px !important;
}
.table-card-container::-webkit-scrollbar-track {
    background: #f8fafc !important;
}
.table-card-container::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}
.table-card-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* ⚡ 1. Prevents text from squishing into vertical 3-line stacks */
.inv-pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.inv-pagination-left span {
    white-space: nowrap !important;
}

/* ⚡ 2. Overrides global 100% width, stops digit clipping, and sizes to a neat 68px */
.inv-page-size-select {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 34px !important;
    
    /* Zero vertical padding prevents the bottom of numbers (1, 0, 5) from being cut off */
    padding: 0 22px 0 10px !important;
    line-height: 34px !important;
    
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    outline: none !important;
}

.inv-page-size-select:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

.inv-pagination-divider {
    color: #cbd5e1;
    margin: 0 4px;
}

.inv-pagination-info {
    color: #64748b;
    font-weight: 600;
}

.inv-pagination-right {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.inv-page-nav-btn {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.inv-page-nav-btn:not(:disabled):hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
}

.inv-page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}

.inv-page-numbers-list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inv-page-num-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.inv-page-num-btn:hover {
    background: #f1f5f9;
    border-color: var(--secondary);
    color: var(--secondary);
}

.inv-page-num-btn.active {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 81, 186, 0.25);
}

/* ============================================================== */
/* STAFF MODAL: FIXED MARGINS & INTERNAL SCROLLBAR                */
/* ============================================================== */
#modal-staff-backdrop .dark-modal-box {
    width: 680px !important;
    max-width: 94vw !important;
    max-height: 88vh !important;       /* ⚡ Never touches the screen ends */
    margin: auto !important;           /* ⚡ Centers with clean breathing room */
    display: flex !important;
    flex-direction: column !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

#modal-staff-backdrop .dark-modal-header {
    flex-shrink: 0 !important;
    padding: 18px 24px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid var(--border-color) !important;
}

#modal-staff-backdrop .dark-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;       /* ⚡ Smooth scrollbar inside the form */
    padding: 20px 24px !important;
    max-height: none !important;
}

#modal-staff-backdrop .dark-modal-footer {
    flex-shrink: 0 !important;
    padding: 14px 24px !important;
    background: #f8fafc !important;
    border-top: 1.5px solid var(--border-color) !important;
    margin-top: 0 !important;
}

/* Service Modal Preset Chips */
.service-preset-chip {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.15s;
}
.service-preset-chip:hover {
    background: #eff6ff;
    color: var(--secondary);
    border-color: #bfdbfe;
}

/* ============================================================== */
/* PRICE ADJUSTMENT PANEL STYLING                                 */
/* ============================================================== */
.price-dir-btn {
    background: transparent;
    border: none;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s ease;
}

.price-dir-btn.active[data-dir="increase"] {
    background: #ecfdf5;
    color: #065f46;
}

.price-dir-btn.active[data-dir="decrease"] {
    background: #fef2f2;
    color: #991b1b;
}

.margin-pill-good {
    color: #059669;
    font-weight: 800;
}

.margin-pill-warning {
    color: #d97706;
    font-weight: 800;
}

.margin-pill-danger {
    color: #dc2626;
    font-weight: 900;
    background: #fee2e2;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ============================================================== */
/* FORCE PRICE ADJUSTMENT MODAL TO 1200px WIDTH                   */
/* ============================================================== */
.dark-modal-box.price-adjust-wide-box {
    width: 1200px !important;
    max-width: 95vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.dark-modal-box.price-adjust-wide-box .dark-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 0 !important;
}
/* ============================================================== */
/* FIX PRICING MODAL DROPDOWN VERTICAL TEXT CLIPPING              */
/* ============================================================== */
#modal-price-adjust-backdrop .dark-select-input {
    height: 42px !important;              /* ⚡ Slightly taller height (42px) */
    line-height: 40px !important;         /* ⚡ Centers text vertically */
    padding: 0 30px 0 12px !important;    /* ⚡ Zero out vertical padding */
    font-size: 13px !important;
}

/* ============================================================== */
/* INTERACTIVE ZOOMABLE SHIFT TIMETABLE CALENDAR                  */
/* ============================================================== */
.shift-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    width: 100%;
}

/* ============================================================== */
/* CALENDAR CELL & MULTI-LINE SHIFT CARD STYLING                 */
/* ============================================================== */
.cal-day-cell {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    min-height: 125px; /* Ample room for cards */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: 0.15s ease;
    box-sizing: border-box;
}

.cal-day-cell:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.cal-day-cell.today {
    border-color: #00A651;
    background: #f0fdf4;
}

.cal-day-shifts-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 130px; /* Clean scroll if multiple staff on same day */
    padding-right: 2px;
}

/* ============================================================== */
/* SHIFT CARD: VERTICAL STACK (NAME -> ID -> TIME)                */
/* ============================================================== */
.cal-shift-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-left: 4px solid var(--secondary);
    border-radius: 7px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.cal-shift-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 3px 10px rgba(0, 81, 186, 0.12);
    transform: translateY(-1px);
    background: #f8fafc;
}

/* 1. Staff Name */
.shift-staff-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* 2. Staff ID Row (Directly below Name) */
.shift-staff-id-row {
    display: flex;
    align-items: center;
}

.shift-staff-id-badge {
    font-size: 9.5px;
    font-family: ui-monospace, monospace;
    font-weight: 800;
    color: var(--secondary);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.shift-staff-id-badge i {
    font-size: 9px;
}

/* 3. Shift Time */
.shift-card-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #475569;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
    background: #f8fafc;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}

.shift-card-time i {
    font-size: 9.5px;
    color: var(--secondary);
    flex-shrink: 0;
}

/* Bottom Actions Row: Bigger & Accessible */
.shift-card-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed #e2e8f0;
    margin-top: 2px;
}

/* Bigger, Touch-Friendly Action Buttons */
.btn-shift-tool {
    height: 26px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

/* Edit Pill Button */
.btn-shift-tool.edit {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: var(--secondary);
    padding: 0 10px;
}

.btn-shift-tool.edit:hover {
    background: var(--secondary);
    color: #ffffff;
    border-color: var(--secondary);
}

/* Delete Square Button */
.btn-shift-tool.del {
    width: 26px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0;
}

.btn-shift-tool.del:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}


/* ============================================================== */
/* FIX P&L TIME RANGE DROPDOWN TEXT TRUNCATION                    */
/* ============================================================== */
#pnl-time-range {
    width: auto !important;
    min-width: 190px !important;
    max-width: 220px !important;
    height: 38px !important;
    padding: 0 28px 0 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    outline: none !important;
}

#pnl-time-range:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

/* ============================================================== */
/* FIX: PREVENT MYANMAR FONT CLIPPING IN SALES MODAL DROPDOWNS    */
/* ============================================================== */
#sales-filter-preset,
#sales-filter-cashier {
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 28px 0 12px !important; /* Zero top/bottom padding gives full vertical room for Myanmar descenders */
    font-size: 13px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

/* Also ensure all select inputs have proper padding when Myanmar font is active */
body.lang-my select.dark-select-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
}

/* ============================================================== */
/* FIX: UNIFORM DROPDOWN & BUTTON ALIGNMENT IN STAFF MODAL        */
/* ============================================================== */
#modal-staff-backdrop .dark-field > div[style*="display: flex"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

#staff-role,
#staff-wage-type {
    flex: 1 1 0% !important;       /* Forces equal flex-share regardless of text length */
    width: 0 !important;           /* Prevents long text from blowing out the width */
    min-width: 0 !important;       /* Critical for flex items containing long options */
    height: 42px !important;
    line-height: 40px !important;
    padding: 0 28px 0 12px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#modal-staff-backdrop .btn-fw-mini {
    height: 42px !important;       /* Matches the 42px height of input fields */
    width: 42px !important;        /* Neat square plus button */
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* ============================================================== */
/* 6-BOX ATTENDANCE KPI GRID RESPONSIVENESS                       */
/* ============================================================== */
.att-stats-6-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
}

.att-stats-6-grid .stat-card-dark {
    padding: 14px 16px !important;
}

.att-stats-6-grid .stat-card-title {
    font-size: 10.5px !important;
    letter-spacing: 0.3px !important;
}

.att-stats-6-grid h3 {
    font-size: 18px !important;
    font-weight: 900 !important;
    margin-top: 4px !important;
}

/* Tablet & Smaller Screens */
@media (max-width: 1100px) {
    .att-stats-6-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 650px) {
    .att-stats-6-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================== */
/* STAFF ID POLICY TOOLBAR (SLEEK NO-WRAP 1-LINE DESIGN)          */
/* ============================================================== */
.staff-id-policy-card {
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.policy-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.policy-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ecfdf5;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    border: 1px solid #a7f3d0;
}

.policy-card-info h5 {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
}

.policy-card-info p {
    font-size: 11.5px;
    color: #64748b;
    margin: 2px 0 0 0;
    white-space: nowrap;
}

.policy-card-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.policy-control-item {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    height: 38px;
    box-sizing: border-box;
    gap: 8px;
}

.policy-control-item label {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin: 0;
}

.policy-control-item input,
.policy-control-item select {
    border: none !important;
    background: transparent !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    outline: none !important;
    height: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer;
}

#setting-staff-id-prefix {
    width: 55px !important;
    text-align: center;
    text-transform: uppercase;
    color: var(--secondary) !important;
}

#setting-staff-id-digits {
    width: 90px !important;
}

#setting-staff-id-mode {
    width: 120px !important;
}

.staff-id-policy-card .btn-cloud-save {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

/* Tablet auto-stacking when screen width shrinks below 1100px */
@media (max-width: 1100px) {
    .staff-id-policy-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .policy-card-controls {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ============================================================== */
/* ASSIGN STAFF SHIFT MODAL STYLING & TEXT FIT                    */
/* ============================================================== */
#modal-assign-shift-backdrop .dark-modal-box {
    width: 500px !important;
    max-width: 94vw !important;
    border-radius: 16px !important;
}

#assign-shift-staff-select {
    width: 100% !important;
    height: 42px !important;
    line-height: 40px !important;
    padding: 0 32px 0 12px !important; /* Extra right padding prevents text from touching arrow */
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#assign-shift-staff-select:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}

#assign-shift-date,
#assign-shift-type {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

#assign-shift-date:focus,
#assign-shift-type:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0, 81, 186, 0.12) !important;
}