/* ==== staff-orders-expense-page-v1 ====
   Sidebar: fixed on desktop, collapses to a centered "3 line" hamburger
   toggle bar on mobile -- same mechanics as reports.php's section nav
   (report-sections-nav), renamed/scoped to this page (soe- prefix). */

body{padding-left:264px;}

.soe-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:264px;
    background:#fff;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:22px 14px;
    overflow-y:auto;
    z-index:998;
}
.soe-sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 8px 16px;
    font-weight:1000;
    font-size:14px;
    color:#0f172a;
    line-height:1.3;
}
.soe-sidebar-close{
    display:none;
    border:0;background:transparent;font-size:22px;line-height:1;
    color:#64748b;cursor:pointer;padding:2px 6px;
}
.soe-sidebar-link{
    display:flex;
    align-items:center;
    gap:11px;
    border:0;
    background:transparent;
    text-align:left;
    padding:14px;
    border-radius:16px;
    color:#334155;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    font:inherit;
    line-height:1.3;
    transition:background .15s ease,color .15s ease,transform .15s ease;
}
.soe-sidebar-link:hover{background:#f1f5f9;color:#0f172a;transform:translateX(2px);}
.soe-sidebar-link.active{background:linear-gradient(135deg,#0f172a,#2563eb);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.28);}
.soe-sidebar-ico{font-size:19px;line-height:1;flex-shrink:0;}
.soe-sidebar-foot{
    margin-top:auto;
    display:grid;
    gap:8px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.soe-sidebar-foot .ghost-btn,.soe-sidebar-foot .danger-btn{width:100%;justify-content:center;}

.soe-sidebar-backdrop{display:none;}

.soe-shell{width:min(1280px,calc(100% - 24px));margin:18px auto 60px;}

.soe-mobile-bar{display:none;margin:0 0 16px;}
.soe-mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    width:100%;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,#0f172a,#2563eb);
    padding:0 18px;
    height:54px;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(37,99,235,.28);
    transition:box-shadow .15s ease, transform .15s ease;
}
.soe-mobile-toggle:hover{box-shadow:0 14px 32px rgba(37,99,235,.36);transform:translateY(-1px);}
.soe-mobile-toggle-bars{display:flex;flex-direction:column;gap:4px;flex-shrink:0;}
.soe-mobile-toggle-bars span{display:block;height:3px;width:22px;border-radius:3px;background:#fff;}
.soe-mobile-toggle-label{font-size:16px;font-weight:1000;letter-spacing:.02em;color:#fff;}

@media(max-width:960px){
    body{padding-left:0;}
    .soe-sidebar{
        width:min(300px,86vw);
        box-shadow:0 0 60px rgba(0,0,0,.22);
        z-index:99998;
        transform:translateX(-102%);
        transition:transform .22s ease;
    }
    .soe-sidebar.open{transform:translateX(0);}
    .soe-sidebar-close{display:block;}
    .soe-sidebar-backdrop{
        display:block;
        position:fixed;inset:0;
        background:rgba(15,23,42,.5);
        z-index:99997;
        opacity:0;pointer-events:none;
        transition:opacity .22s ease;
    }
    .soe-sidebar-backdrop.open{opacity:1;pointer-events:auto;}
    .soe-mobile-bar{display:flex;justify-content:center;}
}

.soe-section-panel{display:none;}
.soe-section-panel.active{display:block;}

/* ---------- Section 1: Staff Orders (item grid + cart) ---------- */
.soe-orders-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:16px;
    align-items:start;
}
.soe-panel-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:18px;
}
.soe-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.soe-panel-head h3{margin:0;font-size:1.1rem;}
.soe-panel-count{font-size:.85rem;color:var(--muted);font-weight:700;}

.soe-search-input{margin-bottom:12px;}

.soe-cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.soe-cat-chip{
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding:9px 15px;
    font-weight:800;
    font-size:13px;
    color:var(--text);
    cursor:pointer;
}
.soe-cat-chip.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent;}

.soe-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.soe-item-card{
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    overflow:hidden;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.soe-item-summary{display:flex;align-items:center;gap:12px;padding:13px;cursor:pointer;}
.soe-item-image{
    width:60px;height:60px;border-radius:16px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
}
.soe-item-image-fallback{display:flex;align-items:center;justify-content:center;font-weight:800;color:#9ca3af;font-size:11px;}
.soe-item-info{min-width:0;flex:1;}
.soe-item-name{margin:0 0 3px;font-size:15px;color:#0f172a;line-height:1.25;}
.soe-item-desc{margin:0 0 6px;color:var(--muted);font-size:12.5px;line-height:1.35;}
.soe-item-price{display:inline-block;font-weight:1000;color:#166534;font-size:14px;}
.soe-item-price-muted{color:#2563eb;}
.soe-add-btn{
    flex-shrink:0;
    width:34px;height:34px;border-radius:12px;border:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;font-size:20px;font-weight:900;line-height:1;cursor:pointer;
}
.soe-variant-list{display:none;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding:6px 10px 10px;}
.soe-variant-list.open{display:flex;}
.soe-variant-btn{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border:0;background:transparent;padding:9px 6px;border-radius:12px;
    cursor:pointer;font:inherit;text-align:left;color:var(--text);
}
.soe-variant-btn:hover{background:#f1f5f9;}
.soe-variant-btn strong{color:#166534;font-size:13px;}

.soe-empty-box{border:1px dashed #cbd5e1;border-radius:22px;background:#f8fafc;color:#64748b;font-weight:700;text-align:center;padding:26px;grid-column:1/-1;}

.soe-cart-card{position:sticky;top:18px;}
.soe-cart-items{display:grid;gap:10px;max-height:52vh;overflow-y:auto;padding-right:2px;margin-bottom:12px;}
.soe-cart-line{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-bottom:1px dashed var(--line);padding:9px 0;
}
.soe-cart-line-info{min-width:0;}
.soe-cart-line-info strong{display:block;font-size:14px;color:#0f172a;}
.soe-cart-line-info small{color:var(--muted);font-size:12px;}
.soe-cart-line-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.soe-qty-group{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px;}
.soe-qty-group button{
    width:24px;height:24px;border-radius:999px;border:0;background:#f1f5f9;
    font-weight:900;cursor:pointer;line-height:1;
}
.soe-qty-group span{min-width:16px;text-align:center;font-weight:800;font-size:13px;}
.soe-cart-remove{border:0;background:transparent;color:var(--danger);font-size:18px;cursor:pointer;line-height:1;}
.soe-cart-total-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-weight:1000;font-size:16px;}
.soe-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.soe-cart-actions button{width:100%;justify-content:center;}

/* ---------- Section 2: Staff Expense ---------- */
.soe-expense-panel{min-height:260px;}
.soe-expense-middle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:12px;padding:40px 12px;
}
.soe-add-expense-btn{padding:16px 26px;font-size:15px;}

/* ---------- Section 3: Staff Report ---------- */
.soe-report-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.soe-report-total-row{
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;
    border-radius:16px;padding:12px 16px;margin-bottom:12px;font-weight:900;color:#166534;
}
.soe-report-total-row strong{font-size:18px;}
.soe-report-outstanding-row{
    background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:#fed7aa;color:#9a3412;
}
.soe-report-list{display:grid;gap:10px;min-height:80px;margin-bottom:12px;}
.soe-report-row{border:1px solid var(--line);border-radius:18px;padding:12px 14px;background:#fbfdff;}
.soe-report-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.soe-report-row-top strong{font-size:14.5px;color:#0f172a;}
.soe-report-amount{font-weight:1000;color:#166534;}
.soe-report-row-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:3px;}
.soe-report-items{margin-top:7px;font-size:13px;color:#334155;line-height:1.4;}
.soe-report-staff-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.soe-staff-tag{background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:800;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.soe-staff-tag:hover{background:#dbeafe;transform:translateY(-1px);}

.soe-report-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.soe-report-pager span{font-weight:800;font-size:13px;color:var(--muted);}
.soe-report-pager button:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

/* ---------- Section 4: Staff Profile directory ---------- */
.soe-profile-directory{display:flex;flex-direction:column;gap:2px;}
.soe-profile-letter-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.soe-profile-letter-heading{
    position:sticky;top:0;z-index:1;background:#f1f5f9;color:#64748b;font-weight:900;
    font-size:12px;letter-spacing:.06em;padding:5px 12px;border-radius:10px;width:fit-content;
}
.soe-profile-dir-row{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    border:1px solid var(--line);border-radius:16px;padding:10px 14px;
    background:#fff;cursor:pointer;font:inherit;transition:background .15s ease, transform .1s ease;
}
.soe-profile-dir-row:hover{background:#f8fafc;transform:translateY(-1px);}
.soe-profile-dir-avatar{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
}
.soe-profile-dir-info{min-width:0;flex:1;}
.soe-profile-dir-info strong{display:block;font-size:14px;color:#0f172a;}
.soe-profile-dir-info small{color:var(--muted);font-size:12px;}
.soe-profile-dir-arrow{color:#94a3b8;font-size:20px;flex-shrink:0;}

/* ---------- Toast (silent-save confirmation) ---------- */
.soe-toast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:#111827;color:#fff;padding:12px 20px;border-radius:999px;
    font-weight:800;font-size:14px;box-shadow:0 18px 40px rgba(15,23,42,.3);
    opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
    z-index:999999;
}
.soe-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Popups ---------- */
.soe-modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.45);
    display:none;align-items:center;justify-content:center;z-index:99999;padding:18px;
}
.soe-modal-backdrop.open{display:flex;}
.soe-modal-card{
    width:min(560px,100%);max-height:88vh;overflow-y:auto;
    background:#fff;border-radius:26px;box-shadow:0 28px 80px rgba(15,23,42,.32);
}
.soe-modal-card-small{width:min(440px,100%);}
.soe-modal-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:18px 20px;color:#fff;background:linear-gradient(135deg,#111827,#2563eb,#7c3aed);
    position:sticky;top:0;
}
.soe-modal-head h3{margin:0;font-size:19px;}
.soe-modal-close{border:0;background:rgba(255,255,255,.18);color:#fff;width:32px;height:32px;border-radius:10px;font-size:18px;cursor:pointer;}
.soe-modal-body{padding:18px 20px;}
.soe-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line);}

.soe-staff-select-list{display:grid;gap:8px;}
.soe-staff-check{
    display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;
    padding:12px 14px;cursor:pointer;
}
.soe-staff-check:hover{background:#f8fafc;}
.soe-staff-check input{width:18px;height:18px;flex-shrink:0;}
.soe-staff-check strong{display:block;font-size:14px;color:#0f172a;}
.soe-staff-check small{color:var(--muted);font-size:12px;}

/* ---------- Restaurant Expense / Personal Dept floating chooser ---------- */
.soe-category-options{display:grid;gap:12px;}
.soe-category-option{
    display:flex;align-items:flex-start;gap:14px;text-align:left;
    border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;
    background:#fff;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.soe-category-option:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.1);}
.soe-category-option:disabled{opacity:.6;cursor:default;transform:none;}
.soe-category-option-icon{font-size:26px;line-height:1;flex-shrink:0;}
.soe-category-option-text{display:flex;flex-direction:column;gap:4px;}
.soe-category-option-text strong{font-size:15px;color:#0f172a;}
.soe-category-option-text small{color:var(--muted);font-size:12.5px;line-height:1.4;}
.soe-category-option-restaurant{border-color:#fed7aa;background:linear-gradient(135deg,#fff7ed,#fffaf3);}
.soe-category-option-restaurant:hover{border-color:#fb923c;}
.soe-category-option-personal{border-color:#bfdbfe;background:linear-gradient(135deg,#eff6ff,#f8fbff);}
.soe-category-option-personal:hover{border-color:#60a5fa;}

/* ---------- Category badge on report rows ---------- */
.soe-category-badge{
    display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;
    letter-spacing:.02em;
}
.soe-category-badge-restaurant{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;}
.soe-category-badge-personal{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}

/* ---------- Staff Member Profile popup ---------- */
.soe-profile-loading{color:var(--muted);font-weight:700;text-align:center;padding:20px 0;}
.soe-profile-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px;font-weight:800;margin-bottom:14px;}
.soe-profile-rows{display:grid;gap:8px;margin-bottom:14px;}
.soe-profile-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#fbfdff;
}
.soe-profile-row span{font-size:13.5px;color:#334155;font-weight:700;}
.soe-profile-row strong{font-size:14.5px;color:#0f172a;}
.soe-profile-due-box{
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;
    border-radius:16px;padding:14px 16px;margin-bottom:14px;font-weight:900;color:#9a3412;
}
.soe-profile-due-box strong{font-size:19px;}
.soe-profile-repay-row{display:grid;grid-template-columns:1fr auto;gap:10px;}
.soe-profile-repay-row button{white-space:nowrap;}
.soe-profile-cleared{
    text-align:center;color:#166534;font-weight:800;background:#f0fdf4;
    border:1px solid #bbf7d0;border-radius:14px;padding:12px;
}

/* ---------- Print ---------- */
.soe-print-only{display:none;}
@media print{
    body *{visibility:hidden;}
    .soe-print-only,.soe-print-only *{visibility:visible;}
    .soe-print-only{display:block;position:fixed;inset:0;padding:16px;}
}

@media(max-width:960px){
    .soe-orders-layout{grid-template-columns:1fr;}
    .soe-cart-card{position:static;}
    .soe-report-layout{grid-template-columns:1fr;}
}
@media(max-width:640px){
    .soe-item-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
    .soe-shell{margin-top:10px;}
}