* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        body { background: #edf0f3; }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: url('../../../covid.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }
        .login-container.no-image { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .login-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 0; }
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 24px;
            text-align: center;
            width: 350px;
            z-index: 1;
            box-shadow: 0 20px 35px rgba(0,0,0,0.3);
            animation: fadeInUp 0.5s ease-out;
            border: 1px solid rgba(255,255,255,0.2);
        }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .subtitle { color: #7f8c8d; margin-bottom: 1.5rem; }
        .admin-tag { background: linear-gradient(135deg, #e67e22, #d35400); color: white; padding: 6px 12px; border-radius: 30px; font-size: 12px; display: inline-block; margin-bottom: 1rem; font-weight: 600; }
        .admin-tag i { margin-right: 6px; }
        .login-input { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 12px; font-size: 14px; }
        .login-input:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 0 3px rgba(230,126,34,0.1); }
        .login-btn { width: 100%; background: linear-gradient(135deg, #e67e22, #d35400); color: white; border: none; padding: 12px; border-radius: 40px; font-weight: bold; cursor: pointer; margin-top: 12px; transition: all 0.3s; }
        .login-btn:hover { background: #d35400; transform: scale(1.02); box-shadow: 0 5px 15px rgba(230,126,34,0.4); }
        .admin-login-logo { display: block; width: 120px; height: 90px; object-fit: contain; margin: 0 auto 10px; }
        .navbar { background: #161d27; padding: 12px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,.28); border-bottom: 1px solid #303a48; }
        .nav-brand { font-size: 1.5rem; font-weight: 800; color: #f3f4f6; display: flex; align-items: center; gap: 12px; }
        .nav-brand img { width: 52px; height: 42px; object-fit: contain; }
        .brand-accent { color: #e67e22; }
        .nav-right { display: flex; align-items: center; gap: 14px; }
        .bell-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border: 1px solid #3b4655;
            border-radius: 14px;
            background: #202936;
            box-shadow: 0 3px 12px rgba(0,0,0,.18);
            cursor: pointer;
            color: #d1d9e2;
            font-size: 1.1rem;
            transition: background .2s, border-color .2s, color .2s, transform .2s;
        }
        .bell-icon:hover, .bell-icon[aria-expanded="true"] { transform: translateY(-1px); border-color: #a85d25; background: #33291f; color: #ffb36c; }
        .bell-icon:focus-visible { outline: 3px solid rgba(230,126,34,.4); outline-offset: 2px; }
        .admin-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #3b4655; border-radius: 12px; background: #202936; color: #d1d9e2; cursor: pointer; font-size: 1rem; transition: background .2s, border-color .2s, color .2s; }
        .admin-menu-toggle:hover, .admin-menu-toggle[aria-expanded="true"] { border-color: #a85d25; background: #33291f; color: #ffb36c; }
        .admin-menu-toggle:focus-visible, .admin-menu-close:focus-visible { outline: 3px solid rgba(230,126,34,.4); outline-offset: 2px; }
        .admin-menu-modal { position: fixed; inset: 0; z-index: 500; display: none; background: rgba(7,12,20,.68); }
        .admin-menu-modal.is-open { display: flex; }
        .admin-menu-dialog { display: flex; flex-direction: column; gap: 16px; width: min(330px, calc(100vw - 40px)); height: 100%; padding: 22px 16px; background: #161d27; color: #f3f4f6; box-shadow: 14px 0 40px rgba(0,0,0,.42); animation: adminMenuIn .2s ease-out; }
        @keyframes adminMenuIn { from { opacity: .7; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
        .admin-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 14px; border-bottom: 1px solid #303a48; color: #f3f4f6; font-size: 1.05rem; }
        .admin-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #3b4655; border-radius: 10px; background: #202936; color: #cbd5e1; cursor: pointer; font-size: 1rem; }
        .admin-menu-close:hover { border-color: #e67e22; background: #2a3442; color: #ffb36c; }
        .admin-menu-items { display: grid; gap: 5px; overflow-y: auto; scrollbar-color: #475569 #161d27; }
        .admin-menu-items .menu-item { flex-direction: row; justify-content: flex-start; gap: 13px; width: 100%; min-height: 48px; padding: 10px 12px; margin: 0; border-radius: 11px; text-align: left; font-size: 14px; }
        .admin-menu-items .menu-item i { width: 20px; font-size: 16px; }
        .bell-badge { position: absolute; top: -5px; right: -5px; color: #d1d9e2; font-size: 10px; font-weight: 700; }
        .notifications-dropdown { position: absolute; top: 58px; right: 104px; width: min(400px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 90px)); background: white; border: 1px solid #e6ebef; border-radius: 18px; box-shadow: 0 20px 55px rgba(24,39,56,.2); z-index: 200; display: none; overflow: hidden; }
        .notifications-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #f0e4d8; font-weight: 750; color: #2d3b49; background: linear-gradient(135deg,#fff7ed,#fff); }
        .notifications-heading { display: grid; gap: 3px; }
        .notifications-heading small { color: #818b95; font-size: 11px; font-weight: 500; }
        .live-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; border-radius: 20px; background: #eaf8ef; color: #25834a; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
        .live-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2eaf62; box-shadow: 0 0 0 3px rgba(46,175,98,.12); animation: livePulse 1.8s ease-in-out infinite; }
        .clear-updates-btn { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #f0d6c1; border-radius: 9px; background: #fff; color: #a94705; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
        .clear-updates-btn:hover:not(:disabled) { border-color: #e9b184; background: #fff1e5; color: #873904; }
        .clear-updates-btn:focus-visible { outline: 3px solid rgba(230,126,34,.35); outline-offset: 2px; }
        .clear-updates-btn:disabled { opacity: .55; cursor: not-allowed; }
        @keyframes livePulse { 50% { box-shadow: 0 0 0 5px rgba(46,175,98,0); } }
        .notifications-list { max-height: min(420px, calc(100vh - 170px)); overflow-y: auto; scrollbar-color: #cbd5dc #f4f6f8; scrollbar-width: thin; }
        .notification-item { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid #f1f3f5; border-left: 3px solid transparent; background: #fff; color: inherit; display: flex; align-items: flex-start; gap: 12px; font: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
        .notification-item:hover { background: #fbfcfd; }
        .notification-item.status-pending { border-left-color: #e8a321; }
        .notification-item.status-confirmed, .notification-item.status-completed { border-left-color: #35a567; }
        .notification-item.status-processing { border-left-color: #5595d8; }
        .notification-item.status-shipped { border-left-color: #26a69a; }
        .notification-item.status-cancelled, .notification-item.status-denied { border-left-color: #dd554d; }
        .notification-item .notif-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; min-height: 36px; border-radius: 11px; background: #f4f6f8; font-size: 1.1rem; }
        .notification-item.status-pending .notif-icon { background: #fff4db; }
        .notification-item.status-confirmed .notif-icon, .notification-item.status-completed .notif-icon { background: #e8f8ef; }
        .notification-item.status-processing .notif-icon { background: #eaf3ff; }
        .notification-item.status-shipped .notif-icon { background: #e5f8f5; }
        .notification-item.status-cancelled .notif-icon, .notification-item.status-denied .notif-icon { background: #fff0ef; }
        .notification-item .notif-text { flex: 1; min-width: 0; font-size: 13px; color: #2c3e50; line-height: 1.5; overflow-wrap: anywhere; }
        .notification-item .notif-msg { font-size: 12px; color: #596773; margin-top: 7px; padding: 8px 10px; background: #f7f8fa; border-left: 2px solid #e67e22; border-radius: 0 8px 8px 0; font-style: italic; }
        .notification-item .notif-time { display: block; margin-top: 6px; font-size: 10px; color: #95a5a6; }
        .empty-notifications { padding: 36px 24px; text-align: center; color: #7f8c8d; font-size: 13px; }
        .empty-notifications i { display: block; margin-bottom: 10px; color: #e6a46e; font-size: 24px; }
        .logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; border: 1px solid #65403e; background: #2a252a; font-weight: 700; cursor: pointer; color: #ffaaa3; font-size: .9rem; padding: 0 15px; border-radius: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.16); transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; }
        .logout-btn:hover { transform: translateY(-1px); border-color: #a54b44; background: #392629; color: #ffc0ba; box-shadow: 0 6px 16px rgba(0,0,0,.24); }
        .logout-btn:active { transform: translateY(0); }
        .logout-btn:focus-visible { outline: 3px solid rgba(231,76,60,.3); outline-offset: 2px; }
        .logout-btn:disabled { opacity: .65; cursor: wait; transform: none; }

        .app-wrapper { display: block; }
        .menu-item { min-width: 0; padding: 8px 4px; display: flex; align-items: center; cursor: pointer; border: 1px solid transparent; background: transparent; color: #657381; transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s; font-size: 13px; font-weight: 600; line-height: 1.15; }
        .menu-item i { transition: transform 0.2s; }
        .menu-item:hover { background: #f7f8fa; color: #d35400; }
        .menu-item:focus-visible { outline: 3px solid rgba(230,126,34,0.45); outline-offset: 1px; }
        .menu-item.active { background: #fff3e6; border-color: #ffe0bd; color: #d35400; box-shadow: 0 2px 8px rgba(230,126,34,0.12); }
        .menu-item.active i { transform: translateY(-1px); }
        .admin-menu-items .menu-item { color: #cbd5e1; }
        .admin-menu-items .menu-item:hover { border-color: #3b4655; background: #242e3b; color: #ffb36c; }
        .admin-menu-items .menu-item.active { border-color: #7a421b; background: #3a2b21; color: #ffb36c; box-shadow: inset 3px 0 #e67e22; }
        .admin-menu-items .menu-item.active i { color: #ff9b42; }
        .admin-menu-items .menu-item:focus-visible { outline-color: rgba(255,179,108,.75); }

        .main-content {
            max-width: 1440px;
            margin: 0 auto;
            padding: 24px 32px 28px;
            overflow-y: auto;
            max-height: calc(100vh - 72px);
        }
        .page-title { margin-bottom: 24px; font-size: 1.6rem; }

        /* ============================================================
           DASHBOARD — MATCHES THE REFERENCE SCREENSHOT
           ============================================================ */
        .dashboard-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin: 0 0 20px;
            padding: 20px 24px;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: linear-gradient(115deg, #fff 0%, #fffaf5 100%);
            box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
        }
        .dashboard-heading-copy { min-width: 0; }
        .dashboard-heading .page-title {
            margin: 0;
            font-size: clamp(1.7rem, 2vw, 2.15rem);
            font-weight: 800;
            color: #182230;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .dashboard-heading .page-title i {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: #fff1e4;
            color: #d66a18;
            font-size: 19px;
        }
        .dashboard-subtitle { display: block; margin-top: 6px; color: #748091; font-size: 13px; line-height: 1.5; }
        .dashboard-heading-meta { display: flex; align-items: center; justify-items: end; gap: 12px; }
        .dashboard-date { display: block; color: #697586; font-size: 12px; font-weight: 600; text-align: right; }
        .dashboard-report-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            padding: 10px 15px;
            border: 1px solid #df6d1a;
            border-radius: 12px;
            background: linear-gradient(135deg, #ed852c, #d65d0d);
            box-shadow: 0 6px 14px rgba(211, 84, 0, .17);
            color: #fff;
            font-size: 12px;
            font-weight: 750;
            text-decoration: none;
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .dashboard-report-link:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(211,84,0,.22); }
        .dashboard-report-link:focus-visible { outline: 3px solid rgba(230,126,34,.35); outline-offset: 2px; }

        /* --- Stat cards --- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 18px;
        }
        .stat-card {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
            min-height: 106px;
            padding: 17px 18px;
            overflow: hidden;
            border: 1px solid #e7eaf0;
            border-radius: 17px;
            background: #fff;
            box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
            transition: transform .18s ease, box-shadow .18s ease;
        }
        .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.08); }
        .stat-icon {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            border-radius: 14px;
            font-size: 24px;
        }
        .stat-icon.blue { background: #eaf4ff; color: #2f74b7; }
        .stat-icon.orange { background: #fff1e3; color: #d96a18; }
        .stat-icon.green { background: #eafaf0; color: #2fa467; }
        .stat-icon.red { background: #fff0ee; color: #d55a4f; }
        .stat-info { min-width: 0; }
        .stat-info h3 { margin: 0 0 7px; color: #697586; font-size: 12px; font-weight: 650; }
        .stat-info p {
            overflow-wrap: anywhere;
            color: #111827;
            font-size: clamp(24px, 2.2vw, 34px);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }
        .stat-info span { display: block; margin-top: 5px; color: #929baa; font-size: 10px; font-weight: 550; }

        /* --- Charts --- */
        .charts-horizontal {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-top: 0;
            min-height: 0;
        }
        .chart-card {
            min-width: 0;
            padding: 16px 16px 12px;
            border: 1px solid #e7eaf0;
            border-radius: 17px;
            background: #fff;
            box-shadow: 0 5px 16px rgba(15, 23, 42, .045);
        }
        .chart-card h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 12px;
            color: #253041;
            font-size: 13px;
            font-weight: 700;
        }
        .chart-card h3 i { color: #d66a18; }
        .chart-card canvas {
            display: block;
            width: 100%;
            max-height: 260px;
            height: 220px !important;
        }
        .chart-info { margin-top: 8px; color: #8993a1; font-size: 10px; text-align: right; }

        @media (max-width: 1100px) {
            .charts-horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .charts-horizontal .chart-card:first-child { grid-column: 1 / -1; }
            .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 700px) {
            .dashboard-heading { align-items: flex-start; flex-direction: column; padding: 17px; }
            .dashboard-heading-meta { width: 100%; justify-content: space-between; justify-items: start; }
            .dashboard-date { text-align: left; }
            .dashboard-report-link { width: auto; justify-content: center; }
            .charts-horizontal { grid-template-columns: minmax(0, 1fr); }
            .charts-horizontal .chart-card:first-child { grid-column: auto; }
        }
        .dashboard-no-scroll { overflow: hidden; }
        .dashboard-no-scroll .main-content {
            height: calc(100vh - var(--dashboard-navbar-height, 72px));
            height: calc(100dvh - var(--dashboard-navbar-height, 72px));
            min-height: 0;
            max-height: none;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .dashboard-no-scroll #dashboardPage {
            display: grid !important;
            grid-template-rows: auto auto minmax(300px, 1fr);
            gap: 14px;
            min-height: 100%;
            overflow: visible;
        }
        .dashboard-no-scroll .dashboard-heading { margin: 0; }
        .dashboard-no-scroll .stats-grid { min-height: 0; margin: 0; }
        .dashboard-no-scroll .stat-card { min-height: 0; }
        .dashboard-no-scroll .charts-horizontal {
            min-height: 0;
            align-items: stretch;
            overflow: visible;
        }
        .dashboard-no-scroll .chart-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: visible;
        }
        .dashboard-no-scroll .chart-card canvas {
            flex: 1 1 auto;
            min-height: 150px;
            max-height: none;
        }
        .dashboard-no-scroll .chart-card canvas { max-height: none; }
        @media (max-width: 700px) {
            .dashboard-no-scroll #dashboardPage { grid-template-rows: auto auto auto; }
            .dashboard-no-scroll .dashboard-heading { flex-direction: column; align-items: flex-start; }
            .dashboard-no-scroll .dashboard-heading-meta { width: 100%; justify-items: start; }
            .dashboard-no-scroll .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .dashboard-no-scroll .stat-card { gap: 9px; min-height: 82px; padding: 11px; }
            .dashboard-no-scroll .stat-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
            .dashboard-no-scroll .stat-info h3 { margin-bottom: 5px; font-size: 10px; }
            .dashboard-no-scroll .stat-info p { font-size: 18px; }
            .dashboard-no-scroll .stat-info span { display: block; font-size: 9px; }
            .dashboard-no-scroll .charts-horizontal { grid-template-columns: minmax(0, 1fr); }
            .dashboard-no-scroll .charts-horizontal .chart-card:first-child { grid-column: auto; }
            .dashboard-no-scroll .chart-card { padding: 11px; }
            .dashboard-no-scroll .chart-card h3 { margin-bottom: 7px; font-size: 11px; }
            .dashboard-no-scroll .chart-info { margin-top: 4px; font-size: 9px; }
        }
        @media (max-width: 420px) {
            .dashboard-no-scroll .main-content { padding: 10px 8px; }
            .dashboard-no-scroll #dashboardPage { gap: 8px; }
            .dashboard-no-scroll .dashboard-heading .page-title { font-size: 18px; }
            .dashboard-no-scroll .dashboard-heading .page-title i { width: 34px; height: 34px; font-size: 15px; }
            .dashboard-no-scroll .dashboard-date { font-size: 9px; }
            .dashboard-no-scroll .dashboard-report-link { min-height: 32px; padding: 7px 8px; font-size: 10px; }
            .dashboard-no-scroll .stat-card { gap: 6px; padding: 8px; }
            .dashboard-no-scroll .stat-icon { width: 28px; height: 28px; flex-basis: 28px; }
            .dashboard-no-scroll .stat-info p { font-size: 15px; }
            .dashboard-no-scroll .charts-horizontal { gap: 8px; }
            .dashboard-no-scroll .chart-card { padding: 8px; }
            .dashboard-no-scroll .chart-card h3 { font-size: 10px; }
        }

        .top-selling-admin-card { margin-top: 20px; }
        .top-selling-admin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
        .top-selling-admin-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #e7ebef; border-radius: 12px; background: #fff; }
        .top-selling-admin-rank { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #fff1e5; color: #bd580e; font-size: 12px; font-weight: 800; }
        .top-selling-admin-image { width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid #e3e8ed; border-radius: 10px; background: #f6f8fa; object-fit: cover; }
        .top-selling-admin-details { min-width: 0; flex: 1; }
        .top-selling-admin-details strong { display: block; overflow-wrap: anywhere; color: #293744; font-size: 13px; }
        .top-selling-admin-details span { display: block; margin-top: 4px; color: #73808c; font-size: 11px; }
        .top-selling-admin-quantity { white-space: nowrap; color: #287a4a; font-size: 12px; font-weight: 700; }
        .top-selling-admin-empty { padding: 22px; border: 1px dashed #ccd4dc; border-radius: 12px; color: #788592; text-align: center; }

        .form-card, .table-card, .alert-card { background: white; border-radius: 24px; padding: 20px; margin-bottom: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
        .form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: center; }
        .form-input { flex: 1; padding: 12px; border-radius: 40px; border: 1px solid #ddd; outline: none; font-size: 14px; min-width: 140px; }
        .form-input:focus { border-color: #e67e22; }

        .btn-primary, .btn-success, .btn-csv, .btn-txt, .btn-status, .btn-confirm, .btn-deny { padding: 12px 24px; border: none; border-radius: 40px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-size: 14px; }
        .btn-primary { background: #e67e22; color: white; }
        .btn-success { background: #27ae60; color: white; }
        .btn-csv { background: #2c3e50; color: white; }
        .btn-txt { background: #3498db; color: white; }
        .btn-status { background: #8e44ad; color: white; }
        .btn-confirm { background: #27ae60; color: white; padding: 4px 12px; font-size: 11px; }
        .btn-deny { background: #e74c3c; color: white; padding: 4px 12px; font-size: 11px; }
        .btn-primary:hover, .btn-success:hover { opacity: 0.9; transform: scale(1.02); }
        .btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table th, .data-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #ecf0f1; vertical-align: middle; }
        .data-table th { background: #f8f9fa; font-weight: 600; color: #2c3e50; position: sticky; top: 0; z-index: 5; }
        .inventory-list-card { padding: 0; overflow: hidden; }
        .inventory-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid #edf0f3; }
        .inventory-list-heading h3 { margin: 0; color: #253544; font-size: 16px; }
        .inventory-list-heading h3 i { margin-right: 8px; color: #d96a18; }
        .inventory-count { padding: 5px 10px; border-radius: 20px; background: #fff3e8; color: #aa4d0d; font-size: 12px; font-weight: 700; white-space: nowrap; }
        .inventory-list-card .table-wrapper { padding: 0 14px; }
        .inventory-table { min-width: 880px; }
        .inventory-table th { padding: 13px 12px; background: #f7f9fb; color: #74808c; font-size: 11px; letter-spacing: .045em; text-transform: uppercase; }
        .inventory-table td { padding: 12px; color: #43515e; }
        .inventory-table tbody tr { transition: background .16s ease; }
        .inventory-table tbody tr:nth-child(even) { background: #fbfcfd; }
        .inventory-table tbody tr:hover { background: #fff8f1; }
        .inventory-table .inventory-product-name { color: #273746; font-size: 13px; }
        .inventory-table .inventory-price { color: #273746; font-weight: 700; white-space: nowrap; }
        .inventory-table .product-img-thumb { width: 54px; height: 54px; border-radius: 12px; }
        .inventory-stock-badge, .inventory-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
        .inventory-stock-badge { background: #eef3f7; color: #4c5d6c; }
        .inventory-stock-badge.low, .inventory-status-badge.low { background: #fff3e1; color: #aa6100; }
        .inventory-stock-badge.out, .inventory-status-badge.out { background: #fff0ef; color: #b83930; }
        .inventory-status-badge.ok { background: #e9f7ef; color: #287a4a; }
        .inventory-empty-cell { padding: 34px 16px !important; color: #71808d; text-align: center !important; }
        .inventory-empty-cell i { display: block; margin-bottom: 8px; color: #d5dde4; font-size: 24px; }
        .inventory-table .action-buttons-cell { text-align: right; }
        .inventory-manage-btn { min-height: 36px; padding: 8px 13px; border: 0; border-radius: 10px; background: #fff1e5; color: #a94d0c; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .16s, transform .16s; }
        .inventory-manage-btn:hover { transform: translateY(-1px); background: #ffe3cb; }
        .inventory-manage-btn:focus-visible { outline: 3px solid rgba(230,126,34,.35); outline-offset: 2px; }
        .inventory-list-card .pagination { padding: 0 16px; }
        .inventory-list-card .pagination-info { padding: 0 16px 18px; }

        .status-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-block; }
        .status-pending { background: #f39c12; color: white; }
        .status-confirmed { background: #27ae60; color: white; }
        .status-processing { background: #3498db; color: white; }
        .status-shipped { background: #2ecc71; color: white; }
        .status-completed { background: #27ae60; color: white; }
        .status-cancelled { background: #e74c3c; color: white; }
        .status-denied { background: #e74c3c; color: white; }

        .status-select { padding: 4px 8px; border-radius: 20px; border: 1px solid #ddd; font-size: 12px; cursor: pointer; }
        .delete-order-btn { background: #e74c3c; color: white; border: none; padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: 11px; transition: all 0.2s; }
        .delete-order-btn:hover { background: #c0392b; }

        .product-img-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; background: #f0f2f5; border: 1px solid #e0e0e0; transition: box-shadow 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .product-img-thumb:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
        .product-image-preview { cursor: zoom-in; }
        .product-image-preview:focus-visible { outline: 3px solid #e67e22; outline-offset: 3px; }
        .product-image-dialog { display: none; position: fixed; inset: 0; z-index: 5000; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.85); }
        .product-image-dialog.is-open { display: flex; }
        .product-image-dialog img { display: block; max-width: min(100%, 1200px); max-height: 85vh; object-fit: contain; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
        .product-image-dialog button { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: white; color: #222; font-size: 28px; cursor: pointer; }
        .image-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
        .image-preview { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; background: #f0f2f5; border: 1px solid #ddd; }
        .file-input-label { background: #3498db; color: white; padding: 8px 16px; border-radius: 30px; font-size: 13px; cursor: pointer; display: inline-block; }
        .file-input-label:hover { background: #2980b9; }

        .upload-image-btn { background: #27ae60; color: white; border: none; padding: 6px 12px; border-radius: 30px; cursor: pointer; font-size: 11px; margin-right: 5px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; }
        .upload-image-btn:hover { background: #1e8449; transform: scale(1.05); }
        .edit-btn, .delete-btn, .delete-sale-btn { padding: 6px 12px; border-radius: 30px; border: none; margin-right: 6px; cursor: pointer; transition: all 0.2s; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
        .edit-btn { background: #3498db; color: white; }
        .edit-btn:hover { background: #2471a3; }
        .delete-btn { background: #e74c3c; color: white; }
        .delete-btn:hover { background: #c0392b; }
        .delete-sale-btn { background: #e74c3c; color: white; }

        .lowstock-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 18px; padding: 15px 18px; border: 1px solid #f1dfc8; border-radius: 14px; background: linear-gradient(110deg, #fff8ef, #fff); color: #78532d; }
        .lowstock-summary-copy { display: flex; align-items: center; gap: 11px; }
        .lowstock-summary-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #ffefd9; color: #c16a12; }
        .lowstock-summary-copy strong { display: block; color: #483927; font-size: 13px; }
        .lowstock-summary-copy > span:last-child > span { display: block; margin-top: 3px; color: #8a7966; font-size: 11px; }
        .lowstock-count { padding: 6px 11px; border-radius: 20px; background: #fff0da; color: #a95c0d; font-size: 12px; font-weight: 800; white-space: nowrap; }
        .lowstock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
        .lowstock-card { overflow: hidden; border: 1px solid #f0e2d2; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(59,43,26,.06); transition: transform .18s ease, box-shadow .18s ease; }
        .lowstock-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(59,43,26,.11); }
        .lowstock-card-image-wrap { position: relative; padding: 12px 12px 0; }
        .lowstock-card img { display: block; width: 100%; height: 150px; object-fit: contain; background: #f8f9fa; border: 1px solid #edf0f3; border-radius: 12px; }
        .lowstock-level { position: absolute; top: 20px; left: 20px; padding: 5px 9px; border-radius: 20px; background: #fff0da; color: #a95c0d; font-size: 10px; font-weight: 800; }
        .lowstock-level.critical { background: #fff0ef; color: #b83930; }
        .lowstock-card-body { padding: 13px 14px 14px; }
        .lowstock-card-body h3 { margin: 0; color: #2d3b48; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
        .lowstock-category { margin: 4px 0 12px; color: #7a8792; font-size: 11px; }
        .lowstock-metrics { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 10px; background: #faf7f3; }
        .lowstock-metrics span { color: #7a746d; font-size: 10px; }
        .lowstock-metrics strong { display: block; margin-top: 3px; color: #33414d; font-size: 13px; }
        .lowstock-manage-btn { width: 100%; min-height: 38px; margin-top: 12px; border: 0; border-radius: 10px; background: #fff1e5; color: #a94d0c; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .16s; }
        .lowstock-manage-btn:hover { background: #ffe3cb; }
        .lowstock-empty { grid-column: 1 / -1; padding: 38px 18px; border: 1px dashed #cfe4d6; border-radius: 16px; background: #f7fcf8; color: #52745d; text-align: center; }
        .lowstock-empty i { display: block; margin-bottom: 10px; color: #37a05d; font-size: 28px; }

        .excel-table { width: 100%; border-collapse: collapse; font-size: 14px; }
        .excel-table th, .excel-table td { border: 1px solid #ccc; padding: 8px 12px; text-align: left; }
        .excel-table th { background: #f2f2f2; font-weight: 600; }
        .report-preview-card { padding: 0; overflow: hidden; }
        .report-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #edf0f3; }
        .report-preview-heading h2 { margin: 0; color: #253544; font-size: 16px; }
        .report-preview-heading h2 i { margin-right: 8px; color: #d96a18; }
        .report-updated-at { color: #7a8792; font-size: 11px; }
        .report-preview { display: grid; gap: 22px; padding: 20px 22px; background: #fff; }
        .sales-period-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
        .sales-period-card { position: relative; overflow: hidden; min-height: 112px; padding: 17px; border: 1px solid #e9edf1; border-radius: 15px; background: linear-gradient(135deg, #fff, #f8fafc); }
        .sales-period-card::after { position: absolute; top: -24px; right: -20px; width: 90px; height: 90px; border-radius: 50%; background: rgba(230,126,34,.07); content: ""; }
        .sales-period-card h4 { position: relative; z-index: 1; margin: 0 0 10px; color: #677582; font-size: 12px; font-weight: 600; }
        .sales-period-card strong { position: relative; z-index: 1; display: block; color: #263746; font-size: 23px; line-height: 1.2; }
        .sales-period-card span { position: relative; z-index: 1; display: block; margin-top: 7px; color: #87929c; font-size: 11px; }
        .sales-report-section { min-width: 0; }
        .sales-report-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
        .sales-report-section-heading h3 { margin: 0; color: #314250; font-size: 14px; }
        .sales-report-section-heading h3 i { margin-right: 7px; color: #d96a18; }
        .sales-period-export-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #f0d5bc; border-radius: 9px; background: #fff8f1; color: #a94d0c; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
        .sales-period-export-btn:hover { background: #ffeedf; }
        .sales-period-export-btn:focus-visible { outline: 3px solid rgba(230,126,34,.3); outline-offset: 2px; }
        .sales-report-table-wrap { overflow-x: auto; border: 1px solid #e8edf1; border-radius: 12px; }
        .sales-period-table { margin: 0; }
        .sales-report-table { min-width: 560px; margin: 0; }
        .sales-report-table th { position: sticky; top: 0; padding: 11px 13px; border: 0; background: #f6f8fa; color: #74808c; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
        .sales-report-table td { padding: 11px 13px; border: 0; border-top: 1px solid #edf0f3; color: #465562; font-size: 12px; }
        .sales-report-table tbody tr:nth-child(even) { background: #fbfcfd; }
        .sales-report-table tbody tr:hover { background: #fff8f1; }
        .sales-report-table .report-number { text-align: right; white-space: nowrap; }
        .sales-report-table .report-total { color: #273746; font-weight: 700; }
        .sales-report-grand-total td { background: #fff5ea !important; color: #8c460e; font-weight: 800; }
        .report-empty-state { padding: 24px; border: 1px dashed #d7dfe6; border-radius: 12px; color: #778592; text-align: center; }
        .report-empty-state i { display: block; margin-bottom: 8px; color: #c5ced6; font-size: 24px; }
        .table-wrapper { overflow-x: auto; }
        .limit-hint { font-size: 11px; color: #e74c3c; font-weight: 600; margin-top: 8px; }

        .success-message { background: #d4edda; color: #155724; padding: 12px 20px; border-radius: 10px; margin-top: 15px; text-align: center; animation: fadeOut 3s ease-in-out forwards; }
        .error-message { background: #f8d7da; color: #721c24; padding: 12px 20px; border-radius: 10px; margin-top: 15px; text-align: center; animation: fadeOut 3s ease-in-out forwards; }
        .toast-message { position: fixed; top: 24px; right: 24px; z-index: 3000; max-width: min(420px, calc(100vw - 32px)); margin: 0; }
        @keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

        .search-container { position: relative; flex: 2; }
        .search-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 16px; max-height: 200px; overflow-y: auto; z-index: 10; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .search-result-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; display: flex; align-items: center; gap: 10px; }
        .search-result-item:hover { background: #fff3e6; }
        .search-result-item img { width: 35px; height: 35px; object-fit: cover; border-radius: 8px; }

        .selected-product-info { margin-top: 16px; font-size: 14px; background: #f3faf5; border: 1px solid #d7ebdc; padding: 14px 16px; border-radius: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .price-tag { background: #e67e22; color: white; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 13px; }
        .stock-info { background: #3498db; color: white; padding: 4px 12px; border-radius: 20px; font-size: 13px; }

        .sale-input-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: end; }
        .sale-input-field { min-width: 0; }
        .sale-input-field label { display: block; font-size: 12px; font-weight: 700; color: #566573; margin-bottom: 8px; }
        .sale-input-field .form-input { width: 100%; }
        .sale-quantity-field .input-hint { margin-top: 6px; color: #77838f; }
        .sale-submit-row { display: flex; align-items: flex-end; }
        .sale-submit-row .btn-success { width: 100%; min-height: 44px; }
        .sale-message { margin-top: 12px; }
        @media (max-width: 900px) {
            .sale-input-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sale-search-field { grid-column: 1 / -1; }
        }
        @media (max-width: 600px) {
            .sale-input-group { grid-template-columns: minmax(0, 1fr); gap: 14px; }
            .sale-search-field { grid-column: auto; }
            .sale-submit-row { justify-content: stretch; }
            .sale-submit-row .btn-success { width: 100%; }
            .selected-product-info { align-items: flex-start; border-radius: 12px; }
        }

        .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
        .pagination button { padding: 8px 14px; border: 1px solid #ddd; background: white; border-radius: 8px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
        .pagination button:hover:not(:disabled) { background: #e67e22; color: white; border-color: #e67e22; }
        .pagination button.active { background: #e67e22; color: white; border-color: #e67e22; }
        .pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
        .pagination-info { text-align: center; margin-top: 10px; font-size: 13px; color: #7f8c8d; }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
        .modal-content { background: white; padding: 30px; border-radius: 24px; width: 450px; max-width: 90%; }
        .modal-content h3 { margin-bottom: 20px; color: #e67e22; }
        .modal-content input, .modal-content select { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 12px; }
        .modal-buttons { display: flex; gap: 10px; margin-top: 20px; }
        .modal-buttons button { flex: 1; padding: 12px; border: none; border-radius: 40px; cursor: pointer; font-weight: 600; }
        .save-btn { background: #27ae60; color: white; }
        .cancel-btn { background: #95a5a6; color: white; }
        .confirm-dialog { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.55); }
        .confirm-dialog.is-open { display: flex; }
        .confirm-dialog-card { width: min(100%, 400px); padding: 24px; border-radius: 18px; background: white; box-shadow: 0 18px 50px rgba(0,0,0,0.28); }
        .confirm-dialog-card h3 { margin-bottom: 10px; color: #2c3e50; }
        .confirm-dialog-card p { color: #596773; line-height: 1.5; }
        .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
        .confirm-dialog-actions button { min-width: 90px; padding: 10px 18px; border: 0; border-radius: 24px; font-weight: 700; cursor: pointer; }
        .confirm-no { background: #edf0f2; color: #354451; }
        .confirm-yes { background: #c0392b; color: white; }
        .confirm-dialog-actions button:focus-visible { outline: 3px solid rgba(230,126,34,0.5); outline-offset: 2px; }
        .add-product-modal-content { width: 650px; max-height: 90vh; overflow-y: auto; }
        .add-product-modal-content .form-row { align-items: flex-start; }
        .add-product-modal-content input.form-input, .add-product-modal-content select.form-input { width: auto; min-width: 140px; margin: 0; }
        .add-product-modal-content .form-row > .form-input { flex: 1; }
        .add-product-modal-content .input-hint { margin: 2px 0 0; }
        .restock-modal-content { width: min(100%, 460px); }
        .restock-product-stock { margin: 8px 0 16px; color: #64748b; font-size: 13px; }
        .restock-modal-content .form-input { width: 100%; }
        .manage-product-modal-content { width: min(100%, 600px); max-height: 90vh; overflow-y: auto; }
        .manage-product-modal-content h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
        .manage-product-card { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 14px; border: 1px solid #e5eaf0; border-radius: 16px; background: #f7f9fb; }
        .manage-product-image { flex: 0 0 96px; width: 96px; height: 96px; border: 1px solid #e0e5ea; border-radius: 12px; background: #fff; object-fit: cover; }
        .manage-product-details { min-width: 0; }
        .manage-product-name { display: block; overflow-wrap: anywhere; color: #253544; font-size: 17px; line-height: 1.35; }
        .manage-product-summary { margin: 8px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
        .inventory-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
        .inventory-action-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 13px 15px; border: 1px solid #e2e8ee; border-radius: 13px; background: #fff; color: #263746; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
        .inventory-action-option:hover { transform: translateY(-1px); border-color: #edbd96; background: #fff8f2; }
        .inventory-action-option > i { flex: 0 0 22px; color: #c65a0a; font-size: 17px; text-align: center; }
        .inventory-action-copy { display: grid; gap: 4px; }
        .inventory-action-copy strong { font-size: 13px; }
        .inventory-action-copy small { color: #74808c; font-size: 11px; line-height: 1.4; }
        .inventory-action-option.danger { grid-column: 1 / -1; min-height: 60px; border-color: #f0d5d2; color: #a83228; }
        .inventory-action-option.danger > i { color: #c0392b; }
        .inventory-action-option.danger:hover { border-color: #e7aaa5; background: #fff5f4; }
        @media (max-width: 520px) {
            .manage-product-modal-content { padding: 22px; }
            .manage-product-card { align-items: flex-start; gap: 12px; padding: 11px; }
            .manage-product-image { flex-basis: 76px; width: 76px; height: 76px; }
            .inventory-action-list { grid-template-columns: 1fr; gap: 9px; }
            .inventory-action-option.danger { grid-column: auto; }
        }
        .inventory-page-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
        .profile-settings-intro { margin: -12px 0 22px; color: #74808c; font-size: 13px; }
        .profile-settings-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 18px; align-items: stretch; margin-bottom: 22px; }
        .profile-settings-card { margin: 0; border: 1px solid #e8edf1; border-radius: 18px; box-shadow: 0 6px 20px rgba(36,52,68,.05); }
        .profile-settings-card h2, .profile-deleted-card h2 { margin: 0; color: #253544; font-size: 16px; }
        .profile-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
        .profile-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #fff1e5; color: #bc5a11; }
        .profile-card-heading p { margin: 5px 0 0; color: #7a8792; font-size: 12px; line-height: 1.5; }
        .profile-settings-fields { display: grid; gap: 12px; }
        .profile-settings-fields .form-input { width: 100%; margin: 0; background: #fff; }
        .profile-field label { display: block; margin: 0 0 6px; color: #536270; font-size: 12px; font-weight: 700; }
        .profile-password-submit { min-height: 42px; justify-self: start; margin-top: 3px; border-radius: 11px; }
        .profile-security-card { background: linear-gradient(145deg, #fff, #f8fafc); }
        .profile-security-list { display: grid; gap: 13px; margin-top: 20px; }
        .profile-security-item { display: flex; align-items: flex-start; gap: 10px; color: #536270; font-size: 12px; line-height: 1.5; }
        .profile-security-item i { margin-top: 2px; color: #32935a; }
        .profile-deleted-card { padding: 0; overflow: hidden; border: 1px solid #e8edf1; border-radius: 18px; box-shadow: 0 6px 20px rgba(36,52,68,.05); }
        .profile-deleted-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 19px 22px; border-bottom: 1px solid #edf0f3; }
        .profile-deleted-heading-copy { display: flex; align-items: flex-start; gap: 12px; }
        .profile-deleted-heading-copy p { margin: 5px 0 0; color: #7a8792; font-size: 12px; }
        .profile-deleted-count { display: inline-flex; align-items: center; min-height: 26px; margin-left: 8px; padding: 4px 9px; border-radius: 20px; background: #f1f4f7; color: #63717e; font-size: 11px; font-weight: 700; vertical-align: middle; }
        .profile-deleted-refresh { min-height: 38px; padding: 7px 13px; border: 0; border-radius: 10px; background: #fff1e5; color: #a94d0c; font-size: 12px; font-weight: 700; cursor: pointer; }
        .profile-deleted-refresh:hover { background: #ffe3cb; }
        .profile-deleted-card .table-wrapper { padding: 0 14px; }
        .profile-deleted-card .deleted-products-table { min-width: 760px; }
        .profile-deleted-card .deleted-products-table th { padding: 12px; background: #f7f9fb; color: #74808c; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
        .profile-deleted-card .deleted-products-table td { padding: 11px 12px; }
        .deleted-products-table { min-width: 650px; }
        .restore-product-btn { padding: 6px 12px; border: 0; border-radius: 20px; background: #27ae60; color: white; font-size: 12px; font-weight: 600; cursor: pointer; }
        .restore-product-btn:hover { background: #1e8449; }
        .permanently-delete-product-btn { padding: 6px 12px; border: 0; border-radius: 20px; background: #e74c3c; color: white; font-size: 12px; font-weight: 600; cursor: pointer; }
        .permanently-delete-product-btn:hover { background: #c0392b; }
        .deleted-product-image { width: 56px; height: 56px; object-fit: cover; border: 1px solid #e0e0e0; border-radius: 8px; background: #f0f2f5; }
        .deleted-product-actions { display: flex; gap: 6px; flex-wrap: wrap; }
        .password-visibility-field { position: relative; width: 100%; }
        .password-visibility-field .form-input,
        .password-visibility-field .login-input { padding-right: 48px; }
        .password-visibility-toggle { position: absolute; top: 50%; right: 14px; min-width: 36px; min-height: 36px; padding: 6px; border: 0; background: transparent; color: #7f8c8d; cursor: pointer; transform: translateY(-50%); }
        .password-visibility-toggle:hover { color: #2c3e50; }
        .password-visibility-toggle:focus-visible { outline: 2px solid #e67e22; border-radius: 6px; }

        .orders-table-card { padding: 0; overflow: hidden; background: #fff; border: 1px solid #e9edf1; border-radius: 20px; margin-bottom: 28px; box-shadow: 0 8px 24px rgba(36,52,68,.06); }
        .orders-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid #edf0f3; background: linear-gradient(110deg, #fff, #fbfcfd); }
        .orders-toolbar-title { display: grid; gap: 4px; }
        .orders-toolbar-title h3 { margin: 0; color: #253544; font-size: 16px; }
        .orders-toolbar-title h3 i { margin-right: 8px; color: #d96a18; }
        .orders-toolbar-title p { margin: 0; color: #788592; font-size: 12px; }
        .orders-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .orders-count { padding: 7px 11px; border-radius: 20px; background: #fff3e8; color: #aa4d0d; font-size: 12px; font-weight: 700; white-space: nowrap; }
        .orders-filter { min-height: 40px; min-width: 155px; padding: 8px 14px; border: 1px solid #dfe5ea; border-radius: 11px; background: #fff; color: #344553; font-size: 13px; }
        .orders-refresh-btn { min-height: 40px; padding: 8px 15px; border: 0; border-radius: 11px; background: #fff1e5; color: #a94d0c; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .16s, transform .16s; }
        .orders-refresh-btn:hover { transform: translateY(-1px); background: #ffe3cb; }
        .orders-table-scroll { max-width: 100%; overflow: auto; }
        .orders-data-table { min-width: 1680px; border-collapse: separate; border-spacing: 0; }
        .orders-data-table th { padding: 13px 12px; background: #f7f9fb; color: #74808c; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
        .orders-data-table td { padding: 13px 12px; color: #43515e; font-size: 12px; }
        .orders-data-table tbody tr { transition: background .16s ease; }
        .orders-data-table tbody tr:nth-child(even) { background: #fbfcfd; }
        .orders-data-table tbody tr:hover { background: #fff8f1; }
        .orders-data-table .order-number { color: #273746; font-weight: 700; }
        .orders-data-table .order-customer { color: #273746; font-weight: 600; }
        .orders-data-table .order-total { color: #273746; font-size: 13px; font-weight: 800; white-space: nowrap; }
        .orders-data-table .order-date { color: #71808d; font-size: 11px; white-space: nowrap; }
        .orders-data-table .order-items-cell { min-width: 220px; color: #566573; line-height: 1.5; }
        .order-item-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #edf0f3; }
        .order-item-line:last-child { border-bottom: 0; }
        .order-item-line strong { color: #344553; white-space: nowrap; }
        .order-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 280px; }
        .order-actions .status-select { min-height: 32px; padding: 5px 9px; border-color: #dfe5ea; border-radius: 9px; background: #fff; color: #344553; }
        .order-actions .btn-confirm, .order-actions .btn-deny, .order-actions .btn-status,
        .order-actions .receipt-btn, .order-actions .delete-order-btn { min-height: 32px; padding: 6px 10px; border-radius: 9px; font-size: 11px; }
        .order-actions .btn-status { background: #52677a; }
        .order-actions .delete-order-btn { border: 0; }
        .order-receipt-note { margin-top: 6px; color: #788592; font-size: 10px; }
        .orders-empty-cell { padding: 42px 18px !important; color: #71808d; text-align: center !important; }
        .orders-empty-cell i { display: block; margin-bottom: 9px; color: #d5dde4; font-size: 25px; }
        .email-link { color: #3498db; text-decoration: none; }
        .email-link:hover { text-decoration: underline; }

        .filter-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
        .filter-btn { padding: 6px 16px; border-radius: 30px; border: 1px solid #ddd; background: white; cursor: pointer; font-size: 12px; transition: all 0.2s; }
        .filter-btn:hover { background: #e67e22; color: white; border-color: #e67e22; }
        .filter-btn.active { background: #e67e22; color: white; border-color: #e67e22; }

        .address-cell { max-width: 200px; min-width: 150px; font-size: 13px; color: #333; word-wrap: break-word; white-space: normal; line-height: 1.4; }
        .address-cell .address-text { display: block; padding: 4px 0; }
        .address-cell .address-pin { color: #e67e22; margin-right: 6px; }
        .address-cell .no-address { color: #e74c3c; font-style: italic; font-size: 12px; }
        .phone-cell { font-size: 13px; color: #2c3e50; white-space: nowrap; }
        .phone-cell .phone-icon { color: #27ae60; margin-right: 6px; }
        .phone-cell .no-phone { color: #95a5a6; font-style: italic; font-size: 12px; }
        .orders-data-table .status-badge { padding: 6px 10px; font-size: 10px; white-space: nowrap; }

        .receipt-btn {
            background: #8e44ad;
            color: white;
            border: none;
            padding: 4px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
        }
        .receipt-btn:hover { background: #6c3483; transform: scale(1.05); }
        .receipt-btn i { margin-right: 4px; }
        .receipt-btn.gcash-only { background: #8e44ad; }
        .receipt-btn.gcash-only:hover { background: #6c3483; }
        .receipt-btn.cod-only { 
            background: #95a5a6; 
            cursor: not-allowed; 
            opacity: 0.6;
        }
        .receipt-btn.cod-only:hover { background: #95a5a6; transform: none; }
        .receipt-badge {
            display: inline-block;
            background: #27ae60;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 9px;
            font-weight: 700;
            margin-left: 4px;
        }

        .receipt-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        .receipt-modal.show { display: flex; }
        .receipt-modal-content {
            background: #f8f9fa;
            border-radius: 20px;
            width: 600px;
            max-width: 95%;
            max-height: 92vh;
            overflow-y: auto;
            padding: 0;
            position: relative;
            animation: fadeInUp 0.3s ease;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
            border: 1px solid #e0e0e0;
        }
        .receipt-modal-content .close-receipt {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: #95a5a6;
            transition: all 0.3s;
            background: none;
            border: none;
            z-index: 10;
            background: rgba(255,255,255,0.9);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .receipt-modal-content .close-receipt:hover { color: #e74c3c; transform: rotate(90deg); background: white; }

        .receipt-card {
            background: white;
            margin: 20px;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .receipt-card .receipt-header {
            text-align: center;
            border-bottom: 2px solid #e67e22;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .receipt-card .receipt-header h2 {
            color: #2c3e50;
            font-size: 22px;
            font-weight: 800;
        }
        .receipt-card .receipt-header .admin-badge {
            display: inline-block;
            background: #e67e22;
            color: white;
            padding: 4px 20px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            margin-top: 5px;
            letter-spacing: 1px;
        }
        .receipt-card .receipt-header .ref-number {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 5px;
            font-weight: 600;
        }

        .receipt-card .receipt-body { padding: 5px 0; }
        .receipt-card .receipt-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .receipt-card .receipt-row .label { color: #7f8c8d; font-weight: 500; }
        .receipt-card .receipt-row .value { font-weight: 600; color: #2c3e50; text-align: right; max-width: 60%; word-break: break-word; }

        .receipt-card .receipt-total {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            font-size: 20px;
            font-weight: 800;
            border-top: 3px solid #e67e22;
            margin-top: 10px;
        }
        .receipt-card .receipt-total .label { color: #2c3e50; }
        .receipt-card .receipt-total .value { color: #e67e22; }

        .receipt-card .receipt-proof {
            margin-top: 20px;
            border: 2px dashed #e67e22;
            border-radius: 12px;
            padding: 20px;
            background: #fafafa;
            min-height: 150px;
        }
        .receipt-card .receipt-proof .proof-label {
            font-size: 14px;
            font-weight: 700;
            color: #2c3e50;
            text-align: center;
            margin-bottom: 15px;
            letter-spacing: 1px;
        }
        .receipt-card .receipt-proof .proof-label i { color: #e67e22; margin-right: 8px; }
        .receipt-card .receipt-proof img {
            max-width: 100%;
            max-height: 400px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            display: block;
            margin: 0 auto;
        }
        .receipt-card .receipt-proof .no-receipt {
            text-align: center;
            padding: 30px;
            color: #95a5a6;
            font-style: italic;
        }

        .receipt-card .receipt-footer {
            text-align: center;
            font-size: 12px;
            color: #95a5a6;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .receipt-card .receipt-footer i { color: #27ae60; }

        .status-update-toast {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
            background: #2c3e50; color: white; padding: 14px 28px;
            border-radius: 50px; z-index: 999; display: flex;
            align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: slideUp 0.4s ease;
            font-weight: 500;
            max-width: 90%;
        }
        .status-update-toast .toast-icon { font-size: 20px; }
        .status-update-toast .toast-close { background: none; border: none; color: #bdc3c7; cursor: pointer; font-size: 18px; padding: 0 5px; }
        .status-update-toast .toast-close:hover { color: white; }
        @keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(30px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

        .table-scroll { overflow-x: auto; max-width: 100%; }

        .six-digit-input {
            max-width: 100%;
        }
        .input-hint {
            font-size: 11px;
            color: #e74c3c;
            margin-top: 2px;
            font-weight: 500;
        }
        .input-error {
            border-color: #e74c3c !important;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;
        }

        @media (max-width: 900px) { 
            .main-content { padding: 16px; } 
            .charts-horizontal { flex-direction: column; } 
        }
        @media (max-width: 768px) {
            .sale-input-group { flex-direction: column; }
            .action-buttons { width: 100%; }
            .pagination button { padding: 6px 10px; font-size: 12px; }
            .action-buttons-cell { flex-direction: column; }
            .action-buttons-cell .upload-image-btn { width: 100%; }
            .address-cell { max-width: 120px; min-width: 80px; }
            .phone-cell { font-size: 11px; }
            .notifications-dropdown { right: 10px; width: 90vw; }
            .receipt-modal-content { width: 95%; padding: 0; }
            .receipt-card { margin: 10px; padding: 15px; }
            .receipt-card .receipt-row { font-size: 12px; flex-wrap: wrap; }
            .receipt-card .receipt-row .value { max-width: 100%; text-align: left; margin-top: 2px; }
            .receipt-card .receipt-total { font-size: 16px; }
            .data-table th, .data-table td { padding: 6px 4px; font-size: 11px; }
        }
        @media (max-width: 600px) {
            .login-container { min-height: 100vh; padding: 16px; }
            .login-card { width: min(100%, 380px); padding: 24px 20px; border-radius: 18px; }
            .navbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
            .nav-brand { min-width: 0; flex: 1; gap: 8px; font-size: 16px; }
            .nav-brand img { width: 40px; height: 34px; }
            .nav-right { gap: 14px; }
            .notifications-dropdown { left: 8px; right: 8px; width: auto; }
            .main-content { max-height: none; overflow: visible; padding: 16px 12px; }
            .stats-grid { grid-template-columns: 1fr; gap: 12px; }
            .stat-card { flex-basis: 100%; padding: 16px; }
            .charts-horizontal { gap: 12px; }
            .chart-card { min-width: 0; padding: 14px; }
            .form-card, .table-card, .alert-card, .orders-table-card { padding: 14px; border-radius: 14px; }
            .orders-table-card { padding: 0; border-radius: 14px; }
            .orders-toolbar { align-items: stretch; padding: 15px; }
            .orders-toolbar-actions { width: 100%; }
            .orders-filter { flex: 1; }
            .orders-refresh-btn { flex: 0 0 auto; }
            .orders-data-table { min-width: 1680px; }
            .lowstock-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
            .profile-settings-grid { grid-template-columns: 1fr; gap: 12px; }
            .profile-settings-card { padding: 16px; }
            .profile-deleted-heading { padding: 15px; }
            .profile-deleted-heading-copy { flex: 1 1 100%; }
            .profile-deleted-refresh { width: 100%; }
            .profile-deleted-card .table-wrapper { padding: 0 8px; }
            .form-row > * { min-width: 0; }
            .table-wrapper, .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .data-table { min-width: 620px; }
            .inventory-table { min-width: 880px; }
            .btn-group { gap: 8px; }
            .btn-group button { flex: 1 1 120px; }
        }
        .bg-credit { position: fixed; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); color: white; padding: 4px 10px; border-radius: 20px; font-size: 10px; z-index: 1000; pointer-events: none; }