/* ═══════════════════════════════════════════════════════════
   admin.css — Admin panel styles
   Requires /assets/design.css linked before this file.
══════════════════════════════════════════════════════════ */

/* ── App loader ───────────────────────────────────────────── */
#appLoader {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: var(--bg);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s var(--ease);
}
#appLoader.hidden { opacity: 0; pointer-events: none; }

/* ── Layout ───────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.side {
  border-right:   1px solid var(--border);
  background:     var(--surface);
  display:        flex;
  flex-direction: column;
  padding:        12px;
  overflow-y:     auto;
}
.side__top    { padding: 8px 6px 14px; }
.side__logo   { padding: 4px 2px 10px; line-height: 0; }
.side__title  { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.side__sub    {
  color:        var(--text-2);
  font-size:    12px;
  margin-top:   5px;
  word-break:   break-all;
  line-height:  1.4;
}
.side__bottom {
  margin-top:     auto;
  padding:        12px 4px 4px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  border-top:     1px solid var(--border);
}

/* user card at the bottom of sidebar */
.side__user {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     6px 8px;
  border-radius: 999px;
}
.side__avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    var(--surface-hover);
  border:        1.5px solid var(--border-strong);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     14px;
  font-weight:   700;
  color:         var(--text-2);
  overflow:      hidden;
}
.side__user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side__user-name {
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.side__user-role {
  font-size:  11px;
  color:      var(--accent);
  font-weight: 500;
}

/* ── Nav ──────────────────────────────────────────────────── */
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

.nav__item {
  display:         flex;
  align-items:     center;
  gap:             9px;
  text-decoration: none;
  color:           var(--text-2);
  padding:         8px 12px;
  border-radius:   16px;
  font-size:       14px;
  font-weight:     500;
  line-height:     1;
  transition:      background var(--t) var(--ease),
                   color      var(--t) var(--ease);
}
.nav__item svg { flex-shrink: 0; display: block; vertical-align: middle; opacity: 0.7; transition: opacity var(--t) var(--ease); }
.nav__item:hover svg,
.nav__item.active svg { opacity: 1; }
.nav__item:hover  { background: var(--surface-hover); color: var(--text); }
.nav__item.active { background: var(--accent-subtle);  color: var(--accent); font-weight: 600; }

/* ── Main ─────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; overflow: hidden; }

.top {
  padding:       12px 20px;
  border-bottom: 1px solid var(--border);
  background:    var(--surface);
  flex-shrink:   0;
}
.top__row   { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.top__title { font-weight: 800; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; }
.top__right { display: flex; gap: 8px; align-items: center; }

.toolbar {
  display:        flex;
  justify-content:space-between;
  align-items:    center;
  gap:            12px;
  padding:        8px 20px 0;
  background:     var(--surface);
  flex-shrink:    0;
  min-height:     48px;
}
.toolbar__left  { display: flex; align-items: center; gap: 8px; flex: 1; }
.toolbar__right { display: flex; align-items: center; gap: 8px; }
/* no focus glow on toolbar inputs */
.toolbar .inp:focus { box-shadow: none; }

.content { padding: 8px 15px 20px 20px; overflow-y: scroll; flex: 1; background: var(--surface); }

/* ── Card ───────────────────────────────────────────────── */
.card {
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       16px;
  margin-bottom: 12px;
}

/* ── Typography helpers ───────────────────────────────────── */
.page-title    { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.section-title {
  font-weight:    600;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text-2);
  margin-bottom:  10px;
}
.field__label {
  display:       block;
  font-weight:   500;
  font-size:     13px;
  color:         var(--text-2);
  margin-bottom: 5px;
}

/* ── Table ────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table tr   { border-bottom: 1px solid var(--border); }
.table th,
.table td {
  padding:        10px 10px;
  text-align:     left;
  vertical-align: middle;
}
.table th {
  color:          var(--text-3);
  font-weight:    700;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.table .tr { height: 82px; }
.table .tr td { overflow: hidden; }
.table .tr:hover { background-color: var(--surface-hover); }
.table .tr:hover td { background-color: transparent; }
.table .tr:hover .btn.ghost,
.table .tr:hover .btn.ghost:hover { background: transparent !important; box-shadow: none !important; outline: none !important; }

/* ── Status line ──────────────────────────────────────────── */
.status      { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.status--ok  { color: var(--ok);     }
.status--err { color: var(--danger); }

/* ── Role-coloured selects ────────────────────────────────── */
.role-platform_admin { background: rgba(125,90,255,0.12) !important; color: #b088ff       !important; border-color: rgba(125,90,255,0.30) !important; }
.role-owner          { background: var(--warning-subtle) !important; color: var(--warning) !important; border-color: rgba(251,191,36,0.30) !important; }
.role-operator       { background: var(--accent-subtle)  !important; color: var(--accent)  !important; border-color: var(--accent-glow)    !important; }
.role-master         { background: var(--ok-subtle)      !important; color: var(--ok)      !important; border-color: rgba(52,211,153,0.25)  !important; }

/* ── Status-coloured selects (bookings) ───────────────────── */
.sel-new       { background-color: var(--accent-subtle)     !important; color: var(--accent)  !important; border-color: var(--accent-glow)       !important; }
.sel-confirmed { background-color: var(--ok-subtle)         !important; color: var(--ok)      !important; border-color: rgba(52,211,153,0.25)     !important; }
.sel-done      { background-color: rgba(20,184,166,0.10)    !important; color: #2dd4bf        !important; border-color: rgba(20,184,166,0.30)     !important; }
.sel-cancelled,
.sel-no_answer { background-color: var(--danger-subtle)     !important; color: var(--danger)  !important; border-color: rgba(251,113,133,0.30)    !important; }

/* ── Service Combos drag-and-drop ─────────────────────────── */
.sc-col               { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); transition: border-color var(--t), background var(--t); }
.sc-col--source       { border-color: var(--border-strong); }
.sc-col--target       { border-color: var(--accent); background: var(--accent-subtle); }
.sc-col--incompatible { border-color: var(--danger); }
.sc-col:empty::after  { color: var(--text-3); font-size: 13px; padding: 8px; display: block; }

.sc-arrow {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             4px;
  padding-top:     52px;
  color:           var(--text-3);
  font-size:       18px;
}
.sc-col-header {
  font-weight:    600;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text-2);
  margin-bottom:  10px;
}
.sc-chip {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  padding:         9px 12px;
  border-radius:   var(--r);
  cursor:          grab;
  user-select:     none;
  border:          1.5px solid var(--border);
  background:      var(--surface-2);
  font-size:       13px;
  transition:      background var(--t), border-color var(--t);
}
.sc-chip:hover   { background: var(--surface-hover); border-color: var(--border-strong); }
.sc-chip__rm {
  background: none;
  border:     none;
  color:      var(--text-3);
  font-size:  17px;
  cursor:     pointer;
  padding:    0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--t);
}
.sc-chip__rm:hover { color: var(--danger); }

/* ── Pill-size controls (D3/D4/E3) ────────────────────────── */
/* Change --pill-h to resize everything at once; --pill-pl = E3 left-pad for selects */
:root {
  --pill-h:   34px;
  --pill-r:   17px;   /* = --pill-h / 2 */
  --pill-pad: 14px;   /* horizontal padding for pill inputs/buttons */
  --pill-pl:  20px;   /* left padding for toolbar pill selects (E3) */
}

.inp--pill {
  height:        var(--pill-h);
  border-radius: var(--pill-r);
  padding:       0 var(--pill-pad);
}
select.inp--pill {
  height:        var(--pill-h);
  border-radius: var(--pill-r);
  padding:       0 36px 0 var(--pill-pl);
}
.btn--pill {
  height:        var(--pill-h);
  border-radius: var(--pill-r);
  padding:       0 var(--pill-pad);
}

/* ── Client-notes modal (D7/D8) ────────────────────────────── */
.note-modal {
  background:    var(--surface);
  border:        1.5px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding:       28px 28px 24px;
  max-width:     480px;
  width:         92%;
  color:         var(--text);
  font-size:     14px;
  box-shadow:    var(--shadow-lg);
}
.note-modal__title {
  font-weight:   700;
  font-size:     17px;
  margin-bottom: 4px;
}
.note-modal__sub {
  color:         var(--text-2);
  font-size:     12px;
  margin-bottom: 22px;
}
.note-modal__section-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text-2);
  margin-bottom:  10px;
}
.note-modal__field-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--text-2);
  margin-bottom:  6px;
}
.note-modal__tags {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-bottom:         24px;
}
.note-modal__actions {
  display:         flex;
  gap:             8px;
  justify-content: flex-end;
  margin-top:      20px;
}

/* Tag cards in note modal (D9) */
.note-tag-card {
  position:       relative;
  cursor:         pointer;
  user-select:    none;
  border-radius:  12px;
  padding:        12px 10px 10px;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            6px;
  font-size:      12px;
  font-weight:    500;
  border:         2px solid var(--border-strong);
  background:     var(--surface-2);
  color:          var(--text-2);
  transition:     border-color var(--t), background var(--t), color var(--t);
}
.note-tag-card__tick {
  position:        absolute;
  top:             6px;
  right:           6px;
  width:           16px;
  height:          16px;
  border-radius:   50%;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.note-tag-card__label { font-size: 16px; }

/* ── Number input spinners always visible ──────────────────── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
input[type=number] { font-size: 14px; }

/* ── Responsive layout ────────────────────────────────────── */
.top__menu-btn { display: none; }

.side-overlay {
  display:   none;
  position:  fixed;
  inset:     0;
  z-index:   99;
  background: rgba(0, 0, 0, 0.45);
}
.side-overlay.visible { display: block; }

@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr; }

  .side {
    position:  fixed;
    top: 0; left: 0; bottom: 0;
    width:     240px;
    z-index:   100;
    transform: translateX(-100%);
    transition: transform 0.22s var(--ease);
  }
  .side--open {
    transform:  translateX(0);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
  }

  .top__menu-btn { display: flex; }
  .top           { padding: 10px 14px; }
  .content       { padding: 8px 12px 20px; overflow-x: auto; }
  .toolbar       { padding: 8px 12px 0; flex-wrap: wrap; }
}

/* ── Collapsible sidebar (desktop only) ───────────────────── */
.side__top      { display: flex; flex-direction: column; }

.side-toggle {
  align-self:      flex-end;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  padding:         0;
  border-radius:   8px;
  color:           var(--text-3);
  margin-top:      4px;
  flex-shrink:     0;
  transition:      background var(--t), color var(--t);
}
.side-toggle:hover { color: var(--text); background: var(--surface-hover); }
.side-toggle svg   { transition: transform 0.22s var(--ease); }

@media (min-width: 769px) {
  .shell { transition: grid-template-columns 0.22s var(--ease); }

  .shell[data-sidebar="collapsed"] { grid-template-columns: 48px 1fr; }
  .shell[data-sidebar="collapsed"] .side         { padding: 8px 2px; overflow: hidden; }
  .shell[data-sidebar="collapsed"] .side__top    { padding: 6px 2px 8px; }
  .shell[data-sidebar="collapsed"] .side__logo   { display: none; }
  .shell[data-sidebar="collapsed"] .side__bottom { display: none; }
  .shell[data-sidebar="collapsed"] .nav__item    { padding: 8px; justify-content: center; gap: 0; }
  .shell[data-sidebar="collapsed"] .nav__item span  { display: none; }
  .shell[data-sidebar="collapsed"] .side-toggle  { align-self: center; }
  .shell[data-sidebar="collapsed"] .side-toggle svg { transform: rotate(180deg); }
}

@media (max-width: 768px) { .side-toggle { display: none; } }

/* ── Custom Date Picker ──────────────────────────────────────── */
.dp { position: relative; display: inline-block; }
.dp .inp--pill {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238080a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
html[data-theme="light"] .dp .inp--pill {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.dp-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); padding: 14px 12px; min-width: 256px;
}
.dp-hdr  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-ttl  { font-size: 14px; font-weight: 600; color: var(--text); }
.dp-arrow { background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 20px; line-height: 1; width: var(--pill-h); height: var(--pill-h); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s; }
.dp-arrow:hover { background: var(--surface-hover); color: var(--text); }
.dp-row  { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-wdh  { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-3); padding: 4px 2px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day  { aspect-ratio: 1; width: 100%; background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text); border-radius: 50%; transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center; }
.dp-day:hover        { background: var(--surface-hover); }
.dp-day.dp-today     { color: var(--accent); font-weight: 700; }
.dp-day.dp-sel       { background: var(--accent); color: #fff; font-weight: 700; }
.dp-day.dp-sel:hover { background: var(--accent); }
.dp-day.dp-cur       { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Custom Time Picker ──────────────────────────────────────── */
.tp { position: relative; display: inline-block; }
.tp .inp--pill {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238080a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
html[data-theme="light"] .tp .inp--pill {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.tp-pop {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); width: 148px; height: 200px; overflow: hidden;
}
.tp-hl {
  position: absolute; left: 12px; right: 12px; top: 83px; height: var(--pill-h);
  background: var(--accent-subtle); border-radius: var(--pill-r);
  border: 1px solid var(--accent-glow, rgba(93,115,239,.25));
  z-index: 0; pointer-events: none;
}
.tp-inner { display: flex; align-items: stretch; height: 200px; position: relative; z-index: 1; }
.tp-col {
  flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
  mask-image:         linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%);
}
.tp-col::-webkit-scrollbar { display: none; }
.tp-item { height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 14px; font-weight: 500; scroll-snap-align: center; color: var(--text-2); cursor: pointer; user-select: none; }
.tp-item--sel { color: var(--text); font-weight: 600; }
.tp-sep { display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-2); width: 18px; flex-shrink: 0; z-index: 2; }