/* ============================================================
   JoulePoint Edge Admin — Foundations
   Design tokens, type scale, base + utility styles
   ============================================================ */

/* ---- Brand palette (fixed, used in both themes) ---- */
:root {
  --jp-blue-300: #7BA9F4;
  --jp-blue-400: #4F8BF0;   /* brand blue */
  --jp-blue-500: #3B72D6;   /* action blue (AA on white text 4.6:1) */
  --jp-blue-600: #2E5FBE;
  --jp-blue-700: #244C9C;
  --jp-green-300: #A7DC86;
  --jp-green-400: #8BD160;  /* brand green */
  --jp-green-500: #6EB343;
  --jp-green-600: #57933340;
  --jp-grad: linear-gradient(120deg, #3B72D6 0%, #4F8BF0 48%, #6EB343 130%);
  --jp-grad-soft: linear-gradient(120deg, rgba(79,139,240,.14), rgba(139,209,96,.14));
}

/* ---- Light theme (primary) ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #F2F5FA;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(79,139,240,.07), transparent 60%),
             radial-gradient(900px 500px at -10% 0%, rgba(139,209,96,.06), transparent 55%),
             #F2F5FA;
  --surface: #FFFFFF;
  --surface-muted: #F7F9FC;
  --surface-sunk: #EDF1F7;
  --surface-hover: #F4F7FB;
  --sidebar-bg: #FFFFFF;
  --header-bg: rgba(255,255,255,.82);

  --text-primary: #0E1729;
  --text-secondary: #5B6B82;
  --text-subtle: #8B98AE;
  --text-on-accent: #FFFFFF;

  --border: #E5EAF2;
  --border-strong: #D4DCE8;
  --ring: rgba(59,114,214,.38);

  --accent: var(--jp-blue-500);
  --accent-hover: var(--jp-blue-600);
  --accent-active: var(--jp-blue-700);
  --accent-soft: #EAF1FD;
  --accent-soft-border: #D5E2FA;
  --accent-text: #244C9C;

  --green: var(--jp-green-500);
  --green-soft: #E9F6DF;
  --green-soft-border: #D4ECC2;
  --green-text: #3E6B22;

  --success: #2BA86A;  --success-soft: #E4F6ED;  --success-text: #1B6B43;  --success-border:#C9ECD8;
  --warning: #D98A1F;  --warning-soft: #FBF0DA;  --warning-text: #8A560F;  --warning-border:#F2DFB8;
  --danger:  #DC4B4B;  --danger-soft:  #FBE7E7;  --danger-text:  #A52E2E;  --danger-border:#F2C9C9;
  --info:    #2E8BC9;  --info-soft:    #E2F1FB;  --info-text:    #1D5C88;  --info-border:#C7E2F4;
  --neutral-soft:#EEF1F6; --neutral-text:#5B6B82; --neutral-border:#E1E7F0; --neutral:#8B98AE;

  --shadow-xs: 0 1px 2px rgba(16,31,57,.05);
  --shadow-sm: 0 1px 3px rgba(16,31,57,.06), 0 1px 2px rgba(16,31,57,.04);
  --shadow-md: 0 4px 14px rgba(16,31,57,.07), 0 1px 3px rgba(16,31,57,.05);
  --shadow-lg: 0 12px 34px rgba(16,31,57,.12), 0 4px 10px rgba(16,31,57,.06);
  --shadow-pop: 0 18px 48px rgba(16,31,57,.18);

  --chart-grid: #EDF1F7;
  --code-bg: #F7F9FC;
  --scrim: rgba(14,23,41,.34);
}

/* ---- Dark theme (secondary, complete) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1120;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(79,139,240,.10), transparent 60%),
             radial-gradient(900px 500px at -10% 0%, rgba(139,209,96,.07), transparent 55%),
             #0A1120;
  --surface: #111B2E;
  --surface-muted: #0E1626;
  --surface-sunk: #0B1322;
  --surface-hover: #16223A;
  --sidebar-bg: #0C1424;
  --header-bg: rgba(12,20,36,.78);

  --text-primary: #EAF0F9;
  --text-secondary: #9FB0C8;
  --text-subtle: #6C7C96;
  --text-on-accent: #08101F;

  --border: #1E2B45;
  --border-strong: #2A3A58;
  --ring: rgba(123,169,244,.45);

  --accent: var(--jp-blue-400);
  --accent-hover: var(--jp-blue-300);
  --accent-active: #9CC0F8;
  --accent-soft: rgba(79,139,240,.14);
  --accent-soft-border: rgba(79,139,240,.30);
  --accent-text: #A7C6F9;

  --green: var(--jp-green-400);
  --green-soft: rgba(139,209,96,.14);
  --green-soft-border: rgba(139,209,96,.30);
  --green-text: #B6E394;

  --success:#34C77E; --success-soft:rgba(52,199,126,.15); --success-text:#7EE3B0; --success-border:rgba(52,199,126,.3);
  --warning:#E2A33C; --warning-soft:rgba(226,163,60,.15); --warning-text:#F1C781; --warning-border:rgba(226,163,60,.3);
  --danger: #EE6B6B; --danger-soft: rgba(238,107,107,.15); --danger-text:#F6A3A3; --danger-border:rgba(238,107,107,.3);
  --info:   #54A8E0; --info-soft:   rgba(84,168,224,.15); --info-text:#A2D2F2; --info-border:rgba(84,168,224,.3);
  --neutral-soft:rgba(159,176,200,.12); --neutral-text:#9FB0C8; --neutral-border:rgba(159,176,200,.22); --neutral:#6C7C96;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --shadow-pop: 0 22px 54px rgba(0,0,0,.6);

  --chart-grid: #1B2740;
  --code-bg: #0B1322;
  --scrim: rgba(3,8,18,.6);
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}
#root { height: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(79,139,240,.22); }

/* type scale */
:root {
  --fs-display: 30px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 15px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* density: data-density on shell root scales row paddings */
[data-density="compact"] { --row-pad-y: 8px; --row-h: 40px; }
[data-density="comfortable"] { --row-pad-y: 13px; --row-h: 52px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* utilities */
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* focus ring */
.focusable:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--r-sm);
}

/* keyframes */
@keyframes jp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes jp-page-in { from { transform: translateY(7px); } to { transform: none; } }
@keyframes jp-pop-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes jp-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes jp-spin { to { transform: rotate(360deg); } }
@keyframes jp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes jp-shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }

.jp-spin { animation: jp-spin .8s linear infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunk) 25%, var(--surface-muted) 37%, var(--surface-sunk) 63%);
  background-size: 720px 100%;
  animation: jp-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* page enter — no fill-mode so the resting state is always visible even if the animation never runs */
.page-enter { animation: jp-page-in .3s ease; }

/* ---- Responsive dashboard grids (driven by content width, not viewport) ---- */
main { container-type: inline-size; container-name: jp-content; }

/* Wide: 2-up asymmetric (chart + side panel). Collapses to 1 column when narrow. */
.jp-grid-main { display: grid; gap: 16px; align-items: stretch; grid-template-columns: 1.6fr 1fr; }
.jp-grid-main > * { min-width: 0; }
.jp-chart-fill { height: 100%; min-width: 0; }
.jp-chart-fill > .jp-card { height: 100%; }
/* Wide: 3-up distributions. */
.jp-grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
/* Wide: 2-up equal. */
.jp-grid-2 { display: grid; gap: 16px; align-items: start; grid-template-columns: 1fr 1fr; }
/* Master + side panel split (table/chart + detail). */
.jp-split { display: grid; gap: 16px; align-items: start; grid-template-columns: 1.5fr 1fr; }
/* Fixed-width sidebar + content (e.g. role list + permissions). */
.jp-sidebar { display: grid; gap: 16px; align-items: start; grid-template-columns: 280px 1fr; }
.jp-rbac-layout { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
.jp-rbac-role-scroll { display: flex; flex-direction: column; gap: 6px; max-height: 620px; overflow: auto; padding-right: 2px; }
.jp-rbac-perm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.jp-rbac-perm-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); transition: .14s ease; }
.jp-rbac-perm-row[data-clickable="true"] { cursor: pointer; }
.jp-rbac-perm-row[data-clickable="true"]:hover { border-color: var(--accent-soft-border); background: var(--surface-hover); }
.jp-module-grid { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.jp-module-card { grid-column: span var(--module-span, 3); min-width: 0; }
.jp-overview-kpi-grid { display: grid; gap: 10px; align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.jp-overview-priority-grid { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); }
.jp-overview-insight-grid { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jp-overview-support-grid { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
.jp-overview-list-stack { display: grid; gap: 16px; align-items: start; grid-template-columns: 1fr; }

@container jp-content (max-width: 820px) {
  .jp-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .jp-module-card { grid-column: span 6; }
}
@container jp-content (max-width: 980px) {
  .jp-overview-support-grid { grid-template-columns: 1fr; }
  .jp-overview-priority-grid { grid-template-columns: 1fr; }
  .jp-overview-insight-grid { grid-template-columns: 1fr; }
}
@container jp-content (max-width: 720px) {
  .jp-grid-main, .jp-grid-2, .jp-split, .jp-sidebar, .jp-rbac-layout, .jp-overview-list-stack, .jp-overview-priority-grid, .jp-overview-insight-grid { grid-template-columns: 1fr; }
  .jp-overview-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@container jp-content (max-width: 540px) {
  .jp-grid-3 { grid-template-columns: 1fr; }
  .jp-module-card { grid-column: 1 / -1; }
}

/* ---- Dashboard builder ---- */
.dash-cq { container-type: size; }
.dash-palette-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); cursor:grab; transition:.13s; width:100%; text-align:left; }
.dash-palette-item:hover { border-color:var(--accent); background:var(--surface-hover); transform:translateY(-1px); box-shadow:var(--shadow-xs); }
.dash-palette-item:active { cursor:grabbing; }
.dash-field-label { font-size:11.5px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px; letter-spacing:.01em; }
.dash-swatch { width:24px; height:24px; border-radius:7px; cursor:pointer; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border); transition:.12s; }
.dash-swatch[data-active="true"] { box-shadow:0 0 0 2px var(--accent); transform:scale(1.08); }
select.jp-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B98AE' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 9px center; padding-right:30px; }
@keyframes dash-spin { to { transform:rotate(360deg); } }
.dash-refreshing { animation:dash-spin .8s linear infinite; }
.dash-del-btn:hover { background:var(--danger-soft) !important; color:var(--danger-text) !important; }
.dash-inspector { animation:jp-slide-in .18s ease both; }