@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');

:root {
    /* Minimal graphite theme */
    --bg-image: none;
    --page-bg: #111315;
    --bg-overlay: #111315;
    --surface-1: #171a1e;
    --surface-2: #1c2025;
    --surface-3: #22272d;
    --border-color: #2b3037;
    --border-strong: #3a414a;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-header: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-color: #f1f3f5;
    --text-muted: #929aa5;
    --input-bg: #181b20;
    --input-border: 1px solid #30363e;
    --btn-primary-bg: #d9dee5;
    --btn-text: #15181c;
    --card-bg: #181b20;
    --card-border: 1px solid #2b3037;
    --card-shadow: none;
    --card-radius: 10px;

    --sidebar-bg: #14171a;
    --sidebar-width: 226px;
    --sidebar-collapsed-width: 64px;
    --nav-item-hover: #20242a;
    --accent-color: #91a7bf;
    --success-color: #69c493;
    --warning-color: #d7a64a;
    --danger-color: #d7787d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background: var(--page-bg);
    background-image: none;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* --- Login Page Specific --- */
.login-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: 3rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--card-shadow);
    text-align: center;
    backdrop-filter: blur(10px);
    margin: auto;
    /* Centered in flex body */
    position: relative;
    z-index: 10;
}

/* Headers */
h1 {
    font-family: var(--font-header);
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

p.subtitle {
    margin-bottom: 2rem;
    opacity: 0.8;
}

/* Forms */
.form-group {
    margin-bottom: 1.2rem;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: 8px;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
}

input:focus {
    outline: none;
    border-color: #8b5cf6;
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 0.9rem;
    background: var(--btn-primary-bg);
    color: var(--btn-text);
    border: none;
    border-radius: 50px;
    font-family: var(--font-header);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Google Auth */
.divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    opacity: 0.6;
    font-size: 0.72rem;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}

.divider span {
    padding: 0 10px;
}

.btn-google {
    width: 100%;
    padding: 0.8rem;
    background: white;
    color: #333;
    border-radius: 50px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: transform 0.2s ease;
}

.btn-google:hover {
    background: #f1f1f1;
}

.btn-google img {
    width: 20px;
    height: 20px;
}

/* Theme Switcher */

.theme-label.active {
    color: #4ade80;
}

/* --- Dashboard Layout --- */
.dashboard-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
}

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: var(--card-border);
    display: flex;
    flex-direction: column;
    padding: 20px;
    backdrop-filter: blur(10px);
    transition: width 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease;
}

html.sidebar-collapsed .sidebar, body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    flex-basis: var(--sidebar-collapsed-width);
    padding: 20px 10px;
}

.content-area {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
}

/* Sidebar Nav */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative;
    padding-right: 38px;
}
.sidebar-header h2 {
    font-family: var(--font-header);
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 0;
    white-space: nowrap;
}

.sidebar-collapse-btn {
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 900;
}

.sidebar-collapse-btn:hover {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.12);
}

html.sidebar-collapsed .sidebar-header, body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding-right: 0;
}

html.sidebar-collapsed .sidebar-header h2, body.sidebar-collapsed .sidebar-header h2, html.sidebar-collapsed .btn-face, body.sidebar-collapsed .btn-face {
    display: none;
}

html.sidebar-collapsed .sidebar-collapse-btn, body.sidebar-collapsed .sidebar-collapse-btn {
    position: static;
    transform: none;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    font-weight: 500;
}

.nav-item:hover, .nav-item.active {
    background: var(--nav-item-hover);
    transform: translateX(5px);
}

.nav-item .icon {
    margin-right: 12px;
    font-size: 1.2rem;
}

html.sidebar-collapsed .nav-item, body.sidebar-collapsed .nav-item {
    justify-content: center;
    min-height: 46px;
    padding: 12px 0;
    font-size: 0;
}

html.sidebar-collapsed .nav-item:hover, html.sidebar-collapsed .nav-item.active, body.sidebar-collapsed .nav-item:hover, body.sidebar-collapsed .nav-item.active {
    transform: none;
}

html.sidebar-collapsed .nav-item .icon, body.sidebar-collapsed .nav-item .icon {
    margin-right: 0;
    font-size: 1.25rem;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-logout {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    cursor: pointer;
    border-radius: 6px;
    font-family: var(--font-main);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

html.sidebar-collapsed .user-profile, body.sidebar-collapsed .user-profile {
    justify-content: center;
}

.user-info {
    font-size: 0.9rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
}

.avatar {
    width: 40px;
    height: 40px;
    background: var(--btn-primary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--btn-text);
}

html.sidebar-collapsed .user-info, body.sidebar-collapsed .user-info, html.sidebar-collapsed .btn-logout, body.sidebar-collapsed .btn-logout {
    display: none;
}

/* --- Views --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.view-section {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: var(--card-shadow);
}

/* Charts */

.bar {
    width: 40px;
    background: var(--btn-primary-bg);
    border-radius: 5px 5px 0 0;
    transition: height 1s ease;
    opacity: 0.8;
}

.bar:hover {
    opacity: 1;
}

/* Stats Grid - Vertically Stacked by Default */

.stat-card .number {
    font-family: var(--font-header);
    font-size: 2.5rem;
    margin: 10px 0;
}

.trend.up {
    color: #4ade80;
}

.trend.down {
    color: #f87171;
}

/* Spreadsheet */

.status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.status.pending {
    background: #facc15;
    color: #713f12;
}

.status.booked {
    background: #4ade80;
    color: #14532d;
}

.status.cancelled {
    background: #f87171;
    color: #7f1d1d;
}

/* Hall of Fame */

.achievement.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

/* Nails specific to medieval stats */

/* --- Admin & Modals --- */
html.sidebar-prefs-pending .sidebar-nav, body.sidebar-prefs-pending .sidebar-nav {
    visibility: hidden;
}

.admin-only {
    display: none !important;
}

body.is-admin .admin-only {
    display: flex !important;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--bg-overlay);
    margin: 5% auto;
    padding: 0;
    border: var(--card-border);
    border-radius: var(--card-radius);
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* A modal's Cancel/Save pair.
   .btn-primary is sized for the login form's only button - full width, a pill
   radius, a larger display font - so beside .btn-secondary the two matched on
   nothing: different width, height, corners and type. Here they are one
   control each, so they are shaped alike and differ only in weight. */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.modal-actions.centered {
    justify-content: center;
}

.modal-actions .btn-primary,
.modal-actions .btn-secondary {
    width: auto;
    min-width: 130px;
    margin: 0;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

/* .btn-secondary carries a border and .btn-primary does not, which left the
   two 2px apart in height. A transparent one costs nothing and lines them up. */
.modal-actions .btn-primary {
    border: 1px solid transparent;
}

.modal-actions .btn-primary:hover {
    transform: none;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-modal {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.7;
}

.close-modal:hover {
    opacity: 1;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.sidebar-settings-panel {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sidebar-settings-header h3 {
    margin: 0;
}

.sidebar-settings-header p {
    margin: 4px 0 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
}

.sidebar-settings-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sidebar-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font-size: 0.9rem;
}

.posts-section-order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.posts-section-order-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    cursor: grab;
    transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.posts-section-order-row:active {
    cursor: grabbing;
}

.posts-section-order-row.dragging {
    opacity: 0.5;
}

.posts-section-order-row.drag-over {
    border-color: #8ebddd;
    background: rgba(142, 189, 221, 0.12);
}

.posts-section-order-handle {
    color: var(--text-muted, #94a3b8);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -4px;
    user-select: none;
}

.posts-section-order-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.posts-section-order-label small {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: rgba(142, 189, 221, 0.14);
    color: #bcd9ed;
    font-size: 0.76rem;
}

.posts-section-order-actions {
    display: flex;
    gap: 5px;
}

.posts-section-order-actions button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    font: inherit;
    cursor: pointer;
}

.posts-section-order-actions button:hover:not(:disabled) {
    border-color: #8ebddd;
    background: rgba(142, 189, 221, 0.12);
}

.posts-section-order-actions button:disabled {
    opacity: 0.3;
    cursor: default;
}

.posts-section-order-help {
    margin: 10px 0 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
}

@media (max-width: 700px) {
    .sidebar-settings-list {
        grid-template-columns: 1fr;
    }
}

/* Body Medieval Overrides */

/* Forms in Modal */
.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* The blanket `input { width: 100% }` above catches checkboxes too. In a flex
   row that made each one claim the whole width and then shrink by however much
   text sat beside it, so two checkboxes one under the other lined up at
   different places. They size themselves. */
.form-row input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    width: auto;
    margin: 0;
}

/* User Management Layout Fixes */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.add-user-form {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.add-user-form input {
    margin-bottom: 8px;
}

/* User List */
/* User List */
#user-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    color: var(--text-color);
    opacity: 0.7;
}

.btn-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Database Tabs */

.db-tab.active {
    opacity: 1;
    background: var(--btn-primary-bg);
    color: var(--btn-text);
}

/* --- Database View Styles --- */

.agent-tab.active {
    background: var(--accent-color);
    color: #000;
    font-weight: 600;
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

/* Modal specific secondary button to match primary */
.modal .btn-secondary {
    border-radius: 50px;
    padding: 0.9rem 1.5rem;
    font-family: var(--font-header);
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--text-color);
    width: auto;
    /* Allow side-by-side flex behavior */
    min-width: 140px;
    cursor: pointer;
}

.modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Stats Dashboard Improvements */
/* Medieval Override for Modal Secondary */

/* --- VISUAL FIXES --- */

/* Modern Theme Table Borders */

/* Medieval Theme Fixes */

/* --- My Results (Day Sheet) Redesign --- */

/* Day Sheet Component */

/* Transposed Table Styles */

/* Alternating Row Colors (which are actually Columns in this visual, but rows in DOM) */

/* Status Colors */

.status-positive {
    background-color: #dcfce7 !important;
    color: #14532d !important;
}

.status-negative {
    background-color: #fee2e2 !important;
    color: #7f1d1d !important;
}

/* Searchable Status Dropdown */
.status-search-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.status-dropdown-list {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    /* [FIX] Dynamic Overflow Logic: Visible for Grouped (sub-menus), Auto for Search */
    overflow: visible;
    max-height: none;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999999 !important;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    text-align: left;
    border-radius: 8px;
}

.status-dropdown-list.mode-search {
    max-height: 450px;
    overflow-y: auto;
}

.status-option.selected {
    background: #4ade80;
    color: #fff;
}

/* Header Row (Call numbers) */

/* New Post Column (The "Spare" one) */

/* Return List Styling */

@keyframes pulse-red {
    from {
        outline-color: #ff0000;
        box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.4), 0 0 10px rgba(255, 0, 0, 0.6);
    }

    to {
        outline-color: #ff5555;
        box-shadow: inset 0 0 25px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 1);
    }
}

.sub-nav-btn.active {
    opacity: 1;
    color: #4ade80 !important;
    border-bottom: 2px solid #4ade80;
}

/* --- Daily Plans & Stats Styles --- */

/* Active Work Table Theme overrides */

.table-theme-light .transposed-table .field-label {
    background: #e0e0e0 !important;
    color: #000 !important;
    border-right: 2px solid #999 !important;
}

/* Ensure status and selection win in light mode */

.table-theme-light .status-positive {
    background-color: #dcfce7 !important;
    color: #14532d !important;
}

.table-theme-light .status-negative {
    background-color: #fee2e2 !important;
    color: #7f1d1d !important;
}

/* Ensure selection highlight wins over everything in light mode */

/* --- Spreadsheet Selection & Copy --- */

/* --- Database Return List Compact Mode --- */

/* Database Summary Card */

/* Collapse behavior during drag - Matrix/Grid tiles */

body.pos-dragging .pos-card:not(.dragging) {
    display: none !important;
}
body.pos-dragging .pos-card.dragging {
    opacity: 0.08;
    pointer-events: none;
    transform: scale(0.4);
    flex-shrink: 0;
}

/* Fix Active Work View Buttons Highlight (Modern) */
.results-controls .btn-secondary.active {
    background: #4ade80 !important;
    border-color: #4ade80 !important;
    color: white !important;
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
}

/* Agent Selector Dropdown for Windows Visibility */
#my-stats-agent-selector option {
    background-color: #333;
    color: #fff;
}

/* Active Work Agent Selector Dropdown for Windows Visibility */
#active-work-agent-selector option {
    background-color: #333;
    color: #fff;
}

/* Search Footer Layout */

/* Button Styling for Search Footer */

/* Stats Dashboard Improvements */

/* ... existing styles ... */

/* Blue for Current */
#last-companies, #last-contacts {
    color: #94a3b8;
}

/* Purple for New Business */
#new-companies, #new-contacts {
    color: #a78bfa;
}

/* Specific Colors for Context */
#sel-companies, #sel-contacts {
    color: #4ade80;
}

/* Green for Selection */
#sel-ratio {
    color: #facc15;
}

/* Yellow for Ratio */
#cur-companies, #cur-contacts {
    color: #60a5fa;
}

/* Blue for Current */
#last-companies, #last-contacts {
    color: #94a3b8;
}

/* Gray for Past */

/* Entity Detail View (Split Layout) */
/* Entity Detail View (Split Layout) */
#entity-details-container {
    display: none;
    /* Hidden by default */
    flex-direction: row;
    gap: 30px;
    height: auto;
    /* Remove fixed height */
    min-height: 0;
    /* Allow flex children to shrink/scroll */
}

@media (max-width: 900px) {
    #entity-details-container {
        flex-direction: column;
    }
}

/* Profile Card */

/* Touches Chart Container */
#touches-chart-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: none;
    flex-direction: column;
    height: 380px;
    /* Matches height of Profile Card + Touch Summary approx */
    margin-bottom: 20px;
}

.chart-header .view-toggle button.active {
    background: var(--accent-color);
    color: #000;
}

.chart-header .view-toggle button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.profile-field .value {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 500;
}

.profile-field .value .source-tag {
    font-size: 0.75rem;
    color: #a78bfa;
    /* Distinct color for source agent */
    margin-left: 6px;
    font-style: italic;
}

/* Personal Stats Grid */

/* Team Stats Counter (Right Pane Top) */
/* Team Stats Counter (Right Pane Top) */

/* Table Row Backgrounds */

.row-other {
    background-color: rgba(207, 250, 254, 0.1);
    /* Cyan tint */
}

/* History Tables Wrapper */

/* Status Text Colors for Stats */

/* Ensure Team Stats labels are lighter so colored numbers pop */

/* Targeted fix for Edit User Modal Cancel Button */
#edit-user-modal .btn-secondary {
    border-radius: 50px;
    padding: calc(0.9rem - 2px) 1.5rem;
    /* Compensate for 2px border to match btn-primary height */
    font-family: var(--font-header);
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--text-color);
    width: auto;
    min-width: 120px;
    cursor: pointer;
    margin-top: 1rem;
    /* Match btn-primary */
    margin-bottom: 1.5rem;
    /* Match btn-primary */
}

#edit-user-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Active Work Progress Bar */

/* Label removed */

/* Glitter Animation Keyframes */
@keyframes glitter-shine {
    0% {
        background-position: 200% center;
        opacity: 0.5;
    }

    100% {
        background-position: -200% center;
        opacity: 0.5;
    }
}

@keyframes heavenly-pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.5) inset;
    }

    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

/* Glitter Classes */

/* Extended Glitter Tiers */

/* <= 150% - Light Blue */

/* <= 200% - Pink */
/* "Loading Bar" Glowing Gradient Animation */
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Extended Tiers with Gradient Definitions */

/* <= 150% - Light Blue Gradient */

/* <= 200% - Pink Gradient */

/* <= 300% - Bronze Gradient */

/* <= 400% - Silver Gradient */

/* <= 500% - Gold Gradient */

/* > 500% - Heavenly White Gradient */

/* Active Work Progress Bar Animation */

@keyframes progressBarPulse {
    0% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        filter: brightness(1.3);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }
}

/* Loading/Glow effect overlay */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Enhanced Blue Shimmer / Game-UI Style */

@keyframes progressBarPulse {
    0% {
        filter: brightness(1) drop-shadow(0 0 2px rgba(59, 130, 246, 0.3));
    }

    50% {
        filter: brightness(1.4) drop-shadow(0 0 10px rgba(59, 130, 246, 0.8));
    }

    100% {
        filter: brightness(1) drop-shadow(0 0 2px rgba(59, 130, 246, 0.3));
    }
}

/* Shiny Shimmer Overlay - Only active if the container has .active-shimmer */

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }

    /* Full pass in 1.5s (half of 3s) */
    100% {
        transform: translateX(100%);
    }

    /* Remaining 1.5s wait */
}

/* Active Work Dots visualization */

@keyframes aw-dot-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.9;
        filter: brightness(1.3);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes aw-dot-aura {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--aw-dot-aura-scale));
        opacity: 0;
    }
}

/* --- New 10-Tier Progress Bar System --- */

/* Metallic Gradients */

@keyframes blink-red {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(255, 0, 0, 0.5);
    }

    100% {
        background-color: transparent;
    }
}

/* Phone Type Modal (Premium Design) */

#phone-type-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
    letter-spacing: -0.02em;
}

#phone-type-message {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 40px;
}

.btn-phone-type.office {
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

.btn-phone-type.personal {
    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
    box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
    color: #fff;
}

/* Medieval Override */

/* Status Mode Switcher (Sleek Toggle) */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #4ade80;
}

input:checked+.slider:before {
    transform: translateX(18px);
}

/* Grouped Status Menu Styles */

@keyframes fadeInStatusCentered {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* --- Contact Insight Component --- */

/* Left: Input & Info */

#ci-col-index {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none;
    -moz-appearance: textfield;
}

#ci-col-index::-webkit-outer-spin-button, #ci-col-index::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Center: Touchpoint */

/* Right: Badges & Toggle */

/* Reuse status colors if possible */
.ci-badge.status-positive {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
    color: #86efac;
}

.ci-badge.status-negative {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
    color: #fca5a5;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-bottom: 4px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--accent-color);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 20px;
}

.slider.round:before {
    border-radius: 50%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Hide Active Work View Buttons */
#btn-view-day, #btn-view-week, #btn-view-month, #btn-view-all {
    display: none !important;
}

/* ===== POSITIVE RESULTS BOARD (Swim-Lanes) ===== */

/* Board container - vertical stack of rows */

/* Each horizontal swim-lane row */

/* Left label cell */

/* Cards area - scrollable horizontally */

/* Drop-zone highlight while dragging over */

/* Pool drop zone highlight */

/* Individual draggable card */

.pos-card.dragging { opacity: 0.4; transform: scale(0.97); }

/* Route = primary info; wraps to show full origin → destination */

/* Company = secondary, single line truncated */

/* Timer badge — top-right corner (like contact insight badges) */

/* Timer states */
.pos-card-timer.warn {
    color: #f87171;
    border-color: rgba(248,113,113,0.4);
}
.pos-card-timer.critical {
    color: #ff3b3b;
    border-color: rgba(255,59,59,0.6);
    animation: pos-card-blink 0.8s ease-in-out infinite;
}

/* Card frame blink on critical (same visual weight as plan bar 100%) */

@keyframes pos-card-blink {
    0% { box-shadow: none; opacity: 1; }
    50% { box-shadow: 0 0 16px 2px rgba(255,59,59,0.9); opacity: 0.85; }
    100% { box-shadow: none; opacity: 1; }
}

@keyframes pos-card-blink-frame {
    0% { border-color: rgba(255,59,59,0.3); box-shadow: none; }
    50% { border-color: rgba(255,59,59,0.9); box-shadow: 0 0 18px rgba(255,59,59,0.6); }
    100% { border-color: rgba(255,59,59,0.3); box-shadow: none; }
}

/* Global Timer & Refresh Button (Header) */

.pos-global-timer.warn { color: #f87171; border-color: rgba(248,113,113,0.4); }
.pos-global-timer.critical { color: #ff3b3b; border-color: rgba(255,59,59,0.6); animation: pos-card-blink 0.8s ease-in-out infinite; }

/* Global timer badge in the Positive Results header */
.pos-global-timer.warn { color: #f87171; border-color: rgba(248,113,113,0.4); }
.pos-global-timer.critical { color: #ff3b3b; border-color: rgba(255,59,59,0.6); animation: pos-card-blink 0.8s ease-in-out infinite; }

/* Transfer Button */

/* Transfer Table */

/* Slide-in animation for cards after status change */
@keyframes pos-card-slide-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Empty drop zone placeholder text */

/* Collapsed Mode - Hide empty rows by default */
body:not(.pos-dragging) .pos-board.collapsed .pos-row.is-empty {
    display: none;
}

/* Collapsed Mode - Show empty rows compactly when dragging */
body.pos-dragging .pos-board.collapsed {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px 0 20px 0;
}
body.pos-dragging .pos-board.collapsed .pos-row {
    flex-direction: column;
    height: 70px;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}
body.pos-dragging .pos-board.collapsed .pos-row:hover, body.pos-dragging .pos-board.collapsed .pos-row.drag-over {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4) !important;
}
body.pos-dragging .pos-board.collapsed .pos-row-label {
    width: 100%;
    height: 100%;
    border-right: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    white-space: normal;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
    color: #fff;
}
body.pos-dragging .pos-board.collapsed .pos-row .pos-cards-area {
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}
.pos-board.collapsed .pos-card {
    min-height: 38px;
    padding: 16px 8px 6px 8px;
    width: 120px;
}
.pos-board.collapsed .pos-card-company, .pos-board.collapsed .pos-card-type, .pos-board.collapsed .pos-card-status, .pos-board.collapsed .pos-card-comment {
    display: none;
}
.pos-board.collapsed .pos-card-route {
    font-size: 0.7rem;
    line-height: 1.2;
}
.pos-board.collapsed .pos-card-timer {
    top: 2px;
    right: 4px;
    font-size: 0.55rem;
    padding: 0px 4px;
}

/* ==========================================================================
   Minimal graphite interface
   Kept in one section so the visual redesign can be reverted independently.
   ========================================================================== */

body {
    background: var(--page-bg);
    color: var(--text-color);
    letter-spacing: -0.01em;
}

.dashboard-container {
    background: var(--page-bg);
}

.sidebar {
    padding: 16px 12px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    backdrop-filter: none;
}

.sidebar-header {
    min-height: 38px;
    margin-bottom: 18px;
    padding: 0 34px 0 8px;
}

.sidebar-header h2 {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.025em;
}

/* A blanket "hide every nav item except Posts" override used to live here.
   It predated the cull and hid the legacy screens by force - including the
   admin-only Roles link, which body.is-admin could not win back because of
   the !important. The legacy pages are gone now, so the menu is just its
   two real entries and this override would only suppress Roles. */

.sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    border-color: var(--border-color);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
}

.sidebar-collapse-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-color);
}

.nav-item {
    min-height: 40px;
    margin-bottom: 2px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #aab1ba;
    font-size: 0.86rem;
    font-weight: 500;
}

.nav-item:hover {
    border-color: var(--border-color);
    background: var(--surface-1);
    color: var(--text-color);
    transform: none;
}

.nav-item.active {
    border-color: var(--border-color);
    background: var(--surface-2);
    color: var(--text-color);
    transform: none;
}

.nav-item .icon {
    margin-right: 10px;
    font-size: 1rem;
    filter: grayscale(1);
    opacity: 0.72;
}

.nav-item.active .icon, .nav-item:hover .icon {
    opacity: 1;
}

.sidebar-footer {
    padding-top: 14px;
    border-top-color: var(--border-color);
}

.avatar {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--text-color);
    font-size: 0.78rem;
}

.btn-logout {
    border-color: var(--border-color);
    border-radius: 7px;
    color: var(--text-muted);
}

.btn-logout:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--text-color);
}

.content-area {
    padding: 24px;
    background: var(--page-bg);
}

.top-bar {
    margin-bottom: 20px;
}

h1 {
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

h2, h3 {
    letter-spacing: -0.025em;
}

.card, .login-card {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: var(--surface-1);
    box-shadow: none;
    backdrop-filter: none;
}

input, select, textarea {
    border-color: var(--border-color);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--text-color);
    box-shadow: none;
}

input::placeholder, textarea::placeholder {
    color: #707984;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #65778b;
    box-shadow: 0 0 0 3px rgba(145, 167, 191, 0.11);
}

button, .btn-primary, .btn-secondary {
    font-family: var(--font-main);
}

.btn-primary {
    border-radius: 8px;
    background: var(--btn-primary-bg);
    color: var(--btn-text);
    box-shadow: none;
}

.btn-primary:hover {
    filter: brightness(1.04);
    transform: none;
}

.btn-secondary, .modal .btn-secondary {
    border-color: var(--border-color);
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--text-color);
    box-shadow: none;
}

.btn-secondary:hover, .modal .btn-secondary:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.modal {
    background: rgba(8, 10, 12, 0.76);
    backdrop-filter: blur(3px);
}

.modal-content {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-1);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.modal-header {
    padding: 17px 20px;
    border-bottom-color: var(--border-color);
}

.modal-header h2 {
    font-size: 1.15rem;
    font-weight: 650;
}

.close-modal {
    color: var(--text-muted);
    font-size: 24px;
}

.modal-body {
    padding: 18px 20px;
}

table {
    border-collapse: collapse;
}

th {
    background: #15181c;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

td {
    color: #d9dde2;
}

th, td {
    border-color: var(--border-color);
}

tbody tr:hover td {
    background: rgba(255, 255, 255, 0.025);
}

/* Posts: dense, calm cards with color reserved for status and intent. */
.posts-content-area {
    padding-top: 22px;
}

.posts-page {
    padding: 0 8px 24px;
}

.posts-tabs {
    padding: 4px;
    border-color: var(--border-color);
    background: var(--surface-1);
}

.posts-connection-status {
    border-color: #303740;
    background: #181d22;
}

.posts-tab-btn {
    min-height: 36px;
    padding: 7px 14px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.posts-tab-btn.active {
    background: var(--surface-3);
    color: var(--text-color);
}

.posts-load-board, .posts-control-panel-body, .watchlist-card, .my-shipments-panel {
    border-color: var(--border-color);
    border-radius: 10px;
    background: #14171a;
}

.posts-load-board {
    padding: 16px;
}

.posts-section-title {
    font-size: 1rem;
    font-weight: 650;
}

.posts-section-count {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.posts-add-load-btn {
    min-height: 32px;
    padding: 6px 10px;
    border-color: var(--border-strong);
    border-radius: 7px;
    background: #d9dee5;
    color: #15181c;
    font-size: 0.8rem;
    font-weight: 650;
}

.posts-card-grid {
    gap: 10px;
}

.posts-load-card {
    min-height: 154px;
    gap: 10px;
    padding: 13px;
    border-color: var(--border-color);
    border-radius: 9px;
    background: var(--surface-1);
    box-shadow: none;
}

.posts-load-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: none;
}

.posts-load-card[class*="posts-group-color-"] {
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--posts-group-color) 72%, #6b7280);
}

.posts-card-company {
    font-size: 0.82rem;
    font-weight: 600;
    color: #c9ced5;
}

.posts-card-route {
    font-size: 0.98rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.posts-card-meta {
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
}

.posts-card-note {
    padding: 7px 9px;
    border-color: #30363d;
    border-radius: 7px;
    background: #1d2226;
    color: #cfd4da;
    font-size: 0.78rem;
    font-weight: 500;
}

.posts-card-rate {
    font-size: 1rem;
    font-weight: 650;
}

.posts-card-footer {
    grid-template-columns: 92px minmax(0, 1fr);
    border-top-color: var(--border-color);
}

.posts-card-footer-primary {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
}

.posts-card-footer-secondary {
    grid-column: 2;
    grid-row: 2;
}

.posts-card-indicators {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 18px;
}

.posts-card-auto-reply-indicator {
    position: static;
    width: 9px;
    height: 9px;
    border: 1px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

.posts-card-auto-reply-indicator.enabled {
    border-color: #73e7a1;
    background: #3fcf7a;
    box-shadow: 0 0 0 3px rgba(63, 207, 122, 0.12);
}

.posts-card-auto-reply-indicator.missing {
    border-color: #f0ca68;
    background: #d9a82e;
    box-shadow: 0 0 0 3px rgba(217, 168, 46, 0.11);
}

.posts-card-erp-indicator {
    color: #ff666f;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 102, 111, 0.22);
    pointer-events: none;
}

.posts-card-truckstop-indicator {
    color: #f3a24f;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 0 8px rgba(243, 162, 79, 0.24);
    pointer-events: none;
}

.posts-action-btn {
    height: 32px;
    padding: 0 10px;
    border-color: var(--border-color);
    border-radius: 7px;
    background: transparent;
    color: #c7ccd2;
    font-size: 0.76rem;
    font-weight: 600;
}

.posts-action-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
}

.posts-action-btn.auto-reply {
    border-color: rgba(105, 196, 147, 0.28);
    color: #8bd3aa;
}

.posts-action-btn.create-group {
    border-color: rgba(145, 167, 191, 0.32);
    color: #b5c4d3;
}

.posts-action-btn.danger {
    border-color: rgba(215, 120, 125, 0.25);
    color: #e39a9e;
}

.posts-status, .posts-group-badge, .posts-fresh-badge, .posts-card-company.manual-dat-post, .posts-card-company.imported-dat-post, .posts-card-company.imported-erp-post {
    min-width: 0;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
}

.posts-status.posted {
    border-color: rgba(105, 196, 147, 0.25);
    background: rgba(105, 196, 147, 0.08);
    color: #8bd3aa;
}

.posts-status.failed {
    border-color: rgba(215, 120, 125, 0.26);
    background: rgba(215, 120, 125, 0.08);
    color: #e39a9e;
}

.posts-status.pending, .posts-status.unposting, .posts-status.deleting {
    border-color: rgba(215, 166, 74, 0.26);
    background: rgba(215, 166, 74, 0.08);
    color: #dfba70;
}

.posts-card-detail {
    border-color: var(--border-color);
    border-radius: 7px;
    background: #15181c;
}

.posts-card-detail-label, .posts-control-label {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
}

.posts-card-detail-value, .posts-control-value {
    font-weight: 550;
}

html.sidebar-collapsed .sidebar-nav .nav-item[href="posts.html"], body.sidebar-collapsed .sidebar-nav .nav-item[href="posts.html"] {
    justify-content: center;
    min-height: 42px;
    padding: 9px 0;
    font-size: 0;
}

html.sidebar-collapsed .sidebar-nav .nav-item[href="posts.html"] .icon, body.sidebar-collapsed .sidebar-nav .nav-item[href="posts.html"] .icon {
    margin-right: 0;
    font-size: 1rem;
}

/* Graphite depth: restrained cool accents and clearer visual hierarchy. */
.posts-tabs {
    background: #15191e;
}

.posts-tab-btn.active {
    border: 1px solid #34485d;
    background: #263545;
    color: #e8f0f8;
}

.posts-search, .posts-select {
    border-color: #343b44;
    background: #1b2026;
}

.posts-toolbar .btn-secondary {
    background: #1a1f24;
}

.posts-load-board {
    border-color: #292f36;
    background: #101316;
}

#posts-customer-loads-title {
    color: #b8cee2;
}

#posts-bco-loads-title {
    color: #d2b9df;
}

#posts-dat-loads-title {
    color: #d8c298;
}

#posts-unposted-loads-title {
    color: #aeb5bd;
}

#posts-customer-loads .posts-load-card {
    border-left: 2px solid #4f718f;
}

#posts-bco-loads .posts-load-card {
    border-left: 2px solid #79558c;
}

#posts-dat-loads .posts-load-card {
    border-left: 2px solid #8f7650;
}

#posts-dat-loads .posts-load-card.imported-erp-post-card {
    border-color: rgba(215, 91, 98, 0.42);
    border-left: 3px solid #d75b62;
}

#posts-dat-loads .posts-load-card.imported-erp-post-card:hover {
    border-color: rgba(235, 108, 115, 0.68);
    background: #211c20;
}

#posts-unposted-loads .posts-load-card {
    opacity: 0.64;
    border-color: #2d353d;
    border-left: 2px solid #424b55;
    background: #151a1f;
    box-shadow: none;
    transition:
        opacity 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

#posts-unposted-loads .posts-load-card:nth-child(2n) {
    background: #171c21;
}

#posts-unposted-loads .posts-load-card:hover, #posts-unposted-loads .posts-load-card:focus-within {
    opacity: 0.86;
    border-color: #475563;
    background: #1b2228;
}

.posts-card-grid .posts-load-card {
    background: #191e23;
}

.posts-card-grid .posts-load-card:nth-child(2n) {
    background: #1c2127;
}

.posts-card-grid .posts-load-card:hover {
    border-color: #45505c;
    background: #20262d;
}

.posts-card-company {
    color: #aebdcb;
}

.posts-card-route {
    color: #f4f6f8;
}

.posts-card-meta > div:first-child {
    color: #b8c0c9;
}

.posts-card-note {
    padding: 10px 12px;
    border: 1px solid #415568;
    border-left: 4px solid #78a4ca;
    background: #222d38;
    color: #edf3f8;
    font-size: 0.8rem;
    font-weight: 550;
    line-height: 1.45;
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.posts-card-rate {
    color: #f7f8fa;
}

.posts-action-btn.create-group {
    border-color: #3b5269;
    background: #202d3a;
    color: #c4d5e5;
}

.posts-action-btn.auto-reply {
    background: rgba(105, 196, 147, 0.055);
}

.posts-action-btn.danger {
    background: rgba(215, 120, 125, 0.045);
}

.posts-card-rate-row .posts-muted {
    color: #7f8995;
}

@media (max-width: 900px) {
    .content-area {
        padding: 18px;
    }

    .posts-page {
        padding-inline: 0;
    }
}

/* ---------------------------------------------------------------
   Connections - each person's own logins, inside My Profile.
   --------------------------------------------------------------- */
.connections-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 22px 0 16px;
}

.connections-title {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.connections-intro,
.connections-hint {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
}

.connections-intro {
    margin-bottom: 14px;
}

.connections-group {
    margin-bottom: 16px;
}

.connections-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.connections-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.connections-on {
    background: rgba(60, 200, 120, 0.16);
    color: #5fd39b;
}

.connections-off {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.5);
}

.connections-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connections-error {
    color: tomato;
}