/* Polished UI System */
:root {
    /* Legacy Variables (Required for Layout) */
    --legacy-black:#000;
    --legacy-gold:#ffd800;
    --legacy-panel-border:#0d2a45;
    --legacy-blue:#0c2d55;
    --legacy-sidebar-width:215px;
    --legacy-red:#b30000;
    --legacy-grey:#f5f6f8;
    --legacy-link:#003b80;
    --legacy-hover:#0d4f9c;
    --legacy-light-border:#c9d2dc;
    --legacy-table-header:#103a68;
    --legacy-section-header:#0d2a45;
    --legacy-bg:#ffffff;
    --legacy-font-size:12px;

    /* New UI System Variables */
    --font-primary: 'Segoe UI', system-ui, -apple-system, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --ui-navy: #0c2d55;
    --ui-navy-light: #1a3c66;
    --ui-navy-dark: #081f3d;
    --ui-gold: #ffd800;
    --ui-bg-light: #f8f9fa;
    --ui-border: #dee2e6;
    --ui-text-dark: #212529;
    --ui-text-muted: #6c757d;
}

body.legacy-body {
    font-family: var(--font-primary);
    font-size: var(--legacy-font-size);
    background: #e3e8ef;
    margin: 0;
    padding-top: 70px;
    color: var(--ui-text-dark);
}

/* Semantic UI Classes */
.ui-header {
    color: var(--ui-navy);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ui-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
}

.ui-grid-th {
    background-color: var(--ui-navy) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    border: 1px solid var(--ui-navy-dark);
    padding: 4px 6px;
}

.ui-grid-th-light {
    background-color: #f2f6fc !important;
    color: var(--ui-navy) !important;
    font-weight: 600;
    font-size: 11px;
    border: 1px solid #dce4ef;
}

.ui-input-compact {
    /* Inherits base form-control styles but enforces compactness */
    font-family: 'Consolas', 'Monaco', monospace; /* Monospace for data entry */
    font-weight: 500;
}

.ui-card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--ui-border);
    padding: 8px 12px;
}

.ui-card-body {
    padding: 12px;
    background-color: #fff;
}

/* Navigation Categories */
.nav-category {
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    padding: 12px 16px 4px;
    letter-spacing: 0.5px;
}

.nav-item {
    /* Base styles for nav items if not using accordion */
}

.legacy-header {position:fixed; top:0; left:0; right:0; background:linear-gradient(90deg,#000 0%, #111 45%, #1c1c1c 100%); color:var(--legacy-gold); z-index:1030; border-bottom:2px solid var(--legacy-gold); height:70px; display:flex; align-items:center; padding:0 14px; box-shadow:0 2px 6px rgba(0,0,0,0.45);}
.legacy-header::after {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,rgba(255,216,0,0.2), rgba(255,255,255,0.15), rgba(255,216,0,0.2)); pointer-events:none;}
.legacy-header .logo {font-size:26px; font-weight:700; letter-spacing:1px; color:#fff; margin-right:28px; display:flex; align-items:center;}
.legacy-header .logo a.logo-link {display:inline-flex; align-items:center; text-decoration:none;}
.legacy-header .logo img.logo-img {height:46px; width:auto; display:block; object-fit:contain;}
.legacy-header .main-links a {color:var(--legacy-gold); text-decoration:none; font-weight:600; margin-right:26px; font-size:13px; position:relative; display:inline-flex; align-items:center; gap:5px; padding:4px 0;}
.legacy-header .main-links a i {opacity:.85;}
.legacy-header .main-links a:hover {text-decoration:none; color:#ffe257;}
.legacy-header .main-links a::after {content:''; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--legacy-gold); transition:width .25s ease;}
.legacy-header .main-links a:hover::after {width:100%;}
.legacy-header .welcome {flex:1; text-align:center; font-weight:600; font-size:13px;}
.user-menu .user-toggle {color:var(--legacy-gold); text-decoration:none; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px;}
.user-menu .user-toggle:hover {color:#ffe257;}
.user-menu .dropdown-menu {font-size:13px; min-width:170px;}
.user-menu .dropdown-item i {width:16px; text-align:center;}
.user-menu .dropdown-item.text-danger {color:#c62828 !important;}
.user-menu .dropdown-item.text-danger i {color:#c62828;}
.layout {display:flex; align-items:stretch;}
.legacy-sidebar {position:fixed; top:70px; bottom:0; left:0; width:var(--legacy-sidebar-width); background:#fff; border-right:1px solid #999; overflow-y:auto; padding-bottom:60px;}
.main-panel {margin-left:var(--legacy-sidebar-width); padding:8px 12px 40px; width:100%; min-height:calc(100vh - 70px); background:var(--legacy-grey);}
.unsent-box {background:var(--legacy-red); color:#fff; padding:6px 7px; font-size:11px; line-height:14px; border-bottom:3px solid #6a0000;}
.unsent-box a {color:#fff; text-decoration:underline; font-size:10px;}
.menu-section {padding:6px 4px 2px; border-bottom:1px solid #e0e4ea;}
.section-header {background:var(--legacy-section-header); color:#fff; font-size:10px; letter-spacing:.5px; padding:3px 5px; margin:0 0 5px; font-weight:600; text-transform:uppercase;}
.menu-link {display:block; font-size:11px; padding:4px 6px; text-decoration:none; color:#102d55; border-left:3px solid transparent;}
.menu-link.active, .menu-link:hover {background:#dfe7f2; border-left-color:var(--legacy-hover); color:#022c5f;}
.log-links a {display:inline-block; margin:0 4px 4px 0; font-size:10px; background:#f0f4f9; padding:2px 6px; text-decoration:none; color:#0c2d55; border:1px solid #d0d9e3;}
.log-links a:hover {background:#d5e4f5;}
.recent-row {display:flex; justify-content:space-between; font-size:10px; padding:2px 5px; border-bottom:1px dotted #bcc7d2;}
.recent-row .type {font-weight:600; width:30px;}
.recent-row .station {flex:1; text-align:center;}
.recent-row .date {width:42px; text-align:right;}
.recent-empty {font-size:10px; padding:4px 6px; color:#555;}
.admin-panel .menu-link {background:#f8f9fb;}
/* .nav-action styles replaced by PlanB block above */
.menu-disabled {font-size:10px; padding:4px 6px; color:#777;}
.panel-box {background:#fff; border:1px solid var(--legacy-panel-border); margin-bottom:6px;}
.panel-box .panel-header {background:var(--legacy-section-header); color:#fff; padding:6px 8px; font-weight:600; font-size:14px;}
.panel-box .panel-body {padding:10px; background:#fff;}
.table-legacy {width:100%; border-collapse:collapse;}
.table-legacy th {background:var(--legacy-table-header); color:#fff; font-size:11px; padding:4px 6px; border:1px solid #0b2d50;}
.table-legacy td {font-size:11px; padding:4px 6px; border:1px solid #c1ccd7; background:#fff;}
.action-bar.sticky {position:sticky; top:74px; background:#fff; padding:6px 4px; z-index:20; border-bottom:1px solid #c9d2dc;}
.badge-status {font-size:10px; font-weight:600; padding:3px 6px; border-radius:3px;}
.badge-status.DRAFT {background:#999; color:#fff;}
.badge-status.SENT {background:#0a7d2d; color:#fff;}
.badge-status.ERROR {background:#b30000; color:#fff;}
/* Admin Users table full-height layout */
.users-table-wrap thead th {position:sticky; top:0; background:#f8f9fa; z-index:2;}
.users-table-wrap {scrollbar-gutter:stable;}
/* Messages log full-height */
.messages-log-wrap thead th {position:sticky; top:0; background:#f8f9fa; z-index:2;}
.messages-log-wrap {scrollbar-gutter:stable;}
/* Scrollbar styling */
.legacy-sidebar::-webkit-scrollbar {width:6px;} 
.legacy-sidebar::-webkit-scrollbar-track {background:transparent;} 
.legacy-sidebar::-webkit-scrollbar-thumb {background:#e0e4ea; border-radius:3px;} 
.legacy-sidebar::-webkit-scrollbar-thumb:hover {background:#c1ccd7;}

/* Accordion Styling - PlanB Style */
.accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 0;
}
.accordion-button {
    background: transparent !important;
    color: #111 !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    padding: 10px 16px;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
    width: 100%;
}
.accordion-button:not(.collapsed) {
    color: #0c2d55 !important; /* Navy blue */
    background: rgba(12, 45, 85, 0.06) !important;
}
.accordion-button::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: scale(0.8);
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d6efd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body {
    padding: 0;
}

/* Nav Actions - PlanB Style */
.nav-action {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 8px 16px 8px 32px; /* Indented */
    color: #222;
    text-decoration: none;
    border: none;
    border-radius: 0;
    margin: 0;
    background: transparent;
    transition: all 0.2s ease;
    line-height: 1.4;
}
.nav-action i {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    color: #444;
}
.nav-action:hover {
    background: #f0f2f5;
    color: #000;
}
.nav-action.active {
    background: #e7f1ff;
    color: #0d6efd !important;
    font-weight: 600;
    box-shadow: none;
}
.nav-action.active i {
    color: #0d6efd;
}
.nav-action.nav-security.active {
    background: #e7f1ff; /* Override legacy security color */
}
@media (max-width:1000px){.legacy-sidebar{position:static;width:100%;height:auto;border-right:none;display:flex;flex-wrap:wrap;} .main-panel{margin-left:0;} body.legacy-body{padding-top:110px;} .legacy-header{flex-wrap:wrap;height:auto;padding-bottom:8px;} .legacy-header .welcome{order:3;width:100%;margin-top:4px;}}

/* Sidebar Resizer */
.sidebar-resizer {
    width: 8px;
    background: transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    cursor: col-resize;
    z-index: 100;
    transition: background 0.2s;
}

.sidebar-resizer:hover, .sidebar-resizer.active {
    background: var(--legacy-hover);
    opacity: 0.5;
}

/* Accordion Header Icons */
.accordion-button i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    font-size: 14px;
    color: #444;
}
.accordion-button:not(.collapsed) i {
    color: #0c2d55;
}

/* Compact Inputs for Message Builders (Excluding Textareas) */
.builder-form input.form-control-sm,
.builder-form select.form-select-sm {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
}

/* Ultra-compact table cells for data entry grids */
.builder-table th,
.builder-table td,
.pb-data-grid th,
.pb-data-grid td {
    padding: 1px 4px !important;
    vertical-align: middle !important;
}

/* Ensure table inputs are consistently compact (Excluding Textareas) */
.builder-table input.form-control-sm,
.builder-table select.form-select-sm,
.pb-data-grid input.form-control-sm,
.pb-data-grid select.form-select-sm {
    height: 24px !important; /* Increased from 22px */
    min-height: 24px !important;
    padding: 0 2px !important;
    font-size: 11px !important;
    line-height: 22px !important;
    margin: 0 !important;
}

/* Plan B Page Header Title Underline */
.pb-page-header .title {
    border-bottom: 3px solid var(--ui-primary);
    padding-bottom: 4px;
    margin-bottom: 0;
    display: inline-block;
}

/* Plan B Data Grid Header Text Color */
.pb-data-grid thead th {
    color: #222; /* Ensure readability on light backgrounds */
    font-weight: 600;
}

/* Restore Textarea sizing */
.builder-form textarea.form-control-sm,
.builder-table textarea.form-control-sm {
    height: auto !important;
    min-height: 30px; /* Default reasonable min-height */
    padding: 4px !important;
}

/* --- Plan B UI System --- */

/* 1. Page Header (Carrier Style) */
.pb-page-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}
.pb-page-header .icon-box {
    width: 42px;
    height: 42px;
    background: #e7f1ff;
    color: #0d6efd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}
.pb-page-header .title {
    font-size: 20px;
    font-weight: 600;
    color: #0c2d55;
    margin: 0;
    line-height: 1.2;
}
.pb-page-header .actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* 2. Filter Bar / Form Container (Gray Block) */
.pb-section-container {
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.pb-section-container .form-label {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    /* text-transform: uppercase; Removed to allow proper case labels */
    margin-bottom: 4px;
    display: block;
}

/* 3. Data Grid (Clean Style) */
.pb-data-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
    overflow: hidden;
}
.pb-data-grid thead th {
    background: #fff; /* White background per requirement */
    color: #444;
    font-weight: 600;
    font-size: 11px;
    /* text-transform: uppercase; Removed to allow proper case headers */
    padding: 8px 6px;
    border-bottom: 1px solid #e0e4ea;
    border-right: 1px solid #f0f0f0;
    white-space: nowrap;
}
.pb-data-grid thead th:last-child {
    border-right: none;
}
.pb-data-grid tbody td {
    background: #fff;
    padding: 2px !important; /* Tight padding for inputs */
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f8f9fa;
}
.pb-data-grid tbody tr:nth-child(even) td {
    background: #fcfcfd; /* Very subtle alternating row */
}
.pb-data-grid tbody tr:hover td {
    background: #f0f7ff;
}

/* Override builder-table styles for Plan B grids */
.pb-data-grid.builder-table th,
.pb-data-grid.builder-table td {
    vertical-align: middle !important;
}
.pb-data-grid input.form-control-sm,
.pb-data-grid select.form-select-sm {
    border: 1px solid #dee2e6;
    border-radius: 2px;
}
.pb-data-grid input.form-control-sm:focus,
.pb-data-grid select.form-select-sm:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 2px rgba(13,110,253,.15);
}

/* Fix delete row button height in builder tables */
.builder-table .btn-sm {
    height: 24px; /* Match table input height */
    line-height: 1;
    padding: 0;
    width: 24px; /* Make it square */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Adjust font size for the X */
    border-radius: 4px;
}