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

:root {
    --primary:        #1a6899;
    --primary-dark:   #0f3d5e;
    --primary-mid:    #1d7ab8;
    --primary-light:  #018fc1;
    --primary-subtle: #e3f4fb;
    --primary-border: #b3d9ee;
    --accent:         #018fc1;
    --text-dark:      #1a2e28;
    --text-muted:     #6b7c75;
    --border-color:   #e4e8e6;
    --white:          #ffffff;
    --light-bg:       #f0f7fc;
    --sidebar-w:      262px;
    --topbar-h:       62px;
    --radius:         12px;
    --radius-sm:      8px;
    --shadow:         0 2px 14px rgba(26,104,153,.08);
    --shadow-hover:   0 6px 24px rgba(26,104,153,.16);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--light-bg); color: var(--text-dark); font-size: 14px; }
a { color: var(--primary); }

/* ─── LOGIN ─────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: linear-gradient(145deg, #1a6899 0%, #018fc1 55%, #1a6899 100%);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
    display: flex; background: #fff;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    width: 100%; max-width: 900px; min-height: 520px;
}
.login-left {
    background: linear-gradient(170deg, #1a6899 0%, #145d85 60%, #1d7ab8 100%);
    flex: 0 0 42%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 36px; position: relative; overflow: hidden;
}
.login-left::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:260px; height:260px; border-radius:50%;
    background:rgba(255,255,255,.04);
}
.login-left::after {
    content:''; position:absolute; bottom:-100px; left:-60px;
    width:300px; height:300px; border-radius:50%;
    background:rgba(255,255,255,.03);
}
.login-logo-box {
    z-index:1; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    border-radius:16px; padding:18px 28px;
    margin-bottom:28px; backdrop-filter:blur(6px);
    max-width:200px; text-align:center;
}
.login-logo-box img { max-width:160px; height:auto; filter:brightness(0) invert(1); }
.login-title { z-index:1; color:#fff; font-size:17px; font-weight:700; text-align:center; line-height:1.45; margin-bottom:10px; }
.login-sub   { z-index:1; color:rgba(255,255,255,.65); font-size:13px; text-align:center; }
.login-pills { z-index:1; display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.login-pills span {
    background:rgba(255,255,255,.14); color:#fff; font-size:11px;
    font-weight:600; padding:4px 14px; border-radius:30px; letter-spacing:.3px;
}
.login-right {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:48px 44px; background:#fff;
}
.login-form-inner { width:100%; max-width:360px; }
.login-form-inner h3 { font-size:24px; font-weight:800; color:var(--primary); margin-bottom:6px; }
.login-form-inner p  { color:var(--text-muted); font-size:13px; margin-bottom:30px; }
.input-icon-wrap { position:relative; margin-bottom:16px; }
.input-icon-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:16px; }
.input-icon-wrap input {
    width:100%; padding:11px 14px 11px 42px;
    border:2px solid #cce3f0; border-radius:var(--radius-sm);
    font-size:14px; font-family:inherit; outline:none;
    transition:border-color .2s, box-shadow .2s;
}
.input-icon-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,104,153,.1); }
.btn-login {
    width:100%; background:var(--primary); color:#fff; border:none;
    padding:13px; border-radius:var(--radius-sm); font-size:15px;
    font-weight:700; cursor:pointer; transition:all .2s; letter-spacing:.3px;
    margin-top:8px; font-family:inherit;
}
.btn-login:hover { background:var(--primary-mid); transform:translateY(-1px); box-shadow:0 6px 18px rgba(26,104,153,.3); }
.login-error { background:#fde8e8; color:#8b1a1a; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:16px; }

/* ─── APP LAYOUT ─────────────────────────────────── */
.sidebar {
    width:var(--sidebar-w); background:var(--primary);
    position:fixed; top:0; left:0; height:100vh; z-index:1000;
    display:flex; flex-direction:column; overflow-y:auto;
    transition:transform .3s;
}
.sidebar-brand { padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.sidebar-brand img { max-width:136px; height:auto; filter:brightness(0) invert(1); }
.sidebar-brand-label { color:rgba(255,255,255,.5); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-top:5px; }
.sidebar-nav { flex:1; padding:12px 0; }
.nav-section { padding:10px 22px 4px; font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.35); font-weight:700; margin-top:4px; }
.sidebar-nav a {
    display:flex; align-items:center; gap:11px; padding:10px 22px;
    color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px; font-weight:500;
    transition:all .18s; position:relative;
}
.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,.07); }
.sidebar-nav a.active { color:#fff; background:rgba(255,255,255,.12); }
.sidebar-nav a.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); border-radius:0 3px 3px 0; }
.sidebar-nav a i { font-size:17px; flex-shrink:0; }
.sidebar-footer { padding:14px 22px; border-top:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.sidebar-user { display:flex; align-items:center; gap:10px; }
.sidebar-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex-shrink:0; }
.sidebar-uname { color:#fff; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-utype { color:rgba(255,255,255,.55); font-size:11px; text-transform:capitalize; }
.sidebar-logout { color:rgba(255,255,255,.55); text-decoration:none; font-size:17px; margin-left:auto; transition:color .2s; }
.sidebar-logout:hover { color:#ff6b6b; }

/* ─── MAIN ────────────────────────────────────────── */
.main-wrap { margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }
.topbar {
    height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--border-color);
    display:flex; align-items:center; padding:0 24px; justify-content:space-between;
    position:sticky; top:0; z-index:100;
}
.topbar-title { font-size:17px; font-weight:700; color:var(--primary); }
.topbar-meta { display:flex; align-items:center; gap:14px; }
.topbar-type-badge { background:var(--primary-subtle); color:var(--primary); font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; text-transform:capitalize; letter-spacing:.4px; }
.topbar-user { font-size:13px; font-weight:500; color:var(--text-dark); }
.sidebar-toggle { display:none; background:none; border:none; font-size:22px; color:var(--primary); cursor:pointer; padding:4px; }
.content-area { flex:1; padding:24px; }

/* ─── PAGE HEADER ────────────────────────────────── */
.page-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-hdr h2 { font-size:19px; font-weight:700; color:var(--primary); }
.breadcrumb { background:none; margin:0; padding:0; font-size:12px; }
.breadcrumb-item+.breadcrumb-item::before { color:var(--text-muted); }

/* ─── CARDS ──────────────────────────────────────── */
.card { border:none; border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.card-header { background:#fff; border-bottom:1px solid #f0f0f0; padding:15px 20px; border-radius:var(--radius) var(--radius) 0 0 !important; }
.card-header h5 { font-size:14px; font-weight:700; color:var(--primary); margin:0; }
.card-header .text-muted { font-size:12px; }
.card-body { padding:20px; }

/* stat cards */
.stat-card { border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); padding:20px; transition:all .2s; display:block; text-decoration:none; color:inherit; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); color:inherit; }
.stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.stat-icon-g  { background:rgba(26,104,153,.08);  color:var(--primary); }
.stat-icon-t  { background:rgba(1,143,193,.12); color:#018fc1; }
.stat-icon-b  { background:rgba(13,110,253,.1);  color:#0d6efd; }
.stat-icon-o  { background:rgba(255,152,0,.12);  color:#ff9800; }
.stat-val { font-size:30px; font-weight:800; color:var(--primary); line-height:1; }
.stat-lbl { font-size:12px; color:var(--text-muted); margin-top:3px; font-weight:500; }

/* ─── TABLES ─────────────────────────────────────── */
.table { font-size:13.5px; }
.table thead th { background:#f4faff; color:var(--primary); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--primary-border) !important; padding:11px 14px; vertical-align:middle; border-top:none; }
.table tbody td { padding:11px 14px; vertical-align:middle; border-bottom:1px solid #f5f5f5; color:var(--text-dark); }
.table tbody tr:hover td { background:#f5fbff; }
.table tbody tr:last-child td { border-bottom:none; }

/* ─── BADGES ─────────────────────────────────────── */
.badge-type { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.badge-signage { background:rgba(13,110,253,.1);   color:#0d6efd; }
.badge-textile { background:rgba(111,66,193,.1);   color:#6f42c1; }
.badge-active   { background:rgba(1,143,193,.12); color:#018fc1; }
.badge-inactive { background:rgba(108,117,125,.1); color:#555; }
.badge-success  { background:rgba(1,143,193,.12); color:#018fc1; }
.badge-pending  { background:rgba(255,152,0,.12);  color:#a06400; }

/* ─── FORMS ──────────────────────────────────────── */
.form-label { font-size:13px; font-weight:600; color:var(--text-dark); margin-bottom:5px; }
.form-control, .form-select {
    border:2px solid #cce3f0; border-radius:var(--radius-sm);
    font-size:13.5px; padding:8px 12px; transition:all .2s;
    font-family:inherit; color:var(--text-dark); background:#fff;
}
.form-control:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,104,153,.08); outline:none; }
.form-section { background:#f4faff; border:2px solid #cce3f0; border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.form-section-hdr { font-size:14px; font-weight:700; color:var(--primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.form-section-hdr::before { content:''; width:4px; height:18px; background:var(--primary); border-radius:2px; flex-shrink:0; }
.check-col-hdr { font-size:12px; font-weight:700; color:var(--primary-mid); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.chk-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; margin-bottom:1px; transition:background .15s; }
.chk-item:hover { background:rgba(26,104,153,.05); }
.chk-item input[type=checkbox], .chk-item input[type=radio] { accent-color:var(--primary); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
.chk-item label { font-size:13px; cursor:pointer; margin:0; color:var(--text-dark); }

/* ─── BUTTONS ────────────────────────────────────── */
.btn { border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; font-family:inherit; transition:all .18s; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-mid); border-color:var(--primary-mid); color:#fff; box-shadow:0 4px 14px rgba(26,104,153,.25); }
.btn-outline-primary { color:var(--primary); border-color:var(--primary); border-width:2px; }
.btn-outline-primary:hover { background:var(--primary); border-color:var(--primary); }
.btn-act { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; font-size:13px; }

/* ─── FILTER BAR ─────────────────────────────────── */
.filter-bar { background:#fff; border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow); margin-bottom:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.filter-bar .fb-group { flex:1; min-width:150px; }
.filter-bar label { font-size:11.5px; font-weight:600; color:var(--text-muted); margin-bottom:4px; display:block; text-transform:uppercase; letter-spacing:.4px; }

/* ─── ALERT ──────────────────────────────────────── */
.alert { border:none; border-radius:var(--radius-sm); font-size:13.5px; padding:12px 16px; }
.alert-success { background:#e8f8f0; color:#0a5436; }
.alert-danger   { background:#fde8e8; color:#8b1a1a; }
.alert-warning  { background:#fff8e1; color:#7a5a00; }
.alert-info     { background:#e3f2fd; color:#0d47a1; }

/* ─── LEAD DETAIL VIEW ───────────────────────────── */
.lead-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.lead-info-item { padding:12px 0; border-bottom:1px solid #f0f0f0; }
.lead-info-item .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:700; margin-bottom:3px; }
.lead-info-item .val { font-size:13.5px; color:var(--text-dark); font-weight:500; }
.lead-info-item.full { grid-column:1/-1; }

/* ─── FILE UPLOAD ────────────────────────────────── */
.file-drop { border:2px dashed var(--primary-border); border-radius:var(--radius); padding:22px; text-align:center; background:#f5fbff; transition:all .2s; }
.file-drop:hover { border-color:var(--primary); background:var(--primary-subtle); }
.file-drop i { font-size:32px; color:var(--primary-border); margin-bottom:8px; display:block; }
.file-drop p { font-size:13px; color:var(--text-muted); margin:0; }
.file-drop input[type=file] { opacity:0; position:absolute; inset:0; cursor:pointer; width:100%; height:100%; }
.file-drop-inner { position:relative; display:inline-block; }

/* ─── MODAL ──────────────────────────────────────── */
.modal-content { border:none; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-header { background:var(--primary); color:#fff; padding:15px 20px; border-radius:var(--radius) var(--radius) 0 0; border-bottom:none; }
.modal-title { font-size:15px; font-weight:700; }
.modal-header .btn-close { filter:invert(1); }
.modal-body { padding:20px; }
.modal-footer { padding:14px 20px; border-top:1px solid #f0f0f0; }

/* ─── SELECT2 OVERRIDE ───────────────────────────── */
.select2-container--default .select2-selection--single {
    border:2px solid #cce3f0 !important; border-radius:var(--radius-sm) !important;
    height:40px !important; display:flex; align-items:center;
}
.select2-container--default.select2-container--focus .select2-selection--single { border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(26,104,153,.08) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:36px; padding:0 12px; font-size:13.5px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:38px; right:8px; }
.select2-dropdown { border:2px solid var(--primary) !important; border-radius:var(--radius-sm) !important; box-shadow:0 8px 24px rgba(0,0,0,.12) !important; }
.select2-container--default .select2-results__option--highlighted { background:var(--primary) !important; }

/* ─── MISC ───────────────────────────────────────── */
.divider { height:1px; background:#f0f0f0; margin:16px 0; }
.text-primary { color:var(--primary) !important; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:#a8c8e0; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-mid); }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-wrap { margin-left:0; }
    .sidebar-toggle { display:block; }
    .login-card { flex-direction:column; }
    .login-left { flex:0 0 auto; padding:30px 24px; }
    .login-right { padding:30px 24px; }
    .lead-info-grid { grid-template-columns:1fr; }
    .filter-bar { flex-direction:column; }
    .filter-bar .fb-group { min-width:100%; }
}
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; }
.overlay.show { display:block; }