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

:root {
    --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d;
    --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309;
    --amber-800:#92400e; --amber-900:#78350f;
    --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
    --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
    --stone-800:#292524; --stone-900:#1c1917;
    --green-100:#dcfce7; --green-600:#16a34a; --green-700:#15803d;
    --red-100:#fee2e2;   --red-600:#dc2626;   --red-700:#b91c1c;
    --blue-100:#dbeafe;  --blue-600:#2563eb;  --blue-700:#1d4ed8;
    --purple-100:#f3e8ff;--purple-600:#9333ea;
    --white:#ffffff;
    --shadow-sm:0 1px 2px rgba(0,0,0,.05);
    --shadow-md:0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:0 8px 30px rgba(0,0,0,.1);
    --shadow-xl:0 20px 50px rgba(0,0,0,.12);
    --radius:12px; --radius-lg:16px; --radius-xl:20px;
    --transition:.2s ease;
}

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

body {
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    background:var(--stone-50);
    color:var(--stone-800);
    line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}

a { color:var(--amber-700); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== TOPBAR ===== */
.topbar {
    background:linear-gradient(135deg,var(--amber-600),var(--amber-700));
    color:#fff;
    padding:12px 28px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    box-shadow:var(--shadow-md);
}
.topbar-left { display:flex; align-items:center; gap:14px; min-width:0; }
.topbar-left h1 { font-size:17px; font-weight:700; white-space:nowrap; }
.topbar-left .tagline { font-size:11px; opacity:.85; font-weight:300; white-space:nowrap; }
.topbar-nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.topbar-nav a {
    color:#fff; padding:7px 12px; border-radius:7px; font-size:12.5px; font-weight:500;
    background:rgba(255,255,255,.08); transition:var(--transition); white-space:nowrap;
}
.topbar-nav a:hover { background:rgba(255,255,255,.18); text-decoration:none; }
.topbar-nav a.active { background:rgba(255,255,255,.28); }
.topbar-right { display:flex; align-items:center; gap:12px; font-size:13px; justify-self:end; flex-wrap:nowrap; }
.user-label { font-weight:600; opacity:.95; white-space:nowrap; }
.user-role {
    background:rgba(255,255,255,.18); padding:3px 10px; border-radius:12px;
    font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.04em;
    white-space:nowrap;
}
.btn-logout { color:#fff; opacity:.85; font-size:13px; white-space:nowrap; }
.btn-logout:hover { opacity:1; text-decoration:underline; }

@media (max-width: 1100px) {
    .topbar { grid-template-columns:1fr auto; row-gap:12px; padding:12px 18px; }
    .topbar-left { grid-column:1; }
    .topbar-right { grid-column:2; }
    .topbar-nav { grid-column:1 / -1; justify-content:flex-start; }
    .topbar-left .tagline { display:none; }
}
@media (max-width: 600px) {
    .topbar { padding:10px 14px; gap:10px; }
    .topbar-left h1 { font-size:15px; }
    .user-label { display:none; }
    .topbar-nav a { padding:6px 9px; font-size:12px; }
}

/* ===== LAYOUT ===== */
.main-wrapper { max-width:1280px; margin:0 auto; padding:32px 40px; }
@media(max-width:768px) { .main-wrapper { padding:16px; } }

.page-header { margin-bottom:24px; }
.page-header h2 {
    font-family:'Playfair Display',serif;
    font-size:28px; font-weight:700; color:var(--stone-900); margin-bottom:4px;
}
.page-header .desc { color:var(--stone-500); font-size:14px; }

/* ===== STAT CARDS ===== */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-bottom:32px;
}
.stat-card {
    background:#fff;
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--stone-100);
    border-left:4px solid var(--amber-500);
    transition:var(--transition);
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-card.success { border-left-color:#10b981; }
.stat-card.warning { border-left-color:#f59e0b; }
.stat-card.danger  { border-left-color:#ef4444; }
.stat-card.info    { border-left-color:#3b82f6; }
.stat-number { font-size:32px; font-weight:700; color:var(--stone-900); line-height:1.1; }
.stat-label { font-size:12px; color:var(--stone-500); text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }
.stat-sub { font-size:13px; color:var(--stone-600); margin-top:8px; }

/* ===== CARDS ===== */
.card {
    background:#fff;
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--stone-100);
    margin-bottom:20px;
}
.card h3 {
    font-size:18px; font-weight:600; color:var(--stone-900); margin-bottom:14px;
    display:flex; align-items:center; gap:8px;
}
.card h4 {
    font-size:14px; font-weight:600; color:var(--stone-700);
    margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em;
}

/* ===== BUTTONS ===== */
.btn {
    display:inline-block; padding:10px 20px; border-radius:8px;
    font-weight:600; font-size:14px; cursor:pointer; border:none;
    transition:var(--transition); text-decoration:none; line-height:1;
}
.btn-primary { background:var(--amber-600); color:#fff; }
.btn-primary:hover { background:var(--amber-700); transform:translateY(-1px); text-decoration:none; }
.btn-secondary { background:#fff; color:var(--amber-700); border:2px solid var(--amber-600); }
.btn-secondary:hover { background:var(--amber-50); text-decoration:none; }
.btn-ghost { background:transparent; color:var(--stone-600); }
.btn-ghost:hover { background:var(--stone-100); text-decoration:none; }
.btn-danger { background:var(--red-600); color:#fff; }
.btn-danger:hover { background:var(--red-700); text-decoration:none; }
.btn-success { background:var(--green-600); color:#fff; }
.btn-success:hover { background:var(--green-700); text-decoration:none; }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-block { display:block; width:100%; text-align:center; }

/* ===== FORMS ===== */
.form-group { margin-bottom:18px; }
.form-group label {
    display:block; font-size:13px; font-weight:600; color:var(--stone-700);
    margin-bottom:6px;
}
.form-group label .required { color:var(--red-600); }
.form-input, .form-select, .form-textarea {
    width:100%; padding:11px 14px; border:1.5px solid var(--stone-200);
    border-radius:8px; font-size:14px; font-family:inherit; transition:var(--transition);
    background:#fff; color:var(--stone-800);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline:none; border-color:var(--amber-500); box-shadow:0 0 0 3px rgba(245,158,11,.15);
}
.form-textarea { resize:vertical; min-height:90px; }
.form-hint { font-size:12px; color:var(--stone-500); margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px) { .form-row { grid-template-columns:1fr; } }

.form-checkbox-group { display:flex; align-items:flex-start; gap:10px; padding:10px 0; }
.form-checkbox-group input[type="checkbox"] {
    width:18px; height:18px; margin-top:3px; flex-shrink:0; cursor:pointer; accent-color:var(--amber-600);
}
.form-checkbox-group label { font-size:13px; color:var(--stone-700); cursor:pointer; line-height:1.5; }

/* ===== ALERTS ===== */
.alert { padding:14px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.alert-error   { background:var(--red-100);    color:var(--red-700);    border:1px solid #fecaca; }
.alert-success { background:var(--green-100);  color:var(--green-700);  border:1px solid #bbf7d0; }
.alert-info    { background:var(--blue-100);   color:var(--blue-700);   border:1px solid #bfdbfe; }
.alert-warning { background:var(--amber-100);  color:var(--amber-800);  border:1px solid var(--amber-300); }

/* ===== LOGIN PAGE ===== */
.login-page {
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    background:linear-gradient(135deg,var(--amber-50) 0%,#fff7ed 50%,var(--amber-100) 100%);
    padding:20px;
}
.login-card {
    background:#fff; border-radius:var(--radius-xl); padding:48px 40px;
    width:100%; max-width:440px; box-shadow:var(--shadow-xl); text-align:center;
    animation:fadeUp .5s ease;
}
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.login-card .logo { font-size:42px; margin-bottom:8px; }
.login-card h1 { font-size:22px; font-weight:700; color:var(--stone-900); margin-bottom:4px; }
.login-card .subtitle { font-size:13px; color:var(--stone-500); margin-bottom:28px; }
.login-card form { text-align:left; }
.login-card .btn { width:100%; padding:12px; margin-top:8px; }
.login-card .footer-link { margin-top:20px; font-size:13px; color:var(--stone-500); }

/* ===== TABLES ===== */
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--stone-100); background:#fff; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th {
    background:var(--stone-50); padding:12px 14px; text-align:left;
    font-weight:600; color:var(--stone-700); border-bottom:1px solid var(--stone-200);
    text-transform:uppercase; letter-spacing:.04em; font-size:11px;
}
.data-table td { padding:12px 14px; border-bottom:1px solid var(--stone-100); color:var(--stone-700); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover { background:var(--amber-50); }
.data-table .actions { display:flex; gap:6px; }

/* ===== BADGES ===== */
.badge {
    display:inline-block; padding:3px 10px; border-radius:12px;
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}
.badge-pending     { background:var(--stone-100); color:var(--stone-600); }
.badge-attempted   { background:var(--amber-100); color:var(--amber-800); }
.badge-completed   { background:var(--green-100); color:var(--green-700); }
.badge-unreachable { background:var(--red-100);   color:var(--red-700); }
.badge-declined    { background:var(--purple-100);color:var(--purple-600); }
.badge-reassigned  { background:var(--stone-200); color:var(--stone-700); }
.badge-priority-high   { background:#fef2f2; color:#b91c1c; }
.badge-priority-normal { background:var(--stone-100); color:var(--stone-600); }
.badge-priority-low    { background:#f0fdf4; color:#15803d; }

/* ===== DISPATCH BOARD ===== */
.dispatch-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media(max-width:1024px) { .dispatch-grid { grid-template-columns:1fr; } }

.dispatch-column {
    background:#fff; border-radius:var(--radius); padding:18px;
    box-shadow:var(--shadow-sm); border:1px solid var(--stone-100);
    min-height:400px;
}
.dispatch-column h3 {
    font-size:16px; padding-bottom:12px; margin-bottom:14px;
    border-bottom:1px solid var(--stone-100);
    display:flex; align-items:center; justify-content:space-between;
}
.dispatch-filters {
    display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;
}
.dispatch-filters input, .dispatch-filters select {
    padding:7px 10px; border:1px solid var(--stone-200); border-radius:6px; font-size:13px; flex:1; min-width:120px;
}

.devotee-pool, .caller-list { max-height:65vh; overflow-y:auto; }

.devotee-card {
    background:var(--stone-50); border:1px solid var(--stone-200); border-radius:8px;
    padding:10px 12px; margin-bottom:8px; cursor:grab;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    transition:var(--transition);
}
.devotee-card:hover { border-color:var(--amber-400); background:var(--amber-50); }
.devotee-card.dragging { opacity:.4; }
.devotee-card .info { flex:1; min-width:0; }
.devotee-card .name { font-weight:600; font-size:13px; color:var(--stone-800); }
.devotee-card .meta { font-size:11px; color:var(--stone-500); margin-top:2px; }
.devotee-card .actions { display:flex; gap:4px; }
.devotee-card.selected { background:var(--amber-100); border-color:var(--amber-500); }

.caller-card {
    border:1.5px solid var(--stone-200); border-radius:10px; padding:12px 14px;
    margin-bottom:10px; transition:var(--transition);
}
.caller-card.drop-target { border-color:var(--amber-500); background:var(--amber-50); border-style:dashed; }
.caller-card .caller-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
}
.caller-card .caller-name { font-weight:600; font-size:14px; color:var(--stone-800); }
.caller-card .caller-stats { font-size:11px; color:var(--stone-500); }
.caller-card .caller-devotees { display:flex; flex-direction:column; gap:5px; min-height:30px; }
.caller-card .assigned-pill {
    background:#fff; border:1px solid var(--stone-200); border-radius:6px;
    padding:5px 8px; font-size:12px; color:var(--stone-700);
    display:flex; align-items:center; justify-content:space-between;
}
.caller-card .assigned-pill .remove { color:var(--red-600); cursor:pointer; font-weight:bold; }

.progress-bar { background:var(--stone-100); border-radius:6px; height:6px; overflow:hidden; margin-top:6px; }
.progress-bar .fill { background:var(--amber-500); height:100%; transition:width .3s ease; }

/* ===== FORM SECTIONS (call form) ===== */
.section-block {
    background:#fff; border-radius:var(--radius); padding:24px; margin-bottom:18px;
    box-shadow:var(--shadow-sm); border-left:4px solid var(--amber-500);
}
.section-block .step-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    background:var(--amber-600); color:#fff; font-weight:700; font-size:14px;
    margin-right:10px;
}
.section-block h3 { font-size:17px; margin-bottom:6px; }
.section-block .step-hint {
    font-size:13px; color:var(--stone-500); margin-bottom:18px; padding-left:38px;
    font-style:italic;
}

/* ===== TOPIC TAGS ===== */
.topic-grid {
    display:flex; flex-wrap:wrap; gap:8px;
}
.topic-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:16px; font-size:12px; font-weight:500;
    background:#fff; border:1.5px solid var(--stone-200); color:var(--stone-700);
    cursor:pointer; transition:var(--transition); user-select:none;
}
.topic-chip:hover { border-color:var(--amber-400); }
.topic-chip.active { background:var(--amber-600); border-color:var(--amber-600); color:#fff; }

/* ===== CONSENT BOX ===== */
.consent-box {
    background:linear-gradient(135deg,var(--amber-50),#fffaf0);
    border:1.5px solid var(--amber-200);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:18px;
}
.consent-box h4 {
    color:var(--amber-800); margin-bottom:10px;
    display:flex; align-items:center; gap:8px;
}
.consent-text {
    background:#fff; padding:14px 16px; border-radius:8px;
    font-size:13px; color:var(--stone-700); line-height:1.6;
    border:1px solid var(--amber-100); margin-bottom:14px;
    max-height:240px; overflow-y:auto;
}

/* ===== PROJECT FOOTER BANNER ===== */
.project-banner {
    background:linear-gradient(135deg,var(--amber-100),#fffaf0);
    border-radius:var(--radius); padding:18px 22px; margin-bottom:24px;
    border-left:4px solid var(--amber-600);
}
.project-banner h3 {
    font-family:'Playfair Display',serif; font-size:20px; color:var(--amber-900);
    margin-bottom:4px;
}
.project-banner p { font-size:13px; color:var(--stone-600); }
.project-banner .team-line { margin-top:10px; font-size:12px; color:var(--stone-700); }
.project-banner .team-line strong { color:var(--amber-800); }

/* ===== SAVE INDICATOR ===== */
.save-indicator {
    position:fixed; bottom:24px; right:24px;
    background:#fff; border-radius:8px; padding:10px 16px;
    box-shadow:var(--shadow-lg); font-size:13px; font-weight:500;
    border:1px solid var(--stone-200);
    opacity:0; transform:translateY(10px); transition:var(--transition);
    pointer-events:none; z-index:1000;
}
.save-indicator.show { opacity:1; transform:translateY(0); }
.save-indicator.success { color:var(--green-700); border-color:#bbf7d0; }
.save-indicator.error   { color:var(--red-700);   border-color:#fecaca; }

/* ===== UTILITIES ===== */
.flex { display:flex; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-gap-8 { display:flex; gap:8px; align-items:center; }
.flex-gap-12 { display:flex; gap:12px; align-items:center; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.text-muted { color:var(--stone-500); }
.text-sm { font-size:12px; }
.mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; }
.mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.empty-state {
    text-align:center; padding:40px 20px; color:var(--stone-500); font-size:14px;
}
.empty-state .icon { font-size:36px; margin-bottom:8px; opacity:.5; }

.tabs {
    display:flex; gap:4px; border-bottom:1px solid var(--stone-200); margin-bottom:20px;
    overflow-x:auto;
}
.tabs a {
    padding:10px 16px; font-size:14px; font-weight:500; color:var(--stone-500);
    border-bottom:2px solid transparent; white-space:nowrap;
}
.tabs a.active { color:var(--amber-700); border-bottom-color:var(--amber-600); }
.tabs a:hover { color:var(--amber-700); text-decoration:none; }