/* NS Components — loaded globally via main_layout.php */


/* ── 18. NS Design System — Shared Components ───────────────── */

/* Titlebar */
.ns-titlebar {
    background: linear-gradient(135deg, var(--ns-primary) 0%, var(--ns-secondary) 100%);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--ns-accent);
    flex-wrap: wrap;
    gap: 10px;
}
.ns-titlebar h1 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; text-transform: none; }
.ns-titlebar p  { margin: 3px 0 0; font-size: 12px; color: rgba(255,255,255,.65); }

/* Body padding */
.ns-body { padding: 20px 24px; }

/* Panel */
.ns-panel     { background: #fff; border: 1px solid var(--ns-border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.ns-panel-hdr {
    background: linear-gradient(180deg, var(--ns-panel-from), var(--ns-panel-to));
    border-bottom: 1px solid var(--ns-border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ns-panel-hdr h3    { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ns-primary); text-transform: uppercase; letter-spacing: .5px; }
.ns-panel-hdr a     { font-size: 12px; color: var(--ns-button); text-decoration: none; font-weight: 600; }
.ns-panel-hdr a:hover { text-decoration: underline; }

/* Filter bar */
.ns-filter-bar {
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

/* Form group */
.ns-fg               { display: flex; flex-direction: column; gap: 4px; }
.ns-fg label         { font-size: 11px; font-weight: 700; color: #8896a5; text-transform: uppercase; letter-spacing: .4px; }
.ns-fg input[type=text] { padding: 6px 9px; border: 1.5px solid #a0aec0; border-radius: var(--radius); font-size: 12.5px; }

/* Table wrap */
.ns-table-wrap { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }

/* Help button (fixed) */
.ns-help-btn {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 1000;
    background: linear-gradient(180deg, var(--ns-button), var(--ns-secondary));
    color: #fff;
    border: 1px solid var(--ns-primary);
    border-radius: var(--radius);
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* Layout grids */
.db-cols     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.db-cols-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.db-cols-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.db-stats-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.db-stats-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.db-stats-2  { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }


/* ── 19. Dashboard — Admin ──────────────────────────────────── */
.dashboard-container {
    background-color: #efeeee;
    border-radius: 0;
    padding: 20px;
    margin: 0;
    min-height: calc(100vh - 100px);
}

/* Welcome banner */
.admin-banner {
    background: linear-gradient(135deg, #1f3a5f, #2c5282);
    border-radius: var(--radius);
    padding: 20px 28px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border-bottom: 3px solid var(--ns-accent);
}
.admin-banner h2     { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #fff; text-transform: none; }
.admin-banner p      { margin: 0; font-size: 13px; color: rgba(255,255,255,.7); }
.admin-banner-btns   { display: flex; gap: 8px; }

.ab-btn   { padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; text-decoration: none; background: var(--ns-accent); color: #fff; }
.ab-btn-o { padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.ab-btn:hover, .ab-btn-o:hover { filter: brightness(.9); text-decoration: none; color: #fff; }

/* System entity cards */
.sys-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.sys-card {
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s;
}
.sys-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); text-decoration: none; color: inherit; }
.sys-icon       { font-size: 26px; flex-shrink: 0; }
.sys-val        { font-size: 22px; font-weight: 700; color: var(--ns-primary); }
.sys-lbl        { font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* Chart padding */
.db-chart-pad { padding: 10px 14px; }

/* Top stores panel */
.top-stores-wrap   { padding: 4px 0; }
.top-store-row     { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #f0f2f5; }
.top-store-row:last-child { border-bottom: none; }
.top-store-rank    { width: 24px; height: 24px; background: var(--ns-button); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.top-store-info    { flex: 1; min-width: 0; }
.top-store-name    { font-size: 13px; font-weight: 600; color: var(--ns-primary); }
.top-store-sub     { font-size: 11.5px; color: var(--text-muted); }
.top-store-amt     { font-size: 13px; font-weight: 700; color: var(--ns-button); }

/* Right column flex stack */
.db-right-col { display: flex; flex-direction: column; gap: 16px; }

/* Quick actions grid */
.db-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.db-action  {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f7f9fc;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
}
.db-action span  { font-size: 20px; }
.db-action:hover { background: var(--ns-button); color: #fff; text-decoration: none; border-color: var(--ns-button); }

/* Top bar (page header row) */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    padding: 10px 0;
}

/* Help button (rounded, legacy style) */
.help-btn {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    transition: all .3s ease;
}
.help-btn:hover { background: rgba(255,255,255,.3); transform: scale(1.02); }


/* ── 20. Dashboard — Stat Cards ─────────────────────────────── */
.db-stat {
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .15s;
    position: relative;
    overflow: hidden;
}
.db-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--cc, var(--ns-button));
}
.db-stat:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); text-decoration: none; color: inherit; }
.db-stat-icon  { font-size: 30px; flex-shrink: 0; }
.db-stat-val   { font-size: 26px; font-weight: 700; color: var(--ns-primary); line-height: 1; }
.db-stat-lbl   { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }

/* Staff-style dashboard cards (used in /staff-automatic-order etc.) */
.cards-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.dashboard-card {
    flex: 1;
    min-width: 220px; max-width: 280px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 0;
    transition: all .3s ease;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.dashboard-card:hover         { transform: translateY(-8px); background: rgba(255,255,255,.95); box-shadow: 0 15px 35px rgba(0,0,0,.15); }
.dashboard-card a             { text-decoration: none; display: block; padding: 25px 20px; }

.card-draft     { background: linear-gradient(135deg, rgba(23,162,184,.15), rgba(23,162,184,.05)); border-bottom: 4px solid #17a2b8; }
.card-draft:hover { background: linear-gradient(135deg, rgba(23,162,184,.25), rgba(23,162,184,.1)); }
.card-completed { background: linear-gradient(135deg, rgba(40,167,69,.15), rgba(40,167,69,.05)); border-bottom: 4px solid #28a745; }
.card-completed:hover { background: linear-gradient(135deg, rgba(40,167,69,.25), rgba(40,167,69,.1)); }
.card-failed    { background: linear-gradient(135deg, rgba(220,53,69,.15), rgba(220,53,69,.05)); border-bottom: 4px solid #dc3545; }
.card-failed:hover { background: linear-gradient(135deg, rgba(220,53,69,.25), rgba(220,53,69,.1)); }

.card-icon       { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.card-icon img   { width: 32px; height: 32px; }
.card-draft    .card-icon { background: rgba(23,162,184,.2); }
.card-completed.card-icon { background: rgba(40,167,69,.2); }
.card-failed   .card-icon { background: rgba(220,53,69,.2); }

.card-title          { font-size: 14px; color: #6c757d; margin-bottom: 8px; font-weight: 500; }
.card-title i        { margin-right: 6px; }
.card-number         { font-size: 48px; font-weight: 700; line-height: 1.2; margin-bottom: 5px; }
.card-draft     .card-number { color: #17a2b8; }
.card-completed .card-number { color: #28a745; }
.card-failed    .card-number { color: #dc3545; }
.card-subtitle       { font-size: 12px; color: #adb5bd; margin-top: 8px; }


/* ── 21. Settings Status Badges ─────────────────────────────── */
.settings-status-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }


/* ── 22. Animations ─────────────────────────────────────────── */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}