/* ─────────────────────────────────────────────────────────────────────────
   Theme Configuration: CSS Variables & Global Styles
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* Success */
    --color-success-600: #16A34A;
    --color-success-700: #15803D;
    
    /* Error */
    --color-error-600: #DC2626;
    --color-error-700: #B91C1C;
    
    /* Warning */
    --color-warning-600: #EAB308;
    --color-warning-700: #CA8A04;
    
    /* Info */
    --color-info-600: #0EA5E9;
    --color-info-700: #0284C7;
    
    /* Dark / Sidebar */
    --color-dark-900: #111827;
    --color-dark-800: #1F2937;
    --color-dark-700: #374151;
    
    /* Light / Background */
    --color-light-50: #F9FAFB;
    --color-light-100: #F3F4F6;
    --color-white: #FFFFFF;
    
    /* Text */
    --color-text-900: #111827;
    --color-text-700: #374151;
    --color-text-500: #6B7280;
    --color-text-100: #F3F4F6;
    
    /* Border */
    --color-border-200: #E5E7EB;
    --color-border-300: #D1D5DB;
    
    /* Accent */
    --color-accent-indigo: #4F46E5;
    --color-accent-purple: #9333EA;

    /* ── Form sizing ── (change here → updates every form in the app) */
    --form-font-size:    0.9375rem;   /* input / select text  (15px) */
    --form-label-size:   0.8125rem;   /* field label text     (13px) */
    --form-input-height: 2.4rem;      /* input / select height       */
    --form-section-label-size: 0.75rem; /* section heading size (12px) */
}

/* ─────────────────────────────────────────────────────────────────────────
   Global Styles
   ────────────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--color-light-50);
    color: var(--color-text-900);
    font-family: 'Outfit', sans-serif;
}

.dark body {
    background-color: var(--color-dark-900);
    color: var(--color-text-100);
}

/* ─────────────────────────────────────────────────────────────────────────
   Tailwind Brand Color Overrides
   Use these classes instead of default Tailwind colors for brand consistency
   ────────────────────────────────────────────────────────────────────────── */

.bg-brand-500 { 
    background-color: var(--color-accent-indigo) !important; 
}

.hover\:bg-brand-600:hover { 
    background-color: #4338ca !important; 
}

.text-brand-500 { 
    color: var(--color-accent-indigo) !important; 
}

.border-brand-500 { 
    border-color: var(--color-accent-indigo) !important; 
}

/* ─────────────────────────────────────────────────────────────────────────
   Utility: Hide Scrollbar
   ────────────────────────────────────────────────────────────────────────── */

.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Flatpickr: right-aligned range picker
   ──────────────────────────────────────────────────────────────────────────
   The pickers are initialised with `static: true`, so flatpickr drops the
   calendar inside a `.flatpickr-wrapper` (position: relative) and anchors it
   with `left: 0`. The calendar is ~308px wide while the wrapper is only as
   wide as the input (~206px), so a picker sitting on the right of a toolbar
   pushes the calendar past the right edge of the viewport: the last weekday
   columns get clipped, and the overflow makes the page grow/shrink a
   horizontal scrollbar, which reads as flicker.

   Inputs opt in with data-class="flatpickr-right" (flatpickr copies that onto
   the calendar in its onReady hook). Anchoring the RIGHT edge to the wrapper
   makes the calendar open leftward — it stays on screen and nothing overflows.
   Pickers without the class keep flatpickr's default left alignment.

   Right-alignment holds at every breakpoint: the picker stays at the right of
   its toolbar as the layout stacks, so anchoring to the wrapper's right edge
   keeps the calendar on screen on phones as well as wide monitors.
   ────────────────────────────────────────────────────────────────────────── */

.flatpickr-calendar.flatpickr-right,
.flatpickr-calendar.static.flatpickr-right {
    left: auto !important;
    right: 0 !important;
}

/* Ensure flatpickr calendar scales cleanly and never exceeds viewport or card container */
.flatpickr-calendar {
    max-width: calc(100vw - 24px) !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

@media (max-width: 640px) {
    .flatpickr-calendar.flatpickr-right,
    .flatpickr-calendar.static.flatpickr-right {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* Shared Admin/Superadmin notification dropdown sizing. Keep this explicit
   because the panel is rendered from a shared template and must stay usable
   even when Tailwind's arbitrary width utilities are not rebuilt. */
.notification-dropdown-panel {
    box-sizing: border-box;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: min(36rem, calc(100vh - 5.5rem));
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 45px -20px rgba(15, 23, 42, 0.35), 0 8px 18px -12px rgba(15, 118, 110, 0.2);
}

.notification-dropdown-list {
    max-height: min(28rem, calc(100vh - 11rem));
    scrollbar-gutter: stable;
}

.notification-dropdown-item:hover {
    background-color: rgba(240, 253, 250, 0.75);
}

.notification-dropdown-item-unread {
    background-color: rgba(240, 253, 250, 0.68);
}

.notification-dropdown-item-unread:hover {
    background-color: rgba(204, 251, 241, 0.7);
}

.notification-severity-info {
    border-left-color: rgb(148 163 184 / 0.7);
}

.notification-severity-success {
    border-left-color: rgb(16 185 129 / 0.75);
}

.notification-severity-warning {
    border-left-color: rgb(245 158 11 / 0.8);
}

.notification-severity-critical {
    border-left-color: rgb(244 63 94 / 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .notification-dropdown-panel *,
    .notification-dropdown-panel {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 640px) {
    .notification-dropdown-panel {
        position: fixed;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin-top: 0;
    }

    .notification-center-filter-fields {
        flex-basis: 100%;
        width: 100%;
    }

    .notification-center-filter-fields select,
    .notification-center-filter-search {
        flex: 1 1 100%;
        min-width: 0 !important;
    }
}

/* flatpickr injects this wrapper around the input and leaves it inline-block,
   so it shrink-wraps and the input's `w-full` resolves against a box narrower
   than the field's own container — the date text then gets clipped mid-word
   ("Aug 1, 2026 to Aug 10, 20…"). Making the wrapper a full-width block lets
   the input fill the space its container actually offers. */
.flatpickr-wrapper {
    display: block;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   Document line-item row - desktop layout (lg >= 1024px)
   Shared by the items_table.html partial (sales/purchase invoices, orders,
   estimates) and the inline rows in credit_note.html,
   purchase_debit_note_form.html and recurring_form.html.

   Below lg the Tailwind classes on the same element (grid-cols-1 /
   md:grid-cols-12 + md:col-span-*) keep the phone and tablet arrangements;
   this block only takes over from 1024px up. The grid-column reset is marked
   important because Tailwind's responsive col-span utilities may be emitted
   after this file in some builds.

   Every column is a fixed share of the row so all forms line up the same
   way; Product / Service takes whatever is left, which keeps the row at
   exactly 100%.

      .doc-line-grid      S.no | Product | Base Unit | Unit | Selling Qty | Inv Qty | Rate | Discount | Tax | Tax Amount | Amount | Actions
      (no HSN/SAC column)  4%     1fr        8%         10%     7%           6%        11%    5.5%       9%    7%           13%       3%

      .doc-line-grid--hsn S.no | Product | HSN/SAC | Base Unit | Unit | Selling Qty | Inv Qty | Rate | Discount | Tax | Tax Amount | Amount | Actions
      (India GST forms)    4%     1fr        8%         8%        10%     7%           6%        11%    5.5%       9%    7%           12%       3%

   Inv Qty is Selling Qty converted to the product's base/stock unit (its own
   conversion factor already folds in the base unit's own factor of 1 — see
   unitConversionFactor() in document_calc_engine.html); Tax Amount is the
   line's computed tax for whichever rule(s)/custom tax is selected. Both are
   read-only displays, so they carry no input chrome and can stay narrow.

   Discount, Amount and Actions carry pixel floors so the value + %/currency
   selector, a long formatted total and the two icon buttons stay usable on
   narrower desktops; Product absorbs the difference. Cells are spaced by
   0.25rem side padding (8px between cells, the same rhythm as the gap-2 used
   on smaller screens).

   The breakpoint is 768px (Tailwind's own `md`), matching items_table.html's
   equivalent .doc-table-grid, which has run unconditionally from `md` with no
   separate tablet zone of its own. This block used to start at 1024px, which
   left a 768–1023px gap where the row fell back to plain `md:grid-cols-12` +
   per-field `col-span-*` utilities that never summed to a clean 12 — cells
   wrapped across several ragged rows instead of staying on one line. Lowering
   the floor to 768px closes that gap; see the per-document templates (credit
   note, debit note, recurring invoice) for the matching removal of their
   "tablet-only" action buttons and the Actions column's now-unconditional
   visibility, both of which existed only to paper over that gap.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .doc-line-grid {
        display: grid;
        gap: 0;
        align-items: flex-end;
        grid-template-columns:
            4%                     /* S.no */
            minmax(0, 1fr)        /* Product / Service */
            8%                    /* Base Unit */
            10%                   /* Unit */
            7%                    /* Selling Qty */
            6%                    /* Inv Qty */
            11%                   /* Rate */
            minmax(4.5rem, 5.5%)  /* Discount */
            9%                    /* Tax */
            7%                    /* Tax Amount */
            minmax(7.5rem, 13%)   /* Amount */
            minmax(3.75rem, 3%);  /* Actions */
    }
    .doc-line-grid--hsn {
        grid-template-columns:
            4%                     /* S.no */
            minmax(0, 1fr)        /* Product / Service */
            8%                    /* HSN/SAC */
            8%                    /* Base Unit */
            10%                   /* Unit */
            7%                    /* Selling Qty */
            6%                    /* Inv Qty */
            11%                   /* Rate */
            minmax(4.5rem, 5.5%)  /* Discount */
            9%                    /* Tax */
            7%                    /* Tax Amount */
            minmax(7.5rem, 12%)   /* Amount */
            minmax(3.75rem, 3%);  /* Actions */
    }
    .doc-line-grid > * {
        grid-column: auto / span 1 !important;
        min-width: 0;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .doc-line-grid > *:first-child {
        padding-left: 0;
    }
    .doc-line-grid > *:last-child {
        padding-right: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Product Form: Purchase / Selling Units Grid Table Layout
   ────────────────────────────────────────────────────────────────────────── */
.unit-grid-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.4fr) minmax(95px, 1fr) minmax(105px, 1.05fr) minmax(105px, 1.05fr) minmax(75px, 0.55fr) minmax(65px, 0.45fr);
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 767px) {
  .unit-grid-header {
    display: none !important;
  }
  .unit-grid-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
  }
  .unit-mobile-label {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .unit-grid-header {
    display: grid !important;
  }
  .unit-mobile-label {
    display: none !important;
  }
}

/* Toggle Switch for Default Unit */
.unit-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.unit-toggle-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  opacity: 0;
}
.unit-toggle-slider {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background-color: #cbd5e1;
  border-radius: 9999px;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .unit-toggle-slider {
  background-color: #4b5563;
}
.unit-toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.unit-toggle-switch input[type="checkbox"]:checked + .unit-toggle-slider {
  background-color: #2563eb;
}
.unit-toggle-switch input[type="checkbox"]:checked + .unit-toggle-slider::after {
  transform: translateX(16px);
}
.unit-toggle-switch:hover .unit-toggle-slider {
  filter: brightness(0.95);
}
.unit-toggle-switch input[type="checkbox"]:focus-visible + .unit-toggle-slider {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}