/* MitsiTik admin — minor app-specific overrides on top of Tabler */

/* Brand mark next to logo */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 700; font-size: 14px;
  letter-spacing: -0.02em;
}

/* RTL: flip nav-link icon spacing */
[dir="rtl"] .nav-link-icon { margin-left: 0.5rem; margin-right: 0; }

/* Login page */
.page.page-center { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }

/* ============================================================================
   Drawer (custom slide-in panel)
   ============================================================================ */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1040;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
}
.drawer {
  position: fixed; top: 0; bottom: 0;
  width: min(580px, 92vw);
  background: var(--tblr-bg-surface);
  z-index: 1050;
  overflow-y: auto;
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
html[dir="rtl"] .drawer {
  left: 0;
  border-right: 1px solid var(--tblr-border-color);
  transform: translateX(-100%);
}
html:not([dir="rtl"]) .drawer {
  right: 0;
  border-left: 1px solid var(--tblr-border-color);
  transform: translateX(100%);
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--tblr-border-color);
  position: sticky; top: 0; background: var(--tblr-bg-surface); z-index: 1;
}
.drawer-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.drawer-header .sub { color: var(--tblr-secondary); font-size: 12px; margin-top: 2px; }
.drawer-close {
  background: transparent; border: 0; color: var(--tblr-secondary);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 10px;
  border-radius: 6px;
}
.drawer-close:hover { background: var(--tblr-bg-surface-tertiary); color: var(--tblr-body-color); }
.drawer-body { padding: 1.25rem; }
.drawer-body h3 { font-size: 11px; color: var(--tblr-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; font-weight: 600; }
.drawer-body h3:first-child { margin-top: 0; }

/* drawer form helpers (Tabler form-control comes from tabler.min.css) */
.form-row { margin-bottom: 1rem; }
.form-row.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--tblr-border-color); }
.form-actions button[type=submit] { flex: 1; }

.ro-field {
  background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color);
  border-radius: 6px; padding: 8px 10px; color: var(--tblr-secondary);
}

.drawer-msg { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; border: 1px solid; }
.drawer-msg.ok  { background: rgba(34,197,94,.1);  color: #22c55e; border-color: rgba(34,197,94,.3); }
.drawer-msg.err { background: rgba(239,68,68,.1);  color: #ef4444; border-color: rgba(239,68,68,.3); }

/* Routing chips (multi-select inside customer drawer) */
.routing-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 6px;
  background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color);
  border-radius: 6px; font-size: 13px;
}
.routing-chip .chip-main { flex: 1; }
.routing-chip .chip-id   { color: var(--tblr-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.routing-chip .chip-remove {
  background: transparent; border: 0; color: var(--tblr-secondary);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px;
}
.routing-chip .chip-remove:hover { color: #ef4444; background: rgba(239,68,68,.1); }

/* Make rows with data-edit obviously clickable in Tabler tables */
table tr[data-edit] { cursor: pointer; }

/* Subtle htmx fade for table swap */
#tbl.htmx-swapping  { opacity: 0.5; transition: opacity 180ms ease; }
#tbl.htmx-settling  { opacity: 1; transition: opacity 180ms ease; }