/* ============================================================
   Azzurra 2025 Overhaul - ExtJS 3.4
   Goal: Syncfusion + shadcn/ui + modern Frappe vibe
   Load LAST (after ext-all.css, ux css, azzurra-*.css, app css)
   ============================================================ */

/* -----------------------------
   0) Design tokens (shadcn-style)
   ----------------------------- */
/* Note: shadcn commonly stores HSL triplets in vars, then uses hsl(var(--x)).
   That keeps semantic mapping clean. :contentReference[oaicite:3]{index=3} */

:root{
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;

  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;

  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --ring: 221 83% 53%;

  --radius: 10px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 10px 30px rgba(0,0,0,.10);

  --grid-row: 0 0% 100%;
  --grid-row-alt: 210 40% 99%;
  --grid-selected: 221 83% 95%;
}

/* Dark mode */
body[data-theme="dark"]{
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;

  --card: 222 47% 10%;
  --card-foreground: 210 40% 98%;

  --muted: 223 35% 14%;
  --muted-foreground: 215 20% 70%;

  --border: 223 35% 18%;
  --input: 223 35% 18%;

  --primary: 210 100% 66%;
  --primary-foreground: 222 47% 7%;

  --accent: 223 35% 14%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 70% 55%;
  --destructive-foreground: 0 0% 100%;

  --ring: 210 100% 66%;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 18px 50px rgba(0,0,0,.55);

  --grid-row: 222 47% 10%;
  --grid-row-alt: 222 47% 11%;
  --grid-selected: 210 100% 18%;
}

/* -----------------------------
   1) Global base
   ----------------------------- */
html, body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px;
  line-height: 1.45;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

a{ color: hsl(var(--primary)); }
a:hover{ opacity: .9; }

/* Remove heavy legacy outlines */
*:focus{ outline: none; }

/* -----------------------------
   2) Panels + Windows (remove 3D slices)
   ----------------------------- */
.x-panel, .x-window{
  border-radius: var(--radius) !important;
}

.x-panel-tl,.x-panel-tr,.x-panel-tc,
.x-panel-ml,.x-panel-mr,.x-panel-mc,
.x-panel-bl,.x-panel-br,.x-panel-bc,
.x-window-tl,.x-window-tr,.x-window-tc,
.x-window-ml,.x-window-mr,.x-window-mc,
.x-window-bl,.x-window-br,.x-window-bc{
  background: transparent !important;
  border: 0 !important;
}

.x-panel{
  background: transparent !important;
}

.x-panel-header, .x-window-header{
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: 10px 12px !important;
  font-weight: 600;
}

.x-window{
  box-shadow: var(--shadow);
}

.x-window-body, .x-panel-body{
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* Remove old “inner padding everywhere” where it fights layouts */
.x-panel-body{ padding: 0; }
.x-window-body{ padding: 0; }

/* -----------------------------
   3) Toolbars
   ----------------------------- */
.x-toolbar{
  background: hsl(var(--muted)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 8px !important;
}

.x-toolbar .xtb-sep{
  background: hsl(var(--border)) !important;
}

/* -----------------------------
   4) Buttons (make ALL buttons modern by default)
   ----------------------------- */
.x-btn{
  border-radius: calc(var(--radius) - 4px) !important;
  overflow: hidden;
}

.x-btn-tl,.x-btn-tr,.x-btn-tc,
.x-btn-ml,.x-btn-mr,.x-btn-mc,
.x-btn-bl,.x-btn-br,.x-btn-bc{
  background: transparent !important;
  border: 0 !important;
}

.x-btn button,
.x-btn .x-btn-text{
  font-family: inherit !important;
  font-weight: 600;
  color: hsl(var(--foreground)) !important;
}

.x-btn .x-btn-mc{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

.x-btn-over .x-btn-mc{
  background: hsl(var(--accent)) !important;
}

.x-btn-click .x-btn-mc,
.x-btn-pressed .x-btn-mc{
  background: hsl(var(--muted)) !important;
}

.x-btn-disabled .x-btn-mc{
  opacity: .55;
}

/* Optional: Primary button class you can apply via cls:'btn-primary' */
.btn-primary .x-btn-mc{
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
}
.btn-primary button,
.btn-primary .x-btn-text{
  color: hsl(var(--primary-foreground)) !important;
}
.btn-primary.x-btn-over .x-btn-mc{ filter: brightness(.96); }

/* Destructive */
.btn-danger .x-btn-mc{
  background: hsl(var(--destructive)) !important;
  border-color: hsl(var(--destructive)) !important;
}
.btn-danger button,
.btn-danger .x-btn-text{
  color: hsl(var(--destructive-foreground)) !important;
}

/* -----------------------------
   5) Form fields (focus ring like modern UI)
   ----------------------------- */
.x-form-text, .x-form-field, textarea.x-form-field{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  padding: 7px 10px !important;
  color: hsl(var(--foreground)) !important;
}

.x-form-item-label{
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 600;
}

.x-form-focus, .x-form-focus.x-form-text, .x-form-focus.x-form-field{
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0), 0 0 0 3px hsl(var(--ring) / .25) !important;
}

.x-form-invalid, .x-form-invalid.x-form-text{
  border-color: hsl(var(--destructive)) !important;
}

/* Triggers (combo date etc) */
.x-form-field-wrap .x-form-trigger{
  border-left: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--muted)) !important;
}
.x-form-field-wrap .x-form-trigger-over{
  background: hsl(var(--accent)) !important;
}

/* -----------------------------
   6) Tabs (shadcn-like underline active)
   ----------------------------- */
.x-tab-panel-header, .x-tab-panel-footer{
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
}

.x-tab-strip{
  background: transparent !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.x-tab-strip-top .x-tab-right,
.x-tab-strip-top .x-tab-left,
.x-tab-strip-top .x-tab-strip-inner{
  background: transparent !important;
  border: 0 !important;
}

.x-tab-strip span.x-tab-strip-text{
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 700;
}

.x-tab-strip-active span.x-tab-strip-text{
  color: hsl(var(--foreground)) !important;
}

.x-tab-strip-active .x-tab-strip-inner{
  border-bottom: 2px solid hsl(var(--primary)) !important;
}

.x-tab-strip-over span.x-tab-strip-text{
  color: hsl(var(--foreground)) !important;
}

/* Modern close (optional) */
.x-tab-strip .x-tab-strip-closable .x-tab-strip-close{
  opacity: .65;
  filter: none !important;
}
.x-tab-strip .x-tab-strip-closable .x-tab-strip-close:hover{
  opacity: 1;
}

/* -----------------------------
   7) Menus (radius + shadow)
   ----------------------------- */
.x-menu{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  padding: 6px !important;
}

.x-menu-list-item{
  border-radius: calc(var(--radius) - 4px) !important;
}

.x-menu-item-active{
  background: hsl(var(--accent)) !important;
  border-color: transparent !important;
}

.x-menu-item-text{
  color: hsl(var(--foreground)) !important;
  font-weight: 600;
}

.x-menu-sep{
  background: hsl(var(--border)) !important;
}

/* -----------------------------
   8) Grids (biggest “old Ext” tell - fix it)
   ----------------------------- */
.x-grid3{
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: hsl(var(--card)) !important;
}

.x-grid3-header{
  background: hsl(var(--muted)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.x-grid3-hd-row td{
  border-left: 0 !important;
  border-right: 1px solid hsl(var(--border)) !important;
}

.x-grid3-hd-inner{
  padding: 10px 10px !important;
  font-weight: 800;
  color: hsl(var(--muted-foreground)) !important;
}

.x-grid3-row{
  background: hsl(var(--grid-row)) !important;
}

.x-grid3-row-alt{
  background: hsl(var(--grid-row-alt)) !important;
}

.x-grid3-row td, .x-grid3-summary-row td{
  border-color: hsl(var(--border)) !important;
}

.x-grid3-cell-inner{
  padding: 9px 10px !important;
  color: hsl(var(--foreground)) !important;
}

.x-grid3-row-selected,
.x-grid3-row-selected .x-grid3-cell,
.x-grid3-row-selected .x-grid3-cell-inner{
  background: hsl(var(--grid-selected)) !important;
}

.x-grid3-row-over{
  background: hsl(var(--accent)) !important;
}

/* Paging toolbar inside grids */
.x-paging-info{
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 600;
}

/* -----------------------------
   9) Combo dropdown lists
   ----------------------------- */
.x-combo-list{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

.x-combo-list-item{
  padding: 8px 10px !important;
  border-radius: calc(var(--radius) - 4px) !important;
}

.x-combo-selected{
  background: hsl(var(--accent)) !important;
}

/* -----------------------------
   10) Trees
   ----------------------------- */
.x-tree-node a span{
  color: hsl(var(--foreground)) !important;
  font-weight: 600;
}

.x-tree-node .x-tree-selected a span{
  background: hsl(var(--grid-selected)) !important;
  border-radius: 6px;
  padding: 2px 6px;
}

/* -----------------------------
   11) Date picker
   ----------------------------- */
.x-date-picker{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

.x-date-middle, .x-date-left, .x-date-right{
  background: hsl(var(--muted)) !important;
}

.x-date-inner th{
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 800;
}

.x-date-inner a{
  color: hsl(var(--foreground)) !important;
}

.x-date-selected a{
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 8px;
}

.x-date-today a{
  border: 1px solid hsl(var(--primary)) !important;
  border-radius: 8px;
}

/* -----------------------------
   12) Tooltips, masks, dialogs
   ----------------------------- */
.x-tip{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
}

.x-tip .x-tip-body{
  color: hsl(var(--foreground)) !important;
  font-weight: 600;
}

.x-mask{
  background: rgba(0,0,0,.35) !important;
}

.x-mask-msg{
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  color: hsl(var(--foreground)) !important;
}

/* -----------------------------
   13) Status colors (optional utility classes)
   ----------------------------- */
.u-text-muted{ color: hsl(var(--muted-foreground)) !important; }
.u-border{ border-color: hsl(var(--border)) !important; }