/* ============================================================================
   JOOT UNIFIED SYSTEM - STYLES
   Industrial / Oil Field Aesthetic
   ============================================================================ */

:root {
    --bg-dark: #111111;
    --bg-card: #1a1a1a;
    --bg-input: #0d0d0d;
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --accent: #9a7b1a;
    --accent-hover: #b8952e;
    --success: #4ecca3;
    --warning: #ffc107;
    --danger: #e94560;
    --info: #4fc3f7;
    --border: #2a2a2a;
    --shadow: 0 4px 20px rgba(0,0,0,0.3);
    --radius: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
}

/* SCREENS */
.screen { display: none; }
.screen.active { display: block; }

/* LOGIN */
.login-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    padding: 3rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    min-width: 320px;
}

.login-logo h1 {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.login-logo p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

#login-form input {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
}

#login-form button {
    width: 100%;
    padding: 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

#login-form button:hover {
    background: var(--accent-hover);
}

.login-hint {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* APP LAYOUT */
#app-screen {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 60px 1fr;
    min-height: 100vh;
}

#app-screen.active {
    display: grid;
}

/* HEADER */
.app-header {
    grid-column: 1 / -1;
    background: var(--bg-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border);
    z-index: 100;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-left h1 {
    color: var(--accent);
    font-size: 1.5rem;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: background 0.2s;
}

.icon-btn:hover {
    background: var(--border);
}

/* SIDEBAR */
.sidebar {
    background: var(--bg-card);
    width: 220px;
    padding: 1rem 0;
    border-right: 1px solid var(--border);
    transition: width 0.3s;
    overflow: hidden;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar ul {
    list-style: none;
}

.sidebar li {
    padding: 1rem 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.2s, border-left 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
}

.sidebar li:hover {
    background: var(--bg-input);
}

.sidebar li.active {
    background: var(--bg-input);
    border-left-color: var(--accent);
    color: var(--accent);
}

/* Sidebar Submenu */
.sidebar .nav-parent {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 !important;
    border-left: 3px solid transparent;
}

.sidebar .nav-parent-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar .nav-parent-header:hover {
    background: var(--bg-input);
}

.sidebar .nav-parent .nav-arrow {
    font-size: 0.6rem;
    margin-left: auto;
    transition: transform 0.2s;
    opacity: 0.6;
}

.sidebar .nav-parent.open .nav-arrow {
    transform: rotate(180deg);
}

.sidebar .nav-parent > ul.nav-submenu {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.15);
    border-left: 2px solid var(--accent);
    margin-left: 1rem;
}

.sidebar .nav-parent.open > ul.nav-submenu {
    display: block;
}

.sidebar .nav-submenu li {
    padding: 0.6rem 1rem 0.6rem 1.5rem;
    font-size: 0.85rem;
    border-left: none;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sidebar .nav-submenu li:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    padding-left: 1.75rem;
}

.sidebar .nav-submenu li.active {
    color: var(--accent);
    background: var(--bg-input);
    font-weight: 500;
}

/* MAIN CONTENT */
#main-content {
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--bg-dark);
}

.view { display: none; }
.view.active { display: block; }

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.view-header h2 {
    font-size: 1.75rem;
}

.view-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.view-actions input, .view-actions select {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
}

/* CUSTOMER PORTAL PREVIEW */
.portal-tab {
    background: transparent;
    border: none;
    color: #888;
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.portal-tab:hover {
    color: #eee;
}

.portal-tab.active {
    color: #9a7b1a;
    border-bottom-color: #9a7b1a;
}

.portal-preview-card {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #9a7b1a;
}

.portal-preview-card h5 {
    color: #eee;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
}

.portal-preview-card p {
    color: #888;
    margin: 0;
    font-size: 0.85rem;
}

.portal-preview-stat {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
}

.portal-preview-stat .value {
    font-size: 2rem;
    font-weight: bold;
    color: #b8952e;
}

.portal-preview-stat .label {
    color: #888;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.portal-preview-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.portal-preview-badge.on-rental { background: #4ecca3; color: #000; }
.portal-preview-badge.reserved { background: #ffc107; color: #000; }
.portal-preview-badge.sent { background: #ffc107; color: #000; }
.portal-preview-badge.paid { background: #4ecca3; color: #000; }
.portal-preview-badge.pending { background: #ffc107; color: #000; }
.portal-preview-badge.overdue { background: #e94560; color: #fff; }

/* BUTTONS */
.btn-primary {
    padding: 0.6rem 1.25rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
}

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

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-sm:hover {
    background: var(--border);
}

/* STATS GRID */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--accent);
}

.stat-card.success { border-left-color: var(--success); }
.stat-card.warning { border-left-color: var(--warning); }
.stat-card.info { border-left-color: var(--info); }

.stat-icon {
    font-size: 2.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* CARDS */
.card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.card h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* WORKFLOW WIDGETS */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.workflow-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

.workflow-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.workflow-card-header h4 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-card-header .workflow-total {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

.workflow-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-input);
    margin-bottom: 0.75rem;
}

.workflow-segment {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
    position: relative;
}

.workflow-segment:first-child {
    border-radius: 6px 0 0 6px;
}

.workflow-segment:last-child {
    border-radius: 0 6px 6px 0;
}

.workflow-segment:only-child {
    border-radius: 6px;
}

.workflow-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.workflow-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.workflow-label:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.workflow-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.workflow-label-count {
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-empty {
    text-align: center;
    padding: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

/* TABLES */
.table-container {
    overflow-x: auto;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    background: var(--bg-input);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

tr:hover {
    background: var(--bg-input);
}

/* STATUS BADGES */
.badge {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-success { background: rgba(78, 204, 163, 0.2); color: var(--success); }
.badge-warning { background: rgba(255, 193, 7, 0.2); color: var(--warning); }
.badge-danger { background: rgba(233, 69, 96, 0.2); color: var(--danger); }
.badge-info { background: rgba(79, 195, 247, 0.2); color: var(--info); }
.badge-rental { background: rgba(154, 123, 26, 0.3); color: #b8952e; font-size: 0.75rem; margin-left: 0.5rem; }

/* ON-RENTAL EQUIPMENT HIGHLIGHTING - removed, status column is now single source of truth */

/* RENTAL STATUS STYLING */
.status-onrental {
    background: rgba(233, 69, 96, 0.2) !important;
    color: var(--danger) !important;
}
.status-offrental {
    background: rgba(78, 204, 163, 0.2) !important;
    color: var(--success) !important;
}
.status-reserved {
    background: rgba(255, 193, 7, 0.2) !important;
    color: var(--warning) !important;
}
.status-invoiced {
    background: rgba(79, 195, 247, 0.2) !important;
    color: var(--info) !important;
}

/* LOCATION BADGES for GPS tracking */
.location-cell {
    text-align: center;
}
.location-badge {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.location-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.location-at_yard {
    background: rgba(78, 204, 163, 0.25);
    color: var(--success);
    border: 1px solid var(--success);
}
.location-on_location {
    background: rgba(233, 69, 96, 0.25);
    color: var(--danger);
    border: 1px solid var(--danger);
}
.location-unknown {
    background: rgba(160, 160, 160, 0.2);
    color: var(--text-secondary);
    border: 1px solid var(--text-secondary);
}
.location-loading {
    background: rgba(79, 195, 247, 0.2);
    color: var(--info);
    border: 1px solid var(--info);
    animation: pulse 1s infinite;
}
.location-subrental {
    background: rgba(79, 195, 247, 0.2);
    color: var(--info);
    border: 1px solid var(--info);
    cursor: default;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* EQUIPMENT SECTIONS - Customer-owned equipment */
.section-header td {
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1rem !important;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.customer-equip-row {
    background: rgba(79, 195, 247, 0.08);
}
.customer-equip-row:hover {
    background: rgba(79, 195, 247, 0.15);
}

/* MECHANICS GRID */
.mechanics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.mechanic-card {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.mechanic-card h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mechanic-card .workload {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.skill-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.skill-bar span {
    width: 80px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.skill-bar .bar {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.skill-bar .bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

/* AI PANEL */
.ai-panel {
    position: fixed;
    right: -400px;
    top: 60px;
    width: 400px;
    height: calc(100vh - 60px);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: right 0.3s;
    z-index: 200;
}

.ai-panel.open {
    right: 0;
}

.ai-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-message {
    padding: 1rem;
    border-radius: var(--radius);
    max-width: 90%;
}

.ai-message.user {
    background: var(--accent);
    align-self: flex-end;
}

.ai-message.assistant {
    background: var(--bg-input);
    align-self: flex-start;
}

.ai-input-container {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
}

.ai-input-container input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
}

.ai-input-container button {
    padding: 0.75rem 1rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

/* AI Message Content */
.ai-message .message-content {
    line-height: 1.5;
}

.ai-message .message-content h3,
.ai-message .message-content h4 {
    margin: 0.5rem 0;
    color: var(--accent);
}

.ai-message .message-content ul,
.ai-message .message-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.ai-message .message-content li {
    margin: 0.25rem 0;
}

.ai-message .message-content code {
    background: rgba(0,0,0,0.3);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.ai-message .message-content pre {
    background: rgba(0,0,0,0.3);
    padding: 0.75rem;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 0.5rem 0;
}

.ai-message .message-content pre code {
    background: none;
    padding: 0;
}

/* Typing Indicator */
.typing {
    display: flex;
    gap: 4px;
    padding: 0.5rem 0;
}

.typing span {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Intent Badge */
.ai-intent-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.1);
}

.ai-intent-badge.high { border-left: 3px solid var(--success); }
.ai-intent-badge.medium { border-left: 3px solid var(--warning); }
.ai-intent-badge.low { border-left: 3px solid var(--text-secondary); }

.intent-type {
    font-weight: 600;
    text-transform: capitalize;
}

.intent-confidence {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

/* Feedback Buttons */
.ai-feedback {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.feedback-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: all 0.2s;
}

.feedback-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

.feedback-submitted {
    color: var(--success);
    font-size: 0.8rem;
}

/* Correction Form */
.correction-form {
    width: 100%;
}

.correction-form textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    resize: vertical;
    font-family: inherit;
    margin-bottom: 0.5rem;
}

.correction-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: var(--accent);
    color: white;
}

.btn-cancel {
    background: var(--border);
    color: var(--text-primary);
}

/* Quick Actions */
.ai-quick-actions {
    padding: 0.5rem;
}

.quick-actions-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.quick-action-btn {
    padding: 0.75rem 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    text-align: center;
    transition: all 0.2s;
}

.quick-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* AI Error */
.ai-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--danger);
}

.retry-btn {
    padding: 0.25rem 0.75rem;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

/* AI Header Actions */
.ai-header-actions {
    display: flex;
    gap: 0.5rem;
}

.ai-header .icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
}

.ai-header .icon-btn:hover {
    color: var(--text-primary);
}

/* MODAL */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 300;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

/* Generic modal (#modal) appears above other modals like rental wizard */
#modal.active {
    z-index: 500;
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
}

.modal-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
}

#modal-body {
    padding: 1.5rem;
}

#modal-body form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#modal-body label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

#modal-body input, #modal-body select, #modal-body textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
}

#modal-body textarea {
    min-height: 100px;
    resize: vertical;
}

/* RENTAL WIZARD */
.wizard-progress {
    display: flex;
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}

.wizard-step {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-dark);
    border-radius: var(--radius);
    transition: all 0.2s;
}

.wizard-step.active {
    background: var(--accent);
    color: white;
}

.wizard-step.completed {
    background: var(--success);
    color: white;
}

.wizard-content {
    padding: 1.5rem;
    min-height: 300px;
}

.wizard-content h4 {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.wizard-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.wizard-footer button {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-success {
    background: var(--success);
    color: var(--bg-dark);
}

.btn-success:hover {
    opacity: 0.9;
}

.btn-link {
    background: none;
    border: none;
    color: var(--info);
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Customer info card */
.customer-info-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
}

.customer-info-card h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.customer-info-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

/* AI suggestion box */
.ai-suggestion {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.1), rgba(233, 69, 96, 0.1));
    border: 1px solid var(--info);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.ai-suggestion::before {
    content: "AI Suggestion: ";
    color: var(--info);
    font-weight: bold;
}

/* Equipment selection list */
.equipment-selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}

.equipment-option {
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.equipment-option:hover {
    border-color: var(--accent);
    background: rgba(108, 99, 255, 0.05);
}

.equipment-option:hover .select-text {
    color: var(--accent);
    font-weight: 600;
}

.equipment-option.selected {
    border-color: var(--success);
    background: rgba(78, 204, 163, 0.15);
    border-width: 2px;
}

.equipment-option-content {
    flex: 1;
}

.equipment-select-indicator {
    text-align: right;
    min-width: 100px;
}

.equipment-option .select-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.equipment-option .selected-text {
    display: none;
    color: var(--success);
    font-weight: 600;
    font-size: 1rem;
}

.equipment-option.selected .select-text {
    display: none;
}

.equipment-option.selected .selected-text {
    display: inline;
}

.equipment-option.other-type {
    opacity: 0.7;
    border-style: dashed;
}

.equipment-option.other-type:hover {
    opacity: 1;
}

.equipment-option.type-match {
    border-left: 3px solid var(--success);
}

.equipment-option.ai-recommended {
    border-color: var(--info);
    position: relative;
}

.equipment-option.ai-recommended::after {
    content: "AI Recommended";
    position: absolute;
    top: -8px;
    right: 10px;
    background: var(--info);
    color: var(--bg-dark);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.equipment-option .machine-id {
    font-weight: bold;
    color: var(--text-primary);
}

.equipment-option .machine-details {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.equipment-option .machine-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.equipment-option .machine-status.available {
    background: rgba(78, 204, 163, 0.2);
    color: var(--success);
}

/* Subrental option */
.subrental-option {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

/* Radio group */
.radio-group {
    display: flex;
    gap: 1.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: auto;
    margin: 0;
}

/* Form rows */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Loading state */
.loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
}

/* BRAIN VIEW */
.brain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.knowledge-item {
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.knowledge-item .category {
    color: var(--accent);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.knowledge-item .confidence {
    color: var(--success);
    font-weight: bold;
}

/* FILTER RESULTS */
#filter-results .filter-item {
    background: var(--bg-card);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

#filter-results .filter-type {
    color: var(--accent);
    font-weight: bold;
}

#filter-results .xref {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#filter-results .xref span {
    background: var(--bg-input);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.filter-machine-info {
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Translation button */
.translate-btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    margin-left: 0.5rem;
    background: var(--info);
    color: var(--bg-dark);
    border: none;
}

.translate-btn:hover {
    background: var(--accent);
    color: white;
}

/* FORM ENHANCEMENTS */
.form-section {
    background: var(--bg-input);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.form-section h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

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

.form-group label {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-danger {
    padding: 0.6rem 1.25rem;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: var(--danger);
    color: white;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.machine-info-box {
    background: var(--bg-dark);
    padding: 0.75rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    margin-top: 0.5rem;
    min-height: 40px;
}

.machine-info-box:empty {
    display: none;
}

/* Make modal wider for complex forms */
.modal-content {
    max-width: 700px;
}

/* SPREADSHEET STYLE TABLE */
.spreadsheet-container {
    overflow-x: auto;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

table.spreadsheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table.spreadsheet th {
    background: var(--bg-input);
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 10;
}

table.spreadsheet td {
    padding: 0;
    border: 1px solid var(--border);
}

table.spreadsheet .cell-input {
    width: 100%;
    padding: 0.5rem 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    box-sizing: border-box;
}

table.spreadsheet .cell-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--bg-input);
}

table.spreadsheet .cell-input.saved {
    background: rgba(78, 204, 163, 0.2);
    transition: background 0.3s;
}

table.spreadsheet .cell-input.error {
    background: rgba(233, 69, 96, 0.2);
}

/* Invoice cell in rental spreadsheet */
.invoice-cell {
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
    text-align: center;
}
.invoice-cell .invoice-link:hover {
    text-decoration: underline;
}

/* Status colors in spreadsheet */
.cell-input.status-onrental { background: rgba(79, 195, 247, 0.2); }
.cell-input.status-out { background: rgba(79, 195, 247, 0.2); }
.cell-input.status-returnedtoyard { background: rgba(78, 204, 163, 0.2); }
.cell-input.status-returned { background: rgba(78, 204, 163, 0.2); }
.cell-input.status-reserved { background: rgba(255, 193, 7, 0.2); }
.cell-input.status-invoiced { background: rgba(156, 39, 176, 0.2); }

/* Subrental rows - blue highlighting like Equipment Keep Up */
.subrental-row {
    background: rgba(33, 150, 243, 0.15) !important;
}

.subrental-row:hover {
    background: rgba(33, 150, 243, 0.25) !important;
}

.subrental-cell {
    color: #2196F3 !important;
    font-weight: 500;
}

/* Subrental filter checkbox */
.subrental-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.subrental-filter input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Shipping sub-rows under parent rentals */
.shipping-sub-row {
    background: rgba(154, 123, 26, 0.08) !important;
    border-left: 3px solid var(--accent) !important;
    font-size: 0.88rem;
}

.shipping-sub-row:hover {
    background: rgba(154, 123, 26, 0.15) !important;
}

.shipping-sub-row td {
    padding: 0.25rem 0.4rem !important;
    color: var(--text-secondary);
}

.shipping-sub-row td:first-child {
    padding-left: 1.5rem !important;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.shipping-sub-row .shipping-type-icon {
    font-weight: 600;
    color: var(--accent);
}

.shipping-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: color 0.15s;
}

.shipping-toggle:hover {
    color: var(--accent);
}

.shipping-count-badge {
    display: inline-block;
    background: var(--accent);
    color: #111;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.3rem;
    vertical-align: middle;
    line-height: 1.3;
}

.shipping-job-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}

.shipping-job-badge.status-complete {
    background: rgba(78, 204, 163, 0.2);
    color: var(--success);
}

.shipping-job-badge.status-pending,
.shipping-job-badge.status-scheduled {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
}

.shipping-job-badge.status-inprogress {
    background: rgba(79, 195, 247, 0.2);
    color: var(--info);
}

.shipping-events-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.shipping-events-section h4 {
    margin-bottom: 1rem;
    color: var(--accent);
}

.shipping-event-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.shipping-event-card .event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.shipping-event-card .event-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

/* Empty rows for live spreadsheet */
.empty-row {
    opacity: 0.7;
}

.empty-row:hover {
    opacity: 1;
}

.empty-row .auto-gen {
    color: var(--text-secondary);
}

/* New row styling */
.new-row {
    background: var(--bg-input);
}

.new-row td {
    padding: 0.25rem;
}

.new-row input,
.new-row select {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.new-row input:focus,
.new-row select:focus {
    border-color: var(--accent);
    outline: none;
}

.auto-gen {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.5rem;
    display: block;
}

.btn-add {
    width: 100%;
    padding: 0.4rem;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: bold;
}

.btn-add:hover {
    background: #3cb88f;
}

.btn-del {
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.5;
}

.btn-del:hover {
    opacity: 1;
}

/* Number inputs in spreadsheet */
table.spreadsheet input[type="number"] {
    text-align: right;
}

table.spreadsheet input[type="date"] {
    font-family: inherit;
}

/* DRAG AND DROP REORDERING */
.drag-handle {
    cursor: grab;
    text-align: center;
    color: var(--text-secondary);
    user-select: none;
    font-size: 1rem;
    padding: 0.5rem 0.25rem !important;
}

.drag-handle:hover {
    color: var(--accent);
    background: var(--bg-input);
}

.drag-handle:active {
    cursor: grabbing;
}

.empty-handle {
    color: var(--border);
}

tr.dragging {
    opacity: 0.5;
    background: var(--accent) !important;
}

tr.drag-over {
    border-top: 3px solid var(--accent) !important;
}

tr.drag-over td {
    border-top: 3px solid var(--accent) !important;
}

/* Insert row button */
.insert-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: 2px;
}

.insert-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* TYPING INDICATOR */
.typing {
    display: flex;
    gap: 4px;
    padding: 0.5rem;
}

.typing::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    #app-screen {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: fixed;
        left: -220px;
        top: 60px;
        height: calc(100vh - 60px);
        z-index: 150;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .ai-panel {
        width: 100%;
        right: -100%;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================================
   FILTER DATABASE STYLES
   ============================================================================ */

.filter-stats-bar {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-stats-bar .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.filter-stats-bar .stat-item .stat-num {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--info);
}

.filter-stats-bar .stat-item.warning .stat-num {
    color: var(--warning);
}

.filter-stats-bar .stat-item .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-tab {
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tab:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.filter-tab-content {
    display: none;
}

.filter-tab-content.active {
    display: block;
}

.filter-search-box {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-search-box input {
    flex: 1;
    padding: 1rem;
    font-size: 1.1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.filter-search-box input:focus {
    border-color: var(--accent);
    outline: none;
}

/* Parts Search Box */
.parts-search-box {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.parts-search-box input {
    flex: 2;
    min-width: 200px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
}

.parts-search-box select {
    flex: 1;
    min-width: 150px;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.parts-search-box input:focus,
.parts-search-box select:focus {
    border-color: var(--accent);
    outline: none;
}

/* Badge styles */
.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-default {
    background: var(--border);
    color: var(--text-primary);
}

.badge-info {
    background: #3498db;
    color: white;
}

.filter-machine-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.filter-machine-header .machine-info h3 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.filter-machine-header .machine-info p {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.filter-machine-header .machine-type {
    color: var(--info);
    font-weight: 500;
}

.filter-machine-header .engine-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.filter-machine-header .machine-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-ai {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-ai:hover {
    transform: scale(1.05);
}

.filter-count {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.filter-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

.filter-table th {
    background: var(--bg-input);
    padding: 1rem;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.filter-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.filter-table tr:hover {
    background: rgba(255,255,255,0.02);
}

.filter-table .oem-part {
    color: var(--accent);
    font-weight: 500;
}

.filter-table .oem-part small {
    color: var(--text-secondary);
    font-weight: normal;
}

.extended-row {
    background: var(--bg-input);
}

.extended-row details {
    cursor: pointer;
}

.extended-row summary {
    color: var(--info);
    font-size: 0.85rem;
}

.extended-xrefs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.extended-xrefs span {
    background: var(--bg-card);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.search-header {
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.extended-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.xref-card {
    background: var(--bg-card);
    padding: 0.75rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    border-left: 3px solid var(--info);
}

.no-filters, .no-results {
    text-align: center;
    padding: 3rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.no-filters p, .no-results p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.ai-result {
    background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
    border: 1px solid rgba(102,126,234,0.3);
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-top: 1rem;
}

.ai-result h4 {
    color: #667eea;
    margin-bottom: 1rem;
}

.loading {
    color: var(--info);
    padding: 2rem;
    text-align: center;
}

.error {
    color: var(--danger);
    padding: 1rem;
    background: rgba(233,69,96,0.1);
    border-radius: var(--radius);
}

/* ============================================================================
   SALES CRM STYLES
   ============================================================================ */

.sales-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sales-stats-grid .stat-card.hot {
    border-left: 4px solid #ff4444;
}

.sales-stats-grid .stat-card.danger {
    border-left: 4px solid var(--danger);
}

/* Sales Tabs */
.sales-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.sales-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.sales-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.sales-tab.active {
    background: var(--bg-card);
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

.sales-tab-content {
    display: none;
}

.sales-tab-content.active {
    display: block;
}

/* ===========================================
   KANBAN PIPELINE BOARD
   =========================================== */
.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.pipeline-stats {
    display: flex;
    gap: 2rem;
}

.pipeline-stat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pipeline-stat strong {
    color: var(--primary);
    font-size: 1.1rem;
}

.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    min-height: 500px;
}

.kanban-column {
    flex: 0 0 260px;
    background: var(--bg-card);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.column-header {
    padding: 0.75rem 1rem;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-bottom: 3px solid;
}

.column-header.lead-stage { border-color: #6B7280; background: rgba(107,114,128,0.1); }
.column-header.qualified-stage { border-color: #3B82F6; background: rgba(59,130,246,0.1); }
.column-header.quoted-stage { border-color: #F59E0B; background: rgba(245,158,11,0.1); }
.column-header.won-stage { border-color: #10B981; background: rgba(16,185,129,0.1); }
.column-header.lost-stage { border-color: #EF4444; background: rgba(239,68,68,0.1); }

.column-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-count {
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.8rem;
}

.column-cards {
    padding: 0.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
}

.kanban-card {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.kanban-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.kanban-card.stale-warning {
    border-left-color: #F59E0B;
}

.kanban-card.stale-critical {
    border-left-color: #EF4444;
}

.kanban-card-company {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.kanban-card-contact {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.kanban-card-value {
    font-weight: 600;
    color: var(--success);
}

.kanban-card-days {
    color: var(--text-muted);
}

.kanban-card-ai {
    margin-top: 0.5rem;
}

.ai-score-badge {
    display: inline-block;
    background: rgba(59,130,246,0.2);
    color: #3B82F6;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.ai-score-badge.high { background: rgba(16,185,129,0.2); color: #10B981; }
.ai-score-badge.medium { background: rgba(245,158,11,0.2); color: #F59E0B; }
.ai-score-badge.low { background: rgba(239,68,68,0.2); color: #EF4444; }

/* Kanban drag-over and empty states */
.column-cards.drag-over {
    background: rgba(59,130,246,0.1);
    border: 2px dashed var(--primary);
    border-radius: 6px;
}

.kanban-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.lead-company {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.kanban-card-equipment {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(59,130,246,0.1);
    border-radius: 4px;
    display: inline-block;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.kanban-card-prob {
    color: var(--text-secondary);
}

.kanban-card-followup {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.kanban-card-followup.overdue {
    color: #EF4444;
    font-weight: 600;
}

/* Pipeline header */
.pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.pipeline-stats {
    display: flex;
    gap: 2rem;
}

.pipeline-stat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pipeline-stat strong {
    color: var(--primary);
}

/* Contract Intelligence */
.contracts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
}

.contracts-stats {
    display: flex;
    gap: 2rem;
}

.contract-stat {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.contract-stat strong {
    color: var(--primary);
}

.contracts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contract-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 4px solid var(--border);
}

.contract-card.high-priority {
    border-left-color: #EF4444;
}

.contract-card.medium-priority {
    border-left-color: #F59E0B;
}

.contract-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.contract-card-title {
    font-weight: 600;
    color: var(--text-primary);
}

.contract-card-priority {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.contract-card-priority.high { background: rgba(239,68,68,0.2); color: #EF4444; }
.contract-card-priority.medium { background: rgba(245,158,11,0.2); color: #F59E0B; }
.contract-card-priority.low { background: rgba(59,130,246,0.2); color: #3B82F6; }

.contract-card-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.contract-card-equipment {
    font-size: 0.8rem;
    color: var(--info);
    margin-bottom: 0.75rem;
}

.contract-card-actions {
    display: flex;
    gap: 0.5rem;
}

/* Follow-ups Sections */
.followups-section {
    margin-bottom: 1.5rem;
}

.section-title {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.section-title.danger {
    border-left: 4px solid var(--danger);
}

.section-title.warning {
    border-left: 4px solid var(--warning);
}

/* ============================================================================
   AI-POWERED DAILY SCHEDULE STYLES
   ============================================================================ */

.ai-schedule-header {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.schedule-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.schedule-title-row h3 {
    margin: 0;
    color: var(--text-primary);
}

.schedule-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.summary-stat {
    background: var(--bg-input);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.summary-stat strong {
    color: var(--accent);
    font-size: 1.2rem;
    margin-right: 0.25rem;
}

.schedule-section {
    margin-bottom: 1.5rem;
}

.section-header {
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    border-left: 4px solid var(--border);
}

.section-header.hot {
    border-left-color: #EF4444;
    background: linear-gradient(90deg, rgba(239,68,68,0.15) 0%, var(--bg-card) 100%);
}

.section-header.cold {
    border-left-color: #6B7280;
}

.section-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: -0.5rem 0 0.75rem 1rem;
}

.schedule-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.schedule-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 4px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.schedule-card.hot { border-left-color: #EF4444; }
.schedule-card.warm { border-left-color: #F59E0B; }
.schedule-card.cold { border-left-color: #6B7280; }

.schedule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.schedule-card-company {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.schedule-card-badges {
    display: flex;
    gap: 0.5rem;
}

.temp-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.temp-badge.hot { background: rgba(239,68,68,0.2); color: #EF4444; }
.temp-badge.warm { background: rgba(245,158,11,0.2); color: #F59E0B; }
.temp-badge.cold { background: rgba(107,114,128,0.2); color: #9CA3AF; }

.west-texas-badge {
    background: rgba(59,130,246,0.2);
    color: #3B82F6;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.schedule-card-action {
    background: var(--bg-input);
    padding: 0.75rem;
    border-radius: 6px;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.schedule-card-action strong {
    color: var(--accent);
    display: block;
    margin-bottom: 0.25rem;
}

.schedule-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.schedule-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.priority-section {
    background: linear-gradient(180deg, rgba(239,68,68,0.1) 0%, transparent 100%);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.nurture-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
}

.cold-cards .schedule-card {
    opacity: 0.8;
}

.nurture-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.cadence-info {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 2rem;
}

.cadence-info h4 {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.cadence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.cadence-card {
    padding: 1rem;
    border-radius: 6px;
    background: var(--bg-input);
    border-left: 4px solid;
}

.cadence-card strong {
    display: block;
    margin-bottom: 0.5rem;
}

.cadence-card p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cadence-card.hot-card { border-left-color: #EF4444; }
.cadence-card.warm-card { border-left-color: #F59E0B; }
.cadence-card.cold-card { border-left-color: #6B7280; }

/* Touchpoint Progress */
.touchpoint-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.touchpoint-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.touchpoint-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width 0.3s;
}

.touchpoint-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Leads Grid */
.leads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.lead-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 4px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.lead-card:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow);
}

.lead-card.hot {
    border-left-color: #ff4444;
}

.lead-card.warm {
    border-left-color: var(--warning);
}

.lead-card.active {
    border-left-color: var(--info);
}

.lead-card.cold {
    border-left-color: #666;
}

.lead-card.overdue {
    border-left-color: var(--danger);
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { border-left-color: var(--danger); }
    50% { border-left-color: rgba(233,69,96,0.5); }
}

.lead-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.lead-company {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.lead-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.lead-status.hot { background: rgba(255,68,68,0.2); color: #ff4444; }
.lead-status.warm { background: rgba(255,193,7,0.2); color: var(--warning); }
.lead-status.active { background: rgba(79,195,247,0.2); color: var(--info); }
.lead-status.cold { background: rgba(128,128,128,0.2); color: #888; }
.lead-status.won { background: rgba(78,204,163,0.2); color: var(--success); }
.lead-status.lost { background: rgba(233,69,96,0.2); color: var(--danger); }

.lead-contact {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.lead-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.lead-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lead-notes {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.days-overdue {
    color: var(--danger);
    font-weight: 600;
}

/* Daily Schedule */
.daily-schedule {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.schedule-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.schedule-header h3 {
    min-width: 200px;
    text-align: center;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
}

.btn-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.archive-btn {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
    font-weight: bold;
}

.archive-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
}

/* Right-click context menu */
.context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10000;
    min-width: 160px;
    padding: 4px 0;
}

.context-menu-item {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

.context-menu-item:hover {
    background: var(--accent);
    color: white;
}

.context-menu-delete {
    color: #f87171;
}

.context-menu-delete:hover {
    background: #dc2626;
    color: white;
}

.context-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.actions-cell {
    text-align: center;
    padding: 2px !important;
}

.interactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.interaction-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    border-left: 3px solid var(--info);
}

.interaction-item.visit { border-left-color: var(--success); }
.interaction-item.phone { border-left-color: var(--warning); }
.interaction-item.email { border-left-color: var(--info); }

.interaction-time {
    font-weight: 600;
    color: var(--accent);
    min-width: 60px;
}

.interaction-details {
    flex: 1;
}

.interaction-company {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.interaction-notes {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ============================================================================
   CRM ANALYTICS STYLES
   ============================================================================ */

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.analytics-header h3 {
    color: var(--text-primary);
}

.analytics-period-selector select {
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analytics-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.analytics-card h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-box {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 6px;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analytics-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.analytics-section h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.stage-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stage-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stage-label {
    width: 80px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stage-bar-container {
    flex: 1;
    height: 24px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.stage-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.stage-bar.lead-bar { background: #6B7280; }
.stage-bar.qualified-bar { background: #3B82F6; }
.stage-bar.quoted-bar { background: #F59E0B; }
.stage-bar.won-bar { background: #10B981; }
.stage-bar.lost-bar { background: #EF4444; }

.stage-count {
    width: 40px;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

.top-leads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.top-lead-card {
    background: var(--bg-input);
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid;
}

.top-lead-card.high-score { border-left-color: #10B981; }
.top-lead-card.medium-score { border-left-color: #F59E0B; }
.top-lead-card.low-score { border-left-color: #EF4444; }

.top-lead-info {
    flex: 1;
}

.top-lead-company {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.top-lead-details {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.top-lead-score {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    min-width: 50px;
    text-align: center;
}

.top-lead-score.high { color: #10B981; }
.top-lead-score.medium { color: #F59E0B; }
.top-lead-score.low { color: #EF4444; }

/* ============================================================================
   LOGISTICS STYLES
   ============================================================================ */

.logistics-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--card-bg);
    padding-bottom: 0.5rem;
}

.logistics-tab {
    padding: 0.75rem 1.5rem;
    background: var(--card-bg);
    border: none;
    border-radius: 8px 8px 0 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.logistics-tab:hover {
    background: var(--primary);
    color: white;
}

.logistics-tab.active {
    background: var(--primary);
    color: white;
}

.logistics-tab-content {
    display: none;
}

.logistics-tab-content.active {
    display: block;
}

.filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-bar select {
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    min-width: 150px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 8px;
}

.detail-grid > div {
    padding: 0.5rem;
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    margin-right: 0.25rem;
}

.btn-small:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-small.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-pending { background: #ffc107; color: #000; }
.status-scheduled { background: #17a2b8; color: #fff; }
.status-dispatched { background: #6f42c1; color: #fff; }
.status-in-transit { background: #007bff; color: #fff; }
.status-arrived { background: #28a745; color: #fff; }
.status-completed { background: #6c757d; color: #fff; }
.status-active { background: #28a745; color: #fff; }
.status-inactive { background: #dc3545; color: #fff; }

/* Document Type Badges (AP Scanner) */
.doc-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.doc-invoice { background: #1a73e8; color: #fff; }
.doc-receipt { background: #0d9488; color: #fff; }
.doc-statement { background: #d97706; color: #fff; }
.doc-unknown { background: #6b7280; color: #fff; }
.doc-rental_inquiry { background: #e91e63; color: #fff; }
.doc-payment_notice { background: #4caf50; color: #fff; }
.doc-equipment_issue { background: #f44336; color: #fff; }
.doc-parts_shipping { background: #2196f3; color: #fff; }
.doc-vendor_comm { background: #9c27b0; color: #fff; }
.doc-insurance_cert { background: #795548; color: #fff; }
.doc-general { background: #607d8b; color: #fff; }
.doc-spam { background: #9e9e9e; color: #fff; }

/* AP Scanner status badges */
.status-parsing { background: #17a2b8; color: #fff; }
.status-parsed { background: #28a745; color: #fff; }
.status-matched { background: #6f42c1; color: #fff; }
.status-created { background: #9a7b1a; color: #fff; }
.status-rejected { background: #dc3545; color: #fff; }
.status-error { background: #dc3545; color: #fff; }

/* Email Intelligence */
.intel-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.intel-type-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    background: var(--bg-input, #0d0d0d);
    border: 1px solid var(--border, #2a2a2a);
    font-size: 0.8rem;
}
.intel-type-chip .count {
    font-weight: 700;
    color: var(--accent, #9a7b1a);
}
.review-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.review-card .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.review-card .review-summary {
    color: var(--text-secondary, #a0a0a0);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.review-card .review-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.review-card .review-actions button {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sales-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .leads-grid {
        grid-template-columns: 1fr;
    }

    .sales-tabs {
        flex-wrap: wrap;
    }

    .logistics-tabs {
        flex-wrap: wrap;
    }

    .filter-bar {
        flex-direction: column;
    }

    .filter-bar select {
        width: 100%;
    }
}


/* ============================================================================
   ARCHIVE VIEW STYLES
   ============================================================================ */

.archive-stats {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.archive-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.archive-controls select {
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
}

#archive-page-info {
    color: var(--text-secondary);
}

/* Status badges for archive */
.badge-returned-to-yard, .badge-invoiced, .badge-completed {
    background: var(--success);
}

.badge-archived {
    background: #6c757d;
}

.restore-btn {
    background: var(--info);
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
}

.restore-btn:hover {
    opacity: 0.8;
}

.complete-btn {
    background: var(--success);
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.complete-btn:hover {
    opacity: 0.8;
}

/* Import modal tabs */
.import-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#file-drop-zone.dragover {
    border-color: var(--success) !important;
    background: rgba(74, 222, 128, 0.1) !important;
}

.cell-input.saved {
    background: rgba(74, 222, 128, 0.2) !important;
    transition: background 0.3s;
}

.cell-input.error {
    background: rgba(233, 69, 96, 0.2) !important;
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: var(--radius);
    color: white;
    font-weight: 500;
    z-index: 10000;
    animation: toastSlideIn 0.3s ease;
    box-shadow: var(--shadow);
}

.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--info); }
.toast-warning { background: var(--warning); color: #111111; }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Row error state */
.save-error {
    background-color: rgba(233, 69, 96, 0.1) !important;
}

/* ============================================================================
   NAVIGATION DIVIDER
   ============================================================================ */
.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1rem;
    padding: 0 !important;
    cursor: default !important;
}

.nav-divider:hover {
    background: var(--border) !important;
}

/* ============================================================================
   ACCOUNTING MODULE STYLES
   ============================================================================ */

/* Summary Grid for Dashboard */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.summary-card h3 {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-card .amount {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.summary-card .amount.positive {
    color: var(--success);
}

.summary-card .amount.negative {
    color: var(--danger);
}

.summary-card .amount.neutral {
    color: var(--info);
}

.summary-card .sub-info {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Quick Actions for Accounting */
.quick-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.quick-action-btn {
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Recent Activity Card */
.recent-activity {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.recent-activity h3 {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.activity-item .description {
    color: var(--text-primary);
}

.activity-item .meta {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ============================================================================
   BANKING MODULE STYLES
   ============================================================================ */

/* Banking Tabs */
.banking-tabs, .payroll-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.banking-tab, .payroll-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: all 0.2s;
    font-weight: 500;
}

.banking-tab:hover, .payroll-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.banking-tab.active, .payroll-tab.active {
    background: var(--accent);
    color: white;
}

.banking-tab-content, .payroll-tab-content {
    display: none;
}

.banking-tab-content.active, .payroll-tab-content.active {
    display: block;
}

/* Bank Account Cards */
.bank-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.bank-account-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    border-left: 4px solid var(--info);
    cursor: pointer;
    transition: all 0.2s;
}

.bank-account-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.bank-account-card.selected {
    border-left-color: var(--accent);
    background: var(--bg-input);
}

.bank-account-card .account-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.bank-account-card .account-number {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.bank-account-card .account-balance {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

.bank-account-card .account-balance.negative {
    color: var(--danger);
}

/* Transaction List */
.transactions-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.transaction-row {
    display: grid;
    grid-template-columns: 100px 1fr 120px 100px;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.transaction-row:last-child {
    border-bottom: none;
}

.transaction-row:hover {
    background: var(--bg-input);
}

.transaction-date {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.transaction-desc {
    display: flex;
    flex-direction: column;
}

.transaction-desc .payee {
    font-weight: 500;
}

.transaction-desc .category {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.transaction-amount {
    text-align: right;
    font-weight: 600;
}

.transaction-amount.credit {
    color: var(--success);
}

.transaction-amount.debit {
    color: var(--danger);
}

.transaction-status {
    text-align: center;
}

/* Reconciliation View */
.reconciliation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.reconciliation-summary {
    display: flex;
    gap: 2rem;
}

.reconciliation-summary .item {
    text-align: center;
}

.reconciliation-summary .label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.reconciliation-summary .value {
    font-size: 1.25rem;
    font-weight: 600;
}

.reconciliation-summary .value.balanced {
    color: var(--success);
}

.reconciliation-summary .value.unbalanced {
    color: var(--danger);
}

/* Rules List */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rule-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rule-item .rule-info {
    flex: 1;
}

.rule-item .rule-pattern {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.rule-item .rule-action {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.rule-item .rule-actions {
    display: flex;
    gap: 0.5rem;
}

/* ============================================================================
   BANKING AI CATEGORIZATION STYLES
   ============================================================================ */

/* Journal Entries Tab */
.voided-row {
    opacity: 0.5;
    text-decoration: line-through;
}

.detail-table {
    border-collapse: collapse;
}
.detail-table th,
.detail-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.detail-table thead th {
    background: var(--bg-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Status Dots */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #555;
}
.status-dot.categorized { background: var(--success); }
.status-dot.ai-suggested { background: var(--warning); }
.status-dot.uncategorized { background: #555; }

/* Confidence Badges */
.confidence-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}
.confidence-badge.high {
    background: rgba(78, 204, 163, 0.2);
    color: var(--success);
    border: 1px solid rgba(78, 204, 163, 0.4);
}
.confidence-badge.medium {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
    border: 1px solid rgba(255, 193, 7, 0.4);
}
.confidence-badge.low {
    background: rgba(233, 69, 96, 0.2);
    color: var(--danger);
    border: 1px solid rgba(233, 69, 96, 0.4);
}

/* AI Stats Bar */
.banking-ai-stats-bar {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
.ai-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.03);
}
.ai-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ai-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-stat-green .ai-stat-num { color: var(--success); }
.ai-stat-yellow .ai-stat-num { color: var(--warning); }
.ai-stat-gray .ai-stat-num { color: var(--text-secondary); }
.ai-stat-blue .ai-stat-num { color: var(--info); }

/* AI Action Buttons Bar */
.banking-ai-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.btn-ai {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    background: var(--info);
    color: #fff;
}
.btn-ai:hover { background: #3aa3d7; }
.btn-ai:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ai-accept {
    background: var(--success);
}
.btn-ai-accept:hover { background: #3dbb8a; }
.btn-ai-bulk {
    background: #7c5cbf;
}
.btn-ai-bulk:hover { background: #6a4aad; }
.select-all-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    cursor: pointer;
}

/* AI Suggestion Row Highlight */
.ai-suggestion-row {
    background: rgba(255, 193, 7, 0.04);
}
.ai-suggestion-row:hover {
    background: rgba(255, 193, 7, 0.08);
}
.ai-suggestion-text {
    color: var(--warning);
    font-style: italic;
}

/* Category Assignment Display */
.cat-assigned {
    color: var(--success);
    font-weight: 500;
}
.cat-source-tag {
    display: inline-block;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cat-source-rule { background: rgba(79, 195, 247, 0.15); color: var(--info); }
.cat-source-ai, .cat-source-ai_accepted { background: rgba(78, 204, 163, 0.15); color: var(--success); }
.cat-source-manual { background: rgba(160, 160, 160, 0.15); color: var(--text-secondary); }

/* Transaction Row Cells */
.txn-desc-cell div:first-child { font-weight: 500; }
.txn-merchant { font-size: 0.8rem; color: var(--text-secondary); }
.txn-actions-cell {
    white-space: nowrap;
    display: flex;
    gap: 4px;
}
.cat-cell { min-width: 180px; }
.th-checkbox { width: 30px; }
.txn-checkbox { cursor: pointer; }

/* Accept/Reject Buttons */
.btn-accept {
    background: var(--success) !important;
    color: #fff !important;
}
.btn-accept:hover { background: #3dbb8a !important; }
.btn-reject {
    background: transparent !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
    padding: 0.3rem 0.5rem !important;
    min-width: 24px;
}
.btn-reject:hover { background: rgba(233, 69, 96, 0.15) !important; }

/* Badge Variants */
.badge-posted {
    background: rgba(78, 204, 163, 0.15);
    color: var(--success);
    border: 1px solid rgba(78, 204, 163, 0.3);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
}
.badge-reconciled {
    background: rgba(79, 195, 247, 0.15);
    color: var(--info);
    border: 1px solid rgba(79, 195, 247, 0.3);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
}

/* Categorization Modal */
.categorize-modal-content {
    max-width: 500px;
}
.txn-summary {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.9rem;
}
.ai-suggestion-box {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.ai-suggestion-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--warning);
    margin-bottom: 0.4rem;
    font-weight: 700;
}
.ai-suggestion-detail {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.ai-reasoning {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}
.categorize-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.categorize-form label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.categorize-form .form-select {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
}
.categorize-form .form-select optgroup {
    font-weight: 700;
    color: var(--text-secondary);
}
.categorize-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-primary {
    padding: 0.6rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.btn-secondary:hover { background: rgba(255,255,255,0.05); }

/* ============================================================================
   PAYROLL MODULE STYLES
   ============================================================================ */

/* Employee Grid */
.employees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.employee-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    border-left: 4px solid var(--success);
}

.employee-card.contractor {
    border-left-color: var(--warning);
}

.employee-card .employee-name {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.employee-card .employee-title {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.employee-card .employee-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.employee-card .pay-info {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
}

.employee-card .pay-rate {
    font-weight: 600;
    color: var(--success);
}

/* Time Entries */
.time-entries-table {
    width: 100%;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
}

.time-entry-row {
    display: grid;
    grid-template-columns: 120px 150px 100px 80px 80px 1fr 100px;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.time-entry-row.header {
    background: var(--bg-input);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.time-entry-row:hover:not(.header) {
    background: var(--bg-input);
}

/* Payroll Run Card */
.payroll-runs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payroll-run-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payroll-run-card .run-info {
    flex: 1;
}

.payroll-run-card .run-period {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.payroll-run-card .run-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.payroll-run-card .run-totals {
    text-align: right;
}

.payroll-run-card .gross-pay {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--info);
}

.payroll-run-card .net-pay {
    font-size: 1rem;
    color: var(--success);
}

/* Payroll Status Badges */
.payroll-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.payroll-status.draft {
    background: rgba(160, 160, 160, 0.2);
    color: var(--text-secondary);
}

.payroll-status.calculated {
    background: rgba(79, 195, 247, 0.2);
    color: var(--info);
}

.payroll-status.approved {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning);
}

.payroll-status.processed {
    background: rgba(78, 204, 163, 0.2);
    color: var(--success);
}

/* ============================================================================
   REPORTS MODULE STYLES
   ============================================================================ */

.reports-container {
    display: flex;
    gap: 2rem;
}

.report-selector {
    width: 280px;
    flex-shrink: 0;
}

.report-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-item {
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.report-item:hover {
    background: var(--bg-input);
}

.report-item.active {
    border-left-color: var(--accent);
    background: var(--bg-input);
}

.report-item .report-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.report-item .report-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.report-display {
    flex: 1;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    min-height: 500px;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.report-header h3 {
    font-size: 1.25rem;
}

.report-actions {
    display: flex;
    gap: 0.5rem;
}

/* Financial Report Tables */
.financial-table {
    width: 100%;
    border-collapse: collapse;
}

.financial-table th,
.financial-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.financial-table th {
    background: var(--bg-input);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.financial-table .amount-col {
    text-align: right;
    font-family: monospace;
    font-size: 0.95rem;
}

.financial-table .section-header {
    background: var(--bg-dark);
    font-weight: 600;
    color: var(--accent);
}

.financial-table .subtotal-row {
    font-weight: 600;
    background: rgba(255, 255, 255, 0.02);
}

.financial-table .total-row {
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--bg-input);
    border-top: 2px solid var(--border);
}

/* P&L Specific */
.pl-revenue { color: var(--success); }
.pl-expense { color: var(--text-primary); }
.pl-profit { color: var(--success); font-weight: 700; }
.pl-loss { color: var(--danger); font-weight: 700; }

/* Aging Report */
.aging-table .current { color: var(--success); }
.aging-table .days-30 { color: var(--warning); }
.aging-table .days-60 { color: #ff9800; }
.aging-table .days-90 { color: var(--danger); }
.aging-table .over-90 { color: var(--danger); font-weight: 700; }

/* Equipment Profitability */
.profitability-card {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profitability-card .equipment-info {
    flex: 1;
}

.profitability-card .equipment-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.profitability-card .equipment-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.profitability-card .metrics {
    display: flex;
    gap: 2rem;
    text-align: right;
}

.profitability-card .metric {
    display: flex;
    flex-direction: column;
}

.profitability-card .metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.profitability-card .metric-value {
    font-weight: 600;
    font-size: 1.1rem;
}

.profitability-card .metric-value.positive {
    color: var(--success);
}

.profitability-card .metric-value.negative {
    color: var(--danger);
}

/* Subrental Queue */
.subrental-queue-item {
    background: var(--bg-input);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--info);
}

.subrental-queue-item.urgent {
    border-left-color: var(--danger);
    background: rgba(233, 69, 96, 0.1);
}

.subrental-queue-item.warning {
    border-left-color: var(--warning);
}

.subrental-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.subrental-queue-header .vendor {
    font-weight: 600;
}

.subrental-queue-header .days-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.days-badge.urgent {
    background: var(--danger);
    color: white;
}

.days-badge.warning {
    background: var(--warning);
    color: #111111;
}

.days-badge.normal {
    background: var(--text-secondary);
    color: white;
}

.subrental-queue-details {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Report Date Range Picker */
.date-range-picker {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.date-range-picker input[type="date"] {
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .reports-container {
        flex-direction: column;
    }

    .report-selector {
        width: 100%;
    }

    .report-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .report-item {
        flex: 1;
        min-width: 200px;
    }

    .transaction-row {
        grid-template-columns: 80px 1fr 100px;
    }

    .transaction-status {
        display: none;
    }

    .time-entry-row {
        grid-template-columns: 100px 1fr 80px 80px;
    }
}

@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .bank-accounts-grid {
        grid-template-columns: 1fr;
    }

    .employees-grid {
        grid-template-columns: 1fr;
    }

    .payroll-run-card {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .payroll-run-card .run-totals {
        text-align: center;
    }

    .profitability-card {
        flex-direction: column;
        gap: 1rem;
    }

    .profitability-card .metrics {
        width: 100%;
        justify-content: space-around;
    }
}

/* ============================================================================
   AP EMAIL INBOX SCANNER
   ============================================================================ */

.accounting-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}

.accounting-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid transparent;
    color: #888;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
}

.accounting-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.accounting-tab.active {
    color: var(--primary);
    border-color: #333;
    border-bottom-color: var(--bg-dark);
    background: var(--bg-card);
}

.accounting-tab-content {
    display: none;
}

.accounting-tab-content.active {
    display: block;
}

.ap-scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ap-scanner-header h3 {
    margin: 0;
}

.ap-scanner-actions {
    display: flex;
    gap: 0.5rem;
}

.scanner-subtabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    background: rgba(0,0,0,0.2);
    padding: 0.25rem;
    border-radius: 6px;
}

.scanner-subtab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.scanner-subtab:hover {
    color: #fff;
}

.scanner-subtab.active {
    background: var(--primary);
    color: #fff;
}

.scanner-subtab-content {
    display: none;
}

.scanner-subtab-content.active {
    display: block;
}

.config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
}

.config-header p {
    margin: 0;
    color: #888;
}

/* Status badges for scanner */
.status-pending {
    background: #ffc107;
    color: #000;
}

.status-parsing {
    background: #3498db;
    color: #fff;
}

.status-parsed {
    background: #2ecc71;
    color: #fff;
}

.status-matched {
    background: #9b59b6;
    color: #fff;
}

.status-created {
    background: #4ecca3;
    color: #fff;
}

.status-rejected {
    background: #e74c3c;
    color: #fff;
}

.status-error {
    background: #c0392b;
    color: #fff;
}

.status-active {
    background: #4ecca3;
    color: #fff;
}

.status-inactive {
    background: #666;
    color: #fff;
}

.status-running {
    background: #3498db;
    color: #fff;
}

.status-completed {
    background: #4ecca3;
    color: #fff;
}

.status-failed {
    background: #e74c3c;
    color: #fff;
}

/* Small buttons for action columns */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #444;
    color: #fff;
    transition: all 0.2s;
}

.btn-small:hover {
    background: #555;
}

.btn-small.btn-success {
    background: #4ecca3;
}

.btn-small.btn-success:hover {
    background: #3db890;
}

.btn-small.btn-danger {
    background: #e74c3c;
}

.btn-small.btn-danger:hover {
    background: #c0392b;
}

/* Invoice details in modal */
.invoice-details .detail-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #333;
}

.invoice-details .detail-row:last-child {
    border-bottom: none;
}

.invoice-details h4 {
    margin: 0.5rem 0;
    color: var(--primary);
}

/* ============================================================================
   PARTS & SCHEMATICS SYSTEM STYLES
   ============================================================================ */

/* Parts Tabs Navigation */
.parts-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
}

.parts-tab {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: all 0.2s;
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;
}

.parts-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.parts-tab.active {
    background: var(--bg-card);
    color: var(--accent);
}

.parts-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

/* Tab Content */
.parts-tab-content {
    display: none;
}

.parts-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Machine Lookup Section */
.machine-lookup-box {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.machine-lookup-box .form-group {
    flex: 1;
    min-width: 200px;
}

.machine-lookup-box label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.machine-lookup-box input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 1rem;
}

.machine-lookup-box input:focus {
    border-color: var(--accent);
    outline: none;
}

/* Machine Lookup Results */
.machine-lookup-results {
    min-height: 200px;
}

.machine-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.machine-header .machine-info h3 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.machine-header .machine-info p {
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.machine-header .machine-actions {
    display: flex;
    gap: 0.5rem;
}

/* Schematics Section */
.schematics-section,
.parts-section {
    margin-bottom: 2rem;
}

.schematics-section h4,
.parts-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Schematics Grid */
.schematics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.schematic-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.schematic-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.schematic-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #1a1a1a;
}

.schematic-card-info {
    padding: 1rem;
}

.schematic-card-info h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.schematic-card-info p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.schematic-card-info .badge {
    margin-top: 0.5rem;
    display: inline-block;
}

/* Schematic Viewer Modal */
.schematic-viewer {
    background: var(--bg-card);
    border-radius: var(--radius);
    max-width: 95vw;
    max-height: 95vh;
    overflow: hidden;
}

.schematic-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.schematic-viewer-header h3 {
    color: var(--text-primary);
    margin: 0;
}

.schematic-viewer-actions {
    display: flex;
    gap: 0.5rem;
}

.schematic-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0a0a0a;
    min-height: 400px;
    max-height: 70vh;
    overflow: auto;
}

.schematic-image-wrapper {
    position: relative;
    display: inline-block;
}

.schematic-image-wrapper img {
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

/* Hotspots */
.hotspots-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hotspot {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
}

.hotspot-marker {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent), #e67e22);
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    transition: all 0.2s;
    animation: hotspotPulse 2s infinite;
}

.hotspot:hover .hotspot-marker {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 4px 16px rgba(243,156,18,0.5);
}

@keyframes hotspotPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 2px 16px rgba(243,156,18,0.6); }
}

.hotspot-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    min-width: 200px;
    max-width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    z-index: 20;
}

.hotspot:hover .hotspot-tooltip {
    opacity: 1;
    visibility: visible;
}

.hotspot-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-card);
}

.hotspot-tooltip h6 {
    color: var(--accent);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.hotspot-tooltip p {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.hotspot-tooltip .part-number {
    color: var(--text-primary);
    font-weight: 500;
}

/* Schematic Details Panel */
.schematic-details {
    padding: 1rem 1.5rem;
    background: var(--bg-input);
    border-top: 1px solid var(--border);
    max-height: 200px;
    overflow-y: auto;
}

.schematic-details h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.parts-list-table {
    width: 100%;
    border-collapse: collapse;
}

.parts-list-table th {
    text-align: left;
    padding: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.parts-list-table td {
    padding: 0.5rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.parts-list-table tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Serial Breakouts */
.breakout-search-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: end;
}

.breakout-search-box .form-group {
    display: flex;
    flex-direction: column;
}

.breakout-search-box label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.breakout-search-box input,
.breakout-search-box select {
    padding: 0.75rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}

.breakout-search-box input:focus,
.breakout-search-box select:focus {
    border-color: var(--accent);
    outline: none;
}

/* Breakout Cards */
.breakout-results {
    min-height: 200px;
}

.breakout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
}

.breakout-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border-left: 4px solid var(--info);
    transition: all 0.2s;
}

.breakout-card:hover {
    box-shadow: var(--shadow);
}

.breakout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: var(--bg-input);
}

.breakout-card-header h5 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.breakout-card-header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.breakout-serial-range {
    text-align: right;
}

.breakout-serial-range .range {
    color: var(--accent);
    font-weight: 500;
    font-size: 0.9rem;
}

.breakout-serial-range .label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.breakout-parts {
    padding: 1rem;
}

.breakout-parts h6 {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.breakout-parts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.breakout-parts li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.breakout-parts li:last-child {
    border-bottom: none;
}

.breakout-parts .part-num {
    color: var(--accent);
    font-weight: 500;
}

.breakout-parts .part-desc {
    color: var(--text-secondary);
}

.breakout-parts .part-qty {
    color: var(--text-primary);
    font-weight: 500;
}

/* AI Learning Section */
.ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.ai-stat-card {
    background: var(--bg-card);
    padding: 1.25rem;
    border-radius: var(--radius);
    text-align: center;
    border-top: 3px solid var(--info);
}

.ai-stat-card.pending {
    border-top-color: var(--warning);
}

.ai-stat-card.success {
    border-top-color: var(--success);
}

.ai-stat-card.ai {
    border-top-color: #667eea;
}

.ai-stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
}

.ai-stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* AI Review Section */
.ai-review-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ai-review-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hotspot-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hotspot-review-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    align-items: flex-start;
}

.hotspot-review-item img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.hotspot-review-info {
    flex: 1;
}

.hotspot-review-info h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.hotspot-review-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.hotspot-review-actions {
    display: flex;
    gap: 0.5rem;
}

/* Upload Form Styles */
.upload-form {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.upload-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.upload-form .form-group {
    display: flex;
    flex-direction: column;
}

.upload-form label {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.upload-form input,
.upload-form select,
.upload-form textarea {
    padding: 0.75rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.upload-form input:focus,
.upload-form select:focus,
.upload-form textarea:focus {
    border-color: var(--accent);
    outline: none;
}

.upload-form .file-drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-input);
}

.upload-form .file-drop-zone:hover,
.upload-form .file-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(243,156,18,0.05);
}

.upload-form .file-drop-zone p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.upload-form .file-drop-zone .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.upload-form .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Knowledge Base Items */
.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.knowledge-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border-left: 3px solid var(--success);
}

.knowledge-item.ai-generated {
    border-left-color: #667eea;
}

.knowledge-item h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.knowledge-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.knowledge-item .source {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* Part Suggestions */
.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius);
}

.suggestion-item .suggestion-info {
    flex: 1;
}

.suggestion-item .suggestion-info h5 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.suggestion-item .suggestion-info p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.suggestion-item .confidence {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.suggestion-item .confidence.high {
    background: rgba(78,204,163,0.2);
    color: var(--success);
}

.suggestion-item .confidence.medium {
    background: rgba(255,193,7,0.2);
    color: var(--warning);
}

.suggestion-item .confidence.low {
    background: rgba(128,128,128,0.2);
    color: #888;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Loading Spinner for Parts */
.parts-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.parts-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   MANUALS & PDF VIEWER STYLES
   ============================================================================ */

.manuals-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1rem;
    height: calc(100vh - 280px);
    min-height: 500px;
}

.manuals-sidebar {
    background: var(--bg-card);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.manuals-search-box {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.manuals-search-box input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-input);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.manuals-search-box input:focus {
    border-color: var(--accent);
    outline: none;
}

.manuals-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.manual-category {
    margin-bottom: 0.5rem;
}

.manual-category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.manual-category-header:hover {
    background: rgba(255,255,255,0.1);
}

.manual-category-header .arrow {
    transition: transform 0.2s;
}

.manual-category.expanded .arrow {
    transform: rotate(90deg);
}

.manual-category-items {
    display: none;
    padding-left: 1rem;
}

.manual-category.expanded .manual-category-items {
    display: block;
}

.manual-item {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manual-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.manual-item.active {
    background: rgba(243,156,18,0.2);
    color: var(--accent);
}

.manual-item .manual-type {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: var(--border);
    color: var(--text-secondary);
}

.manual-item .manual-type.parts {
    background: rgba(46,204,113,0.2);
    color: var(--success);
}

.manual-item .manual-type.service {
    background: rgba(52,152,219,0.2);
    color: var(--info);
}

.manual-item .manual-type.operators {
    background: rgba(154,123,26,0.2);
    color: var(--accent);
}

/* Manual Type Filter Buttons */
.manuals-type-filter {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.type-filter-btn {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.type-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.type-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* PDF Viewer Container */
.pdf-viewer-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-viewer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pdf-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdf-nav #pdf-page-num {
    width: 50px;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
}

.pdf-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#pdf-zoom-level {
    min-width: 50px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pdf-canvas-container {
    flex: 1;
    overflow: auto;
    background: #2a2a2a;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
    position: relative;
}

#pdf-canvas {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    background: white;
}

.pdf-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-secondary);
}

.pdf-placeholder .icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.pdf-placeholder h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.pdf-scan-results {
    background: var(--bg-input);
    border-top: 1px solid var(--border);
    padding: 1rem;
    max-height: 250px;
    overflow-y: auto;
}

.pdf-scan-results h4 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scan-result-item {
    background: var(--bg-card);
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    border-left: 3px solid var(--info);
}

.scan-result-item .part-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.scan-result-item .part-number {
    color: var(--accent);
    font-weight: 500;
}

.scan-result-item .part-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.scan-result-item .part-actions {
    display: flex;
    gap: 0.5rem;
}

/* Batch Scan UI */
.batch-scan-config {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.batch-scan-config label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.batch-scan-config input {
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
    width: 120px;
}

.btn-batch {
    background: linear-gradient(135deg, var(--accent), var(--info)) !important;
}

.batch-scan-panel {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 1rem;
    margin-top: auto;
}

.batch-scan-panel h5 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.batch-scan-status {
    margin-bottom: 0.75rem;
}

.progress-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

.batch-scan-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.batch-scan-stats .stat {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.batch-scan-stats .stat strong {
    color: var(--text);
}

.batch-scan-actions {
    display: flex;
    gap: 0.5rem;
}

/* Batch Review Modal */
.modal-large {
    max-width: 900px;
    max-height: 80vh;
}

.modal-large .modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;
}

.batch-review-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.batch-review-stats .stat-card {
    flex: 1;
    background: var(--bg-input);
    padding: 1rem;
    border-radius: var(--radius);
    text-align: center;
}

.batch-review-stats .stat-card strong {
    display: block;
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.batch-review-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.batch-review-tabs .tab-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
}

.batch-review-tabs .tab-btn.active {
    background: var(--accent);
    color: white;
}

.batch-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.parts-review-table {
    max-height: 400px;
    overflow-y: auto;
}

.parts-review-table table {
    width: 100%;
}

.parts-review-table th:first-child,
.parts-review-table td:first-child {
    width: 40px;
    text-align: center;
}

.breakout-review-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    align-items: flex-start;
}

.breakout-review-item input[type="checkbox"] {
    margin-top: 0.25rem;
}

.breakout-info strong {
    color: var(--accent);
}

.breakout-info .page-badge {
    font-size: 0.75rem;
    background: var(--bg-card);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    color: var(--text-secondary);
}

.breakout-info p {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Equipment Parts Modal */
#equipment-parts-modal .modal-content {
    max-width: 1000px;
    width: 95%;
}

#equipment-parts-modal .modal-body {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
}

.epm-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

#epm-add-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

#epm-add-form h4 {
    margin: 0 0 1rem 0;
    color: var(--accent);
}

.part-search-container {
    position: relative;
    margin-bottom: 1rem;
}

#epm-part-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.part-result-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.part-result-item:hover {
    background: var(--accent);
    color: white;
}

.part-result-item:last-child {
    border-bottom: none;
}

.part-result-empty {
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.serial-range-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.serial-range-inputs .form-group {
    flex: 1;
}

#epm-recommended-panel {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

#epm-recommended-panel h4 {
    margin: 0 0 1rem 0;
    color: var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recommended-part-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.recommended-part-item:last-child {
    margin-bottom: 0;
}

.rec-part-info {
    flex: 1;
}

.rec-part-reason {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

#epm-parts-table {
    width: 100%;
    border-collapse: collapse;
}

#epm-parts-table th,
#epm-parts-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

#epm-parts-table th {
    background: var(--bg-card);
    font-weight: 600;
    position: sticky;
    top: 0;
}

#epm-parts-table input[type="text"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.25rem 0.5rem;
    color: var(--text);
}

#epm-parts-table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Inventory Tab Styles */
.inventory-subtabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
}

.inv-subtab {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.2s;
}

.inv-subtab:hover {
    color: var(--text);
    background: var(--bg-card);
}

.inv-subtab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.inv-subtab-content {
    display: none;
}

.inv-subtab-content.active {
    display: block;
}

/* Inventory Dashboard Stats */
.inventory-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.inv-stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
}

.inv-stat-card.alert {
    border-color: var(--warning);
    background: rgba(255, 193, 7, 0.1);
}

.inv-stat-icon {
    font-size: 2rem;
}

.inv-stat-info {
    display: flex;
    flex-direction: column;
}

.inv-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.inv-stat-card.alert .inv-stat-value {
    color: var(--warning);
}

.inv-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Inventory Dashboard Sections */
.inventory-dashboard-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.inv-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--border);
}

.inv-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text);
}

.inv-list {
    max-height: 300px;
    overflow-y: auto;
}

.inv-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.inv-list-item.alert {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid var(--warning);
}

.inv-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inv-item-info strong {
    color: var(--text);
}

.inv-item-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.inv-item-qty,
.inv-item-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qty-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
}

.qty-badge.low {
    background: var(--warning);
    color: #000;
}

.qty-change.positive {
    color: var(--success);
}

.qty-change.negative {
    color: var(--danger);
}

.tx-type {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--bg-card);
}

/* Stock Lookup */
.inv-search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.inv-search-bar input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
}

.inv-search-bar select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
}

.inv-stock-results {
    overflow-x: auto;
}

#inv-stock-table,
#inv-pending-po-table,
#inv-transfer-table,
#inv-cycle-table {
    width: 100%;
    border-collapse: collapse;
}

#inv-stock-table th,
#inv-stock-table td,
#inv-pending-po-table th,
#inv-pending-po-table td,
#inv-transfer-table th,
#inv-transfer-table td,
#inv-cycle-table th,
#inv-cycle-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

#inv-stock-table th,
#inv-pending-po-table th,
#inv-transfer-table th,
#inv-cycle-table th {
    background: var(--bg-card);
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* Receive Parts */
.inv-receive-options {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.inv-pending-receipts h4 {
    margin: 0 0 1rem 0;
}

/* Transfers */
.inv-transfer-actions,
.inv-cycle-actions,
.inv-warehouse-actions {
    margin-bottom: 1rem;
}

.inv-transfer-form,
.inv-cycle-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.inv-transfer-form h4,
.inv-cycle-form h4 {
    margin: 0 0 1rem 0;
    color: var(--accent);
}

.inv-transfer-history h4,
.inv-cycle-history h4 {
    margin: 0 0 1rem 0;
}

/* Cycle Count */
.cycle-count-table {
    width: 100%;
    border-collapse: collapse;
}

.cycle-count-table th,
.cycle-count-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.cycle-count-table th {
    background: var(--bg-input);
    font-weight: 600;
}

.cycle-count-table input[type="number"] {
    width: 80px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
}

.variance.positive {
    color: var(--success);
    font-weight: 600;
}

.variance.negative {
    color: var(--danger);
    font-weight: 600;
}

/* Warehouses Grid */
.inv-warehouses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.warehouse-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 1rem;
}

.warehouse-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.warehouse-icon {
    font-size: 2.5rem;
}

.warehouse-info {
    flex: 1;
}

.warehouse-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--accent);
}

.warehouse-info p {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.warehouse-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.warehouse-stats strong {
    color: var(--accent);
}

.warehouse-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.open {
    background: var(--accent);
    color: white;
}

.status-badge.partial {
    background: var(--warning);
    color: #000;
}

.status-badge.completed {
    background: var(--success);
    color: white;
}

/* Quotes & Orders Styles */
.quotes-header,
.orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.quotes-stats,
.orders-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.quote-stat,
.order-stat {
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

.quote-stat strong,
.order-stat strong {
    color: var(--accent);
    font-size: 1.1rem;
}

.order-stat.pending strong { color: var(--warning); }
.order-stat.picking strong { color: var(--info, #17a2b8); }
.order-stat.ready strong { color: var(--success); }
.order-stat.shipped strong { color: var(--accent); }

.quotes-filters,
.orders-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.quotes-filters select,
.orders-filters select,
.quotes-filters input,
.orders-filters input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text);
}

.quotes-filters input,
.orders-filters input {
    flex: 1;
    min-width: 200px;
}

.quotes-list,
.orders-list {
    overflow-x: auto;
}

#quotes-table,
#orders-table {
    width: 100%;
    border-collapse: collapse;
}

#quotes-table th,
#quotes-table td,
#orders-table th,
#orders-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

#quotes-table th,
#orders-table th {
    background: var(--bg-card);
    font-weight: 600;
    position: sticky;
    top: 0;
}

#quotes-table a,
#orders-table a {
    color: var(--accent);
    text-decoration: none;
}

#quotes-table a:hover,
#orders-table a:hover {
    text-decoration: underline;
}

/* Status badge colors for quotes/orders */
.status-badge.draft { background: var(--text-secondary); color: white; }
.status-badge.sent { background: var(--info, #17a2b8); color: white; }
.status-badge.accepted { background: var(--success); color: white; }
.status-badge.rejected { background: var(--danger); color: white; }
.status-badge.expired { background: var(--warning); color: #000; }
.status-badge.converted { background: var(--accent); color: white; }
.status-badge.pending { background: var(--warning); color: #000; }
.status-badge.confirmed { background: var(--info, #17a2b8); color: white; }
.status-badge.picking { background: #6f42c1; color: white; }
.status-badge.picked { background: var(--success); color: white; }
.status-badge.shipped { background: var(--accent); color: white; }
.status-badge.delivered { background: #28a745; color: white; }
.status-badge.cancelled { background: var(--danger); color: white; }

/* Responsive Adjustments for Parts */
@media (max-width: 768px) {
    .parts-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .parts-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .machine-header {
        flex-direction: column;
        gap: 1rem;
    }

    .machine-header .machine-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .schematics-grid,
    .breakout-grid {
        grid-template-columns: 1fr;
    }

    .breakout-search-box {
        grid-template-columns: 1fr 1fr;
    }

    .schematic-image-container {
        min-height: 300px;
    }

    .hotspot-marker {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
}

/* ============================================================================
   RENTAL ENHANCEMENTS - Days Counter, Settings, Detail Modal
   ============================================================================ */

/* Days Column in Rentals Table */
.days-cell {
    text-align: center;
    font-weight: 600;
    color: var(--info);
    cursor: pointer;
    transition: background 0.2s;
}

.days-cell:hover {
    background: rgba(79, 195, 247, 0.15);
}

/* Days Badge (used in detail modal) */
.days-badge {
    background: var(--info);
    color: var(--bg-dark);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius);
    font-weight: bold;
    display: inline-block;
}

/* Rental Detail Modal */
.rental-detail .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.rental-detail .detail-row:last-of-type {
    border-bottom: none;
}

.rental-detail .detail-row label {
    color: var(--text-secondary);
    font-weight: 500;
}

.rental-detail .detail-row span {
    color: var(--text-primary);
}

.rental-detail .detail-row.highlight {
    background: rgba(79, 195, 247, 0.1);
    padding: 0.75rem 1rem;
    margin: 0.5rem -1rem;
    border-radius: var(--radius);
    border-bottom: none;
}

/* Settings Modal */
#settings-form .form-section h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 1rem;
}

#settings-form .form-group {
    margin-bottom: 1rem;
}

#settings-form .hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Settings Button in Header */
#settings-btn {
    font-size: 1.1rem;
}

/* ============================================================================
   BILLING STYLES
   ============================================================================ */

/* Billing-due flash animation for rental rows */
@keyframes billing-flash {
    0%, 100% { border-left-color: var(--danger); }
    50% { border-left-color: transparent; }
}

tr.billing-due {
    border-left: 4px solid var(--danger);
    animation: billing-flash 2s ease-in-out infinite;
}

.billing-amount-badge {
    display: inline-block;
    background: var(--danger);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.billing-amount-badge:hover {
    opacity: 0.85;
}
    overflow: hidden;
}

.billing-customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
}

.billing-customer-header .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.billing-customer-total {
    color: var(--accent);
    font-weight: 600;
    margin-left: 1rem;
}

.billing-records-list {
    padding: 0.5rem;
}

.billing-record-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.billing-record-item:last-child {
    border-bottom: none;
}

.billing-record-item:hover {
    background: var(--hover-bg);
}

.billing-record-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.billing-record-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.billing-record-info .rental-number {
    font-weight: 600;
    color: var(--accent);
}

.billing-record-info .equipment {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.billing-record-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
}

.billing-record-details span {
    color: var(--text-secondary);
}

.billing-record-amount {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.billing-record-amount .amount {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.billing-record-actions {
    display: flex;
    gap: 0.25rem;
}

/* Event Type Badges for Billing Queue */
.event-type-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.badge-shipping {
    background: var(--warning);
    color: #333;
}

.billing-record-item.shipping-event {
    background: rgba(255, 193, 7, 0.05);
    border-left: 3px solid var(--warning);
}

.billing-record-item.rental-event {
    border-left: 3px solid transparent;
}

.shipping-job-number {
    font-size: 0.8rem;
    color: var(--warning);
}

.shipping-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.btn-success {
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
}

.btn-success:hover {
    opacity: 0.9;
}

/* Recurring Rental Badge */
.recurring-badge {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9em;
}

/* Invoice Status Badges */
.status-pending-approval {
    background: var(--warning);
    color: #333;
}

.status-draft {
    background: var(--text-secondary);
    color: white;
}

.status-sent {
    background: var(--accent);
    color: white;
}

.status-paid {
    background: var(--success);
    color: white;
}

.status-overdue {
    background: var(--danger);
    color: white;
}

/* Invoice Preview in Modal */
.invoice-preview {
    font-size: 0.95rem;
}

.invoice-preview .invoice-header-info {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.invoice-preview .invoice-header-info p {
    margin: 0.35rem 0;
}

.invoice-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.invoice-items th,
.invoice-items td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.invoice-items th {
    background: var(--sidebar-bg);
    font-weight: 600;
}

.invoice-items tfoot td {
    border-bottom: none;
    padding-top: 0.75rem;
}

.invoice-notes {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--sidebar-bg);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

/* ============================================================================
   AI DIAGNOSTIC CHAT PANEL
   ============================================================================ */

.ai-chat-panel {
    position: fixed;
    right: 0;
    top: 60px;
    width: 420px;
    height: calc(100vh - 60px);
    background: var(--bg-card);
    border-left: 2px solid var(--accent);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

.ai-chat-panel.hidden {
    transform: translateX(100%);
}

.ai-chat-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--accent), #c73e54);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.ai-chat-header .btn-icon {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.ai-chat-header .btn-icon:hover {
    background: rgba(255,255,255,0.3);
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-chat-message {
    padding: 0.875rem 1rem;
    border-radius: 12px;
    max-width: 90%;
    line-height: 1.5;
    font-size: 0.95rem;
}

.ai-chat-message.user {
    background: var(--bg-input);
    color: var(--text-primary);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ai-chat-message.assistant {
    background: linear-gradient(135deg, #2a3f5f, #1e3048);
    color: white;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border-left: 3px solid var(--accent);
}

.ai-chat-message.system {
    background: var(--warning);
    color: #000;
    align-self: center;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.ai-chat-message pre {
    background: var(--bg-dark);
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.ai-chat-message code {
    background: var(--bg-dark);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

.ai-chat-input-area {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    background: var(--bg-input);
}

.ai-chat-input-area textarea {
    flex: 1;
    resize: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
}

.ai-chat-input-area textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.ai-chat-input-area .btn-send {
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-chat-input-area .btn-send:hover {
    background: var(--accent-hover);
}

/* Chat action buttons */
.ai-chat-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.ai-chat-actions button {
    padding: 0.5rem 0.875rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-chat-actions button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.ai-chat-actions button.primary {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.ai-chat-actions button.primary:hover {
    background: #3db88f;
}

/* Typing indicator */
.ai-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #2a3f5f, #1e3048);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    border-left: 3px solid var(--accent);
}

.ai-typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.ai-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* Chat toggle button (shown when panel is closed) */
.ai-chat-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
    z-index: 999;
    transition: transform 0.2s, box-shadow 0.2s;
    display: none;
}

.ai-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
}

.ai-chat-toggle.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .ai-chat-panel {
        width: 100%;
        top: 0;
        height: 100vh;
    }
}

/* ============================================================================
   ACCOUNTING ENHANCEMENTS - Credit Memos, Statements, Receipts, Bank Feeds
   ============================================================================ */

/* Receipts Grid */
.receipts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.receipt-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.receipt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.receipt-preview {
    height: 160px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.receipt-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.receipt-info {
    padding: 1rem;
}

.receipt-number {
    font-size: 12px;
    color: #666;
    margin-bottom: 0.25rem;
}

.receipt-vendor {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #9a7b1a;
}

.receipt-date {
    font-size: 12px;
    color: #666;
    margin-top: 0.25rem;
}

/* Connected Banks Grid */
.connected-banks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.bank-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 4px solid #9a7b1a;
}

/* Aging Summary Colors */
.aging-current { background: rgba(154, 123, 26, 0.15); }
.aging-30 { background: #fff3e0; }
.aging-60 { background: #ffe0b2; }
.aging-90 { background: #ffcdd2; }

/* Status Badges for New Views */
.status-badge.status-open { background: #e3f2fd; color: #1976d2; }
.status-badge.status-partially-applied { background: #fff3e0; color: #f57c00; }
.status-badge.status-applied { background: rgba(154, 123, 26, 0.15); color: #4ecca3; }
.status-badge.status-refunded { background: #fce4ec; color: #c2185b; }
.status-badge.status-generated { background: #e3f2fd; color: #1976d2; }
.status-badge.status-uploaded { background: #e3f2fd; color: #1976d2; }
.status-badge.status-processing { background: #fff3e0; color: #f57c00; }
.status-badge.status-processed { background: rgba(154, 123, 26, 0.15); color: #4ecca3; }
.status-badge.status-matched { background: rgba(154, 123, 26, 0.15); color: #9a7b1a; }
.status-badge.status-failed { background: #ffebee; color: #c62828; }
.status-badge.status-active { background: rgba(154, 123, 26, 0.15); color: #4ecca3; }
.status-badge.status-error { background: #ffebee; color: #c62828; }
.status-badge.status-disconnected { background: #f5f5f5; color: #757575; }

/* Info Banner */
.info-banner {
    background: #e3f2fd;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid #1976d2;
}

/* Detail Grid */
.detail-grid {
    display: grid;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: #666;
    font-size: 14px;
}

.detail-value {
    font-weight: 500;
    color: #333;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Large Modal */
.modal-content.large {
    max-width: 900px;
}

/* ============================================================================
   EMPLOYEE PORTAL ADMIN
   ============================================================================ */

/* Status Tabs */
.portal-status-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.portal-tab {
    padding: 0.5rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.portal-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.tab-count {
    background: rgba(255,255,255,0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.portal-tab:not(.active) .tab-count {
    background: rgba(255,255,255,0.1);
}

/* Sortable Table Headers */
#employee-portal-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem;
}

#employee-portal-table th.sortable:hover {
    background: rgba(255,255,255,0.05);
}

#employee-portal-table th.sortable .sort-icon::after {
    content: '⇅';
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
    font-size: 0.8rem;
}

#employee-portal-table th.sortable.sort-asc .sort-icon::after {
    content: '↑';
    opacity: 1;
}

#employee-portal-table th.sortable.sort-desc .sort-icon::after {
    content: '↓';
    opacity: 1;
}

/* Actions Cell */
#employee-portal-table .actions-cell {
    white-space: nowrap;
}

#employee-portal-table .action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* View Header Actions */
#view-employee-portal-admin .view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

#view-employee-portal-admin .view-header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

#view-employee-portal-admin .search-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    min-width: 280px;
}

#view-employee-portal-admin .form-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    min-width: 160px;
}

/* Work Status Column Styling */
#employee-portal-table td:nth-child(7) {
    line-height: 1.4;
}

/* Mechanic Badge in Employee Name */
#employee-portal-table .badge[style*="font-size:0.65rem"] {
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* ============================================
   PREVENTIVE MAINTENANCE (PM) STYLES
   ============================================ */

/* PM Stats Grid */
.pm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pm-stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pm-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.pm-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* PM Stat Card Variants */
.pm-stat-card.overdue {
    border-left: 4px solid #ef4444;
}
.pm-stat-card.overdue .stat-value {
    color: #ef4444;
}

.pm-stat-card.due {
    border-left: 4px solid #f59e0b;
}
.pm-stat-card.due .stat-value {
    color: #f59e0b;
}

.pm-stat-card.scheduled {
    border-left: 4px solid #3b82f6;
}
.pm-stat-card.scheduled .stat-value {
    color: #3b82f6;
}

.pm-stat-card.field {
    border-left: 4px solid #10b981;
}
.pm-stat-card.field .stat-value {
    color: #10b981;
}

.pm-stat-card.completed {
    border-left: 4px solid #22c55e;
}
.pm-stat-card.completed .stat-value {
    color: #22c55e;
}

/* PM AI Insights Panel */
.pm-ai-insights {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.pm-ai-insights h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-ai-insights h3::before {
    content: '🤖';
}

.pm-insight-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.pm-insight-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid var(--border);
}

.pm-insight-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--accent);
}

.pm-insight-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* PM Section */
.pm-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.pm-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.pm-section .section-desc {
    margin: -0.5rem 0 1rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pm-section-header h3 {
    margin: 0;
}

.pm-section-header .filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pm-section-header .filters select,
.pm-section-header .filters input {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* PM Status Badges */
.pm-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-status-badge.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.pm-status-badge.due {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.pm-status-badge.upcoming {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pm-status-badge.scheduled {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.pm-status-badge.in-progress,
.pm-status-badge.in_progress {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.pm-status-badge.completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.pm-status-badge.skipped {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* PM Priority Badge */
.pm-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.pm-priority-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pm-priority-badge.high {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.pm-priority-badge.normal {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.pm-priority-badge.low {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
}

/* PM Priority Score Bar */
.pm-priority-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-priority-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.pm-priority-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pm-priority-bar-fill.high {
    background: linear-gradient(90deg, #ef4444, #f59e0b);
}

.pm-priority-bar-fill.medium {
    background: linear-gradient(90deg, #f59e0b, #3b82f6);
}

.pm-priority-bar-fill.low {
    background: linear-gradient(90deg, #3b82f6, #22c55e);
}

.pm-priority-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 28px;
}

/* PM Parts Status */
.pm-parts-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.pm-parts-status.available {
    color: #22c55e;
}

.pm-parts-status.reserved {
    color: #8b5cf6;
}

.pm-parts-status.unavailable {
    color: #ef4444;
}

.pm-parts-status.partial {
    color: #f59e0b;
}

/* PM Field Opportunities */
.pm-field-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.pm-field-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.pm-field-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pm-field-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pm-field-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pm-field-card-equipment {
    font-weight: 600;
    color: var(--text-primary);
}

.pm-field-card-distance {
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 500;
}

.pm-field-card-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.pm-field-card-details p {
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pm-field-card-driver {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.pm-field-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* PM Workload Chart */
.pm-workload-section {
    margin-top: 1rem;
}

.pm-workload-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pm-workload-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pm-workload-label {
    min-width: 100px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pm-workload-bar {
    flex: 1;
    height: 24px;
    background: var(--bg-input);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.pm-workload-fill {
    height: 100%;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    transition: width 0.5s ease;
}

.pm-workload-fill.overdue {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.pm-workload-fill.due {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.pm-workload-fill.upcoming {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.pm-workload-fill.scheduled {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

/* PM Queue Table */
.pm-queue-table {
    width: 100%;
    border-collapse: collapse;
}

.pm-queue-table th,
.pm-queue-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.pm-queue-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.pm-queue-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.pm-queue-table .equipment-cell {
    display: flex;
    flex-direction: column;
}

.pm-queue-table .equipment-id {
    font-weight: 600;
    color: var(--text-primary);
}

.pm-queue-table .equipment-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pm-queue-table .hours-cell {
    text-align: right;
    font-family: 'SF Mono', monospace;
}

.pm-queue-table .hours-current {
    font-weight: 600;
}

.pm-queue-table .hours-remaining {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pm-queue-table .actions-cell {
    text-align: right;
}

.pm-queue-table .actions-cell button {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* PM Schedule Cards */
.pm-schedule-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}

.pm-schedule-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
}

.pm-schedule-card-header {
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pm-schedule-card-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.pm-schedule-card-interval {
    background: var(--accent);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pm-schedule-card-body {
    padding: 1rem;
}

.pm-schedule-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pm-schedule-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pm-schedule-card-tasks {
    margin-bottom: 1rem;
}

.pm-schedule-card-tasks h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.pm-schedule-card-tasks ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.pm-schedule-card-tasks li {
    margin-bottom: 0.25rem;
}

.pm-schedule-card-parts {
    margin-bottom: 1rem;
}

.pm-schedule-card-parts h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.pm-schedule-card-parts .part-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--border);
}

.pm-schedule-card-parts .part-item:last-child {
    border-bottom: none;
}

.pm-schedule-card-footer {
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* PM History Timeline */
.pm-history-timeline {
    position: relative;
    padding-left: 2rem;
}

.pm-history-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.pm-history-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.pm-history-item::before {
    content: '';
    position: absolute;
    left: -1.65rem;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-card);
}

.pm-history-item:last-child {
    padding-bottom: 0;
}

.pm-history-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.pm-history-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.pm-history-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.pm-history-details {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* PM Modal Styles */
.pm-modal-section {
    margin-bottom: 1.5rem;
}

.pm-modal-section h4 {
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.pm-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pm-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.pm-task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.pm-task-item label {
    flex: 1;
    font-size: 0.9rem;
}

.pm-task-item .task-type {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: var(--bg-input);
    border-radius: 4px;
    color: var(--text-secondary);
}

/* PM Compliance Report */
.pm-compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pm-compliance-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border);
}

.pm-compliance-card .value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.pm-compliance-card .label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pm-compliance-card.good .value {
    color: #22c55e;
}

.pm-compliance-card.warning .value {
    color: #f59e0b;
}

.pm-compliance-card.bad .value {
    color: #ef4444;
}

/* PM Empty State */
.pm-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.pm-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.pm-empty-state h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.pm-empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* PM Loading Spinner */
.pm-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.pm-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pm-spin 1s linear infinite;
}

@keyframes pm-spin {
    to { transform: rotate(360deg); }
}

/* PM Responsive Adjustments */
@media (max-width: 768px) {
    .pm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pm-stat-card .stat-value {
        font-size: 1.5rem;
    }

    .pm-field-cards {
        grid-template-columns: 1fr;
    }

    .pm-schedule-cards {
        grid-template-columns: 1fr;
    }

    .pm-queue-table {
        font-size: 0.85rem;
    }

    .pm-queue-table th,
    .pm-queue-table td {
        padding: 0.5rem;
    }

    .pm-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pm-section-header .filters {
        width: 100%;
    }

    .pm-section-header .filters select,
    .pm-section-header .filters input {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .pm-stats-grid {
        grid-template-columns: 1fr;
    }

    .pm-ai-insights {
        padding: 1rem;
    }

    .pm-insight-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   GATE CAMERA SYSTEM STYLES
   ============================================================================ */

/* Gate Live View - Camera Grid */
.gate-camera-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.camera-cell {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}

.camera-cell:hover {
    border-color: var(--accent);
}

.camera-cell.recording {
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.camera-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
}

.camera-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.camera-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.camera-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
}

.camera-status .status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.camera-status .status-dot.offline {
    background: #ef4444;
}

.camera-status .status-dot.recording {
    background: #ef4444;
    animation: pulse-recording 1s ease-in-out infinite;
}

@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.camera-video {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.camera-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    background: #1a1a1a;
}

.camera-placeholder i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.camera-placeholder span {
    font-size: 0.9rem;
}

.camera-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-input);
}

.camera-controls button {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
}

.camera-controls button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.camera-controls button.btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

/* Gate Status Bar */
.gate-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.gate-status-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.gate-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

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

.gate-status-item .value {
    font-weight: 600;
    color: var(--text-primary);
}

.gate-status-item .value.online {
    color: #22c55e;
}

.gate-status-item .value.offline {
    color: #ef4444;
}

/* Recent Gate Events Panel */
.gate-recent-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    border: 1px solid var(--border);
}

.gate-recent-panel h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gate-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.gate-recent-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}

.gate-recent-item:hover {
    background: var(--bg-card);
}

.gate-recent-item .direction-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.gate-recent-item .direction-icon.entry {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.gate-recent-item .direction-icon.exit {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.gate-recent-item .event-info {
    flex: 1;
}

.gate-recent-item .event-tag {
    font-weight: 600;
    font-size: 0.9rem;
}

.gate-recent-item .event-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.gate-recent-item .event-unit {
    font-size: 0.8rem;
    color: var(--accent);
}

/* Gate Events View */
.gate-events-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.gate-events-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gate-events-filters select,
.gate-events-filters input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.gate-events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gate-event-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.gate-event-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gate-event-card.flagged {
    border-left: 4px solid #ef4444;
}

.gate-event-thumb {
    width: 120px;
    height: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    background: #1a1a1a;
}

.gate-event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gate-event-thumb .no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 2rem;
}

.gate-event-details {
    flex: 1;
}

.gate-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.gate-event-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gate-event-direction.entry {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.gate-event-direction.exit {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.gate-event-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gate-event-tag {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.gate-event-unit {
    font-size: 0.9rem;
    color: var(--accent);
}

.gate-event-unit.unlinked {
    color: var(--text-secondary);
    font-style: italic;
}

.gate-event-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gate-event-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.gate-event-badge.damage {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.gate-event-badge.photos {
    background: rgba(79, 195, 247, 0.2);
    color: var(--info);
}

.gate-event-badge.recording {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

/* Gate Event Detail Modal */
.gate-event-detail {
    padding: 1rem;
}

.gate-event-photos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gate-event-photos-grid img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s;
}

.gate-event-photos-grid img:hover {
    transform: scale(1.05);
}

.gate-event-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.gate-event-info-item {
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.gate-event-info-item .label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.gate-event-info-item .value {
    font-weight: 600;
}

/* Damage Review View */
.damage-queue {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.damage-queue-empty {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.damage-queue-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.damage-review-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.damage-review-card.critical {
    border-left: 4px solid #ef4444;
}

.damage-review-card.major {
    border-left: 4px solid #f59e0b;
}

.damage-review-card.moderate {
    border-left: 4px solid #f59e0b;
}

.damage-review-card.minor {
    border-left: 4px solid #22c55e;
}

.damage-photos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 300px;
    flex-shrink: 0;
}

.damage-photos .main-photo {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--radius);
}

.damage-photos .photo-thumbs {
    display: flex;
    gap: 0.5rem;
}

.damage-photos .photo-thumbs img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.damage-photos .photo-thumbs img:hover,
.damage-photos .photo-thumbs img.active {
    opacity: 1;
}

.damage-details {
    flex: 1;
}

.damage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.damage-unit-info h4 {
    margin: 0 0 0.25rem 0;
}

.damage-unit-info .unit-type {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.damage-severity {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.damage-severity.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.damage-severity.major {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.damage-severity.moderate {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.damage-severity.minor {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.damage-findings {
    margin-bottom: 1rem;
}

.damage-findings h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.damage-finding-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.damage-finding-item i {
    color: #f59e0b;
    margin-top: 2px;
}

.damage-finding-item .finding-text {
    flex: 1;
}

.damage-finding-item .finding-type {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.damage-finding-item .finding-location {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.damage-finding-item .confidence {
    font-size: 0.8rem;
    color: var(--accent);
}

.damage-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.damage-actions button {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.damage-actions .btn-verify {
    background: #22c55e;
    border: none;
    color: white;
}

.damage-actions .btn-verify:hover {
    background: #16a34a;
}

.damage-actions .btn-dismiss {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.damage-actions .btn-dismiss:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.damage-actions .btn-repair {
    background: var(--accent);
    border: none;
    color: white;
}

.damage-actions .btn-repair:hover {
    background: var(--accent-hover);
}

/* Gate Settings View */
.gate-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.gate-settings-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.gate-settings-section h4 {
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.camera-config-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.camera-config-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border-radius: var(--radius);
}

.camera-config-item .camera-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.camera-config-item .camera-info {
    flex: 1;
}

.camera-config-item .camera-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.camera-config-item .camera-ip {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.camera-config-item .camera-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.camera-config-item .camera-actions {
    display: flex;
    gap: 0.5rem;
}

.camera-config-item .camera-actions button {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
}

.camera-config-item .camera-actions button:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-row .setting-label {
    display: flex;
    flex-direction: column;
}

.setting-row .setting-label span {
    font-weight: 500;
}

.setting-row .setting-label small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.setting-row input[type="number"],
.setting-row input[type="text"],
.setting-row select {
    width: 150px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: var(--radius);
}

.setting-row input[type="range"] {
    width: 150px;
}

/* Toggle Switch for Settings */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

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

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(24px);
}

/* Gate Stats Dashboard */
.gate-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gate-stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.25rem;
    border: 1px solid var(--border);
    text-align: center;
}

.gate-stat-card .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.gate-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.gate-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.gate-stat-card.entries .stat-value { color: #22c55e; }
.gate-stat-card.exits .stat-value { color: #f97316; }
.gate-stat-card.flagged .stat-value { color: #ef4444; }
.gate-stat-card.cameras .stat-value { color: var(--accent); }

/* Gate Photo Modal */
.gate-photo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 2rem;
}

.gate-photo-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius);
}

.gate-photo-modal .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.gate-photo-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Gate Responsive */
@media (max-width: 1200px) {
    .gate-camera-grid {
        grid-template-columns: 1fr;
    }

    .gate-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .damage-review-card {
        flex-direction: column;
    }

    .damage-photos {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .gate-status-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .gate-status-info {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gate-events-header {
        flex-direction: column;
        align-items: stretch;
    }

    .gate-event-card {
        flex-direction: column;
    }

    .gate-event-thumb {
        width: 100%;
        height: 150px;
    }

    .gate-event-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gate-settings-grid {
        grid-template-columns: 1fr;
    }

    .camera-config-item {
        flex-wrap: wrap;
    }

    .camera-config-item .camera-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .gate-stats-grid {
        grid-template-columns: 1fr;
    }

    .gate-event-info-grid {
        grid-template-columns: 1fr;
    }

    .setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .setting-row input[type="number"],
    .setting-row input[type="text"],
    .setting-row select {
        width: 100%;
    }
}

/* ============================================================================
   OUTSIDE SALES REP ACTIVITY TRACKER STYLES
   ============================================================================ */

/* Activity Tabs */
.activity-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.activity-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.activity-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.activity-tab.active {
    background: var(--accent-color);
    color: white;
}

.activity-tab-content {
    display: none;
}

.activity-tab-content.active {
    display: block;
}

/* Progress Cards Grid */
.activity-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.progress-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid var(--accent-color);
}

.progress-card.visits { border-left-color: #3b82f6; }
.progress-card.calls { border-left-color: #10b981; }
.progress-card.linkedin { border-left-color: #0077b5; }
.progress-card.quotes { border-left-color: #f59e0b; }
.progress-card.contacts { border-left-color: #8b5cf6; }
.progress-card.lunches { border-left-color: #ef4444; }

.progress-icon {
    font-size: 2rem;
}

.progress-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.progress-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-card.visits .progress-fill { background: #3b82f6; }
.progress-card.calls .progress-fill { background: #10b981; }
.progress-card.linkedin .progress-fill { background: #0077b5; }
.progress-card.quotes .progress-fill { background: #f59e0b; }
.progress-card.contacts .progress-fill { background: #8b5cf6; }
.progress-card.lunches .progress-fill { background: #ef4444; }

/* Quick Log Section */
.quick-log-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.quick-log-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.quick-log-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quick-log-btn {
    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-log-btn.visit { background: #3b82f6; color: white; }
.quick-log-btn.call { background: #10b981; color: white; }
.quick-log-btn.linkedin { background: #0077b5; color: white; }
.quick-log-btn.quote { background: #f59e0b; color: white; }
.quick-log-btn.contact { background: #8b5cf6; color: white; }
.quick-log-btn.lunch { background: #ef4444; color: white; }

.quick-log-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.quick-log-btn:active {
    transform: translateY(0);
}

/* Route Checklist Section */
.route-checklist-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.route-checklist-section h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.route-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.route-progress .progress-bar {
    flex: 1;
    height: 8px;
}

#route-progress-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.route-stops-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.route-stop-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.route-stop-item:hover {
    background: var(--bg-hover);
}

.route-stop-item.visited {
    opacity: 0.6;
    background: rgba(16, 185, 129, 0.1);
}

.stop-checkbox {
    font-size: 1.25rem;
}

.stop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stop-company {
    font-weight: 500;
    color: var(--text-primary);
}

.stop-details {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.stop-priority {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.stop-priority.priority-1 { background: #fee2e2; color: #dc2626; }
.stop-priority.priority-2 { background: #fef3c7; color: #d97706; }
.stop-priority.priority-3 { background: #e5e7eb; color: #6b7280; }
.stop-priority.priority-4 { background: #dbeafe; color: #2563eb; }
.stop-priority.priority-5 { background: #d1fae5; color: #059669; }

/* Activity Log Section */
.activity-log-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
}

.activity-log-section h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.activity-log .data-table {
    font-size: 0.9rem;
}

.activity-log .notes-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Weekly Progress Grid */
.weekly-progress-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.weekly-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.weekly-label {
    width: 180px;
    font-weight: 500;
    color: var(--text-primary);
}

.weekly-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
}

.weekly-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #10b981);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.weekly-value {
    width: 80px;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* Weekly Breakdown Section */
.weekly-breakdown-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.weekly-breakdown-section h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.daily-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-bar-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.day-label {
    width: 40px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stacked-bar {
    display: flex;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
}

.bar-segment {
    height: 100%;
    min-width: 2px;
}

.bar-segment.visits { background: #3b82f6; }
.bar-segment.calls { background: #10b981; }

.day-total {
    width: 30px;
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Outcomes Chart */
.outcomes-chart,
.coverage-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.outcome-bar,
.coverage-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.outcome-label,
.coverage-label {
    width: 100px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.outcome-bar-fill,
.coverage-bar-fill {
    height: 24px;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.outcome-count,
.coverage-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Route Clusters Grid */
.route-clusters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.route-cluster-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.2s;
}

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

.route-cluster-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--accent-color);
}

.cluster-name {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cluster-stops {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Route Stops Management */
.route-stops-management {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
}

.route-stops-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.route-stops-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.route-stops-table .data-table {
    font-size: 0.9rem;
}

.priority-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.p1 { background: #fee2e2; color: #dc2626; }
.priority-badge.p2 { background: #fef3c7; color: #d97706; }
.priority-badge.p3 { background: #e5e7eb; color: #6b7280; }
.priority-badge.p4 { background: #dbeafe; color: #2563eb; }
.priority-badge.p5 { background: #d1fae5; color: #059669; }

/* Chip Selector for Equipment/Competitors */
.chip-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.chip:hover {
    background: var(--bg-hover);
}

.chip input[type="checkbox"] {
    display: none;
}

.chip:has(input:checked) {
    background: var(--accent-color);
    color: white;
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Small Button */
.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--bg-hover);
}

.btn-small.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.btn-small.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Mobile Responsive for Activity Tracker */
@media (max-width: 768px) {
    .activity-progress-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-card {
        padding: 0.75rem;
    }

    .progress-icon {
        font-size: 1.5rem;
    }

    .progress-value {
        font-size: 1rem;
    }

    .quick-log-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-log-btn {
        justify-content: center;
        padding: 1rem;
    }

    .weekly-stat {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .weekly-label {
        width: 100%;
    }

    .weekly-value {
        width: 100%;
        text-align: left;
    }

    .route-clusters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .activity-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .activity-tab {
        white-space: nowrap;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .activity-progress-grid {
        grid-template-columns: 1fr;
    }

    .route-clusters-grid {
        grid-template-columns: 1fr;
    }

    .quick-log-buttons {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   GOOGLE PLACES AUTOCOMPLETE - Dark Theme Override
   ============================================================================ */
.pac-container {
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    font-family: 'Segoe UI', system-ui, sans-serif;
    z-index: 10000;
}
.pac-item {
    padding: 8px 12px;
    color: #eaeaea;
    background-color: #1a1a1a;
    border-top: 1px solid #2a2a2a;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
}
.pac-item:first-child {
    border-top: none;
}
.pac-item:hover,
.pac-item.pac-item-selected {
    background-color: #111111;
}
.pac-item-query {
    color: #eaeaea;
    font-weight: 500;
}
.pac-matched {
    color: #4ecca3;
    font-weight: 600;
}
.pac-icon {
    filter: invert(0.8);
}
.pac-logo::after {
    display: none;
}