/**
 * Parents360 — 10 full design templates (layout + type + color).
 * html[data-theme] + html[data-layout]. Loaded after theme.css.
 */

/* -------------------------------------------------------------------------- */
/* Gallery                                                                    */
/* -------------------------------------------------------------------------- */

.theme-picker { margin: 0; }
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .9rem;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: .7rem;
  padding: .7rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  font: inherit;
  color: inherit;
  min-height: 0;
}
.theme-card:hover {
  border-color: var(--color-brand-300);
  box-shadow: var(--shadow-sm);
}
.theme-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.theme-card-preview {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  grid-template-rows: 1fr;
  height: 4.6rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle, var(--color-border));
  position: relative;
}
.theme-card-chrome { display: none; }
.theme-card-sidebar { display: block; }
.theme-card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .65rem;
}
.theme-card-bar {
  display: block;
  height: .55rem;
  width: 62%;
  border-radius: 4px;
}
.theme-card-chip {
  display: block;
  height: .4rem;
  width: 28%;
  border-radius: 99px;
  opacity: .85;
}
.theme-card-preview[data-layout="topbar"],
.theme-card-preview[data-layout="document"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1.05rem 1fr;
}
.theme-card-preview[data-layout="topbar"] .theme-card-sidebar,
.theme-card-preview[data-layout="document"] .theme-card-sidebar { display: none; }
.theme-card-preview[data-layout="topbar"] .theme-card-chrome,
.theme-card-preview[data-layout="document"] .theme-card-chrome {
  display: block;
  grid-column: 1;
  grid-row: 1;
}
.theme-card-preview[data-layout="framed"] {
  grid-template-columns: 1fr 2.1rem;
}
.theme-card-preview[data-layout="framed"] .theme-card-sidebar { order: 2; }
.theme-card-preview[data-layout="framed"] .theme-card-main { order: 1; }
.theme-card-preview[data-layout="rail"] {
  grid-template-columns: .85rem 1fr;
}
.theme-card-preview[data-layout="split"] {
  grid-template-columns: 1.7rem 1fr;
  grid-template-rows: .7rem 1fr;
}
.theme-card-preview[data-layout="split"] .theme-card-chrome {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
}
.theme-card-preview[data-layout="split"] .theme-card-sidebar {
  grid-column: 1;
  grid-row: 2;
}
.theme-card-preview[data-layout="split"] .theme-card-main {
  grid-column: 2;
  grid-row: 2;
}
.theme-card-preview[data-layout="organic"] .theme-card-bar,
.theme-card-preview[data-layout="organic"] .theme-card-chip {
  border-radius: 99px;
}
.theme-card-preview[data-layout="dense"] .theme-card-bar,
.theme-card-preview[data-layout="dense"] .theme-card-chip,
.theme-card-preview[data-layout="framed"] .theme-card-bar,
.theme-card-preview[data-layout="framed"] .theme-card-chip {
  border-radius: 0;
}
.theme-card-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.theme-card-meta strong {
  font-size: .95rem;
  font-weight: 700;
}
.theme-card-meta span {
  color: var(--color-text-secondary);
  font-size: .8rem;
  line-height: 1.35;
}

/* -------------------------------------------------------------------------- */
/* Palettes                                                                   */
/* -------------------------------------------------------------------------- */

html[data-theme] {
  --color-primary: var(--color-brand-600);
  --color-primary-hover: var(--color-brand-700);
  --color-primary-active: var(--color-brand-800);
  --color-primary-subtle: var(--color-brand-50);
  --color-accent: var(--color-brand-500);
  --color-focus-ring: var(--color-brand-500);
  --color-text-link: var(--color-brand-700);
  --color-text-link-hover: var(--color-brand-800);
  --teal: var(--color-primary);
  --teal-dark: var(--color-primary-hover);
  --color-surface: #fff;
}

html[data-theme="aegean"] {
  --color-brand-50: #eef8f6;
  --color-brand-100: #d5efe9;
  --color-brand-200: #abdcd2;
  --color-brand-300: #74c2b4;
  --color-brand-400: #3ea393;
  --color-brand-500: #1f8a7a;
  --color-brand-600: #187166;
  --color-brand-700: #155a52;
  --color-brand-800: #144843;
  --color-brand-900: #123c38;
  --color-bg: #f4f5f4;
  --color-sidebar-bg: #10262a;
  --color-sidebar-bg-accent: #173338;
  --color-sidebar-text: #e8f2f0;
  --color-sidebar-text-muted: #9bb3ae;
  --color-sidebar-active: #7dd3c4;
  --color-sidebar-active-bg: rgba(125, 211, 196, 0.14);
}

html[data-theme="kyrenia"] {
  --color-brand-50: #eef3f9;
  --color-brand-100: #d5e2f2;
  --color-brand-200: #a9c4e2;
  --color-brand-300: #6e9ac8;
  --color-brand-400: #3d73ad;
  --color-brand-500: #245c9a;
  --color-brand-600: #1e4a86;
  --color-brand-700: #1a3c6c;
  --color-brand-800: #163257;
  --color-brand-900: #122846;
  --color-neutral-50: #f4f6f9;
  --color-bg: #eef2f7;
  --color-sidebar-bg: #0c1929;
  --color-sidebar-bg-accent: #14263c;
  --color-sidebar-text: #eaf0f7;
  --color-sidebar-text-muted: #9aadc2;
  --color-sidebar-active: #d4b068;
  --color-sidebar-active-bg: rgba(212, 176, 104, 0.16);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --font-ui: "Segoe UI", system-ui, sans-serif;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius: 4px;
  --layout-sidebar-width: 15.5rem;
}

html[data-theme="olive"] {
  --color-brand-50: #f4f6ec;
  --color-brand-100: #e4e8cf;
  --color-brand-200: #c9d09e;
  --color-brand-300: #a3ae6b;
  --color-brand-400: #7d8a45;
  --color-brand-500: #667638;
  --color-brand-600: #5a6a32;
  --color-brand-700: #475428;
  --color-brand-800: #384221;
  --color-brand-900: #2c341b;
  --color-neutral-50: #f6f4ee;
  --color-bg: #f8f5ee;
  --color-sidebar-bg: #f3efe4;
  --color-sidebar-bg-accent: #e7e0d0;
  --color-sidebar-text: #2c341b;
  --color-sidebar-text-muted: #6a6a52;
  --color-sidebar-active: #5a6a32;
  --color-sidebar-active-bg: rgba(90, 106, 50, 0.12);
  --font-display: Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
  --font-body: Georgia, "Iowan Old Style", Palatino, serif;
  --font-ui: "Segoe UI", system-ui, sans-serif;
  --layout-sidebar-width: 17.5rem;
  --layout-content-max: 54rem;
}

html[data-theme="limestone"] {
  --color-brand-50: #f7f1ea;
  --color-brand-100: #ead9c8;
  --color-brand-200: #d4b496;
  --color-brand-300: #c08a66;
  --color-brand-400: #a86a4a;
  --color-brand-500: #9a5f44;
  --color-brand-600: #8f5740;
  --color-brand-700: #734635;
  --color-brand-800: #5c3a2d;
  --color-brand-900: #4a3026;
  --color-neutral-50: #f7f3ec;
  --color-bg: #ebe4d8;
  --color-sidebar-bg: #3a322b;
  --color-sidebar-bg-accent: #4a4038;
  --color-sidebar-text: #f4eee6;
  --color-sidebar-text-muted: #c4b4a4;
  --color-sidebar-active: #e0b089;
  --color-sidebar-active-bg: rgba(224, 176, 137, 0.16);
  --font-display: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius: 0;
  --layout-sidebar-width: 15.5rem;
}

html[data-theme="marine"] {
  --color-brand-50: #eef6f9;
  --color-brand-100: #d2eaf1;
  --color-brand-200: #a5d4e2;
  --color-brand-300: #6eb6cc;
  --color-brand-400: #3d93ad;
  --color-brand-500: #227a96;
  --color-brand-600: #176f8c;
  --color-brand-700: #145a71;
  --color-brand-800: #12485b;
  --color-brand-900: #0f3b4b;
  --color-neutral-50: #f1f6f8;
  --color-bg: #e8f2f6;
  --color-sidebar-bg: #0b2836;
  --color-sidebar-bg-accent: #123848;
  --color-sidebar-text: #e8f4f8;
  --color-sidebar-text-muted: #8eb8c8;
  --color-sidebar-active: #7ec8dd;
  --color-sidebar-active-bg: rgba(126, 200, 221, 0.16);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius: 1.25rem;
  --layout-sidebar-width: 4.75rem;
}

html[data-theme="slate"] {
  --color-brand-50: #eef1f5;
  --color-brand-100: #d8dee7;
  --color-brand-200: #b3becc;
  --color-brand-300: #8896aa;
  --color-brand-400: #64758c;
  --color-brand-500: #54657c;
  --color-brand-600: #4a5d78;
  --color-brand-700: #3c4c63;
  --color-brand-800: #313e51;
  --color-brand-900: #283242;
  --color-neutral-50: #f5f6f8;
  --color-bg: #eceff3;
  --color-sidebar-bg: #e8edf2;
  --color-sidebar-bg-accent: #dce3ea;
  --color-sidebar-text: #1c232d;
  --color-sidebar-text-muted: #5a6778;
  --color-sidebar-active: #4a5d78;
  --color-sidebar-active-bg: rgba(74, 93, 120, 0.12);
  --font-display: "Segoe UI", Tahoma, sans-serif;
  --font-body: "Segoe UI", Tahoma, sans-serif;
  --font-ui: "Segoe UI", Tahoma, sans-serif;
  --text-base: 0.9375rem;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius: 4px;
  --layout-sidebar-width: 14.25rem;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
}

html[data-theme="carob"] {
  --color-brand-50: #f6f0ea;
  --color-brand-100: #e8d7c8;
  --color-brand-200: #d2b49a;
  --color-brand-300: #b88966;
  --color-brand-400: #9a6744;
  --color-brand-500: #7e4e32;
  --color-brand-600: #6a3e28;
  --color-brand-700: #563322;
  --color-brand-800: #44291c;
  --color-brand-900: #362015;
  --color-neutral-50: #f6f2ed;
  --color-bg: #ece4d8;
  --color-sidebar-bg: #2a2018;
  --color-sidebar-bg-accent: #3a2c22;
  --color-sidebar-text: #f4ebe3;
  --color-sidebar-text-muted: #c4b0a0;
  --color-sidebar-active: #d2a07a;
  --color-sidebar-active-bg: rgba(210, 160, 122, 0.16);
  --font-display: Georgia, "Iowan Old Style", Palatino, serif;
  --font-body: Georgia, "Iowan Old Style", Palatino, serif;
  --font-ui: "Segoe UI", system-ui, sans-serif;
  --layout-content-max: 48rem;
}

html[data-theme="clay"] {
  --color-brand-50: #f8eeea;
  --color-brand-100: #eed8d0;
  --color-brand-200: #dcb0a2;
  --color-brand-300: #c88874;
  --color-brand-400: #b46a56;
  --color-brand-500: #a85d4a;
  --color-brand-600: #a05642;
  --color-brand-700: #844636;
  --color-brand-800: #6a392c;
  --color-brand-900: #562e24;
  --color-neutral-50: #f7f1ee;
  --color-bg: #eadcd4;
  --color-sidebar-bg: #f6ebe6;
  --color-sidebar-bg-accent: #ead9d1;
  --color-sidebar-text: #3a221c;
  --color-sidebar-text-muted: #7a5a52;
  --color-sidebar-active: #a05642;
  --color-sidebar-active-bg: rgba(160, 86, 66, 0.12);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --radius-sm: 1rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.35rem;
  --radius-xl: 1.6rem;
  --radius-2xl: 1.85rem;
  --radius-full: 9999px;
  --radius: 1.35rem;
}

html[data-theme="cedar"] {
  --color-brand-50: #eaf6ee;
  --color-brand-100: #cfe8d7;
  --color-brand-200: #9fd0ae;
  --color-brand-300: #67b382;
  --color-brand-400: #3d9260;
  --color-brand-500: #337d51;
  --color-brand-600: #2d6a48;
  --color-brand-700: #25563b;
  --color-brand-800: #1e4530;
  --color-brand-900: #183827;
  --color-neutral-50: #f2f6f3;
  --color-bg: #e8efe9;
  --color-sidebar-bg: #132018;
  --color-sidebar-bg-accent: #1c2e23;
  --color-sidebar-text: #e7f3eb;
  --color-sidebar-text-muted: #93b59e;
  --color-sidebar-active: #8fca9e;
  --color-sidebar-active-bg: rgba(143, 202, 158, 0.16);
  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --layout-sidebar-width: 14.75rem;
}

html[data-theme="midnight"] {
  --color-brand-50: #1a2833;
  --color-brand-100: #213344;
  --color-brand-200: #2c455c;
  --color-brand-300: #3d6f94;
  --color-brand-400: #4d86ab;
  --color-brand-500: #6aa3c9;
  --color-brand-600: #6aa3c9;
  --color-brand-700: #8eb6d4;
  --color-brand-800: #abc9dc;
  --color-brand-900: #d5e4ee;
  --color-neutral-25: #181c24;
  --color-neutral-50: #1c222c;
  --color-neutral-100: #242b36;
  --color-bg: #12151c;
  --color-text: #e6edf4;
  --color-text-secondary: #9aa8b6;
  --color-text-muted: #7d8b9a;
  --color-text-link: #8eb6d4;
  --color-text-link-hover: #c5dcec;
  --color-border: #2a3340;
  --color-border-subtle: #232a35;
  --color-border-strong: #3a4656;
  --color-surface: #1a1f28;
  --color-sidebar-bg: #0e1116;
  --color-sidebar-bg-accent: #1a1f28;
  --color-sidebar-text: #e8eef4;
  --color-sidebar-text-muted: #96a6b6;
  --color-sidebar-active: #8eb6d4;
  --color-sidebar-active-bg: rgba(142, 182, 212, 0.16);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------- */
/* Shared chrome from tokens                                                  */
/* -------------------------------------------------------------------------- */

html[data-theme] .card,
html[data-theme] .btn,
html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .nav-toggle,
html[data-theme] .badge,
html[data-theme] .flash {
  border-radius: var(--radius-lg);
}

html[data-theme="olive"] .topbar h1,
html[data-theme="olive"] .section-title,
html[data-theme="olive"] .card > h3,
html[data-theme="carob"] .topbar h1,
html[data-theme="carob"] .section-title,
html[data-theme="limestone"] .topbar h1 {
  font-family: var(--font-display);
}

html[data-theme="olive"] .topbar h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
html[data-theme="olive"] .card {
  background: #fffdf8;
  border-color: #ddd4c0;
  box-shadow: none;
  border-left: 4px solid var(--color-primary);
}
html[data-theme="olive"] .btn,
html[data-theme="olive"] input,
html[data-theme="olive"] select,
html[data-theme="olive"] textarea {
  font-family: var(--font-ui);
}

html[data-theme="limestone"] .card {
  box-shadow: none;
  border: 1px solid #cfc3b2;
  background: #f8f3eb;
}
html[data-theme="limestone"] .btn,
html[data-theme="limestone"] input,
html[data-theme="limestone"] select,
html[data-theme="limestone"] textarea,
html[data-theme="limestone"] .nav-toggle,
html[data-theme="limestone"] .badge,
html[data-theme="limestone"] .flash,
html[data-theme="limestone"] .settings-tabs a {
  border-radius: 0 !important;
}

html[data-theme="marine"] .card {
  border: 0;
  box-shadow: 0 12px 32px rgba(11, 40, 54, 0.08);
  border-radius: var(--radius-xl);
}
html[data-theme="marine"] .btn,
html[data-theme="marine"] .nav-toggle,
html[data-theme="marine"] input,
html[data-theme="marine"] select {
  border-radius: 999px;
}

html[data-theme="slate"] .card {
  border-radius: 0;
  box-shadow: none;
  border-color: #cfd6de;
  padding: .85rem .9rem;
}
html[data-theme="slate"] .topbar {
  margin-bottom: .75rem;
  padding-bottom: .55rem;
}
html[data-theme="slate"] .topbar h1 { font-size: 1.2rem; letter-spacing: 0; }
html[data-theme="slate"] .main { padding: .9rem 1rem 1.5rem; }
html[data-theme="slate"] .btn { min-height: 2.1rem; padding: .35rem .7rem; border-radius: 3px; }
html[data-theme="slate"] input,
html[data-theme="slate"] select,
html[data-theme="slate"] textarea {
  min-height: 2.1rem;
  padding: .4rem .55rem;
  border-radius: 3px;
}

html[data-theme="carob"] .card {
  background: #fbf6ef;
  border-color: #e0d2c2;
  box-shadow: none;
}
html[data-theme="carob"] .topbar h1 {
  font-size: 1.85rem;
  font-weight: 600;
}

html[data-theme="clay"] .card {
  border: 0;
  box-shadow: 0 10px 28px rgba(80, 40, 30, 0.08);
}
html[data-theme="clay"] .btn,
html[data-theme="clay"] .nav-toggle {
  border-radius: 999px;
}

html[data-theme="cedar"] .card {
  border-color: #c9dbcfd0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .quick-action,
html[data-theme="midnight"] .btn-ghost,
html[data-theme="midnight"] .nav-toggle,
html[data-theme="midnight"] .user-edit,
html[data-theme="midnight"] .settings-tabs a,
html[data-theme="midnight"] .portal-stat {
  background: var(--color-surface) !important;
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="midnight"] input,
html[data-theme="midnight"] select,
html[data-theme="midnight"] textarea {
  background: #151a22;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
html[data-theme="midnight"] table thead th {
  background: #181c24;
  color: var(--color-text-secondary);
}
html[data-theme="midnight"] tbody tr:hover { background: #1a2430; }
html[data-theme="midnight"] .brand-mark,
html[data-theme="midnight"] .sidebar-avatar {
  background: #2a3a4a !important;
  color: #d5e4ee !important;
}
html[data-theme="midnight"] {
  color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/* Light sidebars (olive / slate / clay)                                      */
/* -------------------------------------------------------------------------- */

html[data-layout="editorial"] .sidebar,
html[data-layout="dense"] .sidebar,
html[data-layout="organic"] .sidebar {
  color: var(--color-sidebar-text) !important;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.08);
}
html[data-layout="editorial"] .brand,
html[data-layout="dense"] .brand,
html[data-layout="organic"] .brand,
html[data-layout="editorial"] .nav a,
html[data-layout="dense"] .nav a,
html[data-layout="organic"] .nav a,
html[data-layout="editorial"] .nav-group-label,
html[data-layout="dense"] .nav-group-label,
html[data-layout="organic"] .nav-group-label {
  color: var(--color-sidebar-text) !important;
}
html[data-layout="editorial"] .brand-school,
html[data-layout="dense"] .brand-school,
html[data-layout="organic"] .brand-school {
  color: var(--color-primary) !important;
}
html[data-layout="editorial"] .brand-sub,
html[data-layout="dense"] .brand-sub,
html[data-layout="organic"] .brand-sub,
html[data-layout="editorial"] .sidebar-user-meta span,
html[data-layout="dense"] .sidebar-user-meta span,
html[data-layout="organic"] .sidebar-user-meta span {
  color: var(--color-sidebar-text-muted) !important;
}
html[data-layout="editorial"] .nav a.active,
html[data-layout="dense"] .nav a.active,
html[data-layout="organic"] .nav a.active,
html[data-layout="editorial"] .nav-group-label.is-active,
html[data-layout="dense"] .nav-group-label.is-active,
html[data-layout="organic"] .nav-group-label.is-active {
  color: var(--color-primary) !important;
  background: var(--color-sidebar-active-bg) !important;
}
html[data-layout="editorial"] .nav-logout,
html[data-layout="dense"] .nav-logout,
html[data-layout="organic"] .nav-logout {
  color: var(--color-sidebar-text) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
html[data-layout="editorial"] .sidebar-user,
html[data-layout="dense"] .sidebar-user,
html[data-layout="organic"] .sidebar-user {
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-layout="editorial"] .sidebar-account-panel,
html[data-layout="dense"] .sidebar-account-panel,
html[data-layout="organic"] .sidebar-account-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}
html[data-layout="editorial"] .sidebar-account-panel a,
html[data-layout="dense"] .sidebar-account-panel a,
html[data-layout="organic"] .sidebar-account-panel a {
  color: var(--color-sidebar-text);
}
html[data-layout="editorial"] .sidebar-account-panel a:hover,
html[data-layout="editorial"] .sidebar-account-panel a.is-active,
html[data-layout="dense"] .sidebar-account-panel a:hover,
html[data-layout="dense"] .sidebar-account-panel a.is-active,
html[data-layout="organic"] .sidebar-account-panel a:hover,
html[data-layout="organic"] .sidebar-account-panel a.is-active {
  background: rgba(0, 0, 0, 0.06);
}
html[data-layout="editorial"] .sidebar-footer,
html[data-layout="dense"] .sidebar-footer,
html[data-layout="organic"] .sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-layout="editorial"] .nav-sub {
  border-left-color: rgba(0, 0, 0, 0.1);
}
html[data-layout="editorial"] .brand-mark,
html[data-layout="organic"] .brand-mark {
  background: var(--color-brand-200) !important;
  color: var(--color-brand-900) !important;
}
html[data-layout="dense"] .brand-mark {
  background: #c5d0dc !important;
  color: #1c232d !important;
  border-radius: 4px;
}
html[data-layout="editorial"] .sidebar-avatar,
html[data-layout="organic"] .sidebar-avatar {
  background: var(--color-brand-200) !important;
  color: var(--color-brand-900) !important;
}

/* -------------------------------------------------------------------------- */
/* Layout: topbar (kyrenia)                                                   */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="topbar"] .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  html[data-layout="topbar"] .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    width: 100%;
    max-width: none;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(12, 25, 41, 0.16);
    border-bottom: 3px solid var(--color-sidebar-active);
  }
  html[data-layout="topbar"] .sidebar-inner {
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    height: auto;
    padding: .45rem .9rem;
  }
  html[data-layout="topbar"] .brand-block {
    margin: 0;
    padding: 0 .4rem 0 0;
    border: 0;
    min-width: 11rem;
    max-width: 16rem;
  }
  html[data-layout="topbar"] .brand-school { display: none; }
  html[data-layout="topbar"] .nav {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-x: auto;
    overflow-y: visible;
    gap: .1rem;
    padding: 0;
  }
  html[data-layout="topbar"] .nav-group { position: relative; margin: 0; }
  html[data-layout="topbar"] .nav a,
  html[data-layout="topbar"] .nav-group-label {
    white-space: nowrap;
    margin: 0;
    padding: .45rem .65rem !important;
    border-radius: 4px;
  }
  html[data-layout="topbar"] .nav a.active,
  html[data-layout="topbar"] .nav-group-label.is-active {
    box-shadow: inset 0 -3px 0 var(--color-sidebar-active) !important;
  }
  html[data-layout="topbar"] .nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 12.5rem;
    margin: 0;
    padding: .35rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-sidebar-bg-accent);
    box-shadow: var(--shadow-lg);
  }
  html[data-layout="topbar"] .nav-group:hover .nav-sub,
  html[data-layout="topbar"] .nav-group:focus-within .nav-sub,
  html[data-layout="topbar"] .nav-group.is-open .nav-sub {
    display: block;
  }
  html[data-layout="topbar"] .nav-sub-inner { overflow: visible; }
  html[data-layout="topbar"] .sidebar-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    border: 0;
    flex-shrink: 0;
  }
  html[data-layout="topbar"] .sidebar-account {
    margin-bottom: 0;
  }
  html[data-layout="topbar"] .sidebar-account-panel {
    bottom: auto;
    top: calc(100% + .45rem);
    left: auto;
    right: 0;
    width: 16.5rem;
  }
  html[data-layout="topbar"] .sidebar-user { padding: .3rem .5rem; }
  html[data-layout="topbar"] .sidebar-user-meta span { display: none; }
  html[data-layout="topbar"] .nav-logout {
    width: auto;
    padding: .4rem .7rem !important;
    white-space: nowrap;
  }
  html[data-layout="topbar"] .main {
    max-width: none;
    padding: 1.25rem 1.75rem 2.4rem;
  }
  html[data-layout="topbar"] body.is-nav-collapsed .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 0 1fr;
  }
  html[data-layout="topbar"] body.is-nav-collapsed .sidebar {
    height: 0;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    border: 0;
    pointer-events: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: editorial (olive)                                                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="editorial"] .app-shell {
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  }
  html[data-layout="editorial"] .main {
    max-width: var(--layout-content-max);
    padding: 2.2rem 2.4rem 3rem;
  }
  html[data-layout="editorial"] .nav a,
  html[data-layout="editorial"] .nav-group-label {
    border-radius: 0;
    padding: .5rem .35rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  html[data-layout="editorial"] .nav a.active,
  html[data-layout="editorial"] .nav-group-label.is-active {
    box-shadow: none !important;
    border-bottom-color: var(--color-primary);
  }
  html[data-layout="editorial"] .brand-block {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: framed + right rail (limestone)                                    */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="framed"] body[data-app-shell="admin"] {
    background: #5a5248;
    padding: 10px;
  }
  html[data-layout="framed"] .app-shell {
    grid-template-columns: 1fr var(--layout-sidebar-width);
    min-height: calc(100vh - 20px);
    outline: 1px solid #2e2823;
    background: var(--color-bg);
  }
  html[data-layout="framed"] .sidebar { order: 2; overflow: hidden; }
  html[data-layout="framed"] .main { order: 1; max-width: none; }
  html[data-layout="framed"] .nav a,
  html[data-layout="framed"] .nav-group-label {
    border-radius: 0;
  }
  html[data-layout="framed"] .nav a.active,
  html[data-layout="framed"] .nav-group-label.is-active {
    box-shadow: inset -3px 0 0 var(--color-sidebar-active) !important;
  }
  html[data-layout="framed"] body.is-nav-collapsed .app-shell {
    grid-template-columns: 1fr 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: icon rail (marine)                                                 */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="rail"] .app-shell {
    grid-template-columns: 4.75rem 1fr;
    transition: grid-template-columns .18s ease;
  }
  html[data-layout="rail"] .app-shell:has(.sidebar:hover),
  html[data-layout="rail"] .app-shell:has(.sidebar:focus-within) {
    grid-template-columns: 16.5rem 1fr;
  }
  html[data-layout="rail"] .sidebar { overflow: hidden; }
  html[data-layout="rail"] .sidebar:has(.sidebar-account[open]),
  html[data-layout="rail"] .sidebar:has(.sidebar-account.is-open) { overflow: visible; }
  html[data-layout="rail"] .sidebar-account-panel {
    left: .4rem;
    right: auto;
    width: 15.5rem;
  }
  html[data-layout="rail"] .brand-text,
  html[data-layout="rail"] .sidebar-user-meta,
  html[data-layout="rail"] .nav-caret,
  html[data-layout="rail"] .nav-sub,
  html[data-layout="rail"] .nav-logout,
  html[data-layout="rail"] .app-version {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    pointer-events: none;
  }
  html[data-layout="rail"] .nav a,
  html[data-layout="rail"] .nav-group-label {
    justify-content: center;
    font-size: 0;
    gap: 0;
    padding: .7rem !important;
    border-radius: 14px;
  }
  html[data-layout="rail"] .nav a.active,
  html[data-layout="rail"] .nav-group-label.is-active {
    box-shadow: none !important;
  }
  html[data-layout="rail"] .sidebar:hover .brand-text,
  html[data-layout="rail"] .sidebar:focus-within .brand-text,
  html[data-layout="rail"] .sidebar:hover .sidebar-user-meta,
  html[data-layout="rail"] .sidebar:focus-within .sidebar-user-meta,
  html[data-layout="rail"] .sidebar:hover .nav-caret,
  html[data-layout="rail"] .sidebar:focus-within .nav-caret,
  html[data-layout="rail"] .sidebar:hover .nav-logout,
  html[data-layout="rail"] .sidebar:focus-within .nav-logout,
  html[data-layout="rail"] .sidebar:hover .app-version,
  html[data-layout="rail"] .sidebar:focus-within .app-version {
    opacity: 1;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }
  html[data-layout="rail"] .sidebar:hover .nav-sub,
  html[data-layout="rail"] .sidebar:focus-within .nav-sub {
    opacity: 1;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }
  html[data-layout="rail"] .sidebar:hover .nav a,
  html[data-layout="rail"] .sidebar:focus-within .nav a,
  html[data-layout="rail"] .sidebar:hover .nav-group-label,
  html[data-layout="rail"] .sidebar:focus-within .nav-group-label {
    justify-content: flex-start;
    font-size: .9rem;
    gap: .65rem;
    padding: .55rem .7rem !important;
  }
  html[data-layout="rail"] .sidebar:hover .nav-logout,
  html[data-layout="rail"] .sidebar:focus-within .nav-logout {
    padding: .55rem .7rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  html[data-layout="rail"] .main {
    padding: 2rem 2.2rem 3rem;
    max-width: 92rem;
  }
  html[data-layout="rail"] body.is-nav-collapsed .app-shell,
  html[data-layout="rail"] body.is-nav-collapsed .app-shell:has(.sidebar:hover) {
    grid-template-columns: 0 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: dense office (slate)                                               */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="dense"] .sidebar-inner { padding: .65rem .5rem; }
  html[data-layout="dense"] .brand-block { margin-bottom: .5rem; padding-bottom: .4rem; }
  html[data-layout="dense"] .nav a,
  html[data-layout="dense"] .nav-group-label {
    padding: .32rem .45rem !important;
    border-radius: 3px;
    font-size: .8rem;
    margin-bottom: 0;
  }
  html[data-layout="dense"] .nav a.active,
  html[data-layout="dense"] .nav-group-label.is-active {
    box-shadow: none !important;
    outline: 1px solid var(--color-primary);
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: document / top chips (carob)                                       */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="document"] .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  html[data-layout="document"] .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    width: 100%;
    overflow: visible;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  html[data-layout="document"] .sidebar-inner {
    flex-direction: column;
    height: auto;
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
    padding: .85rem 1.25rem 1rem;
  }
  html[data-layout="document"] .brand-block {
    border: 0;
    margin: 0 0 .65rem;
    padding: 0;
  }
  html[data-layout="document"] .nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    overflow: visible;
  }
  html[data-layout="document"] .nav a,
  html[data-layout="document"] .nav-group-label {
    border-radius: 999px;
    padding: .4rem .8rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 0;
  }
  html[data-layout="document"] .nav a.active,
  html[data-layout="document"] .nav-group-label.is-active {
    background: var(--color-sidebar-active) !important;
    color: #2a2018 !important;
    box-shadow: none !important;
  }
  html[data-layout="document"] .nav-group { position: relative; }
  html[data-layout="document"] .nav-sub {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 12rem;
    margin: 0;
    padding: .4rem;
    border: 0;
    border-radius: 10px;
    background: var(--color-sidebar-bg-accent);
    box-shadow: var(--shadow-lg);
  }
  html[data-layout="document"] .nav-group:hover .nav-sub,
  html[data-layout="document"] .nav-group:focus-within .nav-sub,
  html[data-layout="document"] .nav-group.is-open .nav-sub {
    display: block;
  }
  html[data-layout="document"] .sidebar-footer {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    border: 0;
    margin-top: .75rem;
    padding-top: 0;
  }
  html[data-layout="document"] .nav-logout { width: auto; border-radius: 999px !important; }
  html[data-layout="document"] .main {
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
    padding: 1.75rem 1.25rem 3.5rem;
  }
  html[data-layout="document"] body.is-nav-collapsed .app-shell {
    grid-template-rows: 0 1fr;
  }
  html[data-layout="document"] body.is-nav-collapsed .sidebar {
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: organic content card (clay)                                        */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="organic"] .app-shell {
    background: var(--color-bg);
    grid-template-columns: 16.75rem 1fr;
    gap: 0;
  }
  html[data-layout="organic"] .sidebar {
    background: transparent !important;
    box-shadow: none;
  }
  html[data-layout="organic"] .sidebar-inner {
    margin: .85rem .35rem .85rem .85rem;
    padding: 1rem .85rem;
    background: var(--color-sidebar-bg);
    border-radius: 28px;
    box-shadow: 0 10px 28px rgba(80, 40, 30, 0.08);
  }
  html[data-layout="organic"] .nav a,
  html[data-layout="organic"] .nav-group-label {
    border-radius: 999px;
  }
  html[data-layout="organic"] .nav a.active,
  html[data-layout="organic"] .nav-group-label.is-active {
    box-shadow: none !important;
  }
  html[data-layout="organic"] .main {
    margin: .85rem .85rem .85rem .35rem;
    padding: 1.4rem 1.5rem 2rem;
    background: #fffaf7;
    border-radius: 28px;
    box-shadow: 0 10px 28px rgba(80, 40, 30, 0.08);
    max-width: none;
    min-height: calc(100vh - 1.7rem);
  }
  html[data-layout="organic"] body.is-nav-collapsed .sidebar-inner { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Layout: split header (cedar)                                               */
/* -------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html[data-layout="split"] .app-shell {
    grid-template-columns: var(--layout-sidebar-width) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "brand brand"
      "nav main"
      "foot main";
  }
  html[data-layout="split"] .sidebar { display: contents; }
  html[data-layout="split"] .sidebar-inner { display: contents; }
  html[data-layout="split"] .sidebar-glow { display: none !important; }
  html[data-layout="split"] .brand-block {
    grid-area: brand;
    margin: 0;
    padding: .7rem 1.25rem;
    border: 0;
    background: var(--color-sidebar-bg);
    display: flex;
    align-items: center;
  }
  html[data-layout="split"] .nav {
    grid-area: nav;
    background: var(--color-sidebar-bg);
    padding: .6rem .7rem 1rem;
    overflow: auto;
  }
  html[data-layout="split"] .sidebar-footer {
    grid-area: foot;
    background: var(--color-sidebar-bg);
    margin: 0;
    padding: .7rem .85rem 1rem;
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  html[data-layout="split"] .main {
    grid-area: main;
    background: var(--color-bg);
  }
  html[data-layout="split"] body.is-nav-collapsed .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "brand"
      "main";
  }
  html[data-layout="split"] body.is-nav-collapsed .nav,
  html[data-layout="split"] body.is-nav-collapsed .sidebar-footer {
    display: none;
  }

  html[data-theme="kyrenia"][data-layout="split"] .brand-block {
    border-bottom: 3px solid var(--color-sidebar-active);
    padding: .55rem 1.4rem;
    gap: .85rem;
  }
  html[data-theme="kyrenia"][data-layout="split"] .brand-school {
    display: -webkit-box;
  }
  html[data-theme="kyrenia"][data-layout="split"] .nav a,
  html[data-theme="kyrenia"][data-layout="split"] .nav-group-label {
    border-radius: 4px;
  }
  html[data-theme="kyrenia"][data-layout="split"] .nav a.active,
  html[data-theme="kyrenia"][data-layout="split"] .nav-group-label.is-active {
    box-shadow: inset 3px 0 0 var(--color-sidebar-active) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Layout: dark (midnight) stays left sidebar                                 */
/* -------------------------------------------------------------------------- */

html[data-layout="dark"] .main { background: transparent; }
html[data-layout="dark"] .topbar { border-bottom-color: var(--color-border); }

/* -------------------------------------------------------------------------- */
/* Portal + auth                                                              */
/* -------------------------------------------------------------------------- */

html[data-layout="topbar"] .portal-header,
html[data-layout="document"] .portal-header,
html[data-theme="kyrenia"] .portal-header {
  background: var(--color-sidebar-bg) !important;
  color: var(--color-sidebar-text);
  border-bottom: 3px solid var(--color-sidebar-active);
}
html[data-layout="topbar"] .portal-brand strong,
html[data-layout="document"] .portal-brand strong,
html[data-theme="kyrenia"] .portal-brand strong,
html[data-layout="topbar"] .portal-nav a,
html[data-layout="document"] .portal-nav a,
html[data-theme="kyrenia"] .portal-nav a {
  color: var(--color-sidebar-text);
}
html[data-layout="topbar"] .portal-nav a.active,
html[data-layout="document"] .portal-nav a.active,
html[data-theme="kyrenia"] .portal-nav a.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active);
}
html[data-layout="framed"] .portal-shell {
  outline: 1px solid #cfc3b2;
  background: #f8f3eb;
  padding: 0 1.15rem 2.5rem;
}
html[data-layout="document"] .portal-shell { max-width: 52rem; }
html[data-layout="dense"] .portal-shell { max-width: none; }
html[data-layout="dense"] .portal-nav a {
  border-radius: 3px;
  padding: .3rem .55rem;
  font-size: .8rem;
}
html[data-theme="midnight"] .portal-header,
html[data-theme="midnight"] .portal-body.portal-app .portal-header,
html[data-theme="midnight"] .portal-body.portal-app .portal-tabbar {
  background: var(--color-surface) !important;
  border-color: var(--color-border);
  color: var(--color-text);
}
html[data-theme="midnight"] .auth-card,
html[data-theme="midnight"] .auth-split {
  background: var(--color-surface) !important;
  border-color: var(--color-border);
}
html[data-theme="kyrenia"] .auth-split { border-radius: 4px; }
html[data-theme="limestone"] .auth-split,
html[data-theme="limestone"] .auth-card { border-radius: 0; }
html[data-theme="marine"] .auth-split,
html[data-theme="marine"] .auth-card { border-radius: 24px; }
html[data-theme="clay"] .auth-split,
html[data-theme="clay"] .auth-card { border-radius: 28px; }

/* -------------------------------------------------------------------------- */
/* Mobile: restore overlay drawer for every layout                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  html[data-layout] .app-shell,
  html[data-layout] body.is-nav-collapsed .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    min-height: 100vh;
    outline: 0;
  }
  html[data-layout="framed"] body[data-app-shell="admin"] { padding: 0; background: var(--color-bg); }
  html[data-layout] .sidebar {
    display: block !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    order: 0 !important;
    width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    transform: translateX(-104%);
    overflow: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 50;
    border: 0 !important;
  }
  html[data-layout] .sidebar[data-nav-open="true"] {
    transform: translateX(0);
  }
  html[data-layout] .sidebar-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    padding: 1.15rem .85rem 1rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html[data-layout] .nav {
    display: block !important;
    flex-direction: column !important;
    overflow: auto !important;
    flex: 1;
  }
  html[data-layout] .nav a,
  html[data-layout] .nav-group-label {
    font-size: .9rem !important;
    justify-content: flex-start;
    gap: .65rem;
    white-space: normal;
  }
  html[data-layout] .brand-text,
  html[data-layout] .sidebar-user-meta,
  html[data-layout] .nav-caret,
  html[data-layout] .nav-logout {
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  html[data-layout="topbar"] .nav-sub,
  html[data-layout="document"] .nav-sub,
  html[data-layout="rail"] .nav-sub {
    display: grid !important;
    position: static !important;
    min-width: 0;
    margin: 0 0 0 1.1rem;
    padding: 0 0 0 .7rem;
    background: transparent;
    box-shadow: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  html[data-layout] .sidebar-footer {
    display: block;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  html[data-layout="organic"] .main,
  html[data-layout="framed"] .main,
  html[data-layout="split"] .main {
    margin: 0;
    border-radius: 0;
    min-height: 0;
    box-shadow: none;
  }
  html[data-layout="split"] .brand-block,
  html[data-layout="split"] .nav,
  html[data-layout="split"] .sidebar-footer {
    background: transparent;
  }
}