/**
 * FABIQ NC Quote Module - Stylesheet
 * Based on newquote module design system
 * Version 1.0
 */

/* ===== CSS Variables ===== */
:root {
    --primary-color: #1a2b4a;
    --primary-light: #2d4a7c;
    --primary-dark: #0f1a2e;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --accent-light: #60a5fa;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #06b6d4;
    --bg-color: #f0f4f8;
    --bg-dark: #e2e8f0;
    --card-bg: #ffffff;
    --sidebar-bg: #1a2b4a;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #ffffff;
    --border-color: #e2e8f0;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --sidebar-width: 240px;
    --header-height: 64px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--accent-color); text-decoration:none; transition: var(--transition-fast); }
a:hover { color: var(--accent-hover); }
ul, ol { list-style:none; }
img { max-width:100%; height:auto; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }
input, select, textarea { font-family:inherit; font-size:inherit; outline:none; }

/* ===== Layout ===== */
.app-container { display:flex; min-height:100vh; }

/* ===== Sidebar ===== */
.sidebar {
    position:fixed; left:0; top:0; width:var(--sidebar-width); height:100vh;
    background:var(--sidebar-bg); color:var(--text-light);
    display:flex; flex-direction:column; z-index:1000; transition:var(--transition);
}
.sidebar-header {
    padding:20px; display:flex; align-items:center; gap:12px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.sidebar-logo-img { height:44px; width:auto; object-fit:contain; }
.sidebar-nav { flex:1; padding:16px 0; overflow-y:auto; }
.nav-section { margin-bottom:24px; }
.nav-section-title {
    padding:0 20px; margin-bottom:8px; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,0.4);
}
.nav-item {
    display:flex; align-items:center; padding:12px 20px; gap:12px;
    color:rgba(255,255,255,0.7); transition:var(--transition-fast); cursor:pointer;
}
.nav-item:hover { background:rgba(255,255,255,0.1); color:var(--text-light); }
.nav-item.active {
    background:rgba(59,130,246,0.2); color:var(--accent-light);
    border-right:3px solid var(--accent-color);
}
.nav-item i { width:20px; text-align:center; font-size:16px; }
.nav-item span { flex:1; }
.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.1); }
.user-info { display:flex; align-items:center; gap:12px; }
.user-avatar {
    width:36px; height:36px; border-radius:50%; background:var(--accent-color);
    display:flex; align-items:center; justify-content:center; font-weight:600;
}
.user-details { flex:1; min-width:0; }
.user-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:11px; color:rgba(255,255,255,0.5); }

/* ===== Main Content ===== */
.main-content { flex:1; margin-left:var(--sidebar-width); min-height:100vh; display:flex; flex-direction:column; }

/* ===== Header ===== */
.main-header {
    height:var(--header-height); background:var(--card-bg); border-bottom:1px solid var(--border-color);
    display:flex; align-items:center; justify-content:space-between; padding:0 24px;
    position:sticky; top:0; z-index:100;
}
.header-left { display:flex; align-items:center; gap:16px; }
.mobile-menu-btn { display:none; padding:8px; font-size:20px; color:var(--text-secondary); background:transparent; }
.page-title { font-size:20px; font-weight:600; color:var(--text-primary); }
.header-right { display:flex; align-items:center; gap:16px; }
.header-btn {
    padding:8px 12px; background:transparent; color:var(--text-secondary);
    border-radius:var(--border-radius); transition:var(--transition-fast); position:relative;
}
.header-btn:hover { background:var(--bg-color); color:var(--text-primary); }
.notification-dot {
    position:absolute; top:6px; right:6px; width:8px; height:8px;
    background:var(--danger-color); border-radius:50%;
}
.user-dropdown-btn {
    display:flex; align-items:center; gap:8px; padding:6px 12px;
    background:var(--bg-color); border-radius:var(--border-radius); cursor:pointer;
    transition:var(--transition-fast);
}
.user-dropdown-btn:hover { background:var(--bg-dark); }

/* ===== Page Content ===== */
.page-content { flex:1; padding:24px; }

/* ===== Cards ===== */
.card { background:var(--card-bg); border-radius:var(--border-radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.card-header { padding:16px 20px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.card-body { padding:20px; }
.card-footer { padding:16px 20px; border-top:1px solid var(--border-color); background:var(--bg-color); }

/* ===== Stats Cards ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin-bottom:24px; }
.stat-card { background:var(--card-bg); border-radius:var(--border-radius-lg); padding:20px; box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:16px; }
.stat-icon { width:48px; height:48px; border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; font-size:20px; }
.stat-icon.blue { background:rgba(59,130,246,0.1); color:var(--accent-color); }
.stat-icon.green { background:rgba(16,185,129,0.1); color:var(--success-color); }
.stat-icon.orange { background:rgba(245,158,11,0.1); color:var(--warning-color); }
.stat-icon.purple { background:rgba(139,92,246,0.1); color:#8b5cf6; }
.stat-content { flex:1; }
.stat-value { font-size:28px; font-weight:700; color:var(--text-primary); line-height:1.2; }
.stat-label { font-size:13px; color:var(--text-secondary); margin-top:4px; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; font-size:14px; font-weight:500; border-radius:var(--border-radius); transition:var(--transition-fast); cursor:pointer; border:none; }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-primary { background:var(--accent-color); color:white; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--bg-color); color:var(--text-primary); }
.btn-secondary:hover { background:var(--bg-dark); }
.btn-success { background:var(--success-color); color:white; }
.btn-success:hover { background:#059669; }
.btn-warning { background:var(--warning-color); color:white; }
.btn-danger { background:var(--danger-color); color:white; }
.btn-danger:hover { background:#dc2626; }
.btn-outline { background:transparent; border:1px solid var(--border-color); color:var(--text-primary); }
.btn-outline:hover { background:var(--bg-color); border-color:var(--text-muted); }
.btn-icon { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.btn-ghost { background:transparent; color:var(--text-secondary); padding:6px 10px; }
.btn-ghost:hover { background:var(--bg-color); color:var(--text-primary); }

/* ===== Forms ===== */
.form-group { margin-bottom:16px; }
.form-label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--text-primary); }
.form-label.required::after { content:'*'; color:var(--danger-color); margin-left:4px; }
.form-control {
    width:100%; padding:10px 14px; font-size:14px; border:1px solid var(--border-color);
    border-radius:var(--border-radius); background:var(--card-bg); color:var(--text-primary);
    transition:var(--transition-fast);
}
.form-control:focus { border-color:var(--accent-color); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.form-control::placeholder { color:var(--text-muted); }
.form-control:disabled { background:var(--bg-color); cursor:not-allowed; }
.form-control.error { border-color:var(--danger-color); }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; }
.input-group { display:flex; align-items:stretch; }
.input-group .form-control { border-radius:var(--border-radius) 0 0 var(--border-radius); }
.input-group-append {
    display:flex; align-items:center; padding:0 14px; background:var(--bg-color);
    border:1px solid var(--border-color); border-left:none;
    border-radius:0 var(--border-radius) var(--border-radius) 0; font-size:13px; color:var(--text-secondary);
}
select.form-control {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}

/* ===== Tables ===== */
.table-container { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--border-color); }
.table th { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); background:var(--bg-color); }
.table tbody tr:hover { background:var(--bg-color); }
.table tbody tr.selected { background:rgba(59,130,246,0.05); }
.table td.actions { white-space:nowrap; }
.table-actions { display:flex; gap:8px; }

/* ===== Editable Cell ===== */
.table td.editable { cursor:pointer; position:relative; }
.table td.editable:hover { background:rgba(59,130,246,0.05); }
.table td.editable.modified { background:rgba(59,130,246,0.08); color:var(--accent-color); font-weight:500; }
.table td.editable input {
    width:100%; padding:4px 8px; border:1px solid var(--accent-color); border-radius:4px;
    font-size:inherit; background:white; color:var(--text-primary);
}

/* ===== Status Badges ===== */
.badge { display:inline-flex; align-items:center; padding:4px 10px; font-size:12px; font-weight:500; border-radius:20px; }
.badge-draft { background:rgba(100,116,139,0.1); color:var(--text-secondary); }
.badge-pending { background:rgba(245,158,11,0.1); color:var(--warning-color); }
.badge-approved { background:rgba(16,185,129,0.1); color:var(--success-color); }
.badge-rejected { background:rgba(239,68,68,0.1); color:var(--danger-color); }
.badge-invoiced { background:rgba(139,92,246,0.1); color:#8b5cf6; }

/* ===== Tabs ===== */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border-color); margin-bottom:20px; }
.tab-item {
    padding:12px 20px; font-size:14px; font-weight:500; color:var(--text-secondary);
    background:transparent; border:none; cursor:pointer; transition:var(--transition-fast); position:relative;
}
.tab-item:hover { color:var(--text-primary); }
.tab-item.active { color:var(--accent-color); }
.tab-item.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent-color); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ===== Search & Filters ===== */
.search-bar { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.search-input-wrapper { position:relative; flex:1; min-width:250px; }
.search-input-wrapper i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.search-input-wrapper input { padding-left:40px; }
.filter-group { display:flex; gap:8px; }

/* ===== Pagination ===== */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; }
.pagination-btn {
    padding:8px 12px; font-size:14px; background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:var(--border-radius); color:var(--text-primary); cursor:pointer; transition:var(--transition-fast);
}
.pagination-btn:hover:not(:disabled) { background:var(--bg-color); border-color:var(--text-muted); }
.pagination-btn:disabled { opacity:0.5; cursor:not-allowed; }
.pagination-btn.active { background:var(--accent-color); color:white; border-color:var(--accent-color); }
.pagination-info { font-size:13px; color:var(--text-secondary); }

/* ===== Modal ===== */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center;
    justify-content:center; z-index:2000; opacity:0; visibility:hidden; transition:var(--transition);
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal {
    background:var(--card-bg); border-radius:var(--border-radius-lg); box-shadow:var(--shadow-lg);
    width:100%; max-width:500px; max-height:90vh; overflow:hidden;
    transform:translateY(-20px); transition:var(--transition);
}
.modal-overlay.active .modal { transform:translateY(0); }
.modal-lg { max-width:800px; }
.modal-header { padding:20px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:18px; font-weight:600; }
.modal-close {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--border-radius); background:transparent; color:var(--text-secondary); font-size:20px; cursor:pointer;
}
.modal-close:hover { background:var(--bg-color); color:var(--text-primary); }
.modal-body { padding:20px; overflow-y:auto; max-height:calc(90vh - 140px); }
.modal-footer { padding:16px 20px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:12px; }

/* ===== Toast ===== */
.toast-container { position:fixed; top:20px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:10px; }
.toast {
    display:flex; align-items:center; gap:12px; padding:14px 20px; background:var(--card-bg);
    border-radius:var(--border-radius); box-shadow:var(--shadow-lg); min-width:300px; max-width:450px;
    transform:translateX(100%); opacity:0; animation:slideIn 0.3s ease forwards;
}
@keyframes slideIn { to { transform:translateX(0); opacity:1; } }
.toast.hiding { animation:slideOut 0.3s ease forwards; }
@keyframes slideOut { to { transform:translateX(100%); opacity:0; } }
.toast-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast-success .toast-icon { background:rgba(16,185,129,0.1); color:var(--success-color); }
.toast-error .toast-icon { background:rgba(239,68,68,0.1); color:var(--danger-color); }
.toast-warning .toast-icon { background:rgba(245,158,11,0.1); color:var(--warning-color); }
.toast-info .toast-icon { background:rgba(59,130,246,0.1); color:var(--accent-color); }
.toast-content { flex:1; }
.toast-title { font-weight:600; margin-bottom:2px; }
.toast-message { font-size:13px; color:var(--text-secondary); }
.toast-close { padding:4px; background:transparent; color:var(--text-muted); cursor:pointer; }
.toast-close:hover { color:var(--text-primary); }

/* ===== Loading ===== */
.loading-overlay { position:fixed; inset:0; background:rgba(255,255,255,0.8); display:flex; align-items:center; justify-content:center; z-index:2500; }
.spinner { width:40px; height:40px; border:3px solid var(--border-color); border-top-color:var(--accent-color); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { margin-top:12px; font-size:14px; color:var(--text-secondary); }

/* ===== Empty State ===== */
.empty-state { text-align:center; padding:60px 20px; }
.empty-icon { font-size:48px; color:var(--text-muted); margin-bottom:16px; }
.empty-title { font-size:18px; font-weight:600; margin-bottom:8px; }
.empty-text { font-size:14px; color:var(--text-secondary); margin-bottom:20px; }

/* ===== Stepper ===== */
.stepper { display:flex; margin-bottom:24px; }
.step { flex:1; display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--card-bg); position:relative; }
.step:first-child { border-radius:var(--border-radius) 0 0 var(--border-radius); }
.step:last-child { border-radius:0 var(--border-radius) var(--border-radius) 0; }
.step::after { content:''; position:absolute; right:-12px; top:50%; transform:translateY(-50%); border:12px solid transparent; border-left-color:var(--card-bg); z-index:1; }
.step:last-child::after { display:none; }
.step-number { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; background:var(--bg-color); color:var(--text-secondary); flex-shrink:0; }
.step.active .step-number { background:var(--accent-color); color:white; }
.step.completed .step-number { background:var(--success-color); color:white; }
.step-content { flex:1; min-width:0; }
.step-title { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.step-subtitle { font-size:12px; color:var(--text-muted); }
.step.active { background:var(--primary-color); color:white; }
.step.active::after { border-left-color:var(--primary-color); }
.step.active .step-subtitle { color:rgba(255,255,255,0.7); }

/* ===== Upload Zone ===== */
.upload-zone {
    border:2px dashed var(--border-color); border-radius:var(--border-radius-lg); padding:40px 20px;
    text-align:center; transition:var(--transition-fast); cursor:pointer;
}
.upload-zone:hover, .upload-zone.dragover { border-color:var(--accent-color); background:rgba(59,130,246,0.05); }
.upload-icon { font-size:48px; color:var(--text-muted); margin-bottom:16px; }
.upload-title { font-size:16px; font-weight:600; margin-bottom:8px; }
.upload-subtitle { font-size:14px; color:var(--text-secondary); }
.upload-actions { display:flex; justify-content:center; gap:12px; margin-top:20px; }

/* ===== Dashboard Grid ===== */
.dashboard-grid { display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.dashboard-full { grid-column:1 / -1; }

/* ===== Quote Builder ===== */
.quote-builder { display:grid; grid-template-columns:1fr 320px; gap:24px; }
.quote-main { display:flex; flex-direction:column; gap:20px; }
.quote-sidebar { position:sticky; top:calc(var(--header-height) + 24px); height:fit-content; }
.quote-summary { background:var(--card-bg); border-radius:var(--border-radius-lg); box-shadow:var(--shadow); }
.summary-header { padding:16px 20px; border-bottom:1px solid var(--border-color); font-size:16px; font-weight:600; }
.summary-body { padding:20px; }
.summary-row { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; }
.summary-row.total { border-top:2px solid var(--border-color); margin-top:12px; padding-top:16px; font-size:18px; font-weight:700; }
.summary-row.total .summary-value { color:var(--accent-color); }
.summary-label { color:var(--text-secondary); }
.summary-value { font-weight:500; }
.summary-actions { padding:20px; border-top:1px solid var(--border-color); display:flex; flex-direction:column; gap:10px; }

/* ===== Master-Detail Layout ===== */
.master-detail { display:grid; grid-template-columns:340px 1fr; gap:0; height:calc(100vh - var(--header-height) - 48px); }
.master-panel {
    border-right:1px solid var(--border-color); background:var(--card-bg);
    display:flex; flex-direction:column; overflow:hidden; border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);
    box-shadow:var(--shadow);
}
.master-header { padding:16px; border-bottom:1px solid var(--border-color); }
.master-search { position:relative; margin-top:12px; }
.master-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.master-search input { width:100%; padding:8px 12px 8px 36px; font-size:13px; border:1px solid var(--border-color); border-radius:var(--border-radius); }
.master-list { flex:1; overflow-y:auto; }
.master-item {
    padding:14px 16px; border-bottom:1px solid var(--border-color); cursor:pointer;
    transition:var(--transition-fast);
}
.master-item:hover { background:var(--bg-color); }
.master-item.active { background:rgba(59,130,246,0.08); border-left:3px solid var(--accent-color); }
.master-item-title { font-weight:600; font-size:14px; margin-bottom:2px; }
.master-item-sub { font-size:12px; color:var(--text-secondary); }
.master-item-badge { float:right; }
.detail-panel {
    background:var(--card-bg); display:flex; flex-direction:column; overflow-y:auto;
    border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0; box-shadow:var(--shadow);
}
.detail-header { padding:20px; border-bottom:1px solid var(--border-color); }
.detail-body { padding:20px; flex:1; overflow-y:auto; }
.detail-empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-muted); flex-direction:column; gap:12px; }
.detail-empty i { font-size:48px; }

/* ===== Rates Layout ===== */
.rates-layout { display:grid; grid-template-columns:280px 1fr; gap:24px; }
.rate-lib-list { display:flex; flex-direction:column; gap:8px; }
.rate-lib-item {
    padding:14px 16px; background:var(--card-bg); border-radius:var(--border-radius);
    box-shadow:var(--shadow-sm); cursor:pointer; transition:var(--transition-fast);
    border:2px solid transparent;
}
.rate-lib-item:hover { border-color:var(--accent-light); }
.rate-lib-item.active { border-color:var(--accent-color); background:rgba(59,130,246,0.05); }
.rate-lib-item .lib-name { font-weight:600; font-size:14px; }
.rate-lib-item .lib-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.rate-lib-item .lib-default { display:inline-block; padding:2px 8px; background:rgba(16,185,129,0.1); color:var(--success-color); font-size:11px; border-radius:10px; margin-top:4px; }

/* ===== Upload Layout (side-by-side) ===== */
.upload-layout { display:flex; gap:16px; height:240px; }
.upload-layout .upload-zone { flex:1; min-width:0; margin:0; overflow:hidden; }
.file-panel {
    flex:1; min-width:0; display:flex; flex-direction:column;
    border:1px solid var(--border-color); border-radius:var(--border-radius-lg);
    padding:12px 16px; background:var(--card-bg);
}
.file-panel .file-count { font-size:13px; color:var(--text-secondary); margin-bottom:8px; flex-shrink:0; }
.file-panel .file-list { flex:1; overflow-y:auto; margin-top:0; max-height:none; }
@media (max-width:768px) {
    .upload-layout { flex-direction:column; height:auto; }
    .upload-layout .upload-zone { height:200px; }
    .file-panel { min-height:200px; }
}

/* ===== File List ===== */
.file-list { max-height:300px; overflow-y:auto; margin-top:16px; }
.file-item {
    display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--border-color);
    border-radius:var(--border-radius); margin-bottom:6px; background:var(--card-bg);
}
.file-item i { color:var(--text-muted); }
.file-item .file-name { flex:1; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-item .file-size { font-size:12px; color:var(--text-secondary); }
.file-item .file-remove { color:var(--danger-color); cursor:pointer; padding:4px; background:transparent; }
.file-item .file-remove:hover { background:rgba(239,68,68,0.1); border-radius:4px; }
.file-count { font-size:13px; color:var(--text-secondary); margin-top:8px; }

/* ===== Margin Slider ===== */
.margin-slider-group { margin:16px 0; }
.margin-slider-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.margin-slider-label { font-size:13px; font-weight:500; }
.margin-slider-value { font-size:16px; font-weight:700; color:var(--accent-color); }
input[type="range"] {
    width:100%; height:6px; -webkit-appearance:none; appearance:none; background:var(--bg-dark);
    border-radius:3px; outline:none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:var(--accent-color); cursor:pointer; box-shadow:var(--shadow-sm);
}

/* ===== No Auth Banner ===== */
.no-auth-banner {
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); border:1px solid #f59e0b;
    border-radius:var(--border-radius); padding:12px 20px; margin:0 24px 16px 24px;
    color:#92400e; font-size:14px;
}
.no-auth-banner i { font-size:18px; color:#f59e0b; }
.no-auth-banner .btn { margin-left:auto; padding:6px 16px; font-size:13px; }

/* ===== Toolbar ===== */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.toolbar-left { display:flex; align-items:center; gap:12px; flex:1; }
.toolbar-right { display:flex; align-items:center; gap:8px; }

/* ===== Price Calculator Card ===== */
.calc-card { background:var(--bg-color); border-radius:var(--border-radius); padding:16px; margin-top:20px; }
.calc-card h4 { font-size:14px; font-weight:600; margin-bottom:12px; }
.calc-result { font-size:20px; font-weight:700; color:var(--accent-color); margin-top:12px; }

/* ===== Responsive ===== */
@media (max-width:1200px) {
    .quote-builder { grid-template-columns:1fr; }
    .quote-sidebar { position:static; }
    .dashboard-grid { grid-template-columns:1fr; }
    .master-detail { grid-template-columns:1fr; }
    .rates-layout { grid-template-columns:1fr; }
}
@media (max-width:992px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; }
    .mobile-menu-btn { display:flex; }
    .stepper { flex-direction:column; }
    .step { border-radius:0; }
    .step:first-child { border-radius:var(--border-radius) var(--border-radius) 0 0; }
    .step:last-child { border-radius:0 0 var(--border-radius) var(--border-radius); }
    .step::after { display:none; }
}
@media (max-width:768px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .search-bar { flex-direction:column; }
    .search-input-wrapper { min-width:100%; }
    .filter-group { flex-wrap:wrap; }
    .modal { margin:20px; }
}
@media (max-width:576px) {
    .stats-grid { grid-template-columns:1fr; }
    .page-content { padding:16px; }
    .card-body { padding:16px; }
    .form-row { grid-template-columns:1fr; }
}

/* ===== Print ===== */
@media print {
    .sidebar, .main-header, .btn, .search-bar, .pagination, .no-auth-banner { display:none !important; }
    .main-content { margin-left:0; }
    .card { box-shadow:none; border:1px solid #ddd; }
}