/*
  SisakurOK Theme — Modern, Responsive, Accessible
  - Keeps visual identity while upgrading responsiveness, modernity, and appeal
  - CSS variables for color system, responsive typography, transitions, and micro-interactions
  - Mobile-first with defined breakpoints, performance hints, and accessibility improvements
*/

/* Color System */
:root {
  /* Brand tokens — updated to Mint-Teal palette */
  --color-primary: #88C9D9; /* mint-teal */
  --color-primary-rgb: 136, 201, 217;
  --color-primary-contrast: #000000; /* black text on light primary ensures WCAG AA */
  --color-secondary: #0B2A3B; /* deep navy for strong contrast */
  --color-secondary-rgb: 11, 42, 59;
  --color-accent: #2F7C8C; /* darker teal accent for filled elements */

  /* Core UI tokens */
  --color-background: #ffffff; /* default content background */
  --color-text: #000000; /* default text color */
  --color-border: #dee2e6; /* neutral border */

  /* Neutral palette */
  --neutral-0: #ffffff;
  --neutral-50: #f8f9fa;
  --neutral-100: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #868e96;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* Semantic tokens */
  --success: #2f9e44;
  --color-yellow: #FFD700; /* bright yellow */
  --color-yellow-rgb: 255, 215, 0;
  --color-yellow-contrast: #000000;
  --warning: var(--color-yellow);
  --color-red: #e03131; /* strong red */
  --color-red-rgb: 224, 49, 49;
  --color-red-contrast: #ffffff;
  --danger: var(--color-red);
  --info: #339af0;

  /* Map to Bootstrap CSS variables for better integration */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-warning: var(--color-yellow);
  --bs-warning-rgb: var(--color-yellow-rgb);
  --bs-danger: var(--color-red);
  --bs-danger-rgb: var(--color-red-rgb);
  --bs-body-bg: var(--neutral-50);
  --bs-body-color: var(--neutral-900);

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", monospace;
  --heading-weight: 600;
  --body-weight: 400;
  --line-height: 1.6;
  --letter-spacing: 0.01em;

  /* Radius & Shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);

  /* Motion */
  --transition-fast: 150ms;
  --transition-medium: 240ms;
  --transition-slow: 360ms;

  /* Focus ring */
  --focus-ring: 2px solid rgba(var(--color-primary-rgb), 0.6);

  /* Form control sizing (checkbox & radio) */
  --control-size: 1rem; /* fixed ~16px across browsers */
  --control-gap: 0.375rem; /* ~6px */
  --control-ring-color: rgba(var(--color-primary-rgb), 0.35);
  --control-hover-ring-color: rgba(var(--color-primary-rgb), 0.20);
  --control-disabled-opacity: 0.6;
  --control-accent: var(--color-primary);

  /* Blueblack theme tokens */
  --sb-blueblack: #000033; /* deep navy/blueblack */
  --sb-text-primary: #ffffff; /* primary text on dark */
  --sb-text-primary-alt: #ffff99; /* soft yellow alt for headings */
  --sb-text-secondary: #add8e6; /* light blue for secondary text */
  --sb-text-secondary-b: #00ffff; /* cyan for emphasis secondary */
  --sb-highlight-a: #ffa500; /* orange for highlights */
  --sb-highlight-b: #ff69b4; /* hot pink for highlights */
  --sb-gold: #FFD700; /* gold color for brand text */
  --app-sidebar-bg: #145268;
}

/* === Theme Documentation: Mint-Teal Palette (#88C9D9) ===
Variables
- --color-primary: #88C9D9 (mint-teal)
- --color-primary-rgb: 136,201,217 (RGB for translucency and effects)
- --color-primary-contrast: #000000 (text on primary backgrounds)
- --color-secondary: #0B2A3B (deep navy, strong contrast)
- --color-secondary-rgb: 11,42,59
- --color-accent: #2F7C8C (darker teal for filled elements/accents)
- --color-background: #ffffff (content background)
- --color-text: #000000 (default text)
- --color-border: #dee2e6 (neutral border)

Additional Colors
- --color-yellow: #FFD700 (bright yellow), contrast: black (#000)
- --color-red: #E03131 (strong red), contrast: white (#fff)

Bootstrap Mapping
- --bs-primary: var(--color-primary)
- --bs-primary-rgb: var(--color-primary-rgb)
- --bs-secondary: var(--color-secondary)
- --bs-secondary-rgb: var(--color-secondary-rgb)

Usage Examples
- Buttons: `.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }`
- Outline Buttons: `.btn-outline-primary:hover { background-color: var(--bs-primary); color: #000; }`
- Thematic Buttons: `.btn-yellow` and `.btn-red` for emphasis; use outline variants for subtle actions.
- Links/Menu: `.menu-link.active { background: rgba(var(--bs-primary-rgb), .16); }`
- Tables: `thead th` gradient uses `rgba(var(--bs-primary-rgb), .10)` for subtle emphasis
- Form Focus: `box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15)`

Contrast Guidance (WCAG)
- Black (#000) on white (#fff) contrast: 21:1 (AA/AAA compliant)
- Black (#000) on primary (#88C9D9) contrast: > 7:1 (AA/AAA compliant)
- White (#fff) on accent (#2F7C8C) contrast: ~4.9:1 (meets AA for normal text). Prefer accent for filled elements if using white text.
- Black (#000) on yellow (#FFD700): ~12.9:1 (AA/AAA compliant)
- White (#fff) on red (#E03131): ~4.6:1 (meets AA for normal text). For small text, consider black text or slightly darken the red.
- Tip: use `--color-primary-contrast` for text over primary backgrounds. Avoid white text over #88C9D9.

Developer Notes
- Keep HEADER styling intact (gold/blublack classes). Content text should use `var(--color-text)`.
- For new components, prefer borders `var(--color-border)` and hover overlays `rgba(var(--color-primary-rgb), .08)`.
- Avoid using pure yellow text on white backgrounds due to low contrast; use yellow as background/accent with black text.
*/

/* Removed unused external icon font to comply with strict CSP and reduce bloat */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--neutral-900);
  --bs-body-color: var(--neutral-100);
}

/* Global app background variable: ensure sidebar matches body */
:root {
  --app-bg-blueblack: radial-gradient(900px 450px at 20% 10%, rgba(59,130,246,.10), rgba(59,130,246,0)),
                       radial-gradient(700px 350px at 80% 70%, rgba(99,102,241,.08), rgba(99,102,241,0)),
                       linear-gradient(135deg, #000814 0%, #001a3f 60%, #0b254b 100%);
  /* Single-shade blue (solid feel) */
  --app-bg-blue: linear-gradient(135deg, #0a2540 0%, #0a2540 100%);
  /* Modern futuristic blue base using #0077B6 */
  --app-bg-modernblue: linear-gradient(135deg, #005E8A 0%, #0077B6 60%, #0077B6 100%);
  /* Global background: Mercury */
  --app-bg-lightblue: #e6e6e6;
  /* Text color for readability on light background */
  --app-text-on-light-bg: #0b254b;
}

/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  /* Soft professional light blue */
  background: var(--app-bg-lightblue);
  background-attachment: fixed;
  color: var(--app-text-on-light-bg);
  transition: background 300ms ease, color 300ms ease;
}

/* Prevent horizontal panning/scroll and lock layout horizontally */
html, body { overflow-x: hidden; overscroll-behavior: contain; }
body { touch-action: pan-y; }

/* Blueblack background + text utilities */
.sb-bg-blueblack { background-color: var(--sb-blueblack) !important; }
.sb-text-primary { color: var(--sb-text-primary) !important; }
.sb-text-primary-alt { color: var(--sb-text-primary-alt) !important; }
.sb-text-secondary { color: var(--sb-text-secondary) !important; }
.sb-text-secondary-b { color: var(--sb-text-secondary-b) !important; }
.gold-text { font-weight: 700 !important; }
.gold-shadow-text { color: #FFFFFF !important; }
.gold-shadow-text i { color: #ffffff !important; }
.sb-highlight { color: rgba(255,165,0,0.8) !important; transition: color 0.3s ease, text-shadow 0.3s ease; }
.sb-highlight:hover, a.sb-highlight:hover { color: #FFA500 !important; text-shadow: 0 0 6px rgba(255,165,0,0.3); }
.sb-highlight-b { color: var(--sb-highlight-b) !important; }

/* Text visibility helpers */
.sb-glow { text-shadow: 0 0 6px rgba(255,255,255,0.5), 0 0 12px rgba(173,216,230,0.35); }

/* Device-aware responsive scaling */
[data-device="smartphone"] body { font-size: 15px; }
[data-device="tablet"] body { font-size: 16px; }
[data-device="desktop"] body { font-size: 16px; }

@media (max-width: 576px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
  .navbar .container-fluid { padding-left: 10px; padding-right: 10px; }
  .navbar .navbar-brand .brand-white { font-size: .95rem; }
  .btn { padding: .5rem .9rem; }
  .form-frame { padding: .75rem 1rem; }
}
@media (min-width: 577px) and (max-width: 991.98px) {
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
  .btn { padding: .6rem 1rem; }
}
@media (orientation: landscape) and (max-width: 768px) {
  .navbar.fixed-top.sb-bg-blueblack.sb-text-primary { min-height: calc(1.5rem * 2.5); }
}
.sb-glow-warm { text-shadow: 0 0 6px rgba(255,165,0,0.45), 0 0 12px rgba(255,105,180,0.35); }
.sb-shadow-soft { text-shadow: 0 0 8px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.15); }

/* Blueblack gradient helper for section backgrounds */
.sb-gradient-navy { background-image: linear-gradient(180deg, rgba(0,0,51,1) 0%, rgba(0,17,68,1) 100%); }

/* Infographic counters on dark theme */
.sb-info-counter { background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); }
.sb-info-counter .value { color: var(--sb-text-primary); }
.sb-info-counter .small { color: var(--sb-text-secondary); }
.sb-info-counter .icon { background-color: rgba(255,165,0,0.18); color: var(--sb-highlight-a); }

/* Optional overlay helper for text blocks on busy images */
.sb-text-overlay { background: rgba(0,0,0,0.25); border-radius: var(--radius-sm); padding: .25rem .5rem; }

/* Fixed top bar styling */
.navbar.fixed-top {
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--neutral-200);
  backdrop-filter: saturate(180%) blur(6px);
}
.navbar-brand { color: var(--neutral-900); }
.navbar-brand:hover { color: var(--color-primary); }

/* Header contrast fixes (hosting compatibility) */
/* Ensure readable text when header uses light/white backgrounds */
.navbar.bg-body-tertiary {
  background-color: #ffffff !important;
  color: #212529 !important;
}
.navbar.bg-body-tertiary .nav-link,
.navbar.bg-body-tertiary .navbar-brand,
.navbar.bg-body-tertiary .navbar-text,
.navbar.bg-body-tertiary i,
.navbar.bg-body-tertiary svg {
  color: #212529 !important;
}
/* Ensure blueblack background remains dark even if CSS variables fail to load */
.navbar.sb-bg-blueblack { background-color: var(--sb-blueblack, #000033) !important; }

/* Typography scale — responsive and consistent */
h1, h2, h3, h4, h5, h6 { font-weight: var(--heading-weight); }
h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.5vw, 1.5rem); }
h4 { font-size: clamp(1.125rem, 1.25vw, 1.25rem); }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p, label, input, select, textarea { font-weight: var(--body-weight); }

/* Buttons & interactive elements */
.btn,
.menu-link,
button,
input,
select,
textarea {
  transition: background-color var(--transition-medium) ease, color var(--transition-medium) ease,
              box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.btn:focus-visible,
.menu-link:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
}
.btn-primary { background: #007BFF; border-color: #007BFF; color: #FFFFFF; }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* Cards & panels */
.card, .panel, .menu-panel {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Layout helpers */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

/* Modern Grid & Flex utilities */
.grid { display: grid; gap: 1rem; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-gap-3 { gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ===== Elegant UI Enhancements (Global) ===== */
/* Sidebar menu links */
.menu-link {
  position: relative;
  transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease, box-shadow var(--transition-fast) ease, transform var(--transition-fast) ease;
  border-left: 4px solid transparent;
}
.menu-link:hover {
  background-color: rgba(var(--bs-primary-rgb), .08);
  color: var(--color-text);
  transform: translateX(1px);
}
.menu-link.active {
  background-color: rgba(var(--bs-primary-rgb), .12);
  border-left-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .25);
}

/* Form frame: neat bordered panel with top accent bar */
.form-frame {
  position: relative;
  border: 1px solid var(--neutral-300);
  border-radius: .75rem;
  background: var(--neutral-0);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.form-frame::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--bs-primary);
  border-radius: .75rem .75rem 0 0;
}

/* Modern table styling */
.modern-table.table {
  --table-border: var(--neutral-300);
  border: 1px solid var(--table-border);
  border-radius: .5rem;
  overflow: hidden;
  --bs-table-bg: var(--neutral-0);
  --bs-table-striped-bg: var(--neutral-100);
  --bs-table-hover-bg: var(--neutral-200);
  --bs-table-border-color: var(--table-border);
}
.modern-table thead th {
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .10) 0%, rgba(255,255,255,.85) 100%);
  color: var(--neutral-900);
  border-bottom: 2px solid var(--neutral-300);
}
.modern-table th, .modern-table td {
  border-color: var(--neutral-300);
}
.modern-table caption {
  caption-side: top; padding: .25rem .5rem; font-weight: 500; font-size: .875rem; color: var(--neutral-800); text-align: left;
}

/* Buttons */
.btn.btn-outline-primary { border-color: var(--bs-primary); color: var(--bs-primary); }
.btn.btn-outline-primary:hover { background-color: var(--bs-primary); color: #FFFFFF; }
.btn { border-radius: .5rem; }

/* Thematic buttons: yellow & red */
.btn-yellow { background-color: var(--color-yellow) !important; border-color: var(--color-yellow) !important; color: var(--color-yellow-contrast) !important; }
.btn-yellow:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-yellow:active { transform: translateY(0); }
.btn-outline-yellow { border-color: var(--color-yellow) !important; color: #000000 !important; }
.btn-outline-yellow:hover { background-color: var(--color-yellow); color: var(--color-yellow-contrast); }

.btn-red { background-color: var(--color-red); border-color: var(--color-red); color: var(--color-red-contrast); }
.btn-red:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-red:active { transform: translateY(0); }
.btn-outline-red { border-color: var(--color-red); color: var(--color-red); }
.btn-outline-red:hover { background-color: var(--color-red); color: var(--color-red-contrast); }

.btn-blue { background-color: var(--info) !important; border-color: var(--info) !important; color: #ffffff !important; }
button.btn-blue, .btn.btn-blue { background-color: var(--info) !important; border-color: var(--info) !important; color: #ffffff !important; }
.btn-blue:hover, button.btn-blue:hover, .btn.btn-blue:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-blue:active, button.btn-blue:active, .btn.btn-blue:active { transform: translateY(0); }

.btn-green { background-color: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important; }
.btn-green:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-green:active { transform: translateY(0); }

.btn-magenta { background-color: var(--sb-highlight-b) !important; border-color: var(--sb-highlight-b) !important; color: #ffffff !important; }
.btn-magenta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-magenta:active { transform: translateY(0); }

/* Navbar */
.navbar.fixed-top {
  background: transparent !important;
}
.navbar.sb-bg-blueblack,
.navbar.fixed-top.sb-bg-blueblack,
.navbar.bg-body-tertiary.sb-bg-blueblack {
  background-color: #145268 !important;
  background-image: none !important;
}
/* remove brand-specific color for gold-text to avoid duplication; inherit color */

/* Sidebar card wrapper — Blue theme with white text shadow */
.app-sidebar {
  background: var(--app-sidebar-bg) !important;
  border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  color: #000000;
  font-weight: 700;
  transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.app-sidebar .list-group { --bs-list-group-bg: transparent; }
.app-sidebar .list-group-item { background: transparent !important; border: none !important; box-shadow: none; color: #000000 !important; font-weight: 700; }
.app-sidebar .list-group-item:hover { background-color: transparent !important; }
.app-sidebar .list-group-item.active { background-color: transparent !important; box-shadow: 0 0 8px 3px rgba(255,255,0,.6) !important; color: #FFFFFF !important; font-weight: 700; transition: background-color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), color 0.3s ease; }
.app-sidebar a { color: #000000 !important; font-weight: 700 !important; }

/* Footer */
footer { border-top-color: var(--neutral-200) !important; }
.brand-gradient { background: linear-gradient(135deg,#ffffff 0%,#34d399 50%,#3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; }
.brand-white { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: none !important; }
.navbar .brand-white { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
/* Unified global background utility */
.bg-greenish-gray { background-color: #145268 !important; }
.bg-blue-gray { background-color: #145268 !important; }

/* Global white theme for non-landing and non-login pages */
html[data-page]:not([data-page="landing"]):not([data-page="login"]) {
  --bs-body-bg: #ffffff;
  --bs-body-color: #000000;
  --neutral-0: #ffffff;
}
html[data-page]:not([data-page="landing"]):not([data-page="login"]) body {
  background-color: #e6e6e6 !important;
  color: #000000 !important;
}
html[data-page]:not([data-page="landing"]):not([data-page="login"]) .text-white {
  color: #000000 !important;
}
html[data-page]:not([data-page="landing"]):not([data-page="login"]) footer .text-white {
  color: #000000 !important;
}

/* Toolbar */
.app-toolbar {
  padding: .25rem .5rem;
  border-bottom: 1px solid var(--neutral-200);
}
.app-toolbar .space-x-2 a {
  box-shadow: var(--shadow-sm);
  border-radius: .5rem;
}
.app-toolbar .space-x-2 a:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.app-toolbar .text-2xl { color: var(--neutral-800); }

/* Viewport simulation — constrain main width to preview responsiveness */
html.viewport-smartphone main { max-width: 420px; margin: 0 auto; }
html.viewport-tablet main { max-width: 820px; margin: 0 auto; }
html.viewport-desktop main { max-width: 1200px; margin: 0 auto; }

/* ===== Icon-based Round Radio/Checkbox (Moon) ===== */
/* Square checkbox icon style for skill selections */

/* Remove global enlargement for radio inputs to keep default flat size */
/* (intentionally left without overrides) */

/* Specific checkbox sizing request for matrix[101][] */
/* Removed custom checkbox sizing for matrix[101][] to keep defaults on skills matrix */

/* Restore default radio appearance/size for matrix selections */
input[type="radio"][name^="matrix["] {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  appearance: auto !important;
  accent-color: auto !important;
  border: initial !important;
  box-shadow: none !important;
  display: inline-block;
}

/* Scoped default for radios on Course Group Matrix */
input[type="radio"].matrix-radio {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  appearance: auto !important;
  accent-color: auto !important;
  border: initial !important;
  box-shadow: none !important;
  display: inline-block;
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

/* Breadcrumb styling */
.breadcrumb { --crumb-bg: var(--neutral-0); --crumb-border: var(--neutral-300); --crumb-text: var(--neutral-700); }
.breadcrumb { background-color: var(--crumb-bg); border: 1px solid var(--crumb-border); border-radius: var(--radius-md); padding: .5rem .75rem; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--neutral-500); }
.breadcrumb .breadcrumb-item a { color: var(--neutral-700); text-decoration: none; }
.breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); text-decoration: underline; }

/* Breakpoints */
@media (min-width: 481px) {
  .layout-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2-sm { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 769px) {
  .layout-grid { grid-template-columns: 280px 1fr; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3-md { grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* Support Tailwind-like class names used in markup */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1025px) {
  .layout-grid { grid-template-columns: 300px 1fr; }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-4-lg { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Tables */
table { border-collapse: collapse; table-layout: auto; }
thead th { background: var(--neutral-100); }
tbody tr { transition: background-color var(--transition-fast) ease; }
tbody tr:hover { background: var(--neutral-100); }
/* Column wrapping to avoid overflow/truncation */
th, td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Forms */
.form-control, .form-select {
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.15);
}

/* Mobile ergonomics: readability & tap targets */
@media (max-width: 575.98px) {
  body { line-height: 1.7; }
  p { margin-bottom: 0.9rem; }
  .card-body { padding: 0.85rem; }
  .btn { min-height: 48px; padding: .5rem .85rem; }
  .btn-sm { min-height: 40px; padding: .5rem .7rem; }
  .menu-link { min-height: 48px; }
}

  /* Form Controls — Checkbox & Radio (Default)
     Mengembalikan tampilan checkbox/radio ke standar default (Bootstrap/browser).
     Aturan kustom sebelumnya untuk ukuran, ring, dan spacing dihapus. */

/* Sidebar & menu */
.menu-link {
  border-radius: 8px;
  padding: .5rem .75rem;
}
.menu-link:hover { background: rgba(255,255,255,.10); }
.menu-link.active {
  background: rgba(255,255,255,.12);
  color: #ffffff;
  border-left: none; /* hapus frame garis kiri */
  box-shadow: 0 0 0 2px rgba(22,163,74,.45), 0 4px 12px rgba(22,163,74,.35);
}
.menu-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
}
.app-sidebar .menu-icon,
.app-sidebar i,
.app-sidebar svg { color: #e2f7ea !important; /* ikon tidak hitam, selaras tema */ }
/* Icon color states are controlled by inherited currentColor in shared-ui.css */
.menu-group-title { font-weight: 600; color: var(--neutral-700); }
.menu-group { padding: .25rem .5rem; }
.menu-group .list-group-item { border: none; }

.menu-header {
  font-weight: bold;
  color: #6c757d;
  background-color: #f8f9fa;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
}

/* Accessibility helpers */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Icon system */
.icon { display: inline-block; width: 1rem; height: 1rem; vertical-align: text-bottom; color: currentColor; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }

/* Card & muted text helpers */
.sb-card {
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background-color: var(--neutral-0);
  box-shadow: var(--shadow-sm);
}
.sb-card:hover { box-shadow: var(--shadow-md); }
.sb-muted { color: var(--neutral-600); }

/* Modern table preset (harmonized across pages) */
.modern-table.table {
  border: 1px solid var(--neutral-300);
  border-radius: .5rem;
  overflow: hidden;
  --bs-table-bg: var(--neutral-0);
  --bs-table-striped-bg: var(--neutral-50);
  --bs-table-hover-bg: var(--neutral-100);
  --bs-table-border-color: var(--neutral-300);
}
.modern-table thead th {
  background: var(--neutral-100);
  color: var(--neutral-900);
  border-bottom: 2px solid var(--neutral-300);
}
.modern-table th, .modern-table td { border-color: var(--neutral-300); }

/* Hero carousel imagery */
.hero-carousel .hero-img {
  width: 100%;
  height: clamp(220px, 35vh, 420px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Navbar brand consistency */
.navbar-brand { font-weight: 700; letter-spacing: .2px; }

/* High-contrast preferences: strengthen borders & text when requested */
@media (prefers-contrast: more) {
  .sb-muted { color: var(--neutral-700); }
  .modern-table thead th { border-bottom-color: var(--neutral-400); }
  .card, .sb-card, .panel { box-shadow: none; border-color: var(--neutral-400); }
}
*:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* RTL support */
[dir="rtl"] .menu-link { text-align: right; }
[dir="rtl"] .btn { direction: rtl; }

/* Icon sizes */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }

/* Utility classes */
.text-black { color: #000 !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-red { color: var(--color-red) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; color: var(--color-yellow-contrast) !important; }
.bg-red { background-color: var(--color-red) !important; color: var(--color-red-contrast) !important; }
.border-yellow { border-color: var(--color-yellow) !important; }
.border-red { border-color: var(--color-red) !important; }
.shadow-hover:hover { box-shadow: var(--shadow-md); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.mobile-hidden { display: none; }
@media (min-width: 768px) { .mobile-hidden { display: initial; } }

/* Micro-interactions: gentle hover & entrance */
.hover-lift { transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fade-in { animation: fadeIn var(--transition-medium) ease 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Image optimization hints */
img[loading="lazy"] { filter: saturate(1); }
picture img { display: block; max-width: 100%; height: auto; }

/* VM & PEO Prodi three-column form layout */
.vmpeo-form .vmpeo-textarea {
  min-height: 220px;
}
@media (max-width: 991.98px) {
  .vmpeo-form .vmpeo-textarea { min-height: 200px; }
}
@media (max-width: 575.98px) {
  .vmpeo-form .vmpeo-textarea { min-height: 180px; }
}

/* VMT & Tata Nilai UPPS textarea — lebih padat namun tetap nyaman */
.vmupps-form .vmupps-textarea {
  min-height: 180px;
}
@media (max-width: 991.98px) {
  .vmupps-form .vmupps-textarea { min-height: 160px; }
}
@media (max-width: 575.98px) {
  .vmupps-form .vmupps-textarea { min-height: 140px; }
}

/* Ukuran dasar lebih besar untuk textarea deskripsi (Profil Lulusan & Rumusan CPL) */
textarea.input-dynamic.is-rumusan[name="description"] {
  width: 100%;
  min-height: 200px; /* dua kali dari baseline 100px */
}
@media (max-width: 767px) {
  textarea.input-dynamic.is-rumusan[name="description"] {
    min-height: 180px; /* sedikit dikurangi agar nyaman di layar kecil */
  }
}

/* Sidebar locking: keep sidebar navigation from shifting during scroll */
:root { --navbar-height: 56px; }
@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    /* Perpanjang tinggi agar sejajar dengan konten utama/menyentuh footer.
       Hilangkan batas max-height agar tinggi dapat mengikuti konten. */
    max-height: none;
    height: auto;
    min-height: calc(100vh - var(--navbar-height) - 24px);
    overflow: auto;
    width: 100%;
    align-self: stretch;
  }
}

/* Fullscreen card for charts */
.fullscreen-card {
  position: fixed;
  inset: 0;
  margin: 0 !important;
  border-radius: 0;
  z-index: 1100;
  background-color: var(--bs-body-bg);
}
.fullscreen-card .card-body {
  height: calc(100vh - var(--navbar-height));
  overflow: auto;
}
body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fullscreen-card { transition: none !important; }
}

/* Lock column widths for ID/Code/Number and Action columns - DEFAULT ACROSS APPLICATION */
table th.col-no,
table td.col-no,
table th:first-child,
table td:first-child {
  width: auto !important;
  min-width: 3ch !important;
  max-width: 5ch !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Action column - lock width */
table th.col-action,
table td.col-action,
table th:last-child,
table td:last-child {
  width: auto !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Ensure ID/Code/Number columns are locked */
table thead th:first-child,
table tbody td:first-child {
  width: auto !important;
  min-width: 3ch !important;
  max-width: 5ch !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Action column (usually last) */
table thead th:last-child,
table tbody td:last-child {
  width: auto !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Specific selectors for common table patterns */
table th[class*="no"],
table td[class*="no"],
table th[class*="No"],
table td[class*="No"],
table th[class*="id"],
table td[class*="id"],
table th[class*="ID"],
table td[class*="ID"],
table th[class*="kode"],
table td[class*="kode"],
table th[class*="Kode"],
table td[class*="Kode"] {
  width: auto !important;
  min-width: 3ch !important;
  max-width: 5ch !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
table th[class*="aksi"],
table td[class*="aksi"],
table th[class*="Aksi"],
table td[class*="Aksi"],
table th[class*="action"],
table td[class*="action"],
table th[class*="Action"],
table td[class*="Action"] {
  width: auto !important;
  min-width: fit-content !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Global textarea background white - EXTREME FIX for all textareas in forms and tables */
textarea,
form textarea,
table textarea,
.form-control[type="textarea"],
textarea.form-control,
textarea.input-dynamic,
textarea.is-code-name,
textarea.is-rumusan,
textarea.is-deskripsi,
textarea.vmpeo-textarea,
textarea.vmupps-textarea {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}
textarea:hover,
textarea:focus,
textarea:active,
textarea:visited {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}
/* Ensure visibility on tablet and Android */
@media (max-width: 1024px) {
  textarea,
  form textarea,
  table textarea {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}
@media (max-width: 768px) {
  textarea,
  form textarea,
  table textarea {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

/* Fullscreen container for specific tables */
.fullscreen-table {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: var(--bs-body-bg);
  padding: .75rem;
}
.fullscreen-table .table-responsive {
  max-height: calc(100vh - var(--navbar-height) - 24px);
  overflow: auto;
}

/* utilities removed */

/* Kode Domain select: responsif, setara 5 baris */
.cpl-domain-select {
  font-size: 0.95rem;
  line-height: 1.35;
  height: auto; /* biarkan browser menghitung sesuai size */
  min-height: calc(1.35em * 5 + 8px); /* ~5 baris + padding/border */
  overflow-y: auto; /* scroll saat opsi melebihi tampilan */
}
@media (min-width: 640px) { .cpl-domain-select { min-height: calc(1.35em * 5 + 8px); } }
@media (min-width: 768px) { .cpl-domain-select { min-height: calc(1.35em * 5 + 8px); } }
@media (min-width: 1024px) { .cpl-domain-select { min-height: calc(1.35em * 5 + 8px); } }

/* Identity form horizontal layout */
.identity-form { width: 100%; }
.identity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 0; }
.identity-label { flex: 0 0 280px; font-size: 0.875rem; color: #374151; }
.identity-field { flex: 1 1 220px; min-width: 220px; }

/* Small screens: stack label above input for readability */
@media (max-width: 640px) {
  .identity-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .identity-label { flex: 0 0 auto; width: 100%; }
  .identity-field { width: 100%; }
}

/* Ensure inputs inside identity form have consistent spacing */
.identity-field input,
.identity-field select,
.identity-field textarea { display: block; width: 100%; }

/* Keep button row aligned nicely */
.identity-field .btn-like-save { margin-right: 4px; }
/* Khusus halaman Identitas: paksa selector PT/Fakultas/Prodi horizontal */
.identity-selector #program-selector-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

/* Tetap horizontal di layar kecil sesuai permintaan */
@media (max-width: 640px) {
  .identity-selector #program-selector-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Pembentukan Bobot SKS: layout vertikal yang konsisten dan responsif */
.sks-weighting-form {
  display: flex;
  flex-direction: column;
  gap: 12px; /* jarak antar elemen input */
}
.sks-weighting-form .form-row {
  display: block;
}
.sks-weighting-form label {
  margin-bottom: 4px;
  font-size: 0.85rem;
}
.sks-weighting-form .form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .sks-weighting-form {
    gap: 14px; /* sedikit lebih lega di layar besar */
  }
}
/* Sidebar menu-link visuals consolidated in shared-ui.css */
.indent-level-0 { padding-left: 0; }
.indent-level-1 { padding-left: 20px; }
.indent-level-2 { padding-left: 40px; }
.indent-level-3 { padding-left: 60px; }
.indent-level-4 { padding-left: 80px; }
.indent-actions { padding-left: 20px; }
.btn-navy:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15); transform: translateY(-1px); }
.bg-green-600 { background-color: #28a745 !important; color: #ffffff !important; }
.hover\:bg-green-700:hover { background-color: #218838 !important; }
.bg-green-600:active { background-color: #1e7e34 !important; }
.bg-yellow-500 { background-color: #ffc107 !important; color: #212529 !important; }
.hover\:bg-yellow-600:hover { background-color: #e0a800 !important; }
.bg-yellow-500:active { background-color: #d39e00 !important; }
.text-white { color: #ffffff !important; }
.tab-content > .tab-pane { content-visibility: auto; }