/* ================================================================
   v5 UI layer — loaded after the template CSS, cosmetic only.
   Accent colour follows the admin's brand colour (--theme-color).
   ================================================================ */
:root{
  --v5-accent: var(--theme-color, #6777ef);
  --v5-radius: 12px;
  --v5-shadow: 0 2px 10px rgba(20,20,60,.06);
  --v5-ink: #34395e;
  --v5-muted: #98a6ad;
  --v5-line: #eef0f5;
}

body{ -webkit-font-smoothing:antialiased; }

/* ---- surfaces ---- */
.card{ border-radius:var(--v5-radius); box-shadow:var(--v5-shadow); border:0; }
.card .card-header{ border-bottom:1px solid var(--v5-line); border-radius:var(--v5-radius) var(--v5-radius) 0 0; min-height:60px; }
.card .card-header h4{ font-size:16px; }
.section .section-header{ border-radius:var(--v5-radius); box-shadow:var(--v5-shadow); border:0; padding:14px 22px; }
.section .section-header h1{ font-size:20px; font-weight:800; }
.main-content{ padding-top:110px; }

/* ---- buttons & fields ---- */
.btn{ border-radius:8px; font-weight:600; letter-spacing:.01em; }
.btn-primary,.btn-primary:focus{ background-color:var(--v5-accent); border-color:var(--v5-accent); }
.btn-primary:hover,.btn-primary:active{ filter:brightness(.92); background-color:var(--v5-accent)!important; border-color:var(--v5-accent)!important; }
.btn-outline-primary{ color:var(--v5-accent); border-color:var(--v5-accent); }
.btn-outline-primary:hover{ background:var(--v5-accent)!important; border-color:var(--v5-accent)!important; color:#fff; }
.form-control,.custom-select,.select2-container--default .select2-selection--single{ border-radius:8px; }
.form-control:focus{ border-color:var(--v5-accent); box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.modal-content{ border-radius:14px; border:0; }
.modal-header{ border-bottom:1px solid var(--v5-line); }
.badge{ border-radius:20px; }
.table thead th{ border-bottom:1px solid var(--v5-line); color:var(--v5-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }

/* ---- sidebar ---- */
.main-sidebar .sidebar-menu li.menu-header{ padding:16px 20px 6px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#b0b8c4; }
.main-sidebar .sidebar-menu > li > a{ border-radius:10px; margin:2px 12px; padding-left:14px; padding-right:14px; }
.main-sidebar .sidebar-menu > li.active > a{ background:rgba(0,0,0,.05); font-weight:700; }
.main-sidebar .sidebar-menu > li.active > a i{ color:var(--v5-accent)!important; }
.sidebar-mini .main-sidebar .sidebar-menu li.menu-header{ display:none; }

/* ---- card editor tabs ---- */
.v5-tabs{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 14px; margin:0 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.v5-tabs a{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:22px; background:#fff; color:var(--v5-ink); font-weight:600; font-size:13px; box-shadow:var(--v5-shadow); white-space:nowrap; }
.v5-tabs a i{ color:var(--v5-muted); }
.v5-tabs a:hover{ text-decoration:none; color:var(--v5-accent); }
.v5-tabs a.on{ background:var(--v5-accent); color:#fff; }
.v5-tabs a.on i{ color:#fff; }
.v5-tabs-wrap{ margin-bottom:8px; }

/* ---- working-as banner ---- */
.v5-switched{ position:fixed; top:0; left:0; right:0; z-index:1100; background:#34395e; color:#fff; text-align:center; padding:8px 12px; font-size:14px; }
body:has(.v5-switched) .navbar-bg,body:has(.v5-switched) .main-navbar{ top:42px; }

/* ---- mobile bottom bar (customers) ---- */
.v5-bottom{ position:fixed; left:0; right:0; bottom:0; z-index:1030; background:#fff; display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px rgba(20,20,60,.08); }
.v5-bottom a{ flex:1; text-align:center; color:var(--v5-muted); font-size:11px; font-weight:600; padding:4px 2px; border-radius:10px; }
.v5-bottom a i{ display:block; font-size:19px; margin-bottom:2px; }
.v5-bottom a.on{ color:var(--v5-accent); }
.v5-bottom a:hover{ text-decoration:none; }
@media (max-width:991.98px){
  body:has(.v5-bottom) .main-content{ padding-bottom:84px; }
  body:has(.v5-bottom) .main-footer{ padding-bottom:70px; }
  .section .section-header{ padding:12px 16px; }
  .main-content{ padding-left:14px; padding-right:14px; }
  .modal-dialog{ margin:10px; }
  .btn,.form-control{ min-height:42px; }
}

/* ---- install prompt (PWA) ---- */
.v5-install{ position:fixed; left:12px; right:12px; bottom:14px; z-index:1080; max-width:440px; margin:0 auto; background:#fff; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.22); padding:14px 16px; display:none; align-items:center; gap:12px; }
body:has(.v5-bottom) .v5-install{ bottom:78px; }
.v5-install.show{ display:flex; }
.v5-install img{ width:44px; height:44px; border-radius:10px; object-fit:contain; background:#f4f6f9; padding:4px; }
.v5-install .txt{ flex:1; min-width:0; font-size:13px; line-height:1.3; }
.v5-install .txt b{ display:block; font-size:14px; }
.v5-install .x{ background:none; border:0; color:var(--v5-muted); font-size:18px; padding:4px 8px; cursor:pointer; }
.v5-offline-bar{ position:fixed; top:0; left:0; right:0; z-index:1200; background:#ffa426; color:#222; text-align:center; font-size:13px; font-weight:600; padding:5px; display:none; }
.v5-offline-bar.show{ display:block; }

/* ---- image cropper ---- */
.v5-crop-back{ position:fixed; inset:0; z-index:2000; background:rgba(15,18,40,.72); display:none; align-items:center; justify-content:center; padding:14px; }
.v5-crop-back.show{ display:flex; }
.v5-crop{ background:#fff; border-radius:16px; width:100%; max-width:520px; max-height:100%; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.v5-crop header{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--v5-line); }
.v5-crop header b{ font-size:16px; }
.v5-crop header button{ background:none; border:0; font-size:22px; color:var(--v5-muted); cursor:pointer; line-height:1; }
.v5-crop .stage{ position:relative; margin:16px auto 8px; touch-action:none; cursor:grab; background:#111; overflow:hidden; border-radius:10px; user-select:none; -webkit-user-select:none; }
.v5-crop .stage:active{ cursor:grabbing; }
.v5-crop .stage canvas{ display:block; width:100%; height:100%; }
.v5-crop .stage .mask{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); }
.v5-crop .stage .mask.round{ border-radius:50%; box-shadow:0 0 0 999px rgba(0,0,0,.45), inset 0 0 0 2px #fff; }
.v5-crop .stage .grid{ position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) 33.3% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) 66.6% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) 0 33.3%/100% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) 0 66.6%/100% 1px no-repeat; }
.v5-crop .ctl{ display:flex; align-items:center; gap:10px; padding:6px 18px 4px; }
.v5-crop .ctl input[type=range]{ flex:1; }
.v5-crop .ctl button{ border:0; background:#f0f2f8; border-radius:8px; width:38px; height:38px; cursor:pointer; color:var(--v5-ink); }
.v5-crop .presets{ display:flex; gap:6px; padding:6px 18px; flex-wrap:wrap; }
.v5-crop .presets button{ border:1px solid var(--v5-line); background:#fff; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.v5-crop .presets button.on{ background:var(--v5-accent); color:#fff; border-color:var(--v5-accent); }
.v5-crop footer{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; }
.v5-crop-thumb{ margin-top:8px; max-width:120px; max-height:120px; border-radius:10px; box-shadow:var(--v5-shadow); display:block; }