/* ============================================================
   SC-INDUSTRY Admin Panel — "Concept" design system port
   Dark navy sidebar + purple-blue accent + light card-based UI
   (ported from concept.zip's Bootstrap 5 SCSS variables into
   plain CSS since this backend has no build step)
   ============================================================ */

:root {
    --admin-primary: #5969ff;
    --admin-primary-dark: #4453e0;
    --admin-secondary: #ff407b;
    --admin-success: #28a745;
    --admin-info: #17a2b8;
    --admin-warning: #ffc107;
    --admin-danger: #dc3545;
    --admin-sidebar-bg: #0e0c28;
    --admin-sidebar-color: #8287a0;
    --admin-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --admin-body-bg: #efeff6;
    --admin-body-color: #3d405c;
    --admin-text-muted: #71748d;
    --admin-border-color: #e6e6f2;
    --admin-input-border: #d4d9e3;
    --admin-card-shadow: 0 0 2px rgba(145, 158, 171, .2), 0 12px 24px -4px rgba(145, 158, 171, .12);
    --admin-radius: 8px;
    --admin-radius-sm: 6px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Circular Std','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; }
body { background:var(--admin-body-bg); color:var(--admin-body-color); font-size:14px; }
a { text-decoration:none; color:inherit; }

/* ===================== Layout ===================== */
.admin-wrapper { display:flex; min-height:100vh; }

.admin-sidebar { width:250px; background:var(--admin-sidebar-bg); color:#fff; flex-shrink:0; padding:22px 0; box-shadow:0 0 28px rgba(82,63,105,.08); }
.admin-sidebar .brand { font-size:19px; font-weight:700; padding:0 24px 22px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:8px; letter-spacing:.3px; }
.admin-sidebar .brand span { color:var(--admin-primary); }
.admin-sidebar nav a { display:flex; align-items:center; gap:12px; padding:11px 24px; color:var(--admin-sidebar-color); font-size:13.5px; transition:.2s; border-left:3px solid transparent; }
.admin-sidebar nav a i { width:18px; font-size:14px; }
.admin-sidebar nav a:hover { background:var(--admin-sidebar-hover-bg); color:#fff; }
.admin-sidebar nav a.active { background:var(--admin-sidebar-hover-bg); color:#fff; border-left-color:var(--admin-primary); font-weight:600; }
.admin-sidebar nav .nav-divider { padding:18px 24px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.35); font-weight:700; }

.admin-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-topbar { background:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--admin-card-shadow); position:sticky; top:0; z-index:10; }
.admin-topbar h1 { font-size:18px; color:#242645; font-weight:700; }
.admin-content { padding:26px 28px; flex:1; }

/* ===================== Stat cards ===================== */
.admin-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:26px; }
.admin-card { background:#fff; border-radius:var(--admin-radius); padding:22px; box-shadow:var(--admin-card-shadow); position:relative; overflow:hidden; }
.admin-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--admin-primary); opacity:.85; }
.admin-card .label { font-size:12.5px; color:var(--admin-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.admin-card .value { font-size:28px; font-weight:700; color:#242645; margin-top:8px; }

/* ===================== Panels / cards ===================== */
.admin-panel { background:#fff; border-radius:var(--admin-radius); padding:22px; box-shadow:var(--admin-card-shadow); margin-bottom:22px; }
.admin-panel h2 { font-size:15.5px; margin-bottom:16px; color:#242645; font-weight:700; }

/* ===================== Tables ===================== */
table.admin-table { width:100%; border-collapse:collapse; font-size:13.5px; }
table.admin-table thead th { background:#f5f5f6; color:var(--admin-text-muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:14px 16px; text-align:left; border:none; }
table.admin-table td { padding:14px 16px; border-bottom:1px solid var(--admin-border-color); text-align:left; vertical-align:middle; color:var(--admin-body-color); }
table.admin-table tbody tr:hover { background:#fafafd; }
table.admin-table img { width:40px; height:40px; object-fit:contain; border-radius:var(--admin-radius-sm); }

/* ===================== Buttons ===================== */
.btn { display:inline-block; padding:9px 18px; border-radius:var(--admin-radius-sm); font-size:13px; font-weight:600; cursor:pointer; border:none; transition:.15s; }
.btn-primary { background:var(--admin-primary); color:#fff; }
.btn-primary:hover { background:var(--admin-primary-dark); }
.btn-danger { background:var(--admin-danger); color:#fff; }
.btn-secondary { background:#f0f0f8; color:#3d405c; border:1px solid #d2d2e4; }
.btn-secondary:hover { background:#e4e4f4; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ===================== Forms ===================== */
.admin-form label { display:block; font-size:12.5px; font-weight:700; margin:14px 0 6px; color:#3d405c; text-transform:uppercase; letter-spacing:.3px; }
.admin-form input, .admin-form select, .admin-form textarea {
    width:100%; padding:10px 14px; border:1px solid var(--admin-input-border); border-radius:var(--admin-radius-sm);
    font-size:14px; color:#242645; background:#fff; transition:.15s;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
    outline:none; border-color:var(--admin-primary); box-shadow:0 0 0 3px rgba(89,105,255,.15);
}
.admin-form input:disabled, .admin-form select:disabled { background:#f5f5f8; color:#999; }
.admin-form textarea { height:90px; resize:vertical; }
.admin-form .form-row { display:flex; gap:16px; }
.admin-form .form-row > div { flex:1; }
.admin-form small { text-transform:none; letter-spacing:0; font-weight:400; color:var(--admin-text-muted); }

fieldset.admin-fieldset { border:1px solid var(--admin-border-color); border-radius:var(--admin-radius); padding:16px 18px; margin:18px 0; }
fieldset.admin-fieldset legend { font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--admin-primary); padding:0 8px; }

/* ===================== Alerts ===================== */
.alert { padding:13px 18px; border-radius:var(--admin-radius-sm); margin-bottom:16px; font-size:13.5px; border:none; }
.alert-success { background:rgba(40,167,69,.1); color:#1a7a45; }
.alert-error { background:rgba(220,53,69,.1); color:#c0392b; }

/* ===================== Login ===================== */
body:has(.login-box) { background:var(--admin-sidebar-bg); }
.login-box { max-width:400px; margin:90px auto; background:#fff; padding:40px; border-radius:var(--admin-radius); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-box h2 { margin-bottom:22px; color:#242645; text-align:center; font-weight:700; }
.login-box h2 i { color:var(--admin-primary); }

/* ===================== Status badges ===================== */
.badge-status { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; color:#fff; text-transform:capitalize; display:inline-block; }

/* ===================== Icon circles / badge dots (Concept pattern) ===================== */
.icon-circle { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%; font-size:16px; }
.bg-primary-light { background-color:rgba(89,105,255,.1); color:var(--admin-primary); }
.bg-success-light { background-color:rgba(40,167,69,.1); color:var(--admin-success); }
.bg-warning-light { background-color:rgba(255,193,7,.1); color:#a1750a; }
.bg-danger-light { background-color:rgba(220,53,69,.1); color:var(--admin-danger); }

/* ===================== Price calculator widget ===================== */
.price-calc-box { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; background:#f8f9ff; border:1px solid #e2e4fb; border-radius:var(--admin-radius); padding:16px 18px; margin:10px 0 18px; }
.price-calc-box .price-calc-field { flex:1; min-width:140px; }
.price-calc-box .price-calc-result { flex:1; min-width:160px; }
.price-calc-box .price-calc-result .final-price { font-size:22px; font-weight:700; color:var(--admin-success); }
.price-calc-box .price-calc-result .final-label { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--admin-text-muted); font-weight:700; }
.quick-discount-btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.quick-discount-btns button { padding:5px 12px; border-radius:20px; border:1px solid var(--admin-input-border); background:#fff; font-size:12px; font-weight:600; cursor:pointer; color:#3d405c; transition:.15s; }
.quick-discount-btns button:hover, .quick-discount-btns button.active { background:var(--admin-primary); border-color:var(--admin-primary); color:#fff; }

@media (max-width: 900px) {
    .admin-sidebar { position:fixed; left:-250px; top:0; height:100%; z-index:999; transition:.3s; }
    .admin-sidebar.open { left:0; }
    .admin-cards { grid-template-columns:repeat(2,1fr); }
    .admin-form .form-row { flex-direction:column; }
    .price-calc-box { flex-direction:column; }
}

/* ===================== AdminDataTable (Phase 3 CMS component) ===================== */
.adt-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.adt-toolbar-left { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.adt-toolbar-right { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.adt-search { min-width:220px; padding:9px 14px; border:1px solid var(--admin-input-border); border-radius:var(--admin-radius-sm); font-size:13px; }
.adt-search:focus { outline:none; border-color:var(--admin-primary); box-shadow:0 0 0 3px rgba(89,105,255,.15); }
.adt-filter { padding:9px 12px; border:1px solid var(--admin-input-border); border-radius:var(--admin-radius-sm); font-size:13px; background:#fff; }
.adt-bulk-actions { display:flex; gap:6px; }
.adt-table-wrapper { overflow-x:auto; border:1px solid var(--admin-border-color); border-radius:var(--admin-radius); max-height:70vh; overflow-y:auto; }
.adt-table { width:100%; border-collapse:collapse; font-size:13px; }
.adt-table thead th { position:sticky; top:0; background:#f5f5f6; color:var(--admin-text-muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; padding:14px 16px; text-align:left; white-space:nowrap; z-index:2; border-bottom:2px solid var(--admin-border-color); }
.adt-table tbody td { padding:12px 16px; border-bottom:1px solid var(--admin-border-color); vertical-align:middle; }
.adt-table tbody tr:hover { background:#fafafd; }
.adt-col-check { width:36px; text-align:center; }
.adt-sortable { cursor:pointer; user-select:none; }
.adt-sortable:hover { color:var(--admin-primary); }
.adt-sort-icon { font-size:11px; opacity:.6; margin-left:4px; }
.adt-empty { text-align:center; color:#999; padding:44px 20px !important; font-size:14px; }
.adt-empty i { font-size:30px; display:block; margin-bottom:10px; color:#ccc; }
.adt-skeleton-row td { padding:15px; }
.adt-skeleton-bar { height:14px; border-radius:4px; background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%); background-size:200% 100%; animation:adt-shimmer 1.2s infinite; }
@keyframes adt-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.adt-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; font-size:13px; color:var(--admin-text-muted); }
.adt-length { padding:7px 10px; border:1px solid var(--admin-input-border); border-radius:var(--admin-radius-sm); font-size:13px; }
.adt-pagination { display:flex; align-items:center; gap:10px; }
.adt-page-btn { border:1px solid var(--admin-input-border); background:#fff; border-radius:var(--admin-radius-sm); padding:7px 11px; cursor:pointer; }
.adt-page-btn:hover:not(:disabled) { border-color:var(--admin-primary); color:var(--admin-primary); }
.adt-page-btn:disabled { opacity:.4; cursor:not-allowed; }
.adt-page-label { font-size:13px; color:var(--admin-text-muted); }
.adt-thumb { width:42px; height:42px; object-fit:cover; border-radius:var(--admin-radius-sm); }
.adt-badge { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; color:#fff; text-transform:capitalize; display:inline-block; }
.adt-action-btn { padding:5px 11px; border-radius:var(--admin-radius-sm); font-size:12px; text-decoration:none; display:inline-block; margin-right:4px; margin-bottom:4px; border:1px solid transparent; cursor:pointer; font-weight:600; }
.adt-action-view { background:rgba(89,105,255,.1); color:var(--admin-primary); }
.adt-action-edit { background:rgba(255,193,7,.15); color:#a1750a; }
.adt-action-delete { background:rgba(220,53,69,.1); color:var(--admin-danger); }
.adt-cms-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }

/* Reports page */
.sales-range-btn.active { background:var(--admin-primary) !important; color:#fff !important; border-color:var(--admin-primary) !important; }

/* Bootstrap-ish button outline classes used by SweetAlert/Chart toolbars on CMS pages */
.btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-warning, .btn-outline-danger {
    background:#fff; border:1px solid var(--admin-input-border); border-radius:var(--admin-radius-sm); padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s;
}
.btn-outline-primary { color:var(--admin-primary); border-color:var(--admin-primary); }
.btn-outline-primary:hover { background:var(--admin-primary); color:#fff; }
.btn-outline-success { color:var(--admin-success); border-color:var(--admin-success); }
.btn-outline-success:hover { background:var(--admin-success); color:#fff; }
.btn-outline-warning { color:#a1750a; border-color:var(--admin-warning); }
.btn-outline-warning:hover { background:var(--admin-warning); color:#3d2e00; }
.btn-outline-danger { color:var(--admin-danger); border-color:var(--admin-danger); }
.btn-outline-danger:hover { background:var(--admin-danger); color:#fff; }
.btn-outline-secondary:hover { background:#f0f0f8; }
.btn-outline-secondary:disabled, .btn-outline-primary:disabled, .btn-outline-success:disabled, .btn-outline-warning:disabled, .btn-outline-danger:disabled { opacity:.4; cursor:not-allowed; }