/* =========================================================
   PDIARY TEMPLATE.CSS — CANONICAL FOUNDATION v1
   Cleaned shared system only
   ========================================================= */

/* =========================================================
   1) TOKENS
   ========================================================= */
:root{
  /* typography */
  --font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 15px;
  --line-height-base: 1.45;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;

  /* core palette */
  --bg: #05070b;
  --card: #181a34;
  --card-2: #1d2740;
  --panel-bg: rgba(255,255,255,.03);

  --text: #f8fafc;
  --sub: #c6cede;
  --muted: #8f98ad;

  --accent: #51d6cc;
  --accent-strong: #3fc8be;
  --accent-light: #91ebe4;
  --accent-bg: #15273a;
  --accent-soft: rgba(81,214,204,.14);

  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  --border: rgba(150,170,210,.22);
  --border-strong: rgba(120,220,230,.45);

  --hdr-bg: var(--card);
  --hdr-fg: var(--text);
  --hdr-border: var(--border);

  /* radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  /* widths */
  --container-narrow: 900px;
  --container: 1240px;
  --container-wide: 1400px;

  /* elevation */
  --shadow-soft: 0 12px 32px -4px rgba(0,0,0,.40);
  --shadow-panel: 0 18px 45px rgba(0,0,0,.28);

  /* semantic signals */
  --kpi-ok: var(--success);
  --kpi-warn: var(--warning);
  --kpi-bad: var(--danger);

  /* safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --backbutton-clearance: calc(var(--safe-top) + 92px);

  /* compatibility aliases */
  --bg-card: var(--card);
  --text-muted: var(--muted);
  --highlight: var(--accent-bg);
  --radius: var(--radius-md);
  --dash-bg: var(--bg);
  --dash-card: var(--card);
  --dash-text: var(--text);
  --dash-muted: var(--muted);
  --dash-accent: var(--accent);
  --dash-shadow: var(--shadow-soft);
  --dash-border: var(--border);
  --dash-radius: 12px;
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-strong);
  --btn-text: #fff;
}


/* Default (before template.js applies theme) = light tokens only */
:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --card-2: #f3f4f8;
  --panel-bg: rgba(0,0,0,.03);
  --text: #1e1e1e;
  --sub: #444;
  --muted: #777;
  --accent: #6c5ce7;
  --accent-strong: #5a4bd6;
  --accent-light: #a29bfe;
  --accent-bg: #f1efff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --border: #e5e7eb;
  --border-strong: color-mix(in srgb, var(--accent) 38%, var(--border));
  --shadow-soft: 0 4px 18px -6px rgba(0,0,0,.12);
  --shadow-panel: 0 12px 32px -8px rgba(0,0,0,.12);
}

body.light{
  --bg: #f8fafc;
  --card: #ffffff;
  --card-2: #f3f4f8;
  --panel-bg: rgba(0,0,0,.03);
  --text: #1e1e1e;
  --sub: #444;
  --muted: #777;
  --accent: #6c5ce7;
  --accent-strong: #5a4bd6;
  --accent-light: #a29bfe;
  --accent-bg: #f1efff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --border: #e5e7eb;
  --border-strong: color-mix(in srgb, var(--accent) 38%, var(--border));
  --shadow-soft: 0 4px 18px -6px rgba(0,0,0,.12);
  --shadow-panel: 0 12px 32px -8px rgba(0,0,0,.12);
}

body.dark,
body.dark-theme{
  --bg: #05070b;
  --card: #181a34;
  --card-2: #1d2740;
  --panel-bg: rgba(255,255,255,.04);
  --text: #f8fafc;
  --sub: #c6cede;
  --muted: #8f98ad;
  --accent: #51d6cc;
  --accent-strong: #3fc8be;
  --accent-light: #91ebe4;
  --accent-bg: #15273a;
  --accent-soft: rgba(81,214,204,.14);
  --border: rgba(150,170,210,.22);
  --border-strong: rgba(120,220,230,.45);
  --shadow-soft: 0 8px 22px -8px rgba(0,0,0,.50);
  --shadow-panel: 0 18px 45px rgba(0,0,0,.28);
}

/* =========================================================
   2) BASE RESET
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ min-height:100%; font-size:var(--font-size-base); -webkit-text-size-adjust:100%; }
html, body{ min-height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:var(--line-height-base);
  overflow-x:hidden;
  padding-bottom:var(--safe-bottom);
}
img, svg, video, canvas{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; }
.hidden{ display:none !important; }
.center{ justify-content:center !important; }
.muted, .text-soft, .text-muted, .hint{ color:var(--text-muted); }
.success{ color:var(--success); }
.warn, .text-danger{ color:var(--danger); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   3) TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5,h6{ margin:0 0 .6rem; line-height:1.15; color:var(--text); }
h1{ font-size:clamp(1.45rem, 2.5vw, 1.95rem); letter-spacing:-0.03em; }
h2{ font-size:clamp(1.1rem, 2vw, 1.35rem); }
h3{ font-size:1rem; }
p{ margin:0 0 .8rem; color:var(--text); overflow-wrap:anywhere; }
.eyebrow{ font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.section-subtitle, .hero-subtitle{ color:var(--muted); }

/* =========================================================
   4) PAGE SHELLS
   ========================================================= */
.container,
.page-shell{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
  padding:0 0 calc(var(--safe-bottom) + 24px);
}
.page-shell--narrow{
  width:min(var(--container-narrow), calc(100% - 32px));
  margin-inline:auto;
}
.page-shell--wide{
  width:min(var(--container-wide), calc(100% - 32px));
  margin-inline:auto;
}
.page{
  display:grid;
  gap:var(--space-4);
  padding:var(--space-4);
}
.page-stack, .col{ display:grid; gap:var(--space-5); }
.section-stack{ display:grid; gap:var(--space-4); }
.grid{ display:grid; gap:var(--space-4); }
.grid.auto-fit-160{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.row,
.cluster{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.row > *, .col > *, .cluster > *{ min-width:0; }
.scroll-x{ overflow-x:auto; }
.sticky-top{ position:sticky; top:0; z-index:50; }

/* keep top spacing on standard pages, but never on calendar/fullscreen engines */
body:not(.calendar-page):not(:has(.top-header)) .container,
body:not(.calendar-page):not(:has(.top-header)) .page-shell,
body:not(.calendar-page):not(:has(.top-header)) .page-shell--narrow,
body:not(.calendar-page):not(:has(.top-header)) .page-shell--wide{
  padding-top:calc(var(--safe-top) + 72px);
}
body:has(.top-header){ padding-top:0 !important; }

/* pages with floating back button should start below it */
body.has-back-button .container,
body.has-back-button .page-shell,
body.has-back-button .page-shell--narrow,
body.has-back-button .page-shell--wide{
  padding-top: var(--backbutton-clearance) !important;
}

/* =========================================================
   5) SHARED SURFACES
   ========================================================= */
.card,
.section-card,
.panel,
.note-box,
.report-box{
  background:linear-gradient(180deg, rgba(28,30,59,.98), rgba(22,24,47,.98));
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-panel);
  padding:var(--space-4);
}
body.light .card,
body.light .section-card,
body.light .panel,
body.light .note-box,
body.light .report-box{
  background:var(--bg-card);
}
.section-card + .section-card{ margin-top:var(--space-4); }
.card--tight, .panel-tight{ padding:var(--space-3); }
.card--soft, .panel-soft{ background:var(--card-2); }

/* =========================================================
   6) BUTTONS
   ========================================================= */
button,
.btn,
.btn-primary,
.btn-accent,
.btn-ghost,
.btn-outline,
.btn-dashed,
.btn-danger,
.btn-secondary,
.primary-btn{
  appearance:none;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  border-radius:14px;
  padding:.65rem 1rem;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease, color .18s ease;
}
button,
.btn,
.btn-secondary{
  border:1px solid var(--border);
  background:rgba(24,30,52,.92);
  color:var(--text);
}
body.light button,
body.light .btn,
body.light .btn-secondary{ background:var(--bg-card); }
button:hover, .btn:hover, .btn-secondary:hover{ border-color:var(--border-strong); }
button:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
button:active, .btn:active, .btn-primary:active, .btn-accent:active, .btn-ghost:active, .btn-outline:active, .btn-dashed:active, .btn-danger:active, .primary-btn:active{ transform:scale(.985); }
.btn-primary, .btn-accent, .primary-btn{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:1px solid transparent;
  box-shadow:0 10px 26px rgba(81,214,204,.22);
}
.btn-primary:hover, .btn-accent:hover, .primary-btn:hover{ background:var(--btn-bg-hover); border-color:transparent; }
.btn-ghost{ border:1px solid var(--border); background:transparent; color:var(--text); }
.btn-outline{ background:transparent; border:1px solid var(--border-strong); color:var(--accent); }
.btn-dashed{ background:transparent; border:1px dashed var(--accent); color:var(--accent); }
.btn-danger{ background:var(--danger); color:#fff; border:1px solid transparent; }
.small-button, .btn-sm{ padding:.38rem .68rem; font-size:.9rem; }
.btn-pill{ border-radius:var(--radius-pill); }

/* theme toggle */
.theme-toggle,
.theme-toggle:hover,
.theme-toggle:active,
.theme-toggle:focus,
.theme-toggle:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.theme-toggle{
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.theme-toggle.fixed-top-right,
.theme-toggle.at-top{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-card);
  box-shadow:var(--shadow-soft);
}
.theme-toggle.fixed-top-right{
  position:fixed !important;
  top:calc(var(--safe-top) + 16px) !important;
  right:12px;
  z-index:2000;
}
.theme-toggle.at-top{
  position:absolute;
  top:calc(var(--safe-top) + 24px);
  right:12px;
  z-index:10;
}
.hdr-left,
.hdr-right,
.hdr-center{
  display:flex;
  align-items:center;
  gap:10px;
}
.hdr-right{ justify-content:flex-end; }
.hdr-center{ justify-content:center; }

/* =========================================================
   7) FORMS
   ========================================================= */
label{ display:block; margin:.75rem 0 .35rem; color:var(--text); font-size:.95rem; }
input[type="text"], input[type="number"], input[type="tel"], input[type="date"],
input[type="search"], input[type="email"], input[type="password"],
input[type="color"], input[type="time"], select, textarea{
  width:100%; min-width:0; padding:.72rem .85rem;
  border:1px solid var(--border); border-radius:14px;
  background:var(--bg-card); color:var(--text); font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder{ color:var(--sub); }
input:focus, select:focus, textarea:focus, .focus-outline:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form-row{ display:grid; gap:.75rem; grid-template-columns:1fr 1fr; }
.form-row-2{ display:grid; gap:.75rem; grid-template-columns:1fr 1fr; }
.form-row-3{ display:grid; gap:.75rem; grid-template-columns:repeat(3,1fr); }
.form-actions{ margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }

/* =========================================================
   8) TABLES
   ========================================================= */
.table-container,
.table-wrapper,
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-card);
}
table,
.table{ width:100%; border-collapse:collapse; }
th, td{ padding:.75rem; border-bottom:1px solid var(--border); text-align:left; color:var(--text); overflow-wrap:anywhere; }
th{ background:var(--highlight); }
tr:hover td{ background:color-mix(in srgb, var(--highlight) 55%, transparent); }
.highlight{ background:var(--highlight); }

/* =========================================================
   9) SEARCH
   ========================================================= */
.search-container{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  max-width:640px;
  margin:.5rem auto 1.25rem;
}
.search-container input{
  flex:1 1 280px;
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-card);
  color:var(--text);
}
.search-container input::placeholder{ color:var(--sub); }

/* =========================================================
   10) SEGMENTED / TABS
   ========================================================= */
.tabs,
.segmented{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  padding:6px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar,
.segmented::-webkit-scrollbar{ display:none; }
.tabs button,
.segmented > button,
.segmented > .segment,
.tab{
  flex:1 1 120px;
  min-width:90px;
  min-height:46px;
  padding:.66rem .95rem;
  background:color-mix(in srgb, var(--bg-card) 88%, var(--accent-bg));
  border:1px solid var(--border);
  color:var(--text);
  font-weight:700;
  border-radius:14px;
  white-space:nowrap;
}
.tabs button.active,
.tabs button[aria-selected="true"],
.segmented > .active,
.segmented > .is-active,
.segmented > button.active,
.segmented > button[aria-selected="true"],
.tab.active{
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
.tab-content{ display:none; }
.tab-content.active, section.visible{ display:block; }

/* =========================================================
   11) KPI / CHARTS / BADGES
   ========================================================= */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:1rem;
  margin-bottom:1.25rem;
}
.kpi{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.kpi h3, .kpi-label{ margin:0 0 .25rem; font-size:1rem; color:var(--text-muted); }
.kpi span, .kpi-value{ font-size:1.5rem; color:var(--text); display:block; }
.charts-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--space-4); }
.chart-box{
  min-height:280px; display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:var(--space-4);
}
.chart-box canvas{ flex:1 1 auto !important; }
.badge,
.pill,
.summary-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg-card) 90%, var(--accent-soft));
  color:var(--text);
}
.badge-accent{ border-color:var(--border-strong); color:var(--accent); background:var(--accent-soft); }
.badge.ok, .pill.ok, .badge-success{ border-color:transparent; background:var(--success); color:#fff; }
.badge.warn, .pill.warn, .badge-warning{ border-color:transparent; background:var(--warning); color:#fff; }
.badge-danger{ border-color:transparent; background:var(--danger); color:#fff; }

/* =========================================================
   12) MODALS
   ========================================================= */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; z-index:4500;
  padding:calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px);
}
.modal-backdrop.open{ display:flex; align-items:flex-start; justify-content:center; }
.modal{
  position:fixed; inset:0; background:color-mix(in srgb, #000 50%, transparent);
  display:flex; align-items:center; justify-content:center; z-index:999;
}
.modal.hidden{ display:none !important; }
.modal-content{
  background:var(--bg-card); color:var(--text); border:1px solid var(--border);
  padding:1.25rem; border-radius:var(--radius); width:min(520px, 92%);
  position:relative; box-shadow:var(--shadow-panel); max-height:min(88vh, 900px); overflow:auto;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid var(--border);
}
.modal-title{ margin:0; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.modal-body{ padding:1rem; display:grid; gap:.75rem; }
.modal-actions{
  padding:.9rem 1rem; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; align-items:center;
}
.close-button,
.modal-close{
  position:absolute; top:.6rem; right:.6rem; font-size:1.3rem; font-weight:700;
  color:var(--text); cursor:pointer; background:transparent; border:none;
}

/* =========================================================
   13) UTILITIES / HEADER VOCABULARY
   ========================================================= */
.actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.actions button{ flex:1 1 0; min-width:0; }
.subtle-sep{ border-top:1px solid var(--border); margin:1rem 0; }
.mt-1{ margin-top:.25rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:1rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; }
.p-1{ padding:.25rem; }
.top-header{
  position:sticky; top:0; z-index:1000;
  background:var(--hdr-bg); color:var(--hdr-fg); border-bottom:1px solid var(--hdr-border);
}
.top-header.two-tier{ display:flex; flex-direction:column; }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; }
.left-controls, .center-controls, .right-controls{ display:flex; align-items:center; gap:10px; }
.center-controls{ justify-content:center; }
.right-controls{ justify-content:flex-end; }
.today-btn{ margin:0 auto; }
.menu-button{
  height:2rem; padding:0 .65rem; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text);
}

/* =========================================================
   14) RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .form-row, .form-row-2, .form-row-3{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .container,
  .page-shell,
  .page-shell--narrow,
  .page-shell--wide{
    width:min(var(--container), calc(100% - 24px));
    padding-bottom:calc(var(--safe-bottom) + 20px);
  }
  .grid{ gap:.75rem; }
  .card, .section-card, .panel, .note-box, .report-box{ padding:.85rem; }
  .tab-content, .chart-box{ overflow-x:auto; }
  .top-header{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"left right" "center center";
    row-gap:8px;
    padding:8px 10px;
  }
  .hdr-left{ grid-area:left; gap:8px; min-width:0; }
  .hdr-right{ grid-area:right; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .hdr-center{ grid-area:center; justify-content:center; }
  .today-btn{ padding:.35rem .6rem; font-size:.95rem; }
  .menu-button{ height:2rem; padding:0 .5rem; font-size:.9rem; }
}

@media (max-width: 600px){
  html, body{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; }
  #editor-panel, .editor-content, .field-row, .field-row .field{ min-width:0 !important; max-width:100% !important; }
  input, select, textarea, button{ max-width:100% !important; }
  .tabs{ gap:.25rem; }
  .tabs button, .segmented > button, .tab{ font-size:.9rem; padding:.5rem .65rem; flex:1 1 calc(50% - .25rem); min-width:0; text-align:center; }
  .modal-actions{ justify-content:stretch; }
  .modal-actions .btn,
  .modal-actions .btn-primary,
  .modal-actions .btn-accent,
  .modal-actions .btn-ghost,
  .modal-actions .btn-outline,
  .modal-actions .btn-dashed,
  .modal-actions .btn-danger,
  .modal-actions button{ width:100%; }
}

@media (max-width: 520px){
  .actions{ flex-direction:column; }
  .actions button{ width:100%; flex:none; }
}

@media (max-width: 480px){
  html{ font-size:13px; }
  h1{ font-size:1.2rem !important; }
  h2{ font-size:1.05rem !important; }
  .back-button{
    top:calc(var(--safe-top) + 18px);
    left:10px;
    width:36px;
    height:36px;
  }
  .theme-toggle.fixed-top-right{ top:calc(var(--safe-top) + 22px) !important; }
}
/* Native controls follow theme */
:root{
  color-scheme: light dark;
}

body.dark,
body.dark-theme{
  color-scheme: dark;
}

body:not(.dark):not(.dark-theme){
  color-scheme: light;
}select{
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

/* =========================================================
   Canonical in-app notifications
   ========================================================= */
#inAppNotifications{
  position: fixed;
  right: 12px;
  bottom: calc(var(--safe-bottom, 0px) + 12px);
  z-index: 120100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
#inAppNotifications .in-app-notif{
  pointer-events: auto;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--card, #1f2430) 92%, black 8%);
  color: var(--text, #fff);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 700;
  line-height: 1.3;
}
#inAppNotifications .in-app-notif.show{ opacity: 1; transform: translateY(0); }
#inAppNotifications .in-app-notif.info{ border-color: color-mix(in srgb, var(--accent, #6c5ce7) 35%, var(--border, #ddd)); }
#inAppNotifications .in-app-notif.success{ border-color: color-mix(in srgb, var(--success, #16a34a) 55%, var(--border, #ddd)); }
#inAppNotifications .in-app-notif.warn,
#inAppNotifications .in-app-notif.warning{ border-color: color-mix(in srgb, var(--warning, #f59e0b) 60%, var(--border, #ddd)); }
#inAppNotifications .in-app-notif.error,
#inAppNotifications .in-app-notif.danger{ border-color: color-mix(in srgb, var(--danger, #dc2626) 60%, var(--border, #ddd)); }



/* =========================================================
   7) FORMS — CANONICAL GLOBAL FORM SYSTEM
   ========================================================= */
:root{
  --field-bg: var(--bg-card);
  --field-fg: var(--text);
  --field-border: var(--border);
  --field-placeholder: var(--muted);
  --field-radius: 14px;
  --field-min-h: 48px;
  --field-pad-y: .72rem;
  --field-pad-x: .85rem;
  --field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

label{
  display:block;
  margin:.75rem 0 .35rem;
  color:var(--text);
  font-size:.95rem;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="color"],
input[type="time"],
select,
textarea{
  width:100%;
  min-width:0;
  min-height:var(--field-min-h);
  padding:var(--field-pad-y) var(--field-pad-x);
  border:1px solid var(--field-border);
  border-radius:var(--field-radius);
  background:var(--field-bg);
  color:var(--field-fg);
  caret-color:var(--field-fg);
  font-size:1rem;
  line-height:1.35;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  -webkit-text-fill-color:var(--field-fg);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

textarea{
  min-height:110px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:var(--field-placeholder);
  opacity:1;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--field-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled{
  opacity:.65;
  cursor:not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--field-fg);
  caret-color:var(--field-fg);
  box-shadow:0 0 0 1000px var(--field-bg) inset;
  transition:background-color 5000s ease-in-out 0s;
}

.toggle-eye{
  min-height:var(--field-min-h);
  padding:0 .9rem;
  border:1px solid var(--field-border);
  border-radius:var(--field-radius);
  background:var(--field-bg);
  color:var(--field-fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-text-fill-color:var(--field-fg);
}

.toggle-eye:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--field-focus-ring);
}