/*
 * ============================================================================================
 *  Kazitel W3 theme for Filament 4 (admin panel + customer portal)          w3-theme-kazitel
 * ============================================================================================
 *  Load order on every panel page (App\Support\W3Theme, PanelsRenderHook::HEAD_END):
 *    Filament CSS -> w3.classes.css (W3.CSS 5.01, classes only) -> w3-theme-blue-grey.css (official W3 theme)
 *    -> this file.  Edit, save, reload the browser: no build step.
 *
 *  How it works: Filament marks its markup with "CSS hook" classes (fi-section, fi-input-wrp,
 *  fi-ta-table ...). Each block below gives one of those hooks the look of a W3.CSS class.
 *  Our own pages (resources/views/filament/**) use real w3-* classes directly.
 *  Guide: docs/W3-THEME.md
 *
 *  Change the theme (e.g. w3-theme-teal): see docs/W3-THEME.md "Change the theme".
 * ============================================================================================
 */

/* ---------- 1. colours: w3-theme-blue-grey (www.w3schools.com/lib/w3-theme-blue-grey.css) ------ */
:root {
  --w3-theme:        #1B6FB5;   /* w3-theme        : top bar, section headers, active menu, links */
  --w3-theme-d2:     #175D98;   /* w3-theme-d2     : darker accents                               */
  --w3-theme-l4:     #D6E5F2;   /* w3-theme-l4     : table row hover                              */
  --w3-theme-l5:     #F1F6FB;   /* w3-theme-l5     : page background, focused input               */
  --w3-theme-text:   #FFFFFF;   /* text on w3-theme                                               */
  --w3-light-grey:   #F1F1F1;   /* w3-light-grey   : table header, striped rows                   */
  --w3-border:       #CCCCCC;   /* w3-border       : input underline, table border                */
  --w3-row-line:     #DDDDDD;   /* w3-table-all row lines                                         */
  --w3-card-shadow:  0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);   /* w3-card-2  */
                                /* w3-card-4: 0 4px 10px 0 rgba(0,0,0,.2), 0 4px 20px 0 rgba(0,0,0,.19) */
  --w3-card-radius:  4px;       /* cards: w3-round 4px, w3-round-large 8px, w3-round-xlarge 16px, 0 = square */
  --w3-radius:       0;         /* inputs, buttons, badges, tabs: W3 default square; 4px = w3-round   */
}

/* ---------- 2. layout: every section takes a full row, so forms read top to bottom ------------ */
/*   (forms with ->columns(2) used to put sections side by side in random order).                */
/*   To keep two sections side by side on one form, delete this rule and use ->columnSpanFull()  */
/*   per section in that form's PHP instead.                                                     */
.fi-grid > .fi-grid-col:has(> .fi-sc-component > .fi-sc-section) {
  grid-column: 1 / -1 !important;
}

/* ---------- 3. corners ---------------------------------------------------------------------------- */
/*   cards (w3-card-2 w3-round): sections, table boxes, stat widgets, modals, dropdowns            */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-window, .fi-dropdown-panel {
  border-radius: var(--w3-card-radius) !important;
}
.fi-section-header { border-radius: var(--w3-card-radius) var(--w3-card-radius) 0 0; }
/*   controls (W3 default square)                                                                 */
.fi-input-wrp, .fi-select-input, .fi-btn, .fi-badge, .fi-tabs, .fi-tabs-item, .fi-pagination-item,
.fi-checkbox-input, .fi-sidebar-item-btn, .fi-sidebar-group-btn, .fi-fo-field-wrp-error-message {
  border-radius: var(--w3-radius) !important;
}

/* ---------- 4. page (w3-theme-l5) ----------------------------------------------------------------- */
:root:not(.dark) .fi-body { background: var(--w3-theme-l5); }

/* ---------- 5. top bar (w3-bar w3-theme) --------------------------------------------------------- */
:root:not(.dark) .fi-topbar > nav { background: var(--w3-theme); }
:root:not(.dark) .fi-topbar > nav .fi-icon-btn,
:root:not(.dark) .fi-topbar > nav .fi-topbar-item a,
:root:not(.dark) .fi-topbar > nav .fi-topbar-item button { color: var(--w3-theme-text); }

/* ---------- 6. sidebar (w3-sidebar w3-white w3-bar-block, active = w3-theme) -------------------- */
/*   width: ->sidebarWidth('15.5rem') in the panel providers                                     */
:root:not(.dark) .fi-main-sidebar { background: #fff; border-right: 1px solid var(--w3-border); }
.fi-sidebar-group-label { text-transform: uppercase; font-size: .75rem; letter-spacing: .5px; }
:root:not(.dark) .fi-sidebar-item-btn:hover { background: var(--w3-theme-l5); }             /* w3-hover-theme-l5 */
:root:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
:root:not(.dark) .fi-sidebar-item-active > .fi-sidebar-item-btn { background: var(--w3-theme); }
:root:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn *,
:root:not(.dark) .fi-sidebar-item-active > .fi-sidebar-item-btn * { color: var(--w3-theme-text) !important; }

/* ---------- 7. sections (w3-card-2 w3-round + w3-theme header bar) ------------------------------- */
.fi-section { box-shadow: var(--w3-card-shadow) !important; }
:root:not(.dark) .fi-section { border: 0; background: #fff; }
.fi-section-header { padding: 10px 16px !important; }
:root:not(.dark) .fi-section-header { background: var(--w3-theme); }
:root:not(.dark) .fi-section-header .fi-section-header-heading { color: var(--w3-theme-text); }
:root:not(.dark) .fi-section-header .fi-section-header-description { color: var(--w3-theme-text); opacity: .85; }
:root:not(.dark) .fi-section-header .fi-icon,
:root:not(.dark) .fi-section-header .fi-section-collapse-btn { color: var(--w3-theme-text); }

/* ---------- 8. form fields (w3-input: flat, underline, theme underline on focus) ----------------- */
.fi-fo-field-label { font-weight: 600; }
:root:not(.dark) .fi-input-wrp {
  background: #fff;
  box-shadow: none !important;
  border: 0;
  border-bottom: 1px solid var(--w3-border);
}
:root:not(.dark) .fi-input-wrp:focus-within { border-bottom: 2px solid var(--w3-theme); background: var(--w3-theme-l5); }
:root:not(.dark) .fi-input-wrp .fi-input,
:root:not(.dark) .fi-input-wrp .fi-select-input { padding-top: 8px; padding-bottom: 8px; }

/* ---------- 9. tables (w3-table-all w3-hoverable, inside a w3-card-2 w3-round box) -------------- */
.fi-ta-ctn, .fi-wi-stats-overview-stat { box-shadow: var(--w3-card-shadow) !important; }
:root:not(.dark) .fi-ta-ctn { border: 0; }
:root:not(.dark) .fi-ta-table { border: 1px solid var(--w3-border); border-collapse: collapse; }
:root:not(.dark) .fi-ta-table > thead > tr { background: var(--w3-light-grey); }
:root:not(.dark) .fi-ta-header-cell { font-weight: 700; color: #000; }
:root:not(.dark) .fi-ta-table > thead > tr > th { border-bottom: 1px solid var(--w3-border); }
:root:not(.dark) .fi-ta-table > tbody > tr > td { border-bottom: 1px solid var(--w3-row-line); }
:root:not(.dark) .fi-ta-table > tbody > tr.fi-ta-row:nth-child(even) { background: var(--w3-light-grey); }   /* w3-striped */
:root:not(.dark) .fi-ta-table > tbody > tr.fi-ta-row:hover { background: var(--w3-theme-l4); }          /* w3-hoverable */
.fi-ta-content { overflow-x: auto; }                       /* wide tables scroll sideways (w3-responsive) */

/* ---------- 10. buttons (w3-button: flat) -------------------------------------------------------- */
.fi-btn { box-shadow: none !important; letter-spacing: .2px; }

/* ---------- 11. kz-* helpers: only what W3.CSS has no class for (used in our own Blade pages) ----- */
.kz-gutter      { margin-left: -8px; margin-right: -8px; }       /* w3-row-padding without the outer indent */
.kz-upper       { text-transform: uppercase; letter-spacing: .5px; }
.kz-wrap        { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }   /* a row of badges / buttons */
.kz-wrap-end    { justify-content: flex-end; }
.kz-auto        { width: auto; display: inline-block; }           /* w3-select / w3-input that fits its text */
.kz-nowrap      { white-space: nowrap; }
.kz-prewrap     { white-space: pre-wrap; line-height: 1.55; }
.kz-tabular     { font-variant-numeric: tabular-nums; }
.kz-narrow      { max-width: 520px; }
.kz-plain-link  { text-decoration: none; color: inherit; }
.kz-link-card   { text-decoration: none; color: inherit; height: 100%; }
.kz-board       { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr);
                  gap: 12px; overflow-x: auto; padding-bottom: 8px; }      /* lead pipeline columns */
.kz-board-col   { min-height: 200px; }
:root:not(.dark) .w3-table-all tr.w3-light-grey,
:root:not(.dark) .w3-table-all thead tr { background: var(--w3-light-grey) !important; }

/* ---------- 11b. kz-fusion-form: FusionPBX-style settings form ------------------------------------ */
/*   One row per setting: label on the left (w3-theme-l5 column), field + help on the right.     */
/*   PHP: Section::make()->inlineLabel()->extraAttributes(['class' => 'kz-fusion-form'])          */
/*   Darker lines / text: change --kz-form-line, --kz-form-label-bg, --kz-form-text below.        */
.kz-fusion-form {
  --kz-form-line:     #B0BEC5;   /* w3-theme-l3-ish: row lines + label column edge                */
  --kz-form-edge:     #607D8B;   /* w3-theme: bar between label and field                         */
  --kz-form-label-bg: #DFE5E8;   /* w3-theme-l4: label column                                     */
  --kz-form-text:     #263238;   /* labels                                                        */
  --kz-form-help:     #000000;   /* help text under the fields (#212121 / #455A64 = lighter)       */
}
@media (min-width: 601px) {
  /* rows touch: one continuous table like FusionPBX (Filament puts its gap on the section content grid itself) */
  .kz-fusion-form .fi-section-content.fi-sc-has-gap { gap: 0 !important; }
  .kz-fusion-form .fi-fo-field-has-inline-label {
    display: grid !important;
    grid-template-columns: 14rem minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    border: 1px solid var(--kz-form-line);
    border-top: 0;
  }
  .kz-fusion-form .fi-sc > .fi-grid-col:first-child .fi-fo-field-has-inline-label,
  .kz-fusion-form .fi-fo-field-has-inline-label:first-child { border-top: 1px solid var(--kz-form-line); }
  /* label column: field always beside it (Filament's own span-2 would push it to the next row) */
  .kz-fusion-form .fi-fo-field-has-inline-label > .fi-fo-field-label-col {
    grid-column: 1 !important;
    padding: 8px 12px !important;
    display: flex; align-items: center; justify-content: flex-end; text-align: right;
    border-right: 3px solid var(--kz-form-edge);
  }
  .kz-fusion-form .fi-fo-field-has-inline-label > .fi-fo-field-content-col {
    grid-column: 2 !important;
    padding: 6px 12px !important;
  }
  /* repeater tables (IVR options, ring group destinations): compact rows like FusionPBX */
  .kz-fusion-form .fi-fo-table-repeater td, .kz-fusion-form .fi-fo-table-repeater th { padding: 2px 3px !important; }
  :root:not(.dark) .kz-fusion-form .fi-fo-field-has-inline-label > .fi-fo-field-label-col { background: var(--kz-form-label-bg); }
  .kz-fusion-form .fi-fo-field-has-inline-label > .fi-fo-field-label-col .fi-fo-field-label { justify-content: flex-end; }
  /* short inputs like FusionPBX; the options table keeps the full width */
  .kz-fusion-form .fi-fo-field-content-col > .fi-input-wrp,
  .kz-fusion-form .fi-fo-field-content-col .fi-fo-select,
  .kz-fusion-form .fi-fo-field-content-col .fi-fo-textarea { max-width: 32rem; }
}
:root:not(.dark) .kz-fusion-form .fi-fo-field-label,
:root:not(.dark) .kz-fusion-form .fi-fo-field-label-content { color: var(--kz-form-text); font-weight: 700; }
/* help text: Filament greys it with its own rule, so !important */
:root:not(.dark) .kz-fusion-form .fi-fo-field-wrp-helper-text,
:root:not(.dark) .kz-fusion-form .fi-fo-field-content-col .fi-sc-text,
:root:not(.dark) .kz-fusion-form .fi-fo-field-content-col .fi-sc-text * { color: var(--kz-form-help) !important; }
.kz-fusion-form .fi-fo-field-wrp-helper-text,
.kz-fusion-form .fi-fo-field-content-col .fi-sc-text { font-size: .9rem !important; line-height: 1.35rem !important; font-weight: 500 !important; opacity: 1 !important; }
/* inputs: a full thin box instead of only an underline, so empty fields are easy to see */
:root:not(.dark) .kz-fusion-form .fi-input-wrp { border: 1px solid var(--kz-form-line); border-bottom: 1px solid #78909C; }
:root:not(.dark) .kz-fusion-form .fi-input-wrp:focus-within { border-color: var(--w3-theme); border-bottom: 2px solid var(--w3-theme); }

/* ---------- 12. dark mode for w3-* colour classes (W3.CSS has no dark mode) ---------------------- */
.dark .w3-white, .dark .w3-card, .dark .w3-card-2, .dark .w3-card-4 { background-color: rgb(24 24 27) !important; color: inherit !important; }
.dark .w3-light-grey, .dark .w3-theme-l5, .dark .w3-theme-l4,
.dark .w3-table-all tr:nth-child(even), .dark .w3-table-all thead tr { background-color: rgb(39 39 42) !important; color: inherit !important; }
.dark .w3-table-all, .dark .w3-table-all tr { background-color: transparent; border-color: rgb(63 63 70) !important; }
.dark .w3-hoverable tbody tr:hover, .dark .w3-ul.w3-hoverable li:hover { background-color: rgb(63 63 70) !important; }
.dark .w3-ul li, .dark .w3-border, .dark .w3-border-top, .dark .w3-border-bottom { border-color: rgb(63 63 70) !important; }
.dark .w3-pale-green  { background-color: rgba(22, 163, 74, .15) !important;  color: inherit !important; }
.dark .w3-pale-red    { background-color: rgba(220, 38, 38, .15) !important;  color: inherit !important; }
.dark .w3-pale-blue   { background-color: rgba(37, 99, 235, .15) !important;  color: inherit !important; }
.dark .w3-pale-yellow { background-color: rgba(202, 138, 4, .15) !important;  color: inherit !important; }
.dark .w3-text-grey   { color: rgb(161 161 170) !important; }
.dark .w3-input, .dark .w3-select { background-color: transparent; color: inherit; border-color: rgb(82 82 91) !important; }
.dark .w3-code        { background-color: rgb(39 39 42); color: inherit; }

/* ---------- 13. phones (W3 "s" breakpoint: up to 600px) ----------------------------------------- */
@media (max-width: 600px) {
  .fi-section-header { padding: 8px 12px !important; }
  .fi-header-heading { font-size: 1.4rem; line-height: 1.8rem; }
  .w3-xlarge { font-size: 20px !important; }               /* stat values fit two tiles per row */
  .w3-jumbo  { font-size: 48px !important; }
  .kz-board  { grid-auto-columns: 85%; }                    /* one pipeline column per screen, swipe */
  .kz-narrow { max-width: 100%; }
}

/* ---------- 14. your own additions ---------------------------------------------------------------- */
/*   Add rules below; keep them in this file so update.sh deploys them with the rest.            */