/*
 * Hajza — Global Styles
 */

@import "https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.default.min.css";

/* ── Design tokens ── */
:root {
  /* Narrow flat rail. Defined here for ANY downstream code that wants
     to read it (e.g. third-party widgets), but the sidebar markup itself
     no longer reads from this variable — every dimension lives in inline
     Tailwind utilities to eliminate cascade-order surprises. */
  --sidebar-width: 80px;
  --header-height: 56px;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-elevated: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
}

/* Sidebar drawer / persistent settings panel.

   Two modes from the same markup:
     1. PERSISTENT (lg+): when the user is on a settings surface,
        the panel sits inline next to the rail. The page content
        shifts right to make room. No backdrop, no transition —
        it's just part of the layout.
     2. OVERLAY (<lg): same panel but slides over the page content
        with a tinted backdrop (mobile pattern). Visibility is
        toggled via opacity so there's no slide that visually
        passes behind the rail.

   The two modes share the same `.sidebar-drawer` CSS rules; the
   `body[data-sidebar-drawer]` selector + `min-width: 1024px` media
   query toggle between them. */
.sidebar-drawer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s;
}
.sidebar-drawer[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop — overlay mode only (mobile). On lg+ when the persistent
   panel is showing, the backdrop is hidden and content takes its
   place via margin-shift. */
.sidebar-drawer-backdrop {
  position: fixed; inset: 0; z-index: 44;
  background: transparent;
  display: none;
}
body[data-sidebar-drawer] .sidebar-drawer-backdrop { display: block; }

/* Phone-only backdrop tint. Tablets fall under the overlay rule
   too but the tint helps narrow phones where the drawer covers
   most of the screen. */
@media (max-width: 639px) {
  body[data-sidebar-drawer] .sidebar-drawer-backdrop {
    background: rgb(15 23 42 / 0.32);
    backdrop-filter: blur(2px);
  }
}

/* Persistent panel mode (lg+). When a drawer is open and the
   viewport is desktop-sized:
     - Content margin grows by the panel width (5rem rail + 18rem panel).
     - Backdrop is hidden (panel is part of the layout, not a modal).
     - Drawer stops being visibility-toggled — but it's already shown
       via [data-open] which is set server-side via `auto_open`, so
       no extra rule needed for visibility itself.
   The 24rem total matches the inline `start-24 sm:w-72` on the drawer
   markup (6rem rail + 18rem panel = 24rem). */
@media (min-width: 1024px) {
  body[data-sidebar-drawer] .sidebar-content {
    margin-inline-start: 24rem;
  }
  body[data-sidebar-drawer] .sidebar-drawer-backdrop {
    display: none !important;
  }
}

/* ── Base ── */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Sidebar layout ──
   The sidebar element's width is set inline (w-20 = 80px) on the
   aside itself. The content area offset is matched here so the
   main content doesn't sit under the rail. RTL-safe via the
   `margin-inline-start` logical property. */
#sidebar {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-content {
  margin-inline-start: 0;
  transition: margin-inline-start 0.2s ease;
}

@media (min-width: 1024px) {
  .sidebar-content {
    margin-inline-start: 6rem; /* 96px == w-24 rail width */
  }
}

/* Mobile: slide off-screen toward the inline-start edge.
   In LTR that's left, in RTL that's right — handled by translate sign
   matching the writing direction. */
@media (max-width: 1023px) {
  #sidebar { transform: translateX(-100%); }
  [dir="rtl"] #sidebar { transform: translateX(100%); }
  body[data-sidebar-open] #sidebar,
  [dir="rtl"] body[data-sidebar-open] #sidebar { transform: translateX(0); }
  body[data-sidebar-open] #sidebar-overlay { display: block; }
  #sidebar-overlay { display: none; }
}

@media (min-width: 1024px) {
  #sidebar-overlay { display: none !important; }
}

/* Desktop collapse: when `body[data-sidebar-collapsed]` is set (toggled
   from the sidebar header button + persisted via localStorage), the
   sidebar slides off-screen toward the inline-start edge and the
   content fills the freed horizontal space. The expand-FAB pinned at
   the top-start of the viewport becomes the only way back. We keep
   the FAB hidden by default (display:none) and reveal it only on
   desktop when the collapsed attribute is present, so it doesn't
   conflict with the mobile sidebar overlay. */
#sidebar-expand-fab { display: none; }

/* The sidebar collapse toggle lives in the sidebar header. We can't
   rely on `lg:flex` here because the Tailwind 4 scanner in this repo
   only emits `lg:flex-row` for the same prefix — `lg:flex` (display)
   isn't in the compiled CSS, so the button stayed display:none.
   This pair of rules gives the button hard-coded responsive
   behaviour without depending on the watcher to pick up a new
   utility variant. */
#sidebar-collapse-toggle { display: none; }
@media (min-width: 1024px) {
  #sidebar-collapse-toggle { display: inline-flex; }
}

@media (min-width: 1024px) {
  body[data-sidebar-collapsed] #sidebar { transform: translateX(-100%); }
  [dir="rtl"] body[data-sidebar-collapsed] #sidebar { transform: translateX(100%); }
  body[data-sidebar-collapsed] .sidebar-content { margin-inline-start: 0 !important; }
  body[data-sidebar-collapsed] #sidebar-expand-fab { display: flex; }
}

/* Hide the native disclosure triangle on <details><summary> elements
   used as click-to-open popover triggers (sidebar header avatar,
   future menus). Keeps Safari/Firefox/Chrome consistent. */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ── Scrollbar ── */
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ── TomSelect overrides ── */
.ts-wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ts-wrapper .ts-control {
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background-color: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  min-height: 0 !important;
}

.ts-wrapper .ts-control:hover {
  border-color: #cbd5e1 !important;
}

.ts-wrapper.focus .ts-control {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

.ts-wrapper .ts-control > input {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.ts-wrapper .ts-control > input::placeholder {
  color: #94a3b8 !important;
}

.ts-wrapper .ts-dropdown {
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius) !important;
  margin-top: 4px !important;
  box-shadow: var(--shadow-elevated) !important;
  overflow: hidden !important;
}

.ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  transition: background-color 0.1s !important;
}

.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control .item,
.ts-wrapper .ts-control .item {
  background-color: #fff !important;
  background-image: none !important;
}

/* ── Card system ── */
.card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ── Selection ── */
::selection {
  background: rgba(14, 165, 233, 0.15);
  color: inherit;
}