:root {
  --ks-primary: #0aaebe;
  --ks-primary-dark: #087f8d;
  --ks-primary-soft: #dff5f7;
  --ks-sidebar: #d9eff1;
  --ks-sidebar-border: #c4e1e4;
  --ks-surface: #ffffff;
  --ks-canvas: #f4f7f8;
  --ks-border: #dce5e8;
  --ks-text: #18313d;
  --ks-muted: #6d7f88;
  --ks-success: #24956a;
  --ks-danger: #cf4b57;
  --ks-sidebar-width: 252px;
  --ks-sidebar-collapsed: 76px;
  --ks-topbar-height: 72px;
  --ks-radius: 10px;
  --ks-shadow: 0 8px 28px rgba(25, 55, 66, .07);
}

html { font-size: 15px; }
body { margin: 0; color: var(--ks-text); background: var(--ks-canvas); font-family: "Segoe UI", Arial, sans-serif; }
a { color: var(--ks-primary-dark); }
.btn { border-radius: 7px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--ks-primary-dark); --bs-btn-border-color: var(--ks-primary-dark); --bs-btn-hover-bg: #066d78; --bs-btn-hover-border-color: #066d78; }
.form-control { border-color: var(--ks-border); border-radius: 7px; padding: .68rem .8rem; }
.form-control:focus, .form-check-input:focus, .btn:focus-visible { border-color: var(--ks-primary); box-shadow: 0 0 0 .2rem rgba(10, 174, 190, .15); }
.field-validation-error, .validation-summary-errors { color: var(--ks-danger); font-size: .85rem; }
.validation-summary-errors { background: #fff1f2; border: 1px solid #f3c8cc; border-radius: 7px; margin-bottom: 1rem; padding: .75rem 1rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1035; width: var(--ks-sidebar-width); display: flex; flex-direction: column; overflow-y: auto; background: var(--ks-sidebar); border-right: 1px solid var(--ks-sidebar-border); transition: width .2s ease, transform .2s ease; }
.sidebar-brand { height: var(--ks-topbar-height); display: flex; align-items: center; gap: 12px; padding: 0 20px; color: white; background: var(--ks-primary); text-decoration: none; overflow: hidden; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; color: var(--ks-primary-dark); background: white; border-radius: 9px; font-weight: 800; letter-spacing: -1px; }
.brand-copy { display: flex; flex-direction: column; white-space: nowrap; }
.brand-copy strong { font-size: 1.15rem; }
.brand-copy small { opacity: .85; font-size: .72rem; }
.sidebar-section { padding: 28px 22px 10px; color: var(--ks-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.sidebar-nav { padding: 0 10px; }
.sidebar-nav a { display: flex; align-items: center; gap: 13px; min-height: 46px; margin: 4px 0; padding: 0 14px; color: var(--ks-text); border-radius: 8px; text-decoration: none; white-space: nowrap; overflow: hidden; }
.sidebar-nav a:hover { background: rgba(255,255,255,.6); }
.sidebar-nav a.active { color: var(--ks-primary-dark); background: white; box-shadow: 0 3px 12px rgba(24,49,61,.06); font-weight: 700; }
.sidebar-nav a.active::before { content: ""; position: absolute; left: 0; width: 4px; height: 28px; background: var(--ks-primary); border-radius: 0 4px 4px 0; }
.menu-icon { width: 24px; flex: 0 0 24px; font-size: 1.25rem; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 20px; border-top: 1px solid var(--ks-sidebar-border); color: var(--ks-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--ks-success); border-radius: 50%; }
.admin-workspace { min-height: 100vh; margin-left: var(--ks-sidebar-width); transition: margin-left .2s ease; }
.topbar { position: sticky; top: 0; z-index: 1020; height: var(--ks-topbar-height); display: flex; align-items: center; padding: 0 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ks-border); backdrop-filter: blur(8px); }
.topbar-toggle { width: 40px; height: 40px; margin-right: 18px; border: 0; border-radius: 7px; color: var(--ks-text); background: transparent; font-size: 1.25rem; }
.topbar-toggle:hover { background: var(--ks-primary-soft); }
.topbar-title { display: flex; flex-direction: column; }
.topbar-title strong { font-size: 1rem; }
.topbar-title small, .user-copy small { color: var(--ks-muted); font-size: .72rem; }
.topbar-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-avatar { width: 36px; height: 36px; display: grid; place-items: center; color: white; background: var(--ks-primary-dark); border-radius: 50%; font-weight: 700; }
.user-copy { display: flex; flex-direction: column; min-width: 120px; }
.user-copy strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; white-space: nowrap; }
.admin-content { padding: 30px; }
.admin-shell.sidebar-collapsed .sidebar { width: var(--ks-sidebar-collapsed); }
.admin-shell.sidebar-collapsed .admin-workspace { margin-left: var(--ks-sidebar-collapsed); }
.admin-shell.sidebar-collapsed .brand-copy, .admin-shell.sidebar-collapsed .menu-text, .admin-shell.sidebar-collapsed .sidebar-section { display: none; }
.admin-shell.sidebar-collapsed .sidebar-brand { padding: 0 18px; }
.admin-shell.sidebar-collapsed .sidebar-nav { padding-top: 18px; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 4px; font-size: 1.65rem; font-weight: 700; }
.page-heading p { margin: 0; color: var(--ks-muted); }
.page-kicker, .modal-kicker { color: var(--ks-primary-dark); font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.stat-strip > div { padding: 15px 18px; background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius); }
.stat-strip span { display: block; color: var(--ks-muted); font-size: .75rem; }
.stat-strip strong { font-size: 1.35rem; }
.ui-card { background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-radius); box-shadow: var(--ks-shadow); overflow: hidden; }
.ui-card-header, .ui-card-footer, .ui-card-body { padding: 18px 20px; }
.ui-card-header { border-bottom: 1px solid var(--ks-border); }
.ui-card-footer { border-top: 1px solid var(--ks-border); }
.ui-card-header h2 { margin: 0; font-size: 1rem; }
.ui-card-header p { margin: 3px 0 0; color: var(--ks-muted); font-size: .78rem; }
.admin-table thead th { padding: .9rem 1rem; color: #526974; background: #f6f9fa; border-bottom-color: var(--ks-border); font-size: .75rem; letter-spacing: .02em; white-space: nowrap; }
.admin-table td { padding: .85rem 1rem; border-color: #e7edef; font-size: .86rem; }
.admin-table code { color: var(--ks-primary-dark); }
.table-title { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.table-title > div { min-width: 0; }
.table-title strong, .table-title small { display: block; }
.table-title small { max-width: 290px; color: var(--ks-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: var(--ks-primary-dark); background: var(--ks-primary-soft); border-radius: 7px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.status-badge i { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.active { color: #176d4d; background: #e2f5ed; }.status-badge.active i { background: var(--ks-success); }
.status-badge.passive { color: #687982; background: #edf1f2; }.status-badge.passive i { background: #87969d; }
.table-actions { white-space: nowrap; }
.empty-state { padding: 44px; text-align: center; color: var(--ks-muted); }
.empty-state span, .empty-state strong { display: block; }.empty-state span { font-size: 2rem; }.empty-state p { margin: 4px 0 0; }

.modal-content { border: 0; border-radius: 12px; box-shadow: 0 18px 60px rgba(20,48,60,.2); }
.modal-header, .modal-footer { padding: 18px 22px; border-color: var(--ks-border); }.modal-body { padding: 22px; }
.toast-container { z-index: 1100; }.toast { color: var(--ks-text); background: white; box-shadow: var(--ks-shadow); }
.toast.toast-success { border-left: 4px solid var(--ks-success) !important; }.toast.toast-error { border-left: 4px solid var(--ks-danger) !important; }
.product-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.product-image-card { padding:12px; border:1px solid var(--ks-border); border-radius:var(--ks-radius); background:#fff; }
.product-image-card img { width:100%; height:150px; object-fit:cover; margin-bottom:12px; border-radius:7px; background:var(--ks-canvas); }
.upload-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; padding:26px; border:2px dashed var(--ks-sidebar-border); border-radius:var(--ks-radius); background:var(--ks-canvas); cursor:pointer; }
.upload-dropzone.dragging { border-color:var(--ks-primary); background:var(--ks-primary-soft); }
.upload-dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-dropzone span { color:var(--ks-muted); font-size:.82rem; }
.bulk-preview-list { display:grid; gap:10px; margin-top:14px; }
.bulk-preview-item { display:grid; grid-template-columns:72px minmax(150px,1fr) minmax(180px,1fr) 90px auto; gap:12px; align-items:end; padding:10px; border:1px solid var(--ks-border); border-radius:8px; }
.bulk-preview-item img { width:72px; height:62px; object-fit:cover; border-radius:6px; }
.bulk-file-meta strong,.bulk-file-meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.bulk-file-meta small { color:var(--ks-muted); }
.bulk-upload-errors:not(:empty),.preview-notice { margin-top:12px; padding:10px 12px; border-radius:7px; background:#fff1f2; color:var(--ks-danger); }
.preview-notice { margin:0 0 20px; color:var(--ks-primary-dark); background:var(--ks-primary-soft); }
.preview-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.preview-gallery img { width:100%; height:240px; object-fit:cover; border-radius:8px; }
.quote-items-summary span { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.quote-items-summary small { color:var(--ks-muted); }
.quote-status { display:inline-block; padding:4px 9px; border-radius:20px; background:#edf1f2; font-size:.72rem; font-weight:700; }.quote-status.status-0 { color:#176d4d; background:#e2f5ed; }.quote-status.status-1,.quote-status.status-2 { color:#7a5b08; background:#fff4cf; }.quote-status.status-3 { color:var(--ks-primary-dark); background:var(--ks-primary-soft); }
.quote-detail-card { height:100%; padding:18px; border:1px solid var(--ks-border); border-radius:var(--ks-radius); }.quote-detail-card h3 { margin:0 0 14px; font-size:1rem; }.quote-detail-card dl { display:grid; grid-template-columns:110px 1fr; gap:8px 14px; margin:0; }.quote-detail-card dt { color:var(--ks-muted); font-weight:600; }.quote-detail-card dd { margin:0; overflow-wrap:anywhere; }.quote-message { white-space:pre-wrap; overflow-wrap:anywhere; }
.section-content-summary { display:block; max-width:440px; color:var(--ks-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.page-preview-header { padding:10px 0 22px; }.page-preview-header h1 { margin:12px 0 4px; }.page-preview-sections { display:grid; gap:14px; }.page-preview-section { padding:20px; border:1px solid var(--ks-border); border-radius:var(--ks-radius); }.page-preview-section small { color:var(--ks-primary-dark); }.page-preview-section h2 { margin:8px 0; font-size:1.2rem; }.page-preview-section div { white-space:pre-wrap; overflow-wrap:anywhere; }
.section-image-panel { padding:18px; border:1px solid var(--ks-border); border-radius:var(--ks-radius); background:var(--ks-canvas); }
.page-media-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:10px; max-height:340px; overflow:auto; }
.page-media-option { display:flex; flex-direction:column; gap:7px; padding:7px; border:2px solid transparent; border-radius:8px; background:#fff; cursor:pointer; }
.page-media-option:hover,.page-media-option.selected { border-color:var(--ks-primary); }.page-media-option input { position:absolute; opacity:0; pointer-events:none; }
.page-media-option img { width:100%; height:90px; object-fit:cover; border-radius:6px; background:#eef2f3; }.page-media-option span { overflow:hidden; color:var(--ks-muted); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.page-media-new-preview { width:100%; height:180px; margin-top:12px; object-fit:cover; border-radius:8px; background:#eef2f3; }
.dashboard-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:24px; }.dashboard-stat { padding:16px 18px; background:#fff; border:1px solid var(--ks-border); border-radius:var(--ks-radius); }.dashboard-stat span { display:block; color:var(--ks-muted); font-size:.76rem; }.dashboard-stat strong { font-size:1.6rem; }
.traffic-chart { display:flex; align-items:stretch; gap:8px; height:300px; padding:20px; overflow-x:auto; }.traffic-day { min-width:34px; flex:1; display:grid; grid-template-rows:24px 1fr 22px; text-align:center; }.traffic-values { display:flex; justify-content:center; gap:5px; font-size:.65rem; }.traffic-bars { display:flex; align-items:end; justify-content:center; gap:3px; min-height:210px; border-bottom:1px solid var(--ks-border); }.traffic-bars i { width:min(16px,40%); border-radius:4px 4px 0 0; }.traffic-bars .views { background:var(--ks-primary); }.traffic-bars .unique { background:var(--ks-primary-dark); }.traffic-day small { padding-top:5px; color:var(--ks-muted); }.chart-legend { display:flex; gap:14px; font-size:.72rem; }.chart-legend span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:2px; }.chart-legend .views::before { background:var(--ks-primary); }.chart-legend .unique::before { background:var(--ks-primary-dark); }
.dashboard-list { display:grid; gap:12px; }.dashboard-list>div { display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--ks-border); }.dashboard-list>div:last-child { border:0; }.dashboard-list span,.dashboard-list small { display:block; }.dashboard-list small { color:var(--ks-muted); }.visit-referrer { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px){.bulk-preview-item{grid-template-columns:60px 1fr}.bulk-preview-item>div:nth-of-type(n+2),.bulk-preview-item>button{grid-column:2}.preview-gallery img{height:180px}}

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 42%) 1fr; background: white; }
.login-panel { display: flex; flex-direction: column; justify-content: center; max-width: 500px; width: 100%; margin: auto; padding: 48px; }
.login-brand { position: absolute; top: 34px; display: flex; align-items: center; gap: 12px; }.login-brand > div { display: flex; flex-direction: column; }.login-brand small { color: var(--ks-muted); font-size: .72rem; }
.login-heading > span { color: var(--ks-primary-dark); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }.login-heading h1 { margin: 8px 0; font-size: 2rem; }.login-heading p { color: var(--ks-muted); }
.login-card { margin-top: 24px; }.login-card .btn { display: flex; justify-content: space-between; padding: .75rem 1rem; }
.login-footnote { margin-top: 30px; color: var(--ks-muted); font-size: .75rem; text-align: center; }
.login-visual { position: relative; display: flex; align-items: end; padding: 70px; overflow: hidden; color: white; background: linear-gradient(145deg, var(--ks-primary-dark), #164854); }
.visual-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 40px 40px; transform: perspective(600px) rotateX(58deg) scale(1.5); }
.visual-copy { position: relative; max-width: 540px; }.visual-copy > span { color: #a9edf2; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }.visual-copy h2 { margin: 12px 0; font-size: clamp(2rem,4vw,3.5rem); }.visual-copy p { color: #d4eef0; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: var(--ks-sidebar-width) !important; }.admin-workspace { margin-left: 0 !important; }
  .admin-shell.sidebar-open .sidebar { transform: translateX(0); }.admin-shell.sidebar-open .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; display: block; background: rgba(12,36,45,.35); }
  .admin-shell.sidebar-collapsed .brand-copy, .admin-shell.sidebar-collapsed .menu-text, .admin-shell.sidebar-collapsed .sidebar-section { display: initial; }
  .login-page { grid-template-columns: 1fr; }.login-visual { display: none; }
}
@media (max-width: 600px) {
  .topbar { padding: 0 14px; }.topbar-title small, .user-copy { display: none; }.topbar-user { gap: 7px; }
  .admin-content { padding: 20px 14px; }.page-heading { align-items: stretch; flex-direction: column; }.page-heading .btn { align-self: flex-start; }
  .stat-strip { grid-template-columns: 1fr; }.login-panel { padding: 28px; }.login-brand { top: 24px; }
}
/* Weekly business-hours editor */
.business-hours-admin{display:grid;gap:.65rem}.business-day{display:grid;grid-template-columns:minmax(120px,1fr) 110px 130px auto 130px;gap:.75rem;align-items:center;padding:.75rem 1rem;border:1px solid var(--admin-border,#dbe7e9);border-radius:12px;background:#f9fbfb}.business-day .form-check{margin:0}.business-day>span{color:#70838a;text-align:center}@media(max-width:767px){.business-day{grid-template-columns:1fr auto}.business-day>span{display:none}}
.sidebar-nav .notification-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:var(--ks-danger); font-size:.68rem; font-weight:800; }
.admin-table tr.unread-row > td { background:#f0fbfa; }
.unread-pill { display:inline-flex; margin-left:.4rem; padding:2px 7px; border-radius:999px; color:#176d4d; background:#d8f4ed; font-size:.67rem; font-weight:800; vertical-align:middle; }