/* ==========================================================================
   MYDS + JIM theme — Malaysia Government Design System applied to Imigresen.
   Tokens extracted from design.digital.gov.my (Poppins/Inter, primary #2563eb).
   Layered over Bootstrap 5.3.3: we override Bootstrap's CSS variables so the
   existing utility-classed views inherit the theme, then add the admin shell.
   ========================================================================== */

:root {
  /* --- MYDS primary (brand blue) --- */
  --myds-primary-50:  #eff6ff;
  --myds-primary-100: #dbeafe;
  --myds-primary-200: #c2d5ff;
  --myds-primary-300: #96b7ff;
  --myds-primary-400: #6394ff;
  --myds-primary-500: #3a75f6;
  --myds-primary-600: #2563eb;   /* core brand */
  --myds-primary-700: #1d4ed8;
  --myds-primary-800: #1e40af;
  --myds-primary-900: #1e3a8a;
  --myds-primary-950: #172554;

  /* --- MYDS semantics --- */
  --myds-success: #22c55e;
  --myds-warning: #eab308;
  --myds-danger:  #ef4444;

  /* --- MYDS neutrals (zinc) --- */
  --myds-white:     #ffffff;
  --myds-washed:    #f4f4f5;
  --myds-black-100: #f4f4f5;
  --myds-black-200: #e4e4e7;
  --myds-black-300: #d4d4d8;
  --myds-black-400: #a1a1aa;
  --myds-black-500: #6b6b74;
  --myds-black-700: #3f3f46;
  --myds-black-900: #18181b;

  --myds-border: var(--myds-black-200);
  --myds-radius: 8px;

  /* --- font stacks --- */
  --myds-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --myds-font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --myds-font-mono:    "Roboto Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- override Bootstrap theme variables --- */
  --bs-primary: var(--myds-primary-600);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--myds-primary-700);
  --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: var(--myds-primary-800);
  --bs-success: var(--myds-success);
  --bs-success-rgb: 34, 197, 94;
  --bs-warning: var(--myds-warning);
  --bs-warning-rgb: 234, 179, 8;
  --bs-danger: var(--myds-danger);
  --bs-danger-rgb: 239, 68, 68;
  --bs-body-color: var(--myds-black-900);
  --bs-body-bg: var(--myds-washed);
  --bs-body-font-family: var(--myds-font-body);
  --bs-border-color: var(--myds-border);
  --bs-border-radius: var(--myds-radius);
  --bs-border-radius-sm: 6px;
}

body {
  font-family: var(--myds-font-body);
  color: var(--myds-black-900);
  background: var(--myds-washed);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .app-brand__name {
  font-family: var(--myds-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons pick up --bs-primary automatically; just soften the radius. */
.btn { border-radius: 6px; font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--myds-primary-600); --bs-btn-border-color: var(--myds-primary-600);
  --bs-btn-hover-bg: var(--myds-primary-700); --bs-btn-hover-border-color: var(--myds-primary-700); }

/* ==========================================================================
   Government masthead (MYDS-mandated top banner)
   ========================================================================== */
.app-masthead {
  background: var(--myds-black-100);
  border-bottom: 1px solid var(--myds-border);
  color: var(--myds-black-500);
  font-size: 12px;
}
.app-masthead .container-fluid { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.app-masthead img { height: 14px; width: auto; }

/* ==========================================================================
   Admin shell — masthead / topbar / sidebar / main
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* Sidebar: static column on lg+, Bootstrap responsive offcanvas below lg. */
.app-sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--myds-white);
  border-right: 1px solid var(--myds-border);
}
.app-sidebar .offcanvas-body,
.app-sidebar.offcanvas-lg { padding: 0; }

.app-sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; border-bottom: 1px solid var(--myds-border);
}
.app-sidebar__brand img { height: 40px; width: auto; }
.app-sidebar__brand .app-brand__name { font-size: 15px; line-height: 1.15; color: var(--myds-primary-800); }
.app-sidebar__brand .app-brand__sub  { font-size: 11px; color: var(--myds-black-500); font-family: var(--myds-font-body); }

.app-nav { padding: 12px 10px; }
.app-nav__section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--myds-black-400); padding: 14px 12px 6px; }
.app-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 2px 0; border-radius: 8px;
  color: var(--myds-black-700); font-size: 14px; font-weight: 500;
}
.app-nav__link:hover { background: var(--myds-primary-50); color: var(--myds-primary-700); text-decoration: none; }
.app-nav__link.active {
  background: var(--myds-primary-50); color: var(--myds-primary-700);
  box-shadow: inset 3px 0 0 var(--myds-primary-600);
}
.app-nav__icon { width: 18px; text-align: center; opacity: .85; }

/* Main column */
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--myds-white);
  border-bottom: 1px solid var(--myds-border);
  padding: 10px 20px; min-height: 60px;
}
.app-topbar__title { font-family: var(--myds-font-heading); font-weight: 600; font-size: 16px; margin: 0; }
.app-topbar__spacer { flex: 1 1 auto; }
.app-topbar__user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--myds-black-700); }
.app-topbar__user .app-topbar__name { font-weight: 500; }
.app-sidebar-toggle { display: none; }

.app-content { padding: 24px 20px; flex: 1 1 auto; }

.app-footer {
  border-top: 1px solid var(--myds-border);
  background: var(--myds-white);
  color: var(--myds-black-500); font-size: 12.5px;
  padding: 14px 20px;
}

/* Cards & tables → MYDS surfaces */
.card { border: 1px solid var(--myds-border); border-radius: var(--myds-radius);
  box-shadow: 0 1px 2px rgba(24,24,27,.04); }
.card .card-header { background: var(--myds-white); border-bottom: 1px solid var(--myds-border);
  font-family: var(--myds-font-heading); font-weight: 600; }
.table > thead { background: var(--myds-washed); }
.table { --bs-table-border-color: var(--myds-border); }

/* MAMPU colour badges keep domain semantics (Hijau/Kuning/Merah = green/yellow/red);
   they use Bootstrap bg-success/warning/danger which now resolve to MYDS semantics. */
.badge.text-bg-warning, .badge.bg-warning { color: #1c1600 !important; }

/* Auth screen: hide the shell chrome, center a card. */
body.app-auth .app-sidebar,
body.app-auth .app-topbar,
body.app-auth .app-masthead { display: none; }
body.app-auth .app-shell { background: var(--myds-washed); }
body.app-auth .app-content { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.app-auth__card { width: 100%; max-width: 420px; }
.app-auth__brand { text-align: center; margin-bottom: 18px; }
.app-auth__brand img { height: 72px; }

/* ==========================================================================
   Responsive — sidebar becomes an offcanvas drawer below lg (Bootstrap .offcanvas-lg)
   ========================================================================== */
@media (max-width: 991.98px) {
  .app-sidebar-toggle { display: inline-flex; }
}