/* Jana CRM — extracted unchanged from the original HTML prototype (html/dashboard.html). */

*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f7f9ff;color:#151c27}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}.app{min-height:100vh;display:flex}.sidebar{width:260px;position:fixed;left:0;top:0;bottom:0;background:#fff;border-right:1px solid #dfe4f2;padding:20px 14px;display:flex;flex-direction:column;z-index:30}.brand{padding:4px 10px 26px}.brand h1{margin:0;color:#0d47c5;font-size:29px;letter-spacing:-.7px}.brand p{margin:3px 0 0;color:#5d6472;font-size:14px}.nav{display:flex;flex-direction:column;gap:6px}.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;color:#3d4657;font-size:15px;font-weight:600}.nav a:hover{background:#eef3ff}.nav a.active{background:#1f5fe0;color:#fff;box-shadow:0 6px 16px rgba(31,95,224,.18)}.sidebar-footer{margin-top:auto}.primary-btn{border:0;background:#0647bd;color:white;padding:12px 16px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 5px 15px rgba(6,71,189,.18)}.primary-btn:hover{filter:brightness(1.05)}.secondary-btn{border:1px solid #cbd3e4;background:#fff;color:#223047;padding:10px 14px;border-radius:9px;font-weight:700;display:inline-flex;align-items:center;gap:7px}.success-btn{border:0;background:#087b50;color:#fff;padding:10px 14px;border-radius:9px;font-weight:700}.danger-btn{border:0;background:#b91c1c;color:#fff;padding:10px 14px;border-radius:9px;font-weight:700}.main{margin-left:260px;min-width:0;width:calc(100% - 260px)}.topbar{height:66px;background:rgba(249,250,255,.96);backdrop-filter:blur(9px);border-bottom:1px solid #dfe4f2;display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20}.topbar-title{font-size:20px;font-weight:800;color:#1144ad}.top-actions{display:flex;align-items:center;gap:10px}.search{position:relative}.search input{width:290px;border:0;outline:0;background:#edf2ff;border-radius:24px;padding:10px 16px 10px 41px;color:#1f2937}.search .material-symbols-outlined{position:absolute;left:13px;top:9px;color:#697386}.icon-btn{border:0;background:transparent;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#4d5666}.icon-btn:hover{background:#edf2ff}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#dbe6ff;color:#1349b7;font-weight:800;border:1px solid #bfcce8}.page{padding:24px;max-width:1480px;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.page-head h2{margin:0;font-size:28px;letter-spacing:-.6px}.page-head p{margin:5px 0 0;color:#667085}.grid-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{background:#fff;border:1px solid #d8deed;border-radius:14px;padding:18px;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(17,40,95,.035)}.metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#1353d8}.metric.green:before{background:#0b8a5a}.metric.orange:before{background:#b54b0a}.metric.purple:before{background:#6d42c7}.metric .label{font-size:12px;letter-spacing:.08em;font-weight:800;color:#4d5566;text-transform:uppercase}.metric .value{font-size:31px;font-weight:800;margin:8px 0 2px}.metric .trend{font-size:13px;color:#087b50}.card{background:#fff;border:1px solid #d8deed;border-radius:14px;box-shadow:0 3px 12px rgba(17,40,95,.035)}.card-head{padding:17px 18px;border-bottom:1px solid #e1e6f1;display:flex;align-items:center;justify-content:space-between;gap:12px}.card-head h3{margin:0;font-size:18px}.card-head p{margin:3px 0 0;color:#667085;font-size:13px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(290px,.85fr);gap:16px;margin-top:16px}.chart-wrap{padding:20px 18px 14px;height:330px;display:flex;flex-direction:column}.bars{height:235px;display:flex;align-items:end;gap:12px;border-bottom:1px solid #dfe4ef;padding:0 10px}.bar-col{height:100%;flex:1;display:flex;align-items:end;justify-content:center}.bar{width:70%;max-width:70px;border-radius:9px 9px 0 0;background:#dce5fa;position:relative;min-height:15px;transition:.2s}.bar.active{background:#1353d8}.bar:hover{filter:brightness(.96);transform:translateY(-2px)}.bar span{display:none;position:absolute;top:-29px;left:50%;transform:translateX(-50%);font-size:11px;background:#182238;color:#fff;padding:4px 6px;border-radius:5px}.bar:hover span{display:block}.days{display:flex;gap:12px;padding:8px 10px 0;color:#667085;font-size:11px}.days div{flex:1;text-align:center}.activity{padding:4px 16px 14px}.activity-item{padding:13px 2px;border-bottom:1px solid #eef1f7}.activity-item:last-child{border-bottom:0}.activity-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.activity-name{font-weight:800}.activity-time{font-size:11px;color:#7a8394}.activity-text{margin:5px 0 8px;color:#5c6473;font-size:13px;line-height:1.45}.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#e9f7f1;color:#086b49}.chip.blue{background:#e9efff;color:#174dbb}.chip.orange{background:#fff1e6;color:#9a4310}.chip.gray{background:#eef1f5;color:#596273}.table-card{margin-top:16px;overflow:hidden}.table-toolbar{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.table-wrap{overflow:auto}.crm-table{width:100%;border-collapse:collapse;min-width:850px}.crm-table th{text-align:left;background:#f1f4fb;color:#646d7e;font-size:12px;text-transform:uppercase;letter-spacing:.035em;padding:13px 17px}.crm-table td{padding:14px 17px;border-top:1px solid #e3e7f0;font-size:14px}.crm-table tr:hover td{background:#fbfcff}.name-cell{display:flex;align-items:center;gap:10px}.mini-avatar{width:34px;height:34px;border-radius:50%;background:#dff6ed;color:#087b50;display:grid;place-items:center;font-weight:800;font-size:12px}.muted{color:#6b7280}.link-btn{border:0;background:transparent;color:#1353d8;font-weight:800;padding:4px 0}.toast{position:fixed;right:24px;bottom:24px;background:#182238;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s;z-index:100}.toast.show{opacity:1;transform:translateY(0)}
/* Conversations */
.conversation-shell{height:calc(100vh - 66px);display:grid;grid-template-columns:340px minmax(420px,1fr) 300px;min-height:0}.conversation-list{background:#fff;border-right:1px solid #dce2ee;overflow-y:auto}.conv-list-head{padding:20px;border-bottom:1px solid #e1e6f0;position:sticky;top:0;background:#fff;z-index:4}.conv-list-head h2{margin:0 0 12px}.segmented{display:flex;background:#edf2ff;border-radius:10px;padding:3px}.segmented button{flex:1;border:0;background:transparent;border-radius:8px;padding:7px;font-size:12px;font-weight:800;color:#4b5563}.segmented button.active{background:#fff;color:#174dbb;box-shadow:0 1px 5px rgba(0,0,0,.07)}.conv-item{padding:16px 18px;border-bottom:1px solid #e9edf4;cursor:pointer;border-left:3px solid transparent}.conv-item:hover{background:#f7f9ff}.conv-item.active{background:#eef3ff;border-left-color:#1353d8}.conv-item-top{display:flex;justify-content:space-between;gap:12px}.conv-name{font-weight:800}.conv-time{font-size:11px;color:#7b8391}.conv-phone{font-size:13px;color:#535c6c;margin:4px 0 8px}.conv-preview{font-size:12px;color:#737b89;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat{display:flex;flex-direction:column;min-width:0;background:#f7f9ff}.chat-head{height:76px;background:#fff;border-bottom:1px solid #dce2ee;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.chat-contact{display:flex;align-items:center;gap:12px}.chat-name{font-weight:800;font-size:18px}.chat-sub{font-size:12px;color:#687184;margin-top:2px}.chat-body{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:14px}.bubble{max-width:76%;padding:13px 15px;border-radius:16px;box-shadow:0 2px 7px rgba(33,50,80,.06);font-size:14px;line-height:1.55}.bubble.in{background:#fff;border:1px solid #e1e6ef;border-top-left-radius:4px;align-self:flex-start}.bubble.out{background:#1148bd;color:#fff;border-top-right-radius:4px;align-self:flex-end}.bubble.ai{background:#0647bd;color:#fff;border-radius:15px;align-self:flex-end;max-width:82%}.bubble-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;opacity:.8;margin-bottom:7px}.bubble-time{text-align:right;font-size:10px;opacity:.7;margin-top:7px}.quote-box{margin-top:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:9px 10px;font-size:13px}.quote-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}.quote-row.total{margin-top:5px;padding-top:7px;border-top:1px solid rgba(255,255,255,.35);font-weight:800}.chat-footer{background:#fff;border-top:1px solid #dce2ee;padding:15px 18px}.composer{display:flex;align-items:end;gap:8px;background:#edf2ff;border:1px solid #d6ddeb;border-radius:14px;padding:7px}.composer textarea{resize:none;min-height:42px;max-height:120px;flex:1;border:0;background:transparent;outline:0;padding:10px}.send-btn{width:42px;height:42px;border:0;background:#0647bd;color:#fff;border-radius:10px;display:grid;place-items:center}.chat-tools{display:flex;gap:8px;align-items:center;margin-top:8px}.chat-tools button{border:0;background:transparent;color:#174dbb;font-size:11px;font-weight:800}.insights{background:#fff;border-left:1px solid #dce2ee;padding:20px;overflow-y:auto}.insights h3{margin:0 0 14px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#5e6676}.insight-card{border:1px solid #dfe5ef;border-radius:12px;padding:14px;margin-bottom:12px}.insight-card.highlight{background:#edf4ff;border-color:#c8d8ff}.insight-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#697386;font-weight:800}.insight-value{margin-top:5px;font-weight:800}.insight-lines{margin:8px 0 0;padding:0;list-style:none}.insight-lines li{font-size:12px;color:#5e6676;padding:4px 0;display:flex;gap:6px}.dot{width:7px;height:7px;border-radius:50%;background:#087b50;margin-top:6px;flex:0 0 auto}
/* Leads */
.forecast{background:linear-gradient(120deg,#0b4bc6,#2e6de9);color:#fff;border-radius:14px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 20px rgba(14,75,198,.15)}.forecast h3{margin:0 0 5px}.forecast p{margin:0;opacity:.92}.leads-summary{display:grid;grid-template-columns:1fr 250px;gap:16px}.summary-card{background:#fff;border:1px solid #d8deed;border-radius:14px;padding:18px}.summary-card .big{font-size:28px;color:#1148bd;font-weight:900;margin-top:6px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter-btn{border:1px solid #cdd5e4;background:#fff;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:800;color:#525b6d}.filter-btn.active{background:#e9efff;color:#174dbb;border-color:#b7c9f5}.score{display:flex;align-items:center;gap:8px}.score-track{height:6px;width:60px;border-radius:999px;background:#e5e9f1;overflow:hidden}.score-track i{display:block;height:100%;background:#0b8a5a}.action-group{display:flex;gap:7px;align-items:center}.done-btn{background:#e7f7ef;color:#087b50;border:1px solid #b9e4d1;padding:8px 10px;border-radius:9px;font-weight:800}.mobile-nav{display:none}
@media(max-width:1100px){.grid-metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.conversation-shell{grid-template-columns:300px 1fr}.insights{display:none}.leads-summary{grid-template-columns:1fr}.summary-card{display:none}}
@media(max-width:760px){.sidebar{display:none}.main{margin-left:0;width:100%;padding-bottom:65px}.topbar{padding:0 14px}.topbar-title{font-size:17px}.search{display:none}.page{padding:15px}.page-head h2{font-size:23px}.grid-metrics{grid-template-columns:1fr 1fr;gap:9px}.metric{padding:14px}.metric .value{font-size:24px}.metric .label{font-size:10px}.dashboard-grid{margin-top:10px}.conversation-shell{grid-template-columns:1fr;height:calc(100vh - 126px)}.conversation-list{display:none}.chat-head{padding:0 12px}.chat-body{padding:16px 12px}.bubble{max-width:90%}.insights{display:none}.mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid #dbe2ef;z-index:40;align-items:center;justify-content:space-around}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:#697386}.mobile-nav a.active{color:#1353d8}.mobile-nav .material-symbols-outlined{font-size:22px}.page-head{flex-direction:column}.table-toolbar{align-items:flex-start;flex-direction:column}.forecast{padding:16px}.crm-table{min-width:760px}}
/* Design Storage / WhatsApp media attachments */
.design-attachment{margin-top:10px;border:1px solid rgba(255,255,255,.28);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.1)}.bubble.in .design-attachment{border-color:#dce3ef;background:#f7f9fd}.design-attachment img{display:block;width:100%;max-height:360px;object-fit:contain;background:#fff}.design-caption{padding:8px 10px;font-size:12px}.design-caption b{display:block}.design-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:120}.design-modal.show{display:flex}.design-modal-box{width:min(900px,94vw);max-height:86vh;overflow:auto;background:#fff;border-radius:15px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.design-modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #e3e7ef}.design-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px}.design-choice{border:1px solid #d9e0ed;border-radius:11px;overflow:hidden;background:#fff;cursor:pointer;text-align:left;padding:0}.design-choice:hover{border-color:#5d83dc;box-shadow:0 4px 14px rgba(31,95,224,.13)}.design-choice img{width:100%;height:150px;object-fit:cover;background:#f0f3f8}.design-choice div{padding:9px}.design-choice b{display:block;font-size:12px;color:#174dbb}.design-choice span{font-size:11px;color:#667085}.design-empty{padding:35px;text-align:center;color:#667085}.media-btn{display:inline-flex!important;align-items:center;gap:5px}.media-btn .material-symbols-outlined{font-size:16px}


/* Standalone / offline-safe additions */
.material-symbols-outlined{font-family:inherit!important;font-weight:700;font-style:normal;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:22px;white-space:nowrap}
.nav .material-symbols-outlined{width:22px}.mobile-nav .material-symbols-outlined{font-size:18px}
html{scroll-behavior:smooth}