/* Self-hosted Inter (latin subset), shared by every view that loads this file. */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/inter-700.woff2') format('woff2'); }

/* Shared design tokens (light) */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg:#f7f8fa; --bg2:#f0f1f4; --surface:#ffffff; --border:#e8eaed; --border2:#f0f2f5;
  --text:#111827; --muted:#9ca3af; --muted2:#6b7280;
  --primary:#6366f1; --danger:#ef4444; --warning:#f59e0b; --success:#059669;
  --text-inverse:#fff; --text-on-light:#1a1a1a; --danger-soft:rgba(239,68,68,.08); --warning-soft:rgba(245,158,11,.10);
  --overlay:rgba(0,0,0,.5);
  --kb-expose:#8b5cf6; --kb-defence:#ec4899; --chip-purple:#a78bfa;
  --tag-1:#6c757d; --tag-2:#0d6efd; --tag-3:#6610f2; --tag-4:#d63384; --tag-5:#dc3545;
  --tag-6:#fd7e14; --tag-7:#ffc107; --tag-8:#198754; --tag-9:#0dcaf0; --tag-10:#20c997;
  --swatch-ring:rgba(0,0,0,.15);
  --shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
  --bar-r:6px; --today-op:.55; --today-glow:none;
  --c-topic:#c2c9d6;    --ct-topic:#374151;
  --c-expose:#c4b5fd;   --ct-expose:#4c1d95;
  --c-register:#fcd34d; --ct-register:#78350f;
  --c-wip:#7dd3fc;      --ct-wip:#0c4a6e;
  --c-defence:#f9a8d4;  --ct-defence:#831843;
  --c-overdue:#fca5a5;  --ct-overdue:#7f1d1d;
  --c-rating-fail:#f7c4c1;      --ct-rating-fail:#7f1d1d;
  --c-rating-pass:#f8d9aa;      --ct-rating-pass:#7c2d12;
  --c-rating-sat:#f4e8a5;       --ct-rating-sat:#713f12;
  --c-rating-good:#cde8bb;      --ct-rating-good:#365314;
  --c-rating-excellent:#abe0c1; --ct-rating-excellent:#064e3b;
  --ld-topic:#c2c9d6; --ld-expose:#c4b5fd; --ld-register:#fcd34d; --ld-wip:#7dd3fc;
  --ld-defence:#f9a8d4; --ld-overdue:#fca5a5;
}
/* Shared design tokens (dark) */
[data-theme="dark"] {
  --bg:#0f172a; --bg2:#131c2e; --surface:#1e293b; --border:#334155; --border2:#263347;
  --text:#f1f5f9; --muted:#64748b; --muted2:#94a3b8;
  --primary:#38bdf8; --danger:#f87171; --warning:#fbbf24; --success:#34d399;
  --text-inverse:#fff; --danger-soft:rgba(248,113,113,.12); --warning-soft:rgba(251,191,36,.12);
  --overlay:rgba(0,0,0,.6);
  --kb-expose:#a78bfa; --kb-defence:#f472b6; --swatch-ring:rgba(255,255,255,.2);
  --shadow:0 2px 10px rgba(0,0,0,.5); --shadow-md:0 4px 24px rgba(0,0,0,.6);
  --today-op:1; --today-glow:0 0 8px rgba(248,113,113,.45);
  --c-topic:#334155;    --ct-topic:#94a3b8;
  --c-expose:#4c1d95;   --ct-expose:#ddd6fe;
  --c-register:#9a3412; --ct-register:#fed7aa;
  --c-wip:#075985;      --ct-wip:#bae6fd;
  --c-defence:#831843;  --ct-defence:#fbcfe8;
  --c-overdue:#7f1d1d;  --ct-overdue:#fca5a5;
  --c-rating-fail:#7f1d1d;      --ct-rating-fail:#fecaca;
  --c-rating-pass:#7c2d12;      --ct-rating-pass:#fed7aa;
  --c-rating-sat:#713f12;       --ct-rating-sat:#fde68a;
  --c-rating-good:#3f6212;      --ct-rating-good:#d9f99d;
  --c-rating-excellent:#065f46; --ct-rating-excellent:#a7f3d0;
  --ld-topic:#475569; --ld-expose:#6d28d9; --ld-register:#c2410c; --ld-wip:#0284c7;
  --ld-defence:#9d174d; --ld-overdue:#991b1b;
}

/* Base typography: every view that loads theme.css inherits Inter. */
body { font-family: var(--font-sans); }

/* Spinner for in-flight actions (e.g. the dashboard email sync button) */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* Theme toggle button (pre-auth pages) */
.theme-toggle-btn { position:fixed; top:14px; right:14px; background:none; border:none; cursor:pointer; color:var(--text); padding:6px; border-radius:50%; line-height:0; }
.theme-toggle-btn:hover { background:var(--bg2); }
.theme-toggle-btn .material-icons { font-size:20px; }
.lang-toggle-wrap { position:fixed; top:14px; right:50px; }
.lang-toggle-btn { background:none; border:none; cursor:pointer; color:var(--text); padding:6px 8px; border-radius:50%; line-height:1; font-size:18px; font-family:inherit; }
.lang-toggle-btn:hover { background:var(--bg2); }
.lang-dropdown { position:absolute; top:calc(100% + 4px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); overflow:hidden; display:none; min-width:80px; z-index:200; }
.lang-dropdown.open { display:block; }
.lang-option { display:flex; align-items:center; gap:6px; width:100%; padding:8px 12px; background:none; border:none; cursor:pointer; color:var(--text); font-size:13px; font-family:inherit; white-space:nowrap; }
.lang-option:hover { background:var(--bg2); }
.lang-flag { color:initial; font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif; font-variant-emoji:emoji; line-height:1; }
.lang-select-wrap { position:relative; }
.lang-select-input { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font-size:14px; font-family:inherit; cursor:pointer; }
.lang-select-arrow { font-size:16px; color:var(--muted2); }
.lang-select-dropdown { top:calc(100% + 4px); left:0; right:auto; }

/* Centered slot in a flex .topbar, e.g. the gutachten template picker */
.topbar-center { flex:1; display:flex; justify-content:center; min-width:0; }
.rubric-template-select { padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); font-size:14px; font-family:inherit; cursor:pointer; max-width:260px; text-overflow:ellipsis; }
.rubric-template-select:focus { outline:none; border-color:var(--primary); }
.rubric-template-select:disabled { opacity:.5; cursor:default; }

/* Shared inline <select> look (padding/border/radius/surface, focus→primary) so
   every ad-hoc select across pages matches without per-page CSS. */
.tt-select { padding:4px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:11pt; font-family:inherit; cursor:pointer; }
.tt-select:focus { outline:none; border-color:var(--primary); }
.tt-select:disabled { opacity:.5; cursor:default; }

/* Generic topbar tool menu: icon button + right-aligned dropdown of .menu-item rows */
.tool-menu { position:relative; display:flex; align-items:center; }
.tool-dropdown { position:absolute; top:calc(100% + 6px); right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); overflow:hidden; display:none; min-width:200px; z-index:200; }
.tool-dropdown.open { display:block; }
.menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:9px 12px; background:none; border:none; cursor:pointer; color:var(--text); font-size:13px; font-family:inherit; white-space:nowrap; text-align:left; }
.menu-item:hover { background:var(--bg2); }
.menu-item:disabled { opacity:.5; cursor:default; }
.menu-item:disabled:hover { background:none; }
.menu-item .mi-sm { font-size:17px; color:var(--muted2); }

/* Second-examiner address-book autocomplete dropdown. Attached below a name or
   email input on the registration form and the thesis edit form. Mirrors the
   lang/tool-dropdown look (surface + border + shadow, z-index 200). */
.contact-suggest { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); overflow:auto; display:none; max-height:280px; z-index:200; }
.contact-suggest-item { display:flex; flex-direction:column; gap:1px; padding:7px 12px; cursor:pointer; }
.contact-suggest-item:hover, .contact-suggest-item.active { background:var(--bg2); }
.contact-suggest-name { font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-suggest-email { font-size:12px; color:var(--muted2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Shared modal component (notify) */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); width: 440px; max-width: 100%; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 24px; color: var(--text); font-weight: 700; font-size: 14pt; border-bottom: 1px solid var(--border); }
.modal-head.modal-head-danger { color: var(--danger); }
.modal-head.modal-head-warning { color: var(--warning); }

/* A signer who declined in DocuSeal: red and clickable to reveal the reason. */
.gutachten-signer-declined { color: var(--danger); cursor: pointer; }
.gutachten-signer-declined:hover { text-decoration: underline; }
.modal-head .material-icons { font-size: 29px; }
.modal-body { padding: 20px 24px 0; font-size: 11pt; color: var(--text); line-height: 1.6; white-space: pre-line; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 18px 24px 22px; }

/* Centralized modal button styling — every modal's buttons live in
   .modal-actions, so all modals share one look regardless of which page CSS is
   loaded (page-level .btn-* definitions vary and the dashboard has no
   .btn-secondary at all). */
.modal-actions button { padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; font-size: 11pt; font-weight: 400; font-family: inherit; cursor: pointer; transition: opacity .15s, background .15s; }
.modal-actions .btn-primary   { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.modal-actions .btn-secondary { background: none;           color: var(--text);         border-color: var(--border); }
.modal-actions .btn-danger    { background: var(--danger);  color: var(--text-inverse); border-color: var(--danger); }
.modal-actions button:hover         { opacity: .9; }
.modal-actions .btn-secondary:hover { background: var(--bg2); opacity: 1; }
.modal-actions button:disabled      { opacity: .5; cursor: not-allowed; }

/* Input fields inside a promptModal */
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 10pt; color: var(--muted2); margin-bottom: 6px; }
.modal-field input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 11pt; }
.modal-field input:focus { outline: none; border-color: var(--primary); }
.modal-check { display: flex; align-items: center; gap: 9px; font-size: 10.5pt; color: var(--text); cursor: pointer; }
.modal-check input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Wider modal for the email conversation card */
.modal.modal-wide { width: 640px; }

/* Table-select modal (tableSelectModal) */
.modal.modal-table-wide { width: 600px; }
.modal-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 10.5pt; }
.modal-table th { text-align: left; font-size: 9pt; font-weight: 600; color: var(--muted2); padding: 6px 10px 8px; border-bottom: 1px solid var(--border); }
.modal-table th:first-child, .modal-table td:first-child { width: 36px; text-align: center; }
.modal-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.modal-table tbody tr:last-child td { border-bottom: none; }
.modal-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.email-thread { padding: 16px 20px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.email-thread .email-empty { color: var(--muted2); font-size: 11pt; text-align: center; padding: 24px 0; }
.email-msg { max-width: 82%; padding: 10px 13px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border); }
.email-msg.incoming { align-self: flex-start; border-bottom-left-radius: 4px; }
.email-msg.outgoing { align-self: flex-end; background: var(--primary); color: var(--text-inverse); border-color: transparent; border-bottom-right-radius: 4px; }
.email-msg .email-meta { font-size: 8.5pt; opacity: .85; margin-bottom: 5px; display: flex; justify-content: space-between; gap: 12px; }
.email-msg .email-subject { font-weight: 700; font-size: 10pt; margin-bottom: 4px; }
.email-msg .email-body { font-size: 10pt; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* Debounced-autosave status indicator, shared by the gutachten sheet and the
   journal editor on the thesis detail page. Rendered by save_state.js as one
   animated icon per state; the i18n text lives in the tooltip. */
.save-state { margin-left:auto; color:var(--muted2); font-size:12px; display:inline-flex; align-items:center; }
.save-state .material-icons { font-size:16px; line-height:1; }
.save-state .si-unsaved { color:var(--muted2); animation:si-pulse 1.4s ease-in-out infinite; }
.save-state .si-saving { color:var(--muted2); }
.save-state .si-saved { color:var(--success); }
.save-state .si-error { color:var(--danger); }
.save-state .si-pop { animation:si-pop .25s ease-out; }
@keyframes si-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes si-pulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }

/* Reusable inline role badge (e.g. second-examiner pill next to a name). */
.role-pill { display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 8px; font-size:.7rem; font-weight:600; border-radius:10px; background:var(--primary); color:var(--text-inverse); }
.role-pill--2 { background:var(--warning); color:var(--text-on-light); }

/* Checkbox + label row used inside form cards. */
.field-checkbox { display:flex; align-items:center; gap:8px; }
.field-checkbox input { width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }
.field-checkbox label { display:flex; align-items:center; gap:8px; cursor:pointer; }

/* Toggle switch (shared by settings, thesis new and thesis detail forms).
   Label on the left, switch on the right of the row. */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .2s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--text-inverse); border-radius: 50%; transition: transform .2s; }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.toggle-row label { margin-bottom: 0; }