/* ═══════════════════════════════════════
   Procura360 – Apple-Inspired Styles
   ═══════════════════════════════════════ */

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 60px;
    --primary-color: #0071e3;
    --primary-hover: #0077ed;
    --secondary-color: #86868b;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --bg-primary: #f5f5f7;
    --bg-card: #ffffff;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
    --radius-card: 12px;
    --radius-input: 8px;
    --radius-pill: 980px;
    --transition-default: all 0.2s ease;
}

/* Global Typography & Reset */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    background-color: var(--bg-primary);
}

/* Navbar – Clean white, subtle shadow */
.navbar {
    background-color: var(--bg-card) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.navbar .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-input);
    transition: var(--transition-default);
}

.navbar .nav-link:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

.navbar .nav-link.active {
    color: var(--primary-color) !important;
}

/* Buttons – Apple style */
.btn {
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-input);
    padding: 0.5rem 1rem;
    transition: var(--transition-default);
    letter-spacing: -0.005em;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-pill);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: scale(1.02);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-pill);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.02);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-input);
}

.btn-outline-secondary:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

/* Form Inputs */
.form-control,
.form-select {
    border-radius: var(--radius-input);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    transition: var(--transition-default);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar .nav-link {
    border-radius: var(--radius-input);
    margin: 2px 0;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transition-default);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
}

.sidebar .nav-link.active {
    background-color: var(--primary-color);
    font-weight: 600;
}

.sidebar .nav-section small {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-footer {
    margin-top: auto !important;
}

/* Main Content */
.main-content {
    min-height: 100vh;
    background-color: var(--bg-primary);
}

/* Sidebar collapsed */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .sidebar .nav-link span,
body.sidebar-collapsed .sidebar .sidebar-header h5 span,
body.sidebar-collapsed .sidebar .sidebar-header small,
body.sidebar-collapsed .sidebar .nav-section,
body.sidebar-collapsed .sidebar .sidebar-footer .small {
    display: none;
}

body.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

/* Status Badges – Pastel pill style */
.badge,
[class*="badge-"] {
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.3em 0.75em;
    letter-spacing: 0.01em;
}

.badge-draft { background-color: #e8e8ed; color: #6e6e73; }
.badge-pending_review { background-color: #fff3cd; color: #8a6d00; }
.badge-approved { background-color: #d4edda; color: #1e7e34; }
.badge-returned { background-color: #ffe5d0; color: #c45200; }
.badge-edited_approved { background-color: #d1f2eb; color: #0d8065; }
.badge-rejected { background-color: #fde2e2; color: #c62828; }
.badge-supplier_selection { background-color: #d0f0fd; color: #0277a8; }
.badge-quotation { background-color: #ede7f6; color: #5e35b1; }
.badge-sat_created { background-color: #d6e4ff; color: #0050b3; }
.badge-sas_created { background-color: #e8daff; color: #5300b3; }
.badge-in_delivery { background-color: #ffe5d0; color: #c45200; }
.badge-completed { background-color: #d4edda; color: #1e7e34; }
.badge-cancelled { background-color: #fde2e2; color: #c62828; }

/* Timing Badges */
.badge-on_time { background-color: #d4edda; color: #1e7e34; }
.badge-at_risk { background-color: #fff3cd; color: #8a6d00; }
.badge-delayed { background-color: #fde2e2; color: #c62828; }

/* Delivery Status Badges */
.badge-pending { background-color: #e8e8ed; color: #6e6e73; }
.badge-confirmed { background-color: #d0f0fd; color: #0277a8; }
.badge-loading { background-color: #ffe5d0; color: #c45200; }
.badge-in_transit { background-color: #d6e4ff; color: #0050b3; }
.badge-customs { background-color: #ede7f6; color: #5e35b1; }
.badge-partial { background-color: #fff3cd; color: #8a6d00; }
.badge-delivered { background-color: #d4edda; color: #1e7e34; }

/* Step Progress */
.step-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
}

.step-progress .step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0.625rem 0.25rem;
}

.step-progress .step .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e8e8ed;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    transition: var(--transition-default);
}

.step-progress .step.active .step-number {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.step-progress .step.completed .step-number {
    background-color: #34c759;
    color: white;
}

.step-progress .step .step-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    display: block;
    font-weight: 500;
}

.step-progress .step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.step-progress .step-line {
    flex: 0 0 auto;
    width: 30px;
    height: 2px;
    background-color: #e8e8ed;
    border-radius: 1px;
}

.step-progress .step.completed + .step-line {
    background-color: #34c759;
}

/* Stat Cards */
.stat-card {
    border: none;
    border-radius: var(--radius-card);
    transition: var(--transition-default);
    box-shadow: var(--shadow-card);
    background-color: var(--bg-card);
    padding: 1.25rem;
}

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

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Table Styles – Minimal, Apple-like */
.table {
    --bs-table-bg: transparent;
    font-size: 0.875rem;
}

.table > thead > tr > th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1rem;
    background-color: transparent;
}

.table > tbody > tr > td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.table > tbody > tr:last-child > td {
    border-bottom: none;
}

.table > tbody > tr:hover > td {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(0, 0, 0, 0.015);
}

.table-procura th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.table-procura td {
    font-size: 0.875rem;
    vertical-align: middle;
}

.table-procura tbody tr {
    transition: background-color 0.15s;
}

.table-procura tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Score Stars */
.score-stars {
    color: #ffc107;
}

.score-stars .bi-star-fill { color: #ffc107; }
.score-stars .bi-star { color: #e8e8ed; }

/* Cards – No border, subtle shadow, generous padding */
.card {
    border: none;
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
    background-color: var(--bg-card);
    transition: var(--transition-default);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

.card-header {
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
}

/* RFQ Item Row */
.rfq-item-row {
    background-color: var(--bg-primary);
    border-radius: var(--radius-input);
    padding: 1.125rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Quotation Comparison */
.quotation-matrix {
    overflow-x: auto;
}

.quotation-matrix table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.quotation-best {
    background-color: rgba(52, 199, 89, 0.08) !important;
    border-left: 3px solid #34c759;
}

/* Mobile */
@media (max-width: 991.98px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
    }
    .sidebar .nav-link span,
    .sidebar .sidebar-header h5 span,
    .sidebar .sidebar-header small,
    .sidebar .nav-section,
    .sidebar .sidebar-footer .small {
        display: none;
    }
    .main-content {
        margin-left: var(--sidebar-collapsed-width);
    }
}

/* Risk Row Highlights */
.row-risk-high { background-color: rgba(255, 59, 48, 0.06) !important; }
.row-risk-medium { background-color: rgba(255, 204, 0, 0.06) !important; }
.row-risk-low { background-color: rgba(52, 199, 89, 0.04) !important; }

/* Activity Log Panel */
.activity-log-panel .log-entry {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.85rem;
}
.activity-log-panel .log-entry:last-child {
    border-bottom: none;
}
.activity-log-panel .log-entry .log-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.activity-log-panel .log-entry .log-action {
    font-weight: 600;
}

/* Column Toggle Dropdown */
.column-toggle-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 200px;
    display: none;
}
.column-toggle-dropdown.show {
    display: block;
}
.column-toggle-dropdown label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
    border-radius: var(--radius-input);
    transition: var(--transition-default);
}
.column-toggle-dropdown label:hover {
    background-color: var(--bg-primary);
}

/* Email History Modal */
.email-chain-item {
    border-left: 3px solid #e8e8ed;
    padding: 0.875rem 1.125rem;
    margin-bottom: 0.75rem;
    background: var(--bg-primary);
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.email-chain-item.outgoing {
    border-left-color: var(--primary-color);
}
.email-chain-item.incoming {
    border-left-color: #34c759;
}
.email-chain-item .email-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.email-chain-item .email-subject {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}
.email-chain-item .email-body-preview {
    font-size: 0.8rem;
    color: var(--text-primary);
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Alerts – Softer styling */
.alert {
    border: none;
    border-radius: var(--radius-card);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Dropdown Menus */
.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 0.375rem;
    font-size: 0.875rem;
}

.dropdown-item {
    border-radius: var(--radius-input);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    transition: var(--transition-default);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-primary);
}

/* Modal */
.modal-content {
    border: none;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 1.5rem;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 0.8125rem;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary);
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-default);
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

/* Pagination */
.page-link {
    border-radius: var(--radius-input);
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin: 0 2px;
    transition: var(--transition-default);
}

.page-link:hover {
    background-color: var(--bg-primary);
    color: var(--primary-color);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--radius-input);
}

/* Unauthenticated layout background */
.bg-light {
    background-color: var(--bg-primary) !important;
}

/* ── Utility classes for template refactoring ── */

/* KPI mini label */
.kpi-mini {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Chart card minimum height */
.chart-card {
    min-height: 320px;
}
.chart-card canvas {
    max-height: 280px;
}

/* Card header – always white bg (no need for bg-white) */
.card-header {
    background-color: transparent;
}

/* Progress bar height utilities */
.progress-h-8 {
    height: 8px;
}
.progress-h-24 {
    height: 24px;
}

/* Delivery status flow circle */
.status-flow-circle {
    width: 40px;
    height: 40px;
}

/* Supplier dot indicator */
.supplier-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* Purple action button */
.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
    border-radius: var(--radius-pill);
}
.btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: #fff;
    transform: scale(1.02);
}

/* Search input min-width */
.search-input-md {
    min-width: 250px;
}
.search-input-lg {
    min-width: 280px;
}

/* Autocomplete results dropdown */
.autocomplete-results {
    max-height: 200px;
    overflow-y: auto;
}

/* Threshold input (stale report) */
.input-threshold {
    width: 80px;
}

/* Clickable header */
.clickable {
    cursor: pointer;
}

/* Login card */
.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    background-color: var(--bg-card);
}

/* Page size select auto-width */
.page-size-select {
    width: auto;
}

/* ═══════════════════════════════════════
   Step Bar – Apple-inspired process steps
   ═══════════════════════════════════════ */
.step-bar { display: flex; align-items: center; gap: 0; margin-bottom: 1.5rem; }
.step-bar .stp { flex: 1; text-align: center; position: relative; padding: 0.5rem 0.25rem; }
.step-bar .stp .num {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #e8e8ed; color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem;
    transition: var(--transition-default);
}
.step-bar .stp.active .num {
    background-color: var(--primary-color); color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}
.step-bar .stp.done .num { background-color: #34c759; color: #fff; }
.step-bar .stp .lbl { font-size: 0.6875rem; color: var(--text-secondary); display: block; font-weight: 500; }
.step-bar .stp.active .lbl { color: var(--primary-color); font-weight: 600; }
.step-bar .ln { flex: 0 0 auto; width: 30px; height: 2px; background-color: #e8e8ed; border-radius: 1px; }
.step-bar .stp.done + .ln { background-color: #34c759; }

/* ═══════════════════════════════════════
   Procurement Table Variants
   ═══════════════════════════════════════ */
.q-table th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap; padding: 0.5rem 0.6rem;
}
.q-table td { font-size: 0.84rem; vertical-align: middle; padding: 0.55rem 0.6rem; }
.q-table tbody tr { transition: background-color 0.15s; }
.q-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }
.q-table tbody tr.eliminated { opacity: 0.45; background-color: var(--bg-primary); }

.sat-table th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap; padding: 0.5rem 0.6rem;
}
.sat-table td { font-size: 0.84rem; vertical-align: middle; padding: 0.55rem 0.6rem; }
.sat-table tbody tr { transition: background-color 0.15s; }
.sat-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }

.supplier-table th {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap; padding: 0.5rem 0.75rem;
}
.supplier-table td { font-size: 0.85rem; vertical-align: middle; padding: 0.65rem 0.75rem; }
.supplier-table tbody tr { transition: background-color 0.15s; }
.supplier-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }
.supplier-table tbody tr.shortlisted { background-color: rgba(0, 113, 227, 0.04); }

/* ═══════════════════════════════════════
   Nav Tabs – Apple style (procurement)
   ═══════════════════════════════════════ */
.nav-tabs .nav-link {
    color: var(--text-secondary); font-weight: 500;
    border: none; padding: 0.75rem 1.25rem;
}
.nav-tabs .nav-link.active {
    color: var(--primary-color); font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--primary-color); }

/* ═══════════════════════════════════════
   Stars (small / display / rating)
   ═══════════════════════════════════════ */
.stars-sm .bi-star-fill { color: #ffc107; font-size: 0.7rem; }
.stars-sm .bi-star { color: #e8e8ed; font-size: 0.7rem; }

.stars-display { display: inline-flex; gap: 1px; font-size: 1.1rem; }
.stars-display .star-on { color: #ffc107; }
.stars-display .star-off { color: #e8e8ed; }

.star-rating { display: inline-flex; gap: 2px; direction: rtl; font-size: 0; }
.star-rating input { display: none; }
.star-rating label { cursor: pointer; font-size: 1.3rem; color: #e8e8ed; transition: color 0.2s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #ffc107; }

/* ═══════════════════════════════════════
   Selection Status Styling
   ═══════════════════════════════════════ */
.sel-approved { background-color: #d4edda; color: #1e7e34; border-color: #c3e6cb; font-weight: 600; }
.sel-eliminated { background-color: #fde2e2; color: #c62828; border-color: #f5c6cb; font-weight: 600; }
.sel-alternative { background-color: #fff3cd; color: #8a6d00; border-color: #ffeeba; font-weight: 600; }
.sel-none { background-color: var(--bg-primary); color: var(--text-secondary); }

.sel-badge-approved {
    background-color: #d4edda; color: #1e7e34;
    padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.78rem;
}
.sel-badge-alternative {
    background-color: #fff3cd; color: #8a6d00;
    padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.78rem;
}

/* ═══════════════════════════════════════
   Email Status Badges (procurement)
   ═══════════════════════════════════════ */
.email-st {
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.email-st.ready { background-color: #d4edda; color: #1e7e34; }
.email-st.followed_up { background-color: #fde2e2; color: #c62828; }
.email-st.waiting { background-color: #fff3cd; color: #8a6d00; }

.email-badge {
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
    font-size: 0.7rem; font-weight: 600;
}
.email-badge.sent { background-color: #d4edda; color: #1e7e34; }
.email-badge.draft { background-color: #d6e4ff; color: #0050b3; }
.email-badge.edited { background-color: #fff3cd; color: #8a6d00; }

/* ═══════════════════════════════════════
   SAT Create – Group & Status
   ═══════════════════════════════════════ */
.sat-group-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-input);
    border: 1px solid var(--border-subtle); font-weight: 600;
    font-size: 0.85rem; color: var(--text-secondary);
    background-color: var(--bg-primary);
}
.sat-group-input {
    width: 50px; text-align: center; font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.12); border-radius: var(--radius-input);
    padding: 0.25rem;
}
.status-sat-created { color: #1e7e34; font-weight: 500; }
.status-sat-created i { color: #1e7e34; }
.status-pending-sat { color: var(--text-secondary); font-weight: 500; }
.status-pending-sat i { color: var(--text-secondary); }

.sup-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; }
.sup-dot.dot-blue { background-color: var(--primary-color); }
.sup-dot.dot-green { background-color: #34c759; }
.sup-dot.dot-orange { background-color: #ff9500; }

.grp-btn {
    border: 1px solid rgba(0, 0, 0, 0.12); background-color: var(--bg-card);
    padding: 0.45rem 1rem; border-radius: var(--radius-input);
    font-size: 0.82rem; font-weight: 500; color: var(--text-primary);
    cursor: pointer; transition: var(--transition-default);
}
.grp-btn:hover {
    background-color: rgba(0, 113, 227, 0.04);
    border-color: var(--primary-color); color: var(--primary-color);
}
.grp-btn-danger { border-color: #ff3b30; color: #ff3b30; }
.grp-btn-danger:hover { background-color: rgba(255, 59, 48, 0.04); border-color: #ff3b30; color: #ff3b30; }

/* ═══════════════════════════════════════
   Action Buttons (SAT page)
   ═══════════════════════════════════════ */
.action-btn {
    width: 100%; padding: 0.65rem 1rem;
    border-radius: var(--radius-input); font-weight: 600;
    font-size: 0.88rem; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: var(--transition-default);
}
.action-btn.btn-back { background-color: #ff9500; color: #fff; }
.action-btn.btn-back:hover { background-color: #e68600; }
.action-btn.btn-approve { background-color: #34c759; color: #fff; }
.action-btn.btn-approve:hover { background-color: #2db84e; }
.action-btn-disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════════
   Comment System (SAT page)
   ═══════════════════════════════════════ */
.comment-click {
    cursor: pointer; min-width: 100px; padding: 0.35rem 0.6rem;
    border-radius: var(--radius-input); border: 1px solid var(--border-subtle);
    font-size: 0.8rem; color: var(--text-secondary);
    background-color: var(--bg-primary); transition: var(--transition-default);
}
.comment-click:hover {
    background-color: rgba(0, 113, 227, 0.04);
    border-color: var(--primary-color);
}
.comment-modal-body { display: flex; flex-direction: column; height: 450px; }
.comment-list { flex: 1; overflow-y: auto; padding: 1rem; }
.comment-bubble { border-bottom: 1px solid var(--border-subtle); padding: 0.85rem 0; }
.comment-bubble:last-child { border-bottom: none; }
.comment-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.comment-author { font-weight: 600; font-size: 0.88rem; }
.comment-role { font-weight: 400; color: var(--text-secondary); font-size: 0.82rem; }
.comment-time { font-size: 0.78rem; color: var(--text-secondary); }
.comment-text { font-size: 0.88rem; color: var(--text-primary); margin-top: 0.25rem; }
.comment-input-bar {
    display: flex; gap: 0.5rem; padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-primary);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.comment-input-bar input {
    flex: 1; border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.88rem;
}
.comment-input-bar input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
.comment-input-bar button {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background-color: var(--primary-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    transition: var(--transition-default);
}
.comment-input-bar button:hover { background-color: var(--primary-hover); }

/* ═══════════════════════════════════════
   Pagination Bar (procurement)
   ═══════════════════════════════════════ */
.pagination-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; padding: 0.75rem; color: var(--text-secondary); font-size: 0.84rem;
}
.pagination-bar .page-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-input); border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: var(--bg-card); cursor: pointer;
    font-size: 0.8rem; color: var(--text-secondary);
    transition: var(--transition-default);
}
.pagination-bar .page-btn:hover {
    background-color: rgba(0, 113, 227, 0.04); color: var(--primary-color);
}

/* ═══════════════════════════════════════
   Validation Modal
   ═══════════════════════════════════════ */
.validation-modal .modal-dialog { max-width: 950px; }
.validation-modal .modal-body { padding: 0; display: flex; min-height: 480px; }
.val-email-panel {
    width: 360px; border-right: 1px solid var(--border-subtle);
    display: flex; flex-direction: column; background-color: var(--bg-primary);
}
.val-email-panel .eh-title {
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle);
    font-weight: 600; font-size: 0.85rem;
}
.val-email-list { flex: 1; overflow-y: auto; padding: 0.75rem; }
.val-email-msg {
    margin-bottom: 0.75rem; padding: 0.65rem;
    border-radius: var(--radius-input); font-size: 0.82rem;
}
.val-email-msg.out { background-color: rgba(0, 113, 227, 0.06); border: 1px solid rgba(0, 113, 227, 0.12); }
.val-email-msg.in { background-color: var(--bg-card); border: 1px solid var(--border-subtle); }
.val-email-msg .msg-header { font-weight: 600; font-size: 0.75rem; margin-bottom: 0.35rem; color: var(--text-secondary); }
.val-email-msg .attachment-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background-color: var(--bg-primary); padding: 0.15rem 0.5rem;
    border-radius: var(--radius-input); font-size: 0.72rem;
    color: var(--text-primary); margin-top: 0.35rem;
}
.val-form-panel { flex: 1; padding: 1.25rem; overflow-y: auto; }
.val-table th { font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary); }
.val-table td { font-size: 0.84rem; vertical-align: middle; }
.confidence-low {
    background-color: #fff3cd; border-radius: var(--radius-input);
    padding: 0.1rem 0.35rem;
}

/* ═══════════════════════════════════════
   Email Communication Modal / Panels
   ═══════════════════════════════════════ */
.email-modal .modal-dialog { max-width: 950px; }
.email-modal .modal-body { padding: 0; display: flex; min-height: 520px; }

.chat-panel {
    width: 300px; background-color: var(--bg-primary);
    border-right: 1px solid var(--border-subtle);
    display: flex; flex-direction: column;
}
.chat-panel .chat-header {
    padding: 1rem; border-bottom: 1px solid var(--border-subtle);
    display: flex; align-items: center; gap: 0.5rem;
}
.chat-panel .chat-header .ai-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #5856d6);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.9rem;
}
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; }
.chat-msg { margin-bottom: 0.75rem; max-width: 90%; }
.chat-msg.assistant {
    background-color: var(--bg-card); border-radius: var(--radius-input);
    padding: 0.75rem; border: 1px solid var(--border-subtle); font-size: 0.85rem;
}
.chat-msg.user {
    background-color: var(--primary-color); color: #fff;
    border-radius: var(--radius-input); padding: 0.75rem;
    margin-left: auto; font-size: 0.85rem;
}
.chat-input { padding: 0.75rem; border-top: 1px solid var(--border-subtle); }

.email-compose-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.email-chain-area {
    flex: 1; overflow-y: auto; padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}
.email-chain-msg {
    margin-bottom: 0.75rem; padding: 0.65rem;
    border-radius: var(--radius-input); font-size: 0.82rem;
}
.email-chain-msg.out { background-color: rgba(0, 113, 227, 0.06); border: 1px solid rgba(0, 113, 227, 0.12); }
.email-chain-msg.in { background-color: var(--bg-card); border: 1px solid var(--border-subtle); }
.email-chain-msg-header { font-weight: 600; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.email-compose-area { padding: 1rem; background-color: var(--bg-card); }
.email-field { margin-bottom: 0.5rem; }
.email-field label {
    font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; margin-bottom: 0.15rem; display: block;
}
.email-field input, .email-field textarea { font-size: 0.84rem; }
.email-toolbar {
    display: flex; gap: 0.25rem; padding: 0.35rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12); border-bottom: none;
    border-radius: var(--radius-input) var(--radius-input) 0 0;
    background-color: var(--bg-primary);
}
.email-toolbar button {
    background: none; border: none; padding: 0.2rem 0.4rem;
    color: var(--text-secondary); cursor: pointer;
    border-radius: var(--radius-input); font-size: 0.8rem;
    transition: var(--transition-default);
}
.email-toolbar button:hover { background-color: rgba(0, 0, 0, 0.04); color: var(--text-primary); }
.email-body-textarea {
    border-radius: 0 0 var(--radius-input) var(--radius-input) !important;
    border-top: none !important; min-height: 200px;
}

.email-form-panel { flex: 1; padding: 1.5rem; overflow-y: auto; }

/* ═══════════════════════════════════════
   Delivery Tracking
   ═══════════════════════════════════════ */
.ds-icon { font-size: 0.85rem; margin-right: 4px; }
.ds-pending { color: #ff3b30; }
.ds-confirmed { color: var(--primary-color); }
.ds-ready_to_ship { color: #ff9500; }
.ds-in_transit { color: #ff9500; }
.ds-customs { color: #ffcc00; }
.ds-partially_delivered { color: #ff9500; }
.ds-delivered { color: #34c759; }

.timing-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 600;
}
.timing-on_time { background-color: #d4edda; color: #1e7e34; }
.timing-at_risk { background-color: #fff3cd; color: #8a6d00; }
.timing-delayed { background-color: #fde2e2; color: #c62828; }

.supplier-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--primary-color);
    display: inline-block; margin-right: 8px;
}

.status-option {
    cursor: pointer; padding: 6px 12px;
    border-radius: var(--radius-input); transition: var(--transition-default);
}
.status-option:hover { background-color: var(--bg-primary); }
.status-option input { margin-right: 8px; }

/* ═══════════════════════════════════════
   Evaluation Page
   ═══════════════════════════════════════ */
.completion-badge { font-weight: 600; font-size: 0.85rem; }
.completion-0 { color: #ff3b30; }
.completion-partial { color: #ff9500; }
.completion-full { color: #34c759; }

.eval-card { border-left: 4px solid var(--primary-color); }
.eval-card.completed { border-left-color: #34c759; }

.info-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.info-dot.blue { background-color: var(--primary-color); }

/* Eval link icon */
.eval-link-icon { font-size: 0.7rem; }

/* OTIF gauge */
.otif-gauge { position: relative; width: 80px; height: 80px; }
.otif-gauge svg { transform: rotate(-90deg); }
.otif-gauge .value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 0.9rem; }

/* Reason Modal (BU Review) */
.reason-options .form-check {
    padding: 0.5rem 0.75rem; border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-input); margin-bottom: 0.35rem;
    transition: var(--transition-default);
}
.reason-options .form-check:hover { background-color: var(--bg-primary); }
.reason-options .form-check-input:checked ~ .form-check-label {
    font-weight: 600; color: var(--primary-color);
}

/* ═══════════════════════════════════════
   Utility Classes for Procurement
   ═══════════════════════════════════════ */
.supplier-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--primary-color); color: #fff;
    font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
}
.font-size-sm { font-size: 0.84rem; }
.font-size-xs { font-size: 0.72rem; }
.font-size-label { font-size: 0.85rem; }
.font-size-send { font-size: 0.9rem; }
.font-size-note { font-size: 0.8rem; min-width: 100px; }
.w-input-xs { width: 60px; }
.w-input-sm { width: 80px; }
.w-input-md { width: 100px; }
.w-input-lg { width: 120px; }
.w-input-date { width: 130px; }
.w-input-select { width: 140px; }
.w-auto-inline { width: auto; font-size: 0.82rem; }
.w-th-narrow { width: 40px; }
.w-th-action { width: 50px; }
.w-th-group { width: 70px; }
.w-th-actions-md { width: 80px; }
.min-w-item { min-width: 80px; }
.cursor-pointer { cursor: pointer; }
.sticky-sidebar { position: sticky; top: 1rem; }
.card-radius-bottom { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.card-radius-modal { border-radius: var(--radius-card); overflow: hidden; }
.modal-max-w-600 { max-width: 600px; }
.action-sidebar .btn { text-align: left; font-size: 0.85rem; }
.btn-sm-icon { padding: 0.15rem 0.4rem; font-size: 0.7rem; }
.fw-700 { font-weight: 700; }
.icon-info-sm { font-size: 0.7rem; }
.badge-candidate { font-size: 0.6rem; }
.star-rating-lg label { font-size: 1.5rem; }
.star-rating-md label { font-size: 1rem; }

/* ═══════════════════════════════════════
   Template Refactor: Utility Classes
   ═══════════════════════════════════════ */

/* Navbar brand text */
.navbar-brand-text { font-size: 1.15rem; }

/* Main content area background */
.main-bg {
    background-color: var(--bg-primary);
    min-height: calc(100vh - 56px);
}

/* Card section with generous padding */
.card-section {
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

/* Card section title */
.card-section-title {
    font-size: 1.35rem;
    color: var(--text-primary);
}

/* Card section horizontal rule */
.card-section-hr {
    margin: 0.75rem 0 1rem;
    color: var(--border-subtle);
}

/* Toast/message z-index */
.z-toast { z-index: 1050; }

/* Stat number for report cards */
.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Print */
@media print {
    .sidebar,
    .navbar,
    .btn,
    .alert {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
    }
}