/*
 * GegoK12 modern theme (light + dark), loaded after custom.css by layouts/app and layouts/empty.
 * In the style of the DesignReset Cork "modern light menu" (own CSS, no Cork files): white sidebar,
 * soft grey page, rounded cards with soft shadows, #4361ee accent, Nunito.
 * Dark mode: <html data-theme="dark">, set by public/js/theme.js (remembered per device; until the
 * person chooses, the device setting is followed). Printing is always light.
 */

:root {
  --gk-bg: #f1f2f3; --gk-panel: #ffffff; --gk-panel-2: #fafbfc; --gk-ink: #3b3f5c; --gk-head: #0e1726;
  --gk-muted: #888ea8; --gk-line: #e0e6ed; --gk-chip: #f1f2f3;
  --gk-accent: #4361ee; --gk-accent-ink: #ffffff; --gk-accent-soft: #eceffe;
  --gk-good: #00ab55; --gk-good-bg: #ddf5f0; --gk-warn: #b8801f; --gk-warn-bg: #fcf5e9;
  --gk-bad: #e7515a; --gk-bad-bg: #fbeced; --gk-info-bg: #e6f4ff;
  --gk-shadow: 0 0 2px 0 rgba(145,158,171,.2), 0 12px 24px -4px rgba(145,158,171,.12);
  --gk-topbar: rgba(241,242,243,.9);
  --gk-font: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --gk-bg: #060818; --gk-panel: #0e1726; --gk-panel-2: #121e32; --gk-ink: #bfc9d4; --gk-head: #e0e6ed;
  --gk-muted: #888ea8; --gk-line: #1b2e4b; --gk-chip: #1b2e4b;
  --gk-accent: #4361ee; --gk-accent-soft: #152143;
  --gk-good: #3ddc97; --gk-good-bg: #0e2c25; --gk-warn: #e2a03f; --gk-warn-bg: #2c2414;
  --gk-bad: #f17a81; --gk-bad-bg: #2c1c2b; --gk-info-bg: #0f2a44;
  --gk-shadow: 0 0 0 1px #1b2e4b; --gk-topbar: rgba(6,8,24,.9);
  color-scheme: dark;
}

/* ---------- base ---------- */
html, body { background: var(--gk-bg); }
body.font-primary, body { font-family: var(--gk-font); color: var(--gk-ink); letter-spacing: .0125em; }
.font-primary { font-family: var(--gk-font); }
h1, h2, h3, h4 { color: var(--gk-head); }
a { transition: color .15s, background-color .15s; }
::selection { background: var(--gk-accent); color: #fff; }

/* ---------- page shell: content column ---------- */
#app > main { background: var(--gk-bg); }
#app > main > .grow { background: var(--gk-bg) !important; padding-top: 4px; }

/* ---------- top bar ---------- */
#app .navbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--gk-topbar) !important;
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--gk-line); box-shadow: none; min-height: 64px;
}
#app .navbar .text-gray-600, #app .navbar strong { color: var(--gk-head); }
#app .navbar .font-exo { font-family: var(--gk-font); font-weight: 800; letter-spacing: 0; }
#app .navbar img.rounded-full { box-shadow: 0 0 0 2px var(--gk-panel), 0 4px 12px -4px rgba(0,0,0,.35); }
#app .navbar select, #app .navbar .form-control { background: var(--gk-panel); color: var(--gk-ink); border: 1px solid var(--gk-line); border-radius: 6px; }
.user-dtl { background: var(--gk-panel) !important; border-radius: 10px !important; box-shadow: var(--gk-shadow) !important; overflow: hidden; }
.user-dtl ul { background: var(--gk-panel) !important; border-color: var(--gk-line) !important; border-radius: 10px; }
.user-dtl a, .user-dtl p { color: var(--gk-ink) !important; }
.user-dtl li:hover { background: var(--gk-chip) !important; }

/* ---------- sidebar (every role) ---------- */
#app > main > .sidebar { background: var(--gk-panel); position: relative; z-index: 30; }
#app .sidebar > div,
#app .sidebar .header-wrapper-b,
#app .sidebar .bg-red-800, #app .sidebar .bg-purple-800, #app .sidebar .bg-purple-700, #app .sidebar .bg-blue-700,
#app .sidebar .bg-light-green-700, #app .sidebar .student-sidebar, #app .sidebar .teacher-sidebar,
#app .sidebar .admin-sidebar, #app .sidebar .librarian-sidebar, #app .sidebar .accountant-sidebar,
#app .res_sidebar > div {
  background: var(--gk-panel) !important; color: var(--gk-ink) !important;
}
#app > main > .sidebar > div:first-child { border-right: 1px solid var(--gk-line); box-shadow: 5px 0 25px 0 rgba(94,92,154,.06); }
#app .sidebar ul { padding: 4px 0; }
#app .sidebar ul > li { margin: 2px 8px; border-radius: 6px; background: transparent !important; }
#app .sidebar ul > li > a, #app .sidebar a, #app .sidebar .text-white { color: var(--gk-ink) !important; font-weight: 600; }
#app .sidebar ul > li > a { text-decoration: none; }
#app .sidebar ul > li:hover { background: var(--gk-chip) !important; }
#app .sidebar ul > li:hover > a { color: var(--gk-head) !important; }
#app .sidebar ul > li.active, #app .sidebar ul > li.bg-red-900 { background: var(--gk-accent-soft) !important; }
#app .sidebar ul > li.active > a, #app .sidebar ul > li.bg-red-900 > a { color: var(--gk-accent) !important; font-weight: 700; }
/* icons: the originals are hard-coded white */
#app .sidebar svg { color: var(--gk-muted) !important; flex: none; }
#app .sidebar svg[fill="#FFFFFF"], #app .sidebar svg[fill="#fff"], #app .sidebar svg[fill="white"],
#app .sidebar svg [fill="#FFFFFF"], #app .sidebar svg [fill="#fff"], #app .sidebar svg [fill="#000000"], #app .sidebar svg [fill="white"],
#app .sidebar svg.fill-current, #app .sidebar svg.fill-current path { fill: currentColor !important; }
/* filled icons without a colour of their own (outline icons have fill="none" and keep their stroke) */
#app .sidebar svg:not([fill="none"]) :is(path, circle, rect, polygon, ellipse, g):not([fill="none"]) { fill: currentColor !important; }
#app .sidebar svg[style*="fill"] { fill: currentColor !important; }
/* keep labels on one line in the 192px sidebar */
#app .sidebar ul > li > a > span { white-space: nowrap; margin-left: 10px; margin-right: 0; font-size: .84rem; }
#app .sidebar ul > li.active > a svg, #app .sidebar ul > li:hover > a svg { color: var(--gk-accent) !important; }
#app .sidebar img[src*="right-arrow"] { filter: invert(.55); opacity: .7; }
/* white PNG icons (e.g. Certificates) */
#app .sidebar li > a > img.w-5 { filter: invert(.55); }
:root[data-theme="dark"] #app .sidebar li > a > img.w-5 { filter: none; opacity: .75; }
/* section headings in the parent and site-admin menus */
#app .sidebar li.uppercase, #app .sidebar .opacity-75 { color: var(--gk-muted) !important; opacity: 1; font-weight: 800; letter-spacing: .1em; }
/* fly-out submenus */
#app .sidebar .sites-sidebar {
  background: var(--gk-panel) !important; border: 1px solid var(--gk-line); border-radius: 10px;
  box-shadow: var(--gk-shadow), 0 16px 32px -12px rgba(14,23,38,.25); padding: 6px 0;
}
#app .sidebar .sites-sidebar li { margin: 2px 6px; }
/* open the fly-out right next to its item, with an invisible bridge so the mouse can cross the gap */
#app .sidebar li > .sites-sidebar { left: calc(100% + 8px) !important; }
#app .sidebar .sites-sidebar::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -16px; width: 16px; }

/* ---------- phone menu (burger button opens #res_sidebar) ---------- */
#app .res_sidebar, #app .sidebar div.res_sidebar {
  position: fixed !important; inset: 0; width: 100% !important; height: 100% !important;
  padding-top: 64px; z-index: 35; overflow-y: auto; overflow-x: hidden; animation: none;
  background: rgba(14,23,38,.45) !important;
}
#app .sidebar div.res_sidebar > .header-wrapper-b {
  width: 260px; max-width: 85vw; min-height: 100%; padding: 8px 0 24px;
  background: var(--gk-panel) !important; box-shadow: 10px 0 30px -10px rgba(14,23,38,.35);
}
/* inside the phone menu, sub-menus open below their item instead of to the side */
#app .res_sidebar li > .sites-sidebar {
  position: static !important; left: auto !important; width: auto; margin: 4px 0 2px 12px;
  box-shadow: none; border: 0; border-left: 2px solid var(--gk-line); border-radius: 0; padding: 0;
}
#app .res_sidebar .sites-sidebar::before { display: none; }
#app .res_sidebar img[src*="right-arrow"] { transform: rotate(90deg); }

/* ---------- cards / panels ---------- */
#app .bg-white { background-color: var(--gk-panel) !important; }
#app > main > .grow .bg-white.shadow, #app > main > .grow .bg-white.rounded,
#app > main > .grow .shadow.rounded, .modal-container {
  border-radius: 10px !important; box-shadow: var(--gk-shadow) !important; border: 1px solid var(--gk-line);
}
#app > main > .grow .shadow-lg, #app > main > .grow .shadow-md { box-shadow: var(--gk-shadow), 0 16px 32px -16px rgba(14,23,38,.2) !important; }
.modal-container { background: var(--gk-panel) !important; color: var(--gk-ink); }
.modal-header { border-color: var(--gk-line) !important; }

/* ---------- buttons ---------- */
.blue-bg, .btn-primary, .btn-submit, .submit-btn {
  background-color: var(--gk-accent) !important; border-color: var(--gk-accent) !important; color: #fff !important;
  border-radius: 6px !important; box-shadow: 0 10px 20px -10px var(--gk-accent); font-weight: 700;
}
.blue-bg:hover, .btn-primary:hover, .btn-submit:hover, .submit-btn:hover { filter: brightness(.94); }
.btn-reset, .reset-btn { background: var(--gk-panel) !important; color: var(--gk-ink) !important; border: 1px solid var(--gk-line) !important; border-radius: 6px !important; }
.btn-reset:hover, .reset-btn:hover { background: var(--gk-chip) !important; }
#app a.text-blue-600, #app .text-blue-600, #app .text-blue-500 { color: var(--gk-accent) !important; }

/* ---------- forms ---------- */
#app input[type="text"], #app input[type="email"], #app input[type="password"], #app input[type="number"],
#app input[type="date"], #app input[type="tel"], #app input[type="search"], #app input[type="time"], #app input[type="url"],
#app select, #app textarea, .tw-form-control, .filter-form-control, .form-control {
  background-color: var(--gk-panel); color: var(--gk-ink); border-color: var(--gk-line) !important; border-radius: 6px;
}
#app input:focus, #app select:focus, #app textarea:focus, .tw-form-control:focus {
  outline: none; border-color: var(--gk-accent) !important; box-shadow: 0 0 0 3px var(--gk-accent-soft);
}
.tw-form-label, #app label { color: var(--gk-ink); }
#app ::placeholder { color: var(--gk-muted); opacity: 1; }

/* ---------- tables ---------- */
#app table { border-color: var(--gk-line); }
#app table thead, #app table thead tr, .custom-table thead, #app thead.bg-gray-100, #app thead.bg-gray-200 { background: var(--gk-panel-2) !important; }
#app table th { color: var(--gk-head) !important; font-weight: 700; border-color: var(--gk-line) !important; }
#app table td { border-color: var(--gk-line) !important; }
#app table tbody tr, .custom-table tbody tr:nth-child(even) { background: transparent !important; border-color: var(--gk-line) !important; }
.custom-table tbody tr:nth-child(even) > td, #app table tbody tr:nth-child(even) > td { background: var(--gk-panel-2); }
#app table tbody tr:hover > td { background: var(--gk-chip) !important; }
.custom-table table, .custom-table tbody td { border-color: var(--gk-line) !important; }

/* ---------- alerts and badges ---------- */
.alert-success, #app .bg-green-100 { background: var(--gk-good-bg) !important; color: var(--gk-good) !important; border-color: transparent !important; }
#app .bg-red-100 { background: var(--gk-bad-bg) !important; border-color: transparent !important; }
#app .bg-yellow-100 { background: var(--gk-warn-bg) !important; border-color: transparent !important; }
#app .bg-blue-50, #app .bg-blue-100 { background: var(--gk-info-bg) !important; border-color: transparent !important; }

/* ---------- login and other pages without the app shell (layouts/empty) ---------- */
body > .min-h-screen, body.bg-gray-200, body .bg-gray-200.min-h-screen { background: var(--gk-bg) !important; }
#app .empty-layout {
  background: radial-gradient(1200px 600px at 10% -10%, var(--gk-accent-soft), transparent 60%),
              radial-gradient(900px 500px at 110% 110%, rgba(128,93,202,.12), transparent 60%), var(--gk-bg) !important;
}
#app .empty-layout > div > .bg-white { border-radius: 14px; border: 1px solid var(--gk-line); box-shadow: var(--gk-shadow), 0 24px 48px -24px rgba(14,23,38,.25); }
#app .empty-layout .card { border: 0 !important; box-shadow: none !important; background: transparent !important; }
#app .empty-layout .card-header { color: var(--gk-head); font-weight: 800; letter-spacing: 0; }
#app .empty-layout .input-group { border-color: var(--gk-line) !important; }
#app .empty-layout .input-group:focus-within { border-color: var(--gk-accent) !important; }
#app .empty-layout .form-control { border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; }
#app .empty-layout .input-group-addon svg { color: var(--gk-muted); }

/* ---------- sign-in page (resources/views/auth/login.blade.php) ---------- */
#app .empty-layout:has(.gk-login) { display: block; background: var(--gk-bg) !important; }
.gk-login { display: flex; width: 100%; min-height: 100vh; font-family: var(--gk-font); }
.gk-login-side {
  flex: 0 0 44%; display: flex; align-items: center; justify-content: center; padding: 48px;
  color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(145deg, #4361ee 0%, #3a2fbf 55%, #805dca 100%);
}
.gk-login-side::before, .gk-login-side::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08);
}
.gk-login-side::before { width: 520px; height: 520px; top: -180px; right: -200px; }
.gk-login-side::after { width: 380px; height: 380px; bottom: -160px; left: -120px; }
.gk-login-side-inner { position: relative; z-index: 1; max-width: 420px; }
.gk-login-mark { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.gk-login-mark svg { width: 30px; height: 30px; }
.gk-login-side-title { color: #fff !important; font-size: 2.1rem; line-height: 1.2; font-weight: 800; margin: 0 0 14px; }
.gk-login-side-text { color: rgba(255,255,255,.85); font-size: 1.02rem; line-height: 1.6; margin: 0 0 28px; }
.gk-login-points { list-style: none; margin: 0; padding: 0; }
.gk-login-points li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.92); font-size: .95rem; padding: 7px 0; }
.gk-login-points li span { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }

.gk-login-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.gk-login-card {
  width: 100%; max-width: 420px; background: var(--gk-panel); border: 1px solid var(--gk-line);
  border-radius: 16px; padding: 36px 34px; box-shadow: var(--gk-shadow), 0 24px 48px -28px rgba(14,23,38,.28);
}
.gk-login-logo { display: inline-block; margin-bottom: 22px; }
.gk-login-logo img { height: 52px; width: auto; display: block; }
.gk-login-title { color: var(--gk-head); font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; letter-spacing: 0; }
.gk-login-sub { color: var(--gk-muted); font-size: .95rem; margin: 0 0 26px; }
.gk-login-alert { background: var(--gk-warn-bg); color: var(--gk-warn); border-radius: 10px; padding: 12px 14px; font-size: .9rem; font-weight: 600; }

.gk-field { margin-bottom: 18px; }
.gk-field > label { display: block; font-size: .82rem; font-weight: 700; color: var(--gk-head); margin-bottom: 7px; }
.gk-input {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px;
  background: var(--gk-panel-2); border: 1px solid var(--gk-line); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.gk-input:focus-within { border-color: var(--gk-accent); background: var(--gk-panel); box-shadow: 0 0 0 3px var(--gk-accent-soft); }
.gk-input.gk-input-error { border-color: var(--gk-bad); }
.gk-input > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gk-muted); }
#app .gk-input input.form-control { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--gk-head); font-size: .95rem; font-family: var(--gk-font); }
.gk-input input::placeholder { color: var(--gk-muted); opacity: .8; }
.gk-show-pass { border: 0; background: transparent; padding: 6px; margin-right: -6px; border-radius: 8px; color: var(--gk-muted); cursor: pointer; display: flex; }
.gk-show-pass:hover, .gk-show-pass.is-on { color: var(--gk-accent); }
.gk-show-pass svg { width: 18px; height: 18px; }
.gk-error { display: block; margin-top: 6px; color: var(--gk-bad); font-size: .8rem; font-weight: 600; }

.gk-login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; flex-wrap: wrap; }
.gk-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--gk-ink); cursor: pointer; }
.gk-check input { width: 16px; height: 16px; accent-color: var(--gk-accent); }
.gk-link { color: var(--gk-accent) !important; font-size: .88rem; font-weight: 700; text-decoration: none; }
.gk-link:hover { text-decoration: underline; }
.gk-login-btn {
  width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--gk-accent); color: #fff; font-family: var(--gk-font); font-size: 1rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 10px 20px -10px rgba(67,97,238,.8); transition: background-color .15s, transform .05s, box-shadow .15s;
}
.gk-login-btn:hover { background: #3651d4; box-shadow: 0 12px 24px -10px rgba(67,97,238,.9); }
.gk-login-btn:active { transform: translateY(1px); }
.gk-login-btn:focus-visible { outline: 3px solid var(--gk-accent-soft); outline-offset: 2px; }
.gk-login-foot { margin-top: 22px; color: var(--gk-muted); font-size: .8rem; }
:root[data-theme="dark"] .gk-login-side { background: linear-gradient(145deg, #2a3fb8 0%, #251d84 55%, #533a8f 100%); }
@media (max-width: 900px) {
  .gk-login-side { display: none; }
  .gk-login-main { padding: 28px 16px; }
  .gk-login-card { padding: 28px 22px; }
}

/* ---------- dark mode: map the common light utilities ---------- */
:root[data-theme="dark"] .bg-white { background-color: var(--gk-panel) !important; }
:root[data-theme="dark"] .bg-gray-50, :root[data-theme="dark"] .bg-gray-100 { background-color: var(--gk-panel-2) !important; }
:root[data-theme="dark"] .bg-gray-200, :root[data-theme="dark"] .bg-gray-300 { background-color: var(--gk-chip) !important; }
:root[data-theme="dark"] .text-black, :root[data-theme="dark"] .text-gray-900, :root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-grey-darker, :root[data-theme="dark"] .text-black-500 { color: var(--gk-head) !important; }
:root[data-theme="dark"] .text-gray-700, :root[data-theme="dark"] .text-gray-600 { color: var(--gk-ink) !important; }
:root[data-theme="dark"] .text-gray-500, :root[data-theme="dark"] .text-gray-400 { color: var(--gk-muted) !important; }
:root[data-theme="dark"] .border, :root[data-theme="dark"] .border-b, :root[data-theme="dark"] .border-t,
:root[data-theme="dark"] [class*="border-gray"] { border-color: var(--gk-line) !important; }
:root[data-theme="dark"] .text-green-800, :root[data-theme="dark"] .text-green-700 { color: var(--gk-good) !important; }
:root[data-theme="dark"] .text-red-800, :root[data-theme="dark"] .text-red-700, :root[data-theme="dark"] .text-red-600 { color: var(--gk-bad) !important; }
:root[data-theme="dark"] .text-yellow-800, :root[data-theme="dark"] .text-yellow-900, :root[data-theme="dark"] .text-orange-800 { color: var(--gk-warn) !important; }
:root[data-theme="dark"] .text-blue-800 { color: #8ea2ff !important; }
:root[data-theme="dark"] img[src*="default-user"] { filter: brightness(.85); }
:root[data-theme="dark"] #app .sidebar img[src*="right-arrow"] { filter: none; opacity: .6; }
:root[data-theme="dark"] .fc, :root[data-theme="dark"] .fc-theme-standard td, :root[data-theme="dark"] .fc-theme-standard th { border-color: var(--gk-line); }

/* ---------- dark-mode switch (public/js/theme.js) ---------- */
.gk-theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gk-line); background: var(--gk-panel); color: var(--gk-ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--gk-shadow), 0 8px 20px -8px rgba(14,23,38,.35);
  transition: transform .15s, background .15s;
}
.gk-theme-toggle:hover { transform: translateY(-2px); color: var(--gk-accent); }
.gk-theme-toggle:focus-visible { outline: 3px solid var(--gk-accent); outline-offset: 2px; }
.gk-theme-toggle svg { width: 20px; height: 20px; }

/* ---------- print: always light, no switch ---------- */
@media print {
  :root { color-scheme: light; }
  .gk-theme-toggle { display: none !important; }
  html, body, #app > main, #app > main > .grow { background: #fff !important; }
}