/* Malaysia Memilih — shared shell: design tokens, masthead, nav, sidebar and status bar.
   Extracted from the duplicated inline styles of the page templates. Page-specific
   rules stay in each page and, because this sheet is linked before them, still override. */

:root {
      color-scheme: dark;
      --page: #080d16;
      --panel: #0e1523;
      --panel-card: #131c2d;
      --panel-head: #111a2d;
      --table-head: #09101c;
      --field: #080f1c;
      --sidebar: #0a0f1b;
      --line: #202a3c;
      --line-subtle: #162030;
      --muted: #8190a7;
      --text: #e5eaf2;
      --text-strong: #f8fafc;
      --text-soft: #cbd5e1;
      --red: #dc172b;
      --sky: #38bdf8;
      --emerald: #10b981;
      --amber: #f59e0b;
      --violet: #8b5cf6;
      --slate: #64748b;
    }

.mono { font-family: "JetBrains Mono", monospace; }
.app {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
.masthead {
      flex: none;
      background: #fff;
      color: #0c1220;
      min-height: 64px;
      padding: 10px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      border-bottom: 3px solid var(--line);
      z-index: 50;
    }
.brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: inherit;
      text-decoration: none;
    }
.brand-bars {
      display: flex;
      gap: 4px;
      height: 26px;
      flex-shrink: 0;
    }
.brand-bars span {
      width: 4px;
      background: var(--red);
    }
/*
  RTM's mark sits between the colour bars and the wordmark. The source file
  carries a white plate of its own, so it keeps a light chip on both themes.
*/
.brand-logo {
      display: block;
      height: 30px;
      width: auto;
      flex: none;
      border-radius: 4px;
      background: #fff;
    }
.brand-name {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1.2;
    }
.brand-name span { font-weight: 500; }
.brand-note {
      margin-top: 3px;
      font-size: 8px;
      letter-spacing: .12em;
      color: #788398;
      text-transform: uppercase;
    }
.masthead-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
.header-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 29px;
      padding: 6px 12px;
      border: 1px solid #18202d;
      background: white;
      color: #18202d;
      text-decoration: none;
      font: 700 9px "JetBrains Mono", monospace;
      letter-spacing: .05em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: all .15s ease;
    }
.header-button:hover { background: #eef2f6; color: #080d16; }
.header-button.admin-button.active {
      background: var(--red);
      border-color: var(--red);
      color: white;
    }
.header-button.logout-button {
      background: #f1f5f9;
      color: #64748b;
      border-color: #cbd5e1;
    }
.header-button.logout-button:hover {
      background: #fee2e2;
      color: var(--red);
      border-color: var(--red);
    }
/*
  Language switcher. A dropdown on the masthead: the flag and code of the
  language in use, and a menu with both choices, each with its national flag.
  <details> gives the open/closed behaviour, so the menu works before any script
  runs and closes when the page reloads on a choice.
*/
.language-switch {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
    }
.language-switch > summary {
      list-style: none;
      cursor: pointer;
      gap: 7px;
    }
.language-switch > summary::-webkit-details-marker { display: none; }
.language-switch > summary::marker { content: ""; }
.language-current[aria-expanded="true"],
.language-switch[open] > .language-current {
      background: #eef2f6;
    }
.language-flag {
      display: inline-flex;
      /* Large enough that the crescent and star still read at a glance. */
      width: 22px;
      height: 15px;
      flex: none;
      overflow: hidden;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(8, 13, 22, .18);
    }
.flag-svg { display: block; width: 100%; height: 100%; }
.language-caret { font-size: 8px; line-height: 1; opacity: .7; }
.language-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      /* Two flags and two codes, so the menu stays as narrow as the control. */
      min-width: 96px;
      padding: 4px;
      background: #fff;
      border: 1px solid #cbd5e1;
      box-shadow: 0 12px 28px rgba(8, 13, 22, .22);
      z-index: 80;
    }
.language-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      color: #18202d;
      text-decoration: none;
      font: 600 10px "Plus Jakarta Sans", sans-serif;
    }
.language-option:hover { background: #eef2f6; }
.language-option.language-active {
      background: #18202d;
      color: #fff;
    }
.language-code {
      flex: 1;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      opacity: .85;
    }
.header-button.active:not(.admin-button) {
      background: #18202d;
      border-color: #18202d;
      color: #ffffff;
    }
html[data-theme="light"] .language-option { color: #18202d; }
html[data-theme="light"] .language-option.language-active { color: #fff; }
.sidebar {
      background: var(--sidebar);
      border-right: 1px solid var(--line);
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
.sidebar-section-label {
      padding: 0 18px 6px;
      font: 700 8.5px "JetBrains Mono", monospace;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .12em;
    }
.nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
.nav-item a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 18px;
      text-decoration: none;
      border-left: 3px solid transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      transition: all .15s ease;
    }
.nav-item a:hover {
      background: var(--panel-card);
      color: var(--text-strong);
    }
.nav-item a.active {
      background: var(--panel-card);
      color: var(--text-strong);
      border-left-color: var(--red);
      font-weight: 700;
    }
.nav-tag {
      font: 700 8px "JetBrains Mono", monospace;
      padding: 2px 5px;
      border-radius: 3px;
      background: var(--line-subtle);
      color: var(--muted);
    }
.nav-item a.active .nav-tag {
      background: var(--red);
      color: #fff;
    }
.status-bar {
      flex: none;
      min-height: 30px;
      display: flex;
      align-items: stretch;
      gap: 12px;
      border-top: 1px solid var(--line);
      background: var(--page);
      font: 9px "JetBrains Mono", monospace;
      z-index: 40;
    }
.status-tag {
      display: flex;
      align-items: center;
      background: var(--red);
      color: white;
      font-size: 8px;
      font-weight: 700;
      padding: 6px 14px;
    }
.status-message {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex: 1;
      padding-right: 16px;
      color: var(--muted);
    }

@media (max-width: 768px) {
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
}