/* Admin dashboard chrome — separate from the marketing site's styles.css,
   which is still loaded first for shared variables/reset/buttons/forms. */

body{ background:var(--bg-soft); }

.admin-topbar{
  background:var(--navy-deep); color:#fff; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:10px; column-gap:20px;
}
.admin-topbar .brand{display:flex; align-items:center; gap:10px; color:#fff; flex-shrink:0;}
.admin-topbar .brand img{height:30px;}
.admin-topbar .brand span{font-weight:700; font-size:14.5px;}
.nav-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  background:#E74C3C; color:#fff; font-size:10.5px; font-weight:800; border-radius:999px; margin-left:6px; vertical-align:2px;
}
.admin-user{display:flex; align-items:center; gap:14px; font-size:13px; color:rgba(255,255,255,0.7); flex-shrink:0; white-space:nowrap;}
.admin-user a{color:#fff; font-weight:600;}

/* "Enable Notifications" toggle -- see assets/js/inventory-push-subscribe.js.
   Stays hidden (via inline style="display:none" until JS confirms the
   browser supports push and VAPID keys are configured) rather than via
   this CSS, so there's no flash-of-hidden-button if JS is slow to load. */
.push-toggle-btn{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  color:#fff; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; font-family:inherit;
}
.push-toggle-btn svg{width:14px; height:14px; flex-shrink:0;}
.push-toggle-btn:hover{background:rgba(255,255,255,0.2);}
.push-toggle-btn.push-on{background:rgba(67,233,123,0.25); border-color:rgba(67,233,123,0.5);}

/* Topbar notification bell -- on every Inventory page (not just Dashboard),
   so the pending-request count is always visible. See
   assets/js/inventory-notifications.js. The badge only ever shows a number
   for admins (pending part requests awaiting approve/reject); it's just a
   plain bell with no number for employees. */
.notif-bell-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25); color:#fff !important;
}
.notif-bell-btn svg{width:16px; height:16px; flex-shrink:0;}
.notif-bell-btn:hover{background:rgba(255,255,255,0.2);}
.notif-bell-btn .nav-badge{
  position:absolute; top:-4px; right:-4px; margin-left:0;
}

.admin-wrap{max-width:1080px; margin:0 auto; padding:40px 24px 80px;}

/* Navigation now lives INSIDE the content box as two rows of tabs instead
   of a topbar navbar -- Row 1 (.section-tabs, reuses .dash-tabs/.dash-tab-btn)
   picks a section; Row 2 (.subsection-tabs) shows that section's pages as
   pill sub-tabs -- real links doing real page navigation. See #17.
   The Dashboard page reuses this same .subsection-tabs/.subsection-tab pill
   style (as <button> elements switching panels via JS, not links) for its
   own Overview/Stock Alerts/Requests/Activity tabs, specifically so it
   doesn't show two heavy/bold .dash-tabs bars stacked on top of each other
   -- one lighter pill row is enough. See #19. */
.section-tabs{margin-bottom:0;}
.subsection-tabs{
  display:flex; gap:8px; flex-wrap:wrap; background:var(--bg-soft2); border-radius:10px;
  padding:8px; margin:14px 0 26px;
}
.subsection-tab{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:700; color:var(--text-dark) !important; background:#fff; border:1px solid var(--border);
  white-space:nowrap; cursor:pointer; font-family:inherit;
}
.subsection-tab svg{width:14px; height:14px; flex-shrink:0;}
.subsection-tab:hover{border-color:var(--blue);}
.subsection-tab.active{background:var(--blue); border-color:var(--blue); color:#fff !important;}
@media (max-width:640px){
  .subsection-tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
}

/* Big live-alert popup -- replaces the old small corner toast for every
   notification type (new part request, approved/rejected, self-checkout,
   low stock, work order created/closed). See assets/js/inventory-notifications.js.
   Several can queue up (e.g. 3 requests land in the same 10s poll); only
   one shows at a time, the next appears as soon as the current one closes. */
.alert-modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,0.55); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:9999;
}
.alert-modal{
  background:#fff; border-radius:16px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden;
}
.alert-modal-head{
  display:flex; align-items:center; gap:12px; padding:20px 22px 16px;
  border-bottom:1px solid var(--border);
}
.alert-modal-head .alert-modal-icon{
  width:40px; height:40px; border-radius:999px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft2); color:var(--blue);
}
.alert-modal-head .alert-modal-icon svg{width:20px; height:20px;}
.alert-modal.alert-success .alert-modal-icon{background:rgba(67,233,123,0.15); color:#1a9e52;}
.alert-modal.alert-error .alert-modal-icon{background:rgba(231,76,60,0.12); color:#c0392b;}
.alert-modal-title{font-size:16px; font-weight:800; color:var(--text-dark);}
.alert-modal-body{padding:18px 22px;}
.alert-modal-row{
  display:flex; justify-content:space-between; gap:16px; padding:7px 0;
  font-size:13.5px; border-bottom:1px dashed var(--border);
}
.alert-modal-row:last-child{border-bottom:none;}
.alert-modal-row .label{color:var(--text-muted); font-weight:600;}
.alert-modal-row .value{color:var(--text-dark); font-weight:700; text-align:right;}
.alert-modal-foot{
  display:flex; justify-content:flex-end; gap:10px; padding:14px 22px 20px;
}
.alert-modal-queue-note{font-size:12px; color:var(--text-muted); padding:0 22px 14px; margin-top:-8px;}

/* Excel-style filter bar above the Parts table -- search + Vendor +
   Storage Location dropdowns + a Low Stock checkbox, all live (no submit
   button, no page reload). See assets/js/inventory-parts-filter.js. */
.parts-filter-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px;}
.parts-filter-bar input[type=text]{padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; min-width:220px; flex:1 1 220px;}
.parts-filter-bar select{padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; background:#fff;}
.parts-filter-bar label.checkbox-inline{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--text-dark); white-space:nowrap;}
.parts-filter-bar label.checkbox-inline input{width:auto; margin:0;}
.parts-filter-bar .parts-filter-clear{font-size:13px; font-weight:600;}
.parts-filter-status{font-size:12.5px; color:var(--text-muted); margin:-10px 0 16px;}
.admin-header-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px;}
.admin-header-row h1{font-size:24px;}

.admin-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:0; overflow:hidden;}
.admin-table{width:100%; border-collapse:collapse;}
.admin-table th, .admin-table td{text-align:left; padding:14px 18px; font-size:14px; border-bottom:1px solid var(--border);}
.admin-table th{background:var(--bg-soft2); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted);}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table .row-actions{display:flex; gap:10px;}
.admin-table .row-actions a, .admin-table .row-actions button{font-size:13px; font-weight:600; color:var(--blue); background:none; border:none; cursor:pointer; padding:0;}
.admin-table .row-actions .danger{color:#C0392B;}

.status-pill{font-size:11.5px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.status-pill.published{background:#E6F6EC; color:#1E7A3D;}
.status-pill.draft{background:#F1F1F1; color:#666;}
.status-pill.status-pending{background:#FFF4E0; color:#8A5A00;}
.status-pill.status-approved{background:#E6F6EC; color:#1E7A3D;}
.status-pill.status-rejected{background:#FDEDED; color:#A6342B;}
.status-pill.status-self_checkout{background:#E8F0FE; color:#1A56DB;}

.btn-danger-solid{background:#C0392B; color:#fff;}
.btn-danger-solid:hover{background:#A6342B;}

/* Part Request review cards (admin queue) */
.request-card{padding:18px 20px; border-bottom:1px solid var(--border); transition:background 0.6s;}
.request-card:last-child{border-bottom:none;}
.request-card-main{margin-bottom:12px;}
.request-card-actions{display:flex; gap:10px;}
.request-card-highlight{animation:request-highlight-flash 2.4s ease-out;}
@keyframes request-highlight-flash{
  0%{background:#FFF4E0;} 100%{background:transparent;}
}
.reject-form{display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);}
.reject-form.open{display:block;}
.reject-form .form-field{margin-bottom:12px;}
.reject-form label{display:block; font-size:12.5px; font-weight:700; margin-bottom:4px;}
.reject-form select, .reject-form textarea{
  width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--border); font-size:13.5px; font-family:inherit; resize:vertical;
}

.admin-form-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:32px; max-width:760px;}
.admin-form-card .form-field{margin-bottom:20px;}
.admin-form-card label{display:block; font-size:13px; font-weight:700; color:var(--text-dark); margin-bottom:6px;}
.admin-form-card input[type=text], .admin-form-card input[type=email], .admin-form-card input[type=password],
.admin-form-card input[type=number], .admin-form-card input[type=tel], .admin-form-card textarea, .admin-form-card select{
  width:100%; padding:11px 14px; border-radius:9px; border:1px solid var(--border); font-size:14.5px; font-family:inherit;
}
.admin-form-card input[type=file]{ width:100%; padding:9px 0; font-size:13.5px; font-family:inherit; }
.admin-form-card textarea{ resize:vertical; }
.admin-form-card .hint{font-size:12.5px; color:var(--text-muted); margin-top:6px;}
.admin-form-card .cover-preview{max-width:220px; border-radius:8px; margin-top:10px; display:block;}

/* Work Order detail page: the "Stop" action's remarks form is tucked
   behind a <details>/<summary> disclosure styled to look like a button
   rather than the browser's default triangle-marker list item. */
.admin-form-card details > summary{ list-style:none; }
.admin-form-card details > summary::-webkit-details-marker{ display:none; }
.admin-form-card details[open] > summary{ margin-bottom:4px; }

#editor{ background:#fff; min-height:320px; border:1px solid var(--border); border-top:none; border-radius:0 0 9px 9px; }
.ql-toolbar{ border-radius:9px 9px 0 0; }

.login-wrap{ max-width:380px; margin:90px auto; }
.login-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:36px; box-shadow:var(--shadow-lg);}
.login-card .brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px;}
.login-card .brand img{height:44px;}
.login-card h1{font-size:19px; text-align:center;}

.alert{padding:12px 16px; border-radius:9px; font-size:13.5px; margin-bottom:20px;}
.alert-error{background:#FDEDED; color:#A6342B; border:1px solid #F0B4B4;}
.alert-success{background:#EAF7EE; color:#1E7A3D; border:1px solid #B7E3C2;}

/* Full-size photo viewer (Inventory Parts list) -- see assets/js/inventory-lightbox.js */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(8,16,32,0.92); z-index:9999;
  display:none; align-items:center; justify-content:center;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width:88vw; max-height:82vh; border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,0.45); }
.lightbox-btn{
  position:absolute; background:rgba(255,255,255,0.14); color:#fff; border:none; border-radius:50%;
  width:46px; height:46px; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background 0.15s;
}
.lightbox-btn:hover{ background:rgba(255,255,255,0.28); }
.lightbox-close{ top:20px; right:20px; font-size:26px; }
.lightbox-fullscreen{ top:20px; right:76px; font-size:17px; }
.lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); font-size:22px; }
.lightbox-next{ right:20px; top:50%; transform:translateY(-50%); font-size:22px; }
.lightbox-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:13px; font-weight:600; background:rgba(255,255,255,0.14); padding:5px 14px; border-radius:999px;
}
@media (max-width: 560px){
  .lightbox-btn{ width:40px; height:40px; }
  .lightbox-fullscreen{ display:none; } /* Fullscreen API support is inconsistent on mobile browsers */
}

/* Hover magnifier pane for part thumbnails -- see assets/js/inventory-lightbox.js */
.zoom-pane{
  position:fixed; width:320px; height:320px; z-index:9998;
  border:3px solid #fff; border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,0.35);
  background-color:#fff; background-repeat:no-repeat;
  display:none; pointer-events:none; /* never intercepts the mouse -- mousemove stays on the thumbnail */
}
.zoom-pane.visible{ display:block; }
@media (max-width: 900px), (hover: none){
  /* Hover has no real meaning on touch devices -- keep double-click/tap-to-open only. */
  .zoom-pane{ display:none !important; }
}

/* Part # hover trigger + its info popover (last received/consumed + vendor) */
.part-info-trigger{
  cursor:help; border-bottom:1px dashed var(--text-muted, #94a3b8); padding-bottom:1px;
}
.info-popover{
  position:fixed; width:280px; max-width:88vw; z-index:9998;
  background:#12213f; color:#fff; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,0.35);
  padding:14px 16px; font-size:12.5px; line-height:1.5;
  display:none; pointer-events:none;
}
.info-popover.visible{ display:block; }
.info-popover-section{ margin-bottom:12px; }
.info-popover-section:last-child{ margin-bottom:0; }
.info-popover h4{
  margin:0 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  color:#9db4e0; font-weight:700;
}
.info-popover-muted{ color:#94a3b8; font-style:italic; }
@media (max-width: 900px), (hover: none){
  /* Hover has no real meaning on touch devices. */
  .info-popover{ display:none !important; }
}


/* ===== Colorful Admin/Employee dashboards -- gradient stat cards + in-page
   tabs, styled after a reference dashboard the user liked elsewhere. Plain
   hand-rolled CSS/SVG/vanilla JS, matching the rest of this codebase --
   deliberately not pulling in Bootstrap/Font Awesome for one page. ===== */
.dash-greeting{font-size:14.5px; color:var(--text-muted); margin:-6px 0 22px;}

.dash-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:24px;}
.dash-tab-btn{
  background:none; border:none; cursor:pointer; font-family:inherit; padding:11px 18px; margin-bottom:-2px;
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--text-muted);
  border-bottom:2px solid transparent; border-radius:8px 8px 0 0; white-space:nowrap;
}
.dash-tab-btn svg{width:15px; height:15px; flex-shrink:0;}
.dash-tab-btn:hover{color:var(--text-dark); background:var(--bg-soft);}
.dash-tab-btn.active{color:var(--blue); border-bottom-color:var(--blue); background:#fff;}
.dash-tab-panel{display:none;}
.dash-tab-panel.active{display:block;}
@media (max-width:640px){
  .dash-tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:26px;}
.stat-card-grad{
  border-radius:14px; padding:20px 22px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 8px 20px rgba(20,30,60,0.14);
}
.stat-card-grad svg{width:32px; height:32px; position:absolute; top:16px; right:16px; opacity:0.35;}
.stat-card-grad .stat-number{font-size:30px; font-weight:800; line-height:1.1;}
.stat-card-grad .stat-label{font-size:13px; font-weight:600; opacity:0.94; margin-top:4px;}
.grad-purple{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);}
.grad-pink{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);}
.grad-blue{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);}
.grad-green{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);}
.grad-orange{background:linear-gradient(135deg,#fa8231 0%,#f7b733 100%);}

.quick-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;}
.quick-action-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:10px;
  background:#fff; border:1px solid var(--border); color:var(--text-dark) !important; font-size:13.5px; font-weight:700;
  box-shadow:0 1px 3px rgba(20,30,60,0.06);
}
.quick-action-btn svg{width:17px; height:17px; color:var(--blue); flex-shrink:0;}
.quick-action-btn:hover{border-color:var(--blue); box-shadow:0 4px 10px rgba(14,118,188,0.15);}

.dash-info-note{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin-bottom:18px;}
.dash-info-note svg{width:15px; height:15px; flex-shrink:0;}