/* NFC Review Booster – Staff Dashboard (front-end)
   App-style layout: fixed left sidebar + scrollable right content. */

/* ══════════════════════════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

.nfcl-body {
    margin: 0;
    padding: 0;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: .9rem;
    color: #212529;
    height: 100vh;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   APP SHELL  (sidebar + main side by side, full viewport)
══════════════════════════════════════════════════════════════ */
.nfcl-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   LEFT SIDEBAR
══════════════════════════════════════════════════════════════ */
:root { --sidebar-w: 240px; --sidebar-bg: #1a1a2e; --sidebar-accent: #4f6ef7; }

.nfcl-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: #c8ccd6;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    transition: transform .25s ease;
    z-index: 1040;
}

/* Brand */
.nfcl-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.nfcl-sidebar-brand .bi {
    font-size: 1.4rem;
    color: var(--sidebar-accent);
}
.nfcl-sidebar-close {
    background: none;
    border: none;
    color: #c8ccd6;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* Section label */
.nfcl-nav-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #5c6480;
    padding: 1.1rem 1.2rem .4rem;
    margin: 0;
    text-transform: uppercase;
}

/* Nav items */
.nfcl-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.2rem;
    color: #a0a8bf;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.nfcl-nav-item .bi { font-size: 1rem; flex-shrink: 0; }
.nfcl-nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none;
}
.nfcl-nav-item.active {
    background: rgba(79,110,247,.15);
    color: #fff;
    border-left-color: var(--sidebar-accent);
}

/* User footer */
.nfcl-sidebar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: auto;
    flex-shrink: 0;
}
.nfcl-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sidebar-accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nfcl-username {
    font-size: .82rem;
    color: #c8ccd6;
    min-width: 0;
}
.nfcl-logout-btn {
    color: #f87171;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
.nfcl-logout-btn:hover { color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════
   RIGHT MAIN AREA
══════════════════════════════════════════════════════════════ */
.nfcl-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Mobile top bar ──────────────────────────────────────── */
.nfcl-mobile-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--sidebar-bg);
    color: #fff;
    flex-shrink: 0;
}
.nfcl-hamburger {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

/* ── Module layout ───────────────────────────────────────── */
.nfcl-module {
    padding: 1.75rem 2rem;
    flex: 1;
}
.nfcl-module-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}
.nfcl-module-header h5 {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Stat cards */
.nfcl-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.nfcl-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-top: .3rem;
}

/* Scan feed table */
.nfcl-feed-table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: #6c757d;
}
.nfcl-feed-table td { font-size: .875rem; }

/* Card resets (Bootstrap max-width sometimes set by themes) */
.nfcl-main .card { max-width: none !important; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */
.nfcl-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f5;
    padding: 1.5rem;
}
.nfcl-login-card {
    width: 100%;
    max-width: 420px;
}
.nfcl-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 1.1rem;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 1.85rem;
}

/* WP login form overrides */
#loginform { margin: 0; padding: 0; }
#loginform p { margin-bottom: .85rem; }
#loginform label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .3rem;
}
#loginform input[type="text"],
#loginform input[type="password"] {
    display: block;
    width: 100%;
    padding: .5rem .8rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    box-sizing: border-box;
}
#loginform input[type="submit"] {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--sidebar-bg);
    border: none;
    border-radius: .375rem;
    cursor: pointer;
    margin-top: .25rem;
}
#loginform input[type="submit"]:hover { background: #2d2d55; }
#loginform .forgetmenot { display: none; } /* hide "remember me" */

/* ══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR  (slides in from left)
══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .nfcl-sidebar {
        position: fixed;
        top: 0; left: 0;
        transform: translateX(-100%);
    }
    .nfcl-sidebar.is-open { transform: translateX(0); }

    .nfcl-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1039;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }
    .nfcl-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .nfcl-module { padding: 1.25rem 1rem; }
}

@media (min-width: 992px) {
    .nfcl-mobile-bar { display: none !important; }
    .nfcl-sidebar-close { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   STAT CARDS — enhanced
══════════════════════════════════════════════════════════════ */
.nfcl-stat-card {
    border: none;
    border-radius: .6rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    transition: box-shadow .15s;
}
.nfcl-stat-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.nfcl-stat-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: .85;
}

/* ══════════════════════════════════════════════════════════════
   FILTER TABS
══════════════════════════════════════════════════════════════ */
.nfcl-filter-tabs {
    display: flex;
    gap: .35rem;
    background: #f1f3f5;
    border-radius: .5rem;
    padding: .25rem;
}
.nfcl-tab {
    border: none;
    background: transparent;
    border-radius: .35rem;
    padding: .3rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nfcl-tab:hover { background: #e2e6ea; color: #212529; }
.nfcl-tab.active { background: #fff; color: #212529; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.nfcl-tab-count {
    display: inline-block;
    background: #dee2e6;
    border-radius: .75rem;
    padding: 0 .45rem;
    font-size: .72rem;
    font-weight: 600;
    margin-left: .3rem;
    line-height: 1.5;
}
.nfcl-tab.active .nfcl-tab-count { background: #e9ecef; }

/* ══════════════════════════════════════════════════════════════
   SEARCH INPUT GROUP
══════════════════════════════════════════════════════════════ */
.nfcl-search-group { max-width: 250px; min-width: 180px; }
.nfcl-search-group .input-group-text,
.nfcl-search-group .form-control {
    border-color: #dee2e6;
    font-size: .875rem;
}
.nfcl-search-group .form-control:focus { box-shadow: none; border-color: var(--sidebar-accent); }
.nfcl-search-group .input-group-text { border-color: #dee2e6; }

/* ══════════════════════════════════════════════════════════════
   ROW AVATAR (initials circle in table rows)
══════════════════════════════════════════════════════════════ */
.nfcl-row-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   INLINE STATUS SELECT (payment / delivery)
══════════════════════════════════════════════════════════════ */
.nfcl-status-sel {
    border: none;
    background: var(--sel-color, #6b7280);
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 90px;
    transition: filter .15s, transform .1s;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.nfcl-status-sel:hover  { filter: brightness(1.12); }
.nfcl-status-sel:active { transform: scale(.97); }
.nfcl-status-sel:focus  { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel-color, #6b7280) 35%, transparent); }
.nfcl-status-sel:disabled { opacity: .55; cursor: wait; }

/* ══════════════════════════════════════════════════════════════
   INDUSTRY BADGE (customers)
══════════════════════════════════════════════════════════════ */
.nfcl-ind-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: .4rem;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.nfcl-empty-state {
    text-align: center;
    color: #adb5bd;
    padding: 3rem 1rem;
}
.nfcl-empty-state .bi { font-size: 2.2rem; display: block; margin-bottom: .75rem; opacity: .5; }
.nfcl-empty-state p { margin: 0; font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════
   PERIOD FILTER BUTTONS (Today / This Week / This Month)
══════════════════════════════════════════════════════════════ */
.nfcl-period-btn {
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 6px;
    padding: .28rem .85rem;
    font-size: .78rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
.nfcl-period-btn:hover {
    border-color: #adb5bd;
    color: #212529;
    background: #f8f9fa;
}
.nfcl-period-btn.active {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
    box-shadow: 0 1px 4px rgba(26,26,46,.25);
}

/* Stat sub-label */
.nfcl-stat-sub {
    font-size: .7rem;
    color: #adb5bd;
    margin-top: .1rem;
}

/* ══════════════════════════════════════════════════════════════
   ORDERS TABLE — redesigned
══════════════════════════════════════════════════════════════ */
.nfcl-orders-card { border: none; border-radius: .6rem; }

.nfcl-orders-table {
    font-size: .825rem;
    border-collapse: separate;
    border-spacing: 0;
}

.nfcl-orders-table thead tr th {
    background: #f8f9fa;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    padding: .65rem .9rem;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}
.nfcl-orders-table thead tr th:first-child { border-radius: .6rem 0 0 0; }
.nfcl-orders-table thead tr th:last-child  { border-radius: 0 .6rem 0 0; }

.nfcl-orders-table tbody tr { transition: background .1s; }
.nfcl-orders-table tbody tr:hover { background: #f9fafb; }
.nfcl-orders-table tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
.nfcl-orders-table tbody tr:last-child td { border-bottom: none; }

/* Date cell */
.nfcl-date-cell { white-space: nowrap; }
.nfcl-date-day  { display: block; font-weight: 600; color: #374151; font-size: .82rem; }
.nfcl-date-year { display: block; font-size: .68rem; color: #9ca3af; margin-top: 1px; }

/* Name / Business cells */
.nfcl-cell-name {
    font-size: .82rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    display: block;
}
.nfcl-cell-biz {
    font-size: .78rem;
    color: #6b7280;
}

/* Product cell */
.nfcl-product-cell { color: #374151; line-height: 1.5; }
.nfcl-qty-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    color: #6366f1;
    background: #eef2ff;
    border-radius: 4px;
    padding: 0 .3rem;
    margin-left: 2px;
    vertical-align: middle;
}
.nfcl-prod-sep { color: #d1d5db; margin: 0 .15rem; }
.nfcl-notes-icon { font-size: .78rem; color: #9ca3af; cursor: help; }

/* Total cell */
.nfcl-total-val {
    font-size: .82rem;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

/* Source cell */
.nfcl-source-text {
    font-size: .75rem;
    color: #9ca3af;
    white-space: nowrap;
}