/* =====================================================================
   Auto Service Admin — styles
   ===================================================================== */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
html, body { -webkit-tap-highlight-color: transparent; }
body { font-family: 'Noto Sans Georgian', sans-serif; background:#f4f6fb; color:#1e293b; }

.scrollbar-thin::-webkit-scrollbar { width:6px; height:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }
.scrollbar-thin::-webkit-scrollbar-track { background:transparent; }

/* ---------- LOGIN ---------- */
.hero-panel {
  background:
    radial-gradient(900px 600px at 100% 0%,  rgba(124,58,237,0.50) 0%, transparent 55%),
    radial-gradient(800px 500px at 0% 100%,  rgba(59,110,245,0.50) 0%, transparent 55%),
    linear-gradient(135deg, #07091a 0%, #0c1230 50%, #131a40 100%);
  position:relative; overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:drift 18s ease-in-out infinite; }
.orb-1 { width:380px; height:380px; background:#3b6ef5; top:-100px; right:-80px; }
.orb-2 { width:320px; height:320px; background:#a855f7; bottom:-80px; left:-60px; animation-delay:-6s; }
@keyframes drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }

.login-input { width:100%; padding:1rem 1rem 1rem 3rem; border-radius:14px; background:#f6f8fc; border:1.5px solid #e5eaf3; outline:none; transition:.18s; font-size:1rem; color:#0f172a; }
.login-input:focus { border-color:#3b6ef5; background:#fff; box-shadow:0 0 0 4px rgba(59,110,245,.12); }
.login-input::placeholder { color:#94a3b8; }
.icon-l { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.95rem; pointer-events:none; }
.icon-r { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); color:#94a3b8; cursor:pointer; padding:.5rem; border-radius:.5rem; }
.icon-r:hover { color:#3b6ef5; background:#eff5ff; }
.btn-login { width:100%; padding:1.1rem 1rem; border-radius:14px; background:linear-gradient(135deg,#3b6ef5 0%,#7c3aed 100%); color:#fff; font-weight:700; font-size:1rem; box-shadow:0 14px 34px -10px rgba(59,110,245,.55), inset 0 1px 0 rgba(255,255,255,.2); transition:.18s; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.btn-login:hover  { transform:translateY(-1px); box-shadow:0 18px 40px -10px rgba(59,110,245,.65); }
.btn-login:active { transform:translateY(0); }

/* ---------- LAYOUT ---------- */
.sidebar-link { display:flex; align-items:center; gap:.85rem; padding:.7rem .95rem; border-radius:.85rem; color:#cbd5e1; transition:all .15s; font-weight:500; font-size:.95rem; cursor:pointer; user-select:none; }
.sidebar-link:hover { background:rgba(255,255,255,0.05); color:#fff; }
.sidebar-link i { width:1.2rem; text-align:center; font-size:1rem; }
.sidebar-link.active { background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; box-shadow:0 10px 28px -10px rgba(59,110,245,.55); }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem; }
.card-soft { background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem; box-shadow:0 1px 3px rgba(15,23,42,.05), 0 6px 16px -10px rgba(15,23,42,.12); }
.card-soft:hover { border-color:#cbd5e1; }

.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:9999px; font-size:.72rem; font-weight:600; white-space:nowrap; }

.input { width:100%; padding:.7rem .9rem; border-radius:.85rem; background:#f6f8fc; border:1.5px solid #e5eaf3; outline:none; transition:.15s; font-size:.95rem; color:#0f172a; }
.input:focus { border-color:#3b6ef5; box-shadow:0 0 0 3px rgba(59,110,245,.12); background:#fff; }
select.input { appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M3.2 5.4a1 1 0 0 1 1.4 0L8 8.8l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 6.8a1 1 0 0 1 0-1.4z'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.2rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1.05rem; border-radius:.85rem; font-weight:600; font-size:.9rem; transition:.15s; cursor:pointer; border:1.5px solid transparent; white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; box-shadow:0 8px 20px -8px rgba(59,110,245,.5); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(59,110,245,.6); }
.btn-primary:active { transform:translateY(0); }
.btn-ghost { background:#f1f5f9; color:#334155; }
.btn-ghost:hover { background:#e2e8f0; }
.btn-success { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 8px 20px -8px rgba(16,185,129,.45); }
.btn-danger  { background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; box-shadow:0 8px 20px -8px rgba(244,63,94,.45); }
.btn-warning { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:0 8px 20px -8px rgba(245,158,11,.45); }
.btn-utility { background:linear-gradient(135deg,#06b6d4,#0891b2); color:#fff; box-shadow:0 8px 20px -8px rgba(6,182,212,.45); }
.btn-utility:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(6,182,212,.55); }
.btn-warning:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(245,158,11,.55); }

.modal-backdrop { background:rgba(15,23,42,0.55); backdrop-filter:blur(6px); }

.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:9999px; font-size:.82rem; font-weight:600; background:#fff; color:#475569; cursor:pointer; border:1.5px solid #e5eaf3; transition:.15s; white-space:nowrap; user-select:none; }
.chip:hover { background:#f1f5f9; }
.chip.active { background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; border-color:transparent; box-shadow:0 6px 16px -6px rgba(59,110,245,.5); }

/* Pagination */
.pager { display:flex; align-items:center; justify-content:center; gap:.35rem; flex-wrap:wrap; margin-top:1rem; }
.pager-btn { min-width:36px; height:36px; padding:0 .55rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; color:#475569; background:#fff; border:1px solid #e2e8f0; cursor:pointer; transition:.15s; user-select:none; }
.pager-btn:hover:not(:disabled):not(.dots) { background:#f1f5f9; border-color:#cbd5e1; }
.pager-btn.active { background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; border-color:transparent; box-shadow:0 6px 14px -6px rgba(59,110,245,.5); }
.pager-btn:disabled { opacity:.4; cursor:default; }
.pager-btn.dots { border:none; background:transparent; cursor:default; min-width:20px; }

.period-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1rem; border-radius:9999px; font-size:.85rem; font-weight:600; background:#f1f5f9; color:#475569; cursor:pointer; border:1.5px solid transparent; transition:.15s; user-select:none; flex-shrink:0; white-space:nowrap; }
.period-chip:hover { background:#e2e8f0; }
.period-chip i { font-size:.8rem; opacity:.7; }
.period-chip.active { background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; border-color:transparent; box-shadow:0 8px 18px -6px rgba(59,110,245,.5); }
.period-chip.active i { opacity:1; }

/* currency switch (₾ ლარი / $ დოლარი) */
.cur-switch { display:inline-flex; gap:4px; padding:4px; background:#f1f5f9; border-radius:.85rem; }
.cur-switch button { flex:1; padding:.5rem .9rem; border-radius:.65rem; font-weight:700; font-size:.88rem; color:#64748b; transition:.15s; white-space:nowrap; }
.cur-switch button:hover { color:#0f172a; }
.cur-switch button.active { background:#fff; color:#2a56db; box-shadow:0 1px 3px rgba(15,23,42,.14); }

/* managers cannot delete — hide every delete control */
body.is-manager .del-act { display:none !important; }

/* appointments drag & drop reorder */
.appt-grip { cursor:grab; }
.appt-grip:active { cursor:grabbing; }
tr.appt-row { cursor:grab; }
tr.appt-drag > td { opacity:.4; }
#apptList > [data-appt-id].appt-drag { opacity:.4; }
tr.appt-drop-above > td { box-shadow:inset 0 3px 0 0 #3b6ef5; }
tr.appt-drop-below > td { box-shadow:inset 0 -3px 0 0 #3b6ef5; }
#apptList > [data-appt-id].appt-drop-above { box-shadow:inset 0 3px 0 0 #3b6ef5; border-radius:1.25rem; }
#apptList > [data-appt-id].appt-drop-below { box-shadow:inset 0 -3px 0 0 #3b6ef5; border-radius:1.25rem; }

.tab-section { display:none; }
.tab-section.active { display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }

table th { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; font-weight:700; background:#f8fafc; }
table td, table th { padding:.85rem 1rem; }
tbody tr { border-top:1px solid #f1f5f9; }
tbody tr:hover { background:#fafbff; }

/* appointments table — softer, cleaner rows (no harsh doubled dividers) */
.appt-table { border-collapse:separate; border-spacing:0; }
.appt-table thead th { border-bottom:1px solid #eef1f6; padding-bottom:.7rem; }
.appt-table tbody td { padding:1.05rem .9rem; vertical-align:top; border-top:1px solid #f2f5f9; }
.appt-table tbody tr { border-top:none; transition:background .13s ease; }
.appt-table tbody tr:first-child td { border-top:none; }
.appt-table tbody tr:hover { background:#f7f9ff; }
/* the expanded payment-history row sits flush under its appointment */
.appt-table tbody tr.appt-hist-row td { border-top:none; padding-top:0; }
.appt-table tbody tr.appt-hist-row:hover { background:transparent; }

.bottom-nav { display:none; }
@media (max-width:1023px) {
  .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; background:#ffffffea; backdrop-filter:blur(14px); border-top:1px solid #e5eaf3; padding:.5rem .25rem calc(.5rem + var(--safe-bottom)) .25rem; justify-content:space-around; }
  .bottom-link { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.4rem .25rem; border-radius:.9rem; color:#64748b; font-size:.68rem; font-weight:600; cursor:pointer; user-select:none; }
  .bottom-link i { font-size:1.1rem; transition:transform .15s; }
  .bottom-link.active { color:#3b6ef5; }
  .bottom-link.active i { transform:scale(1.1); }
  .fab { position:fixed; right:1rem; bottom:calc(5rem + var(--safe-bottom)); z-index:39; width:58px; height:58px; border-radius:9999px; background:linear-gradient(135deg,#3b6ef5,#7c3aed); color:#fff; font-size:1.4rem; box-shadow:0 14px 34px -8px rgba(59,110,245,.55); display:flex; align-items:center; justify-content:center; border:none; }
  .fab:active { transform:scale(.95); }
  main { padding-bottom:calc(6rem + var(--safe-bottom)); }
}
@media (min-width:1024px) { .fab { display:none; } }

.drawer { transform:translateX(-100%); transition:transform .25s ease; }
.drawer.open { transform:translateX(0); }
.drawer-back { background:rgba(15,23,42,.5); }

.topbar { position:sticky; top:0; z-index:30; background:#ffffffea; backdrop-filter:blur(14px); border-bottom:1px solid #e5eaf3; }
.stat-ico { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.list-item { display:flex; gap:.85rem; padding:1rem; background:#fff; border:1px solid #e2e8f0; border-radius:1rem; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.avatar-circle { width:42px; height:42px; border-radius:9999px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; flex-shrink:0; background:linear-gradient(135deg,#3b6ef5,#7c3aed); }

@media (max-width:1023px) { .desktop-only { display:none !important; } }
@media (min-width:1024px) { .mobile-only { display:none !important; } }

.st-scheduled   { background:#dbeafe; color:#1d4ed8; }
.st-in_progress { background:#fef3c7; color:#b45309; }
.st-done        { background:#d1fae5; color:#047857; }
.st-cancelled   { background:#fee2e2; color:#b91c1c; }