/* ───────────── JEMS admin theme — judiciary: ivory, serif, flat; Somali Regional State flag accents ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --flag-green: #006d21; --flag-red: #d21034; --flag-blue: #4189dd; --flag-black: #0f2742;  /* deep blue top bar: the Somali Region flag has no black */
  --paper: #faf8f5; --paper-2: #f3efe8; --line: #e7e2da; --ink: #1c1917; --ink-2: #57534e; --ink-3: #8a847c;
}
body, .btn, .form-control, .nav-link, .main-header { font-family: 'IBM Plex Sans', system-ui, sans-serif !important; }
h1, h2, h3, h4, .content-header h1, .card-title, .brand-text { font-family: 'Source Serif 4', Georgia, serif !important; letter-spacing: -.01em; }
footer.main-footer { display: none !important; }
.content-wrapper { background: var(--paper) !important; }

/* Flag rule across the very top */
body::before { content: ''; position: fixed; z-index: 2000; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--flag-blue) 0 16%, var(--flag-green) 16% 44%, #fff 44% 72%, var(--flag-red) 72%); }

/* Black top bar */
.main-header.navbar { background: var(--flag-black) !important; border-bottom: 0 !important; margin-top: 4px; }
.main-header .nav-link, .main-header .navbar-nav .nav-link { color: #e7e5e4 !important; }
.main-header .nav-link:hover { color: #fff !important; }

/* Light ivory sidebar with red markers (LEMS uses a dark green one) */
.main-sidebar { background: #fff !important; border-right: 1px solid var(--line); box-shadow: none !important; top: 4px; }
.main-sidebar .brand-link { background: #fff !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }
.main-sidebar .brand-text { color: var(--ink) !important; font-weight: 700 !important; font-size: 1.35rem; }
.main-sidebar .brand-image { max-height: 34px; width: auto; box-shadow: none !important; }
.main-sidebar .user-panel { border-bottom: 1px solid var(--line) !important; }
.main-sidebar .user-panel a { color: var(--ink) !important; }
.nav-sidebar .nav-link { color: var(--ink-2) !important; border-radius: 0 !important; margin: 0 !important; border-left: 3px solid transparent; }
.nav-sidebar .nav-link:hover { background: var(--paper) !important; color: var(--ink) !important; }
.nav-sidebar .nav-link.active, .nav-sidebar > .nav-item.menu-open > .nav-link {
  background: #fdf1f3 !important; color: var(--flag-red) !important; border-left-color: var(--flag-red); box-shadow: none !important;
}
.nav-sidebar .nav-link .nav-icon { color: var(--ink-3); }
.nav-sidebar .nav-link.active .nav-icon { color: var(--flag-red); }

/* Sidebar scrolls when the menu is taller than the screen */
html body.layout-fixed aside.main-sidebar { height: calc(100vh - 4px); overflow: hidden; }
html body.layout-fixed aside.main-sidebar > .sidebar {
  height: calc(100vh - 61px) !important; min-height: 0 !important; max-height: calc(100vh - 61px) !important;
  overflow-y: auto !important; overflow-x: hidden; scrollbar-width: thin;
}

/* Flat, bordered surfaces */
.card { border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
.card-header { background: #fff !important; border-bottom: 1px solid var(--line) !important; }
.table thead th { background: var(--paper-2); border: 0 !important; color: var(--ink-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.table td { border-top: 1px solid var(--line) !important; vertical-align: middle !important; }
.form-control { border-radius: 2px !important; border-color: #d6cfc4 !important; }
.form-control:focus { border-color: var(--flag-red) !important; box-shadow: 0 0 0 3px rgba(210,16,52,.12) !important; }
.btn { border-radius: 2px !important; font-weight: 500 !important; }
.btn-primary { background: var(--flag-red) !important; border-color: var(--flag-red) !important; }
.btn-success { background: var(--flag-green) !important; border-color: var(--flag-green) !important; }
.btn-primary:hover, .btn-success:hover { filter: brightness(.92); }
a { color: #a50d29; }
.page-item.active .page-link { background: var(--flag-red) !important; border-color: var(--flag-red) !important; }

/* Login: ivory paper with a seal-like card */
body.login-page { background: var(--paper) !important; }
.login-page .login-box .card { border-top: 4px solid var(--flag-red) !important; }
.login-page .login-logo, .login-page .login-logo a { color: var(--ink) !important; font-family: 'Source Serif 4', serif; font-weight: 700; }
img.login-logo { max-width: 110px !important; }

/* ───────────── Admin home ───────────── */
.jems-home .content-header { display: none; }
.jems-home-wrap { flex: 0 0 100%; max-width: 100%; min-width: 0; padding: 16px 4px 40px; color: var(--ink); }
.jems-masthead { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 24px; }
.jems-kicker { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--flag-red); }
.jems-masthead h1 { font-size: 2.1rem; font-weight: 600; margin: 6px 0 4px; }
.jems-masthead p { margin: 0; color: var(--ink-2); }
.jems-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--flag-black); background: var(--flag-black); color: #fff !important; font-weight: 500; font-size: .875rem; text-decoration: none !important; }
.jems-btn--ghost { background: #fff; color: var(--ink) !important; border-color: var(--line); }
.jems-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.jems-tile { background: #fff; border: 1px solid var(--line); border-left-width: 4px; padding: 16px 18px; color: var(--ink) !important; text-decoration: none !important; transition: filter .15s; }
.jems-tile:hover { filter: brightness(.98); }
.jems-tile span { display: block; font-size: .8rem; color: var(--ink-2); }
.jems-tile strong { display: block; font-family: 'Source Serif 4', serif; font-size: 2.4rem; font-weight: 600; line-height: 1.1; }
.jems-tile small { color: var(--ink-3); }
/* Light flag tints — colourful without being heavy */
.jems-tile--red { background: #fdf2f4; border-color: #f5cdd5; border-left-color: var(--flag-red); } .jems-tile--red strong { color: #a50d29; }
.jems-tile--green { background: #eef8f1; border-color: #c6e6cf; border-left-color: var(--flag-green); } .jems-tile--green strong { color: #00561a; }
.jems-tile--plum { background: #f8f0f7; border-color: #e6cfe3; border-left-color: #9a4a90; } .jems-tile--plum strong { color: #6e2f67; }
.jems-tile--bronze { background: #fbf5e7; border-color: #ecdcb5; border-left-color: #b8862b; } .jems-tile--bronze strong { color: #7a5717; }
.jems-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.jems-cols > div { min-width: 0; }
.jems-panel { background: #fff; border: 1px solid var(--line); margin-bottom: 24px; min-width: 0; }
.jems-panel > h2 { font-size: 1.1rem; font-weight: 600; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.jems-panel table { width: 100%; font-size: .875rem; }
.jems-panel td, .jems-panel th { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.jems-panel th { background: var(--paper-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.jems-panel tr:last-child td { border-bottom: 0; }
.jems-tag { display: inline-block; padding: 1px 8px; font-size: .72rem; font-weight: 500; background: #f3e9f2; color: #6e2f67; white-space: nowrap; }
.jems-tag--adjourned { background: #f6eedc; color: #7a5717; }
.jems-tag--convicted, .jems-tag--acquitted, .jems-tag--dismissed { background: #e3f1e6; color: #00561a; }
.jems-tag--withdrawn, .jems-tag--closed { background: #fdf1f3; color: #a50d29; }
.jems-links { list-style: none; margin: 0; padding: 0; }
.jems-links li { border-bottom: 1px solid var(--line); }
.jems-links li:last-child { border-bottom: 0; }
.jems-links a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: var(--ink) !important; font-size: .9rem; }
.jems-links a i { width: 18px; color: var(--flag-red); }
.jems-links a:hover { background: var(--paper); }
.jems-muted { color: var(--ink-3); }
.jems-mono { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
@media (max-width: 992px) { .jems-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jems-cols { grid-template-columns: minmax(0, 1fr); } }

/* Coloured top rules (after the base .jems-panel rule so they win) */
.jems-panel { border-top: 3px solid var(--flag-red); }
.jems-cols > div:last-child .jems-panel { border-top-color: var(--flag-green); }


/* Small screens: widgets and tables never push the page wider than the screen */
.select2-container { max-width: 100% !important; }
.content-wrapper .card-body, .content-wrapper .tab-content { min-width: 0; }
.content-wrapper input[type=text], .content-wrapper input[type=number], .content-wrapper input[type=email],
.content-wrapper input[type=url], .content-wrapper textarea, .content-wrapper select { max-width: 100%; }
@media (max-width: 767px) {
  .content-wrapper .table:not(.table-responsive) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #jazzy-actions .btn { white-space: normal; }
}