/* ============================================================
   BLOOMBERG TERMINAL THEME - Court Case Management System
   Dept of Justice & Constitutional Development
   ============================================================ */

:root {
    --bg-primary:     #0D1117;
    --bg-secondary:   #161B22;
    --bg-card:        #1C2128;
    --bg-hover:       #21262D;
    --accent:         #FF8C00;
    --accent-dim:     #CC7000;
    --accent-bright:  #FFA500;
    --text-primary:   #E6EDF3;
    --text-secondary: #8B949E;
    --text-muted:     #484F58;
    --border:         #30363D;
    --border-accent:  #FF8C00;
    --green:          #3FB950;
    --red:            #F85149;
    --yellow:         #D29922;
    --blue:           #58A6FF;
    --purple:         #BC8CFF;
    --cyan:           #39C5CF;
    --font-mono:      'Consolas', 'Courier New', 'Lucida Console', monospace;
    --font-ui:        'Segoe UI', 'Arial', sans-serif;
    --topbar-h:       48px;
    --sidebar-w:      220px;
    --statusbar-h:    32px;
}

/* LIGHT THEME */
body.light-theme {
    --bg-primary:     #F6F8FA;
    --bg-secondary:   #FFFFFF;
    --bg-card:        #FFFFFF;
    --bg-hover:       #F0F2F5;
    --text-primary:   #1C2128;
    --text-secondary: #57606A;
    --text-muted:     #8C959F;
    --border:         #D0D7DE;
    --accent:         #CF6A00;
    --accent-dim:     #8B4500;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas:
        "topbar  topbar"
        "sidebar main"
        "status  status";
    height: 100vh;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    grid-area: topbar;
    background: var(--accent);
    color: #000;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--accent-dim);
    overflow: hidden;
    white-space: nowrap;
    z-index: 100;
}

.topbar-brand {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding-right: 16px;
    border-right: 2px solid rgba(0,0,0,0.3);
    margin-right: 16px;
    text-transform: uppercase;
}

.topbar-section {
    padding: 0 12px;
    border-right: 1px solid rgba(0,0,0,0.25);
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 11px;
}

.topbar-section:last-child { border-right: none; }
.topbar-section .label { opacity: 0.7; margin-right: 4px; }
.topbar-section .value { font-weight: 700; }

.topbar-spacer { flex: 1; }

.topbar-clock {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding-left: 12px;
}

.topbar-theme-btn {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.3);
    color: #000;
    padding: 4px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    margin-left: 12px;
    border-radius: 2px;
    transition: background 0.15s;
}
.topbar-theme-btn:hover { background: rgba(0,0,0,0.35); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    grid-area: sidebar;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-section-header {
    padding: 8px 16px 4px;
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.15s;
    border-left: 3px solid transparent;
    gap: 8px;
}

.sidebar-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--accent);
}

.sidebar-item.active {
    background: var(--bg-hover);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 700;
}

.sidebar-item .item-key {
    font-size: 10px;
    color: var(--accent);
    font-weight: 700;
    min-width: 28px;
}

.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 16px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    grid-area: main;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-primary);
}

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar {
    grid-area: status;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.statusbar-item {
    padding: 0 12px;
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.statusbar-item .key {
    background: var(--accent);
    color: #000;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 900;
    border-radius: 2px;
}

.statusbar-item .label { color: var(--text-secondary); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s;
}

.stat-card:hover { border-color: var(--accent); }

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--accent);
}

.stat-card.danger::before  { background: var(--red); }
.stat-card.success::before { background: var(--green); }
.stat-card.warning::before { background: var(--yellow); }
.stat-card.info::before    { background: var(--blue); }

.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}

.stat-card.danger  .stat-value { color: var(--red); }
.stat-card.success .stat-value { color: var(--green); }
.stat-card.warning .stat-value { color: var(--yellow); }
.stat-card.info    .stat-value { color: var(--blue); }

.stat-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================================
   ALERT BANNER
   ============================================================ */
.alert {
    padding: 10px 16px;
    margin-bottom: 16px;
    border-left: 4px solid var(--yellow);
    background: rgba(210, 153, 34, 0.1);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert.danger {
    border-left-color: var(--red);
    background: rgba(248, 81, 73, 0.1);
}

.alert-icon { font-size: 14px; }
.alert-text { flex: 1; }
.alert strong { color: var(--accent); }

/* ============================================================
   TABLES
   ============================================================ */
.data-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 16px;
}

.data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.data-table-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-table th {
    padding: 8px 12px;
    text-align: left;
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }

.data-table td a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.data-table td a:hover { text-decoration: underline; }

/* Outstanding warrant highlight */
tr.outstanding-warrant td { border-left: 3px solid var(--red); }
tr.outstanding-warrant td:first-child { padding-left: 9px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 2px;
}

.badge-active       { background: rgba(63,185,80,0.15);   color: var(--green);  border: 1px solid var(--green); }
.badge-on-trial     { background: rgba(88,166,255,0.15);  color: var(--blue);   border: 1px solid var(--blue); }
.badge-reserved     { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid var(--purple); }
.badge-finalised    { background: rgba(63,185,80,0.1);    color: var(--green);  border: 1px solid rgba(63,185,80,0.4); }
.badge-struck       { background: rgba(139,148,158,0.15); color: var(--text-secondary); border: 1px solid var(--border); }
.badge-warrant      { background: rgba(248,81,73,0.15);   color: var(--red);    border: 1px solid var(--red); }

.badge-criminal     { background: rgba(248,81,73,0.12);   color: var(--red); }
.badge-civil        { background: rgba(88,166,255,0.12);  color: var(--blue); }
.badge-family       { background: rgba(210,153,34,0.12);  color: var(--yellow); }
.badge-small-claims { background: rgba(57,197,207,0.12);  color: var(--cyan); }

.badge-arrest       { background: rgba(248,81,73,0.15);   color: var(--red);    border: 1px solid var(--red); }
.badge-search       { background: rgba(210,153,34,0.15);  color: var(--yellow); border: 1px solid var(--yellow); }
.badge-attachment   { background: rgba(88,166,255,0.15);  color: var(--blue);   border: 1px solid var(--blue); }
.badge-eviction     { background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid var(--purple); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-bright); }

.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color: #000; }

.btn-danger {
    background: transparent;
    color: var(--red);
    border-color: var(--red);
}
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-sm { padding: 4px 10px; font-size: 10px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 16px;
}

.form-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.form-group { display: flex; flex-direction: column; gap: 4px; }

.form-group.full-width { grid-column: 1 / -1; }

label {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
select,
textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 80px; resize: vertical; }
select option { background: var(--bg-secondary); }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

.filter-label {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.filter-input {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    outline: none;
}

.filter-input:focus { border-color: var(--accent); }

/* ============================================================
   CASE DETAIL
   ============================================================ */
.case-header {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    padding: 16px 20px;
    margin-bottom: 16px;
    position: relative;
}

.case-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--accent);
}

.case-number { font-size: 20px; font-weight: 900; color: var(--accent); }
.case-parties { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.case-meta { font-size: 11px; color: var(--text-secondary); margin-top: 8px; display: flex; gap: 20px; flex-wrap: wrap; }
.case-meta-item .meta-label { color: var(--accent); font-size: 10px; }
.case-meta-item .meta-value { color: var(--text-primary); }

/* ============================================================
   COURT ROLL GRID
   ============================================================ */
.roll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.roll-column {
    background: var(--bg-card);
    border: 1px solid var(--border);
    overflow: hidden;
}

.roll-column-header {
    background: var(--bg-secondary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roll-column-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.roll-officer {
    font-size: 10px;
    color: var(--text-secondary);
}

.roll-matter {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 11px;
}

.roll-matter:last-child { border-bottom: none; }
.roll-matter.criminal-row { background: rgba(248,81,73,0.04); }
.roll-matter.civil-row    { background: rgba(88,166,255,0.04); }
.roll-matter.family-row   { background: rgba(210,153,34,0.04); }

.roll-time {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 45px;
    white-space: nowrap;
}

.roll-matter-content { flex: 1; min-width: 0; }
.roll-case-number { font-weight: 700; color: var(--accent); font-size: 11px; }
.roll-parties { color: var(--text-secondary); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-matter-text { color: var(--text-primary); font-size: 10px; }

/* ============================================================
   PUBLIC SEARCH
   ============================================================ */
.public-search-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.public-header {
    text-align: center;
    margin-bottom: 32px;
}

.public-header h1 {
    font-size: 22px;
    font-weight: 900;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.public-header p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.search-bar {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
}

.search-bar input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-right: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
}

.search-bar button {
    padding: 12px 24px;
    background: var(--accent);
    color: #000;
    border: 2px solid var(--accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.search-bar button:hover { background: var(--accent-bright); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    width: 400px;
    padding: 0;
    overflow: hidden;
}

.login-header {
    background: var(--accent);
    color: #000;
    padding: 20px 24px;
    text-align: center;
}

.login-header h1 {
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.login-header p {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.8;
}

.login-body { padding: 24px; }

.login-body .form-group { margin-bottom: 14px; }
.login-body label { display: block; font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 700; }
.login-body input { width: 100%; padding: 9px 12px; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; outline: none; }
.login-body input:focus { border-color: var(--accent); }

.login-btn {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #000;
    border: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

.login-btn:hover { background: var(--accent-bright); }

.login-error {
    background: rgba(248,81,73,0.1);
    border: 1px solid var(--red);
    color: var(--red);
    padding: 8px 12px;
    font-size: 11px;
    margin-bottom: 14px;
}

/* ============================================================
   DASHBOARD MINI PANELS
   ============================================================ */
.mini-panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mini-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 12px;
}

.mini-panel-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.mini-panel-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 3px 0;
    color: var(--text-secondary);
}

.mini-panel-stat .value { color: var(--text-primary); font-weight: 700; }

/* ============================================================
   SCROLL & MISC
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-yellow  { color: var(--yellow); }
.text-blue    { color: var(--blue); }
.text-muted   { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.success-msg {
    background: rgba(63,185,80,0.1);
    border-left: 3px solid var(--green);
    padding: 8px 14px;
    font-size: 12px;
    color: var(--green);
    margin-bottom: 14px;
}

/* Two-panel layout */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .two-col-grid { grid-template-columns: 1fr; }
    .roll-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}