* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', Arial, sans-serif; background: #f1f3f6; color: #333; font-size: 15px; display: flex; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.muted { color: #777; }
.small { font-size: 13px; }
.link { color: #1e6fc4; font-weight: 500; }
.link:hover, .fu-table a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ---------- Sidebar ---------- */
.sidebar { width: 270px; flex-shrink: 0; background: linear-gradient(180deg, #3a5a88 0%, #3d6a82 100%); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: margin-left .25s; z-index: 30; }
.sidebar.hidden { margin-left: -270px; }
.user-box { padding: 6px 25px 12px; background: rgba(0,0,0,.08); color: #2ee66b; font-weight: 500; line-height: 1.55; }
.pill { background: #ef4444; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; border: 1px solid #fff; }
.menu-filter { margin: 20px; width: calc(100% - 40px); padding: 11px 16px; border: 0; border-radius: 3px; font-size: 14px; }
.menu { list-style: none; }
.menu a, .sub-toggle { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; cursor: pointer; padding: 18px 20px; font-size: 14px; font-weight: 700; letter-spacing: .8px; }
.menu a:hover, .sub-toggle:hover, .menu a.active { background: rgba(255,255,255,.12); }
.menu i { font-size: 12px; margin-right: 4px; }
.caret { float: right; margin-top: 3px; transition: transform .2s; }
.has-sub.open .caret { transform: rotate(180deg); }
.submenu { list-style: none; display: none; background: rgba(0,0,0,.12); }
.has-sub.open .submenu { display: block; }
.submenu a { padding: 12px 20px 12px 44px; font-weight: 400; letter-spacing: 0; }
.backdrop { display: none; }

/* ---------- Main / topbar ---------- */
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.btn-box { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 10px 18px; font-size: 15px; cursor: pointer; }
.btn-box:hover { background: #f5f7fa; }
.search { flex: 1; max-width: 450px; margin-left: auto; }
.search input { width: 100%; border: 1px solid #ccc; border-radius: 22px; padding: 10px 18px; font-size: 15px; }
.top-icons { display: flex; align-items: center; gap: 26px; font-size: 26px; color: #2b6cb0; }
.top-icons > a, .icon-btn { position: relative; }
.icon-btn { background: none; border: 0; color: inherit; font-size: inherit; cursor: pointer; }
.icon-btn.small { font-size: 17px; padding: 2px 6px; }
.badge-top { position: absolute; top: -8px; right: -12px; background: #ef4444; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 5px; border: 1px solid #fff; }
.logo { font-size: 15px; font-weight: 700; color: #c62828; }

/* dropdowns */
.dd { position: relative; }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 40; padding: 6px 0; font-size: 15px; color: #333; }
.dd-menu.right { left: auto; right: 0; }
.dd.open .dd-menu { display: block; }
.dd-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.dd-menu a i { width: 18px; color: #2b6cb0; }
.dd-menu a:hover { background: #f1f5fb; }
.dd-menu b.red { color: #ef4444; }
.dd-menu.info { padding: 12px 14px; width: 280px; line-height: 1.5; font-size: 14px; }

.flash { margin: 16px 20px 0; padding: 12px 16px; border-radius: 4px; background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash.err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.titlebar { display: flex; align-items: center; gap: 22px; padding: 20px; background: #fff; margin-top: 20px; border-bottom: 1px solid #eee; }
.titlebar h1 { font-size: 18px; font-weight: 500; }
.gst { color: #22c55e; font-size: 18px; font-weight: 500; }
.dots { margin-left: auto; display: flex; gap: 6px; }
.dots a { width: 20px; height: 20px; border-radius: 50%; }
.subnav { background: #fff; padding: 8px 20px 18px; display: flex; flex-wrap: wrap; gap: 20px; }
.subnav a:hover { color: #1e6fc4; }
.subnav i { font-size: 13px; }

/* ---------- Layout ---------- */
.content { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.content.narrow { max-width: 760px; }
.row { display: grid; grid-template-columns: 295px 1fr; gap: 30px; }
.row.two { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.row.two.top { margin-top: 0; align-items: start; }
.card { display: block; background: #fff; border: 1px solid #e3e6ea; border-radius: 3px; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card.no-pad { padding: 0; }
.card-title { font-size: 19px; font-weight: 400; color: #444; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; flex: 1; }
.card-title.pad { padding: 16px 20px; }
.hint { color: #888; font-size: 13px; margin-top: 8px; }

/* greeting & stats */
.greet h2, .stats h2 { font-size: 19px; font-weight: 400; color: #444; }
.greet h2 { margin-bottom: 14px; }
.greet .small { color: #555; }
.target { display: inline-block; color: #3b82c4; font-size: 16px; margin: 8px 0 12px; }
.progress { display: flex; height: 10px; background: #eef0f3; border-radius: 6px; overflow: hidden; }
.progress > * { display: block; height: 100%; border-radius: 6px; }
.progress.split > * { border-radius: 0; }
.stats-head { display: flex; justify-content: space-between; align-items: center; }
.follow { color: #22c55e; font-size: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.stat { display: flex; align-items: center; gap: 12px; line-height: 1.6; padding: 6px; border-radius: 4px; }
.stat:hover { background: #f5f7fa; }
.stat-icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 24px 10px; }
.tile { color: #fff; border-radius: 4px; padding: 20px; display: flex; gap: 12px; font-size: 17px; line-height: 1.3; position: relative; overflow: hidden; }
.tile:hover { filter: brightness(1.07); }
.tile::after { content: ''; position: absolute; right: -20px; bottom: -40px; width: 110px; height: 110px; border: 10px solid rgba(255,255,255,.18); border-radius: 50%; }
.tile .nums { margin-left: auto; text-align: right; font-weight: 700; }
.tile .nums + .nums { margin-left: 14px; }

/* source */
.plain-head { background: #f6f7f9; padding: 15px 12px; color: #555; }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 295px)); gap: 20px; }
.source:hover { border-color: #3b82c4; }
.src-name, .src-count, .src-note { display: block; }
.src-name { color: #888; font-size: 17px; line-height: 1.4; }
.src-count { font-size: 28px; margin: 10px 0 6px; color: #444; }
.src-note { color: #1e7ed1; font-size: 13px; }

/* chart & stages */
.chart-types { display: flex; gap: 18px; margin: 18px 0; color: #555; }
.chart-types label { cursor: pointer; }
.chart-wrap { position: relative; height: 420px; }
.stage-list { max-height: 460px; overflow-y: auto; padding-right: 10px; border-right: 3px solid #e11d48; margin-top: 14px; }
.stage { display: block; margin: 8px 0 12px; padding: 6px; border-radius: 4px; }
.stage:hover { background: #f5f7fa; }
.stage-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; }
.stage-name { color: #3b82c4; font-size: 16px; }
.qty { background: #16c33a; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }

/* follow up tables on dashboard */
.fu { padding: 0 6px 6px; }
.fu-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 14px; font-size: 19px; color: #555; }
.tag { background: #ef4444; color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 5px; }
.pg-btn { border: 1px solid #3b82c4; color: #3b82c4; border-radius: 3px; padding: 2px 6px; font-size: 12px; }
.pg-btn.disabled { opacity: .4; pointer-events: none; }
.fu-table { width: 100%; border-collapse: collapse; border-right: 3px solid #e11d48; }
.fu-table tr { cursor: pointer; }
.fu-table tr:hover { background: #f8fafc; }
.fu-table td { padding: 16px; border: 1px solid #e5e7eb; }
.fu-table td.sr { width: 18%; }
.right { text-align: right; }
.cnt { color: #fff; font-size: 13px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.cnt.green { background: #22c55e; }
.cnt.red { background: #ef4444; }

/* ---------- Inner pages ---------- */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 500; }
.page-head h1 .muted { font-weight: 400; font-size: 17px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid #cfd5dd; background: #fff; border-radius: 3px; cursor: pointer; font-size: 14px; color: #333; }
.btn:hover { background: #f5f7fa; }
.btn.primary { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.btn.primary:hover { background: #245a93; }
.btn.danger { color: #c62828; border-color: #f0b4b4; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.disabled { opacity: .45; pointer-events: none; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; }
.filters input, .filters select, .form input, .form select, .form textarea { padding: 9px 12px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; font-size: 14px; background: #fff; }
.filters input[type=search] { flex: 1; min-width: 200px; }
.chip { background: #e0e7ff; color: #3730a3; padding: 6px 10px; border-radius: 14px; font-size: 13px; }

.table-wrap { overflow-x: auto; }
.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.list th { text-align: left; background: #f6f7f9; color: #555; font-weight: 500; padding: 12px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.list td { padding: 11px 12px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.list tbody tr:hover { background: #fafbfc; }
.list tfoot td { font-weight: 500; background: #f6f7f9; }
.list .num { text-align: right; white-space: nowrap; }
.list .empty { text-align: center; padding: 30px; color: #666; }
.list .empty a, .placeholder a.link { color: #1e6fc4; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > a { color: #2b6cb0; margin-left: 10px; font-size: 15px; }
.row-actions form { display: inline-block; margin-left: 6px; }
.row-actions .icon-btn { color: #c62828; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.status { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px; }
.status.pending { background: #fef9c3; color: #854d0e; }
.status.late { background: #fee2e2; color: #b91c1c; }
.status.done { background: #dcfce7; color: #166534; }

.pager { display: flex; justify-content: center; align-items: center; gap: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #dfe3e8; flex-wrap: wrap; }
.tabs a { padding: 10px 16px; color: #555; border-bottom: 3px solid transparent; }
.tabs a.active { color: #2b6cb0; border-color: #2b6cb0; font-weight: 500; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #555; }
.form .btn { align-self: flex-start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.err-text { color: #c62828; font-size: 13px; }
.details { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 18px; }
.details dt { color: #777; }
.details a { color: #1e6fc4; }
.inline-form label { display: flex; align-items: center; gap: 8px; }
.inline-form select { padding: 8px 10px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; }
.placeholder { text-align: center; padding: 40px 20px; line-height: 1.7; }
.placeholder > i { font-size: 40px; color: #94a3b8; margin-bottom: 10px; }
.placeholder p:last-child { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .row, .row.two { grid-template-columns: 1fr; }
    .tiles, .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .sidebar { position: fixed; margin-left: -270px; }
    .sidebar.open { margin-left: 0; }
    .backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
    .search, .top-icons > a:nth-child(-n+3) { display: none; }
    .topbar { gap: 10px; }
    .top-icons { margin-left: auto; gap: 18px; font-size: 22px; }
    .tiles, .stats-grid, .grid2 { grid-template-columns: 1fr; }
    .titlebar { flex-wrap: wrap; gap: 12px; }
    .details { grid-template-columns: 1fr; gap: 2px; }
    .details dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .caret { transition: none; } }

/* target vs achieve */
.stat.tv { align-items: flex-start; }
.tv-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tv-top { display: flex; justify-content: space-between; gap: 6px; }
.tv-pct { font-weight: 700; font-size: 13px; }
.tv-body .progress { height: 7px; margin-top: 2px; }
.stats .hint .link { margin-left: 4px; }

/* ---------- Add Lead form ---------- */
.hidden { display: none !important; }
.req { color: #e11d48; font-weight: 700; margin-left: 1px; }
.ok-text { color: #15803d; }
.lf { background: #fff; border: 1px solid #d9dee5; border-radius: 3px; font-size: 13px; }
.lf-head { display: flex; justify-content: space-between; align-items: center; background: #0d6efd; background: #0b6fc4; color: #fff; padding: 6px 8px 6px 12px; font-weight: 700; font-size: 13px; }
.lf-head-btns { display: flex; gap: 6px; }
.lf-hbtn { background: #0a5ea8; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.lf-hbtn.light { background: #fff; color: #333; }
.lf-body { padding: 14px 18px 18px; }
.flash.in { margin: 0 0 12px; }
.lf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 18px; }
.lf-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lf-f.span2 { grid-column: span 2; }
.lf-f.span4 { grid-column: 1 / -1; }
.lf-f > label, .lf-lbl-row label, .lf-pair label { color: #444; font-size: 13px; }
.lf input, .lf select { width: 100%; padding: 8px 12px; border: 1px solid #d5dae1; border-radius: 3px; font: inherit; font-size: 13px; background: #fff; min-height: 36px; }
.lf input[readonly] { background: #fafafa; }
.lf input.bad, .lf select.bad { border-color: #e11d48; background: #fff7f8; }
.lf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.lf-pair > .err-text { grid-column: 1 / -1; }
.lf-lbl-row { display: flex; justify-content: space-between; align-items: center; }
.mini-btns { display: flex; gap: 3px; }
.mini-btns button, .mini-btns a { width: 20px; height: 18px; display: grid; place-items: center; border: 1px solid #9aa3ad; border-radius: 3px; background: #fff; font-size: 10px; cursor: pointer; color: #111; padding: 0; }
.mini-btns button:hover, .mini-btns a:hover { background: #eef2f7; }
.lf-addr { display: flex; gap: 0; }
.ship-chk { display: grid; place-items: center; width: 34px; border: 1px solid #333; margin-left: -1px; cursor: pointer; }
.ship-chk input { width: 15px; height: 15px; min-height: 0; }
.sub-lbl { display: block; margin: 6px 0 4px; color: #444; }

/* autocomplete */
.ac { position: relative; }
.ac.grow { flex: 1; }
.ac-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); background: #fff; border: 1px solid #cfd5dd; border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.12); z-index: 25; max-height: 280px; overflow-y: auto; }
.ac-list.open { display: block; }
.ac-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0f2f5; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.ac-item span { color: #777; font-size: 12px; }
.ac-item:hover, .ac-item.active { background: #eaf2fd; }
.ac-empty { padding: 10px 12px; color: #777; }

/* product bar + table */
.prod-bar { display: flex; align-items: stretch; margin: 10px 0 0; margin-left: calc(50% + 9px); }
.prod-lbl { border: 1px solid #333; padding: 7px 10px; background: #fff; }
.prod-bar input { border-radius: 0; height: 100%; }
.sq { width: 34px; display: grid; place-items: center; color: #fff; border: 0; cursor: pointer; }
.sq.blue { background: #6b7fb5; } .sq.green { background: #22c55e; } .sq.red { background: #ef4444; }
.items { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 90px; }
.items th { text-align: left; font-weight: 700; padding: 6px; border: 1px solid #e3e6ea; white-space: nowrap; background: #fff; }
.items th label { display: flex; gap: 2px; align-items: center; }
.items th input, .items td .pick { width: auto; min-height: 0; }
.items td { padding: 4px 6px; border: 1px solid #e3e6ea; white-space: nowrap; }
.items td label { display: flex; gap: 4px; align-items: center; }
.items .cell { width: 86px; min-height: 30px; padding: 4px 6px; text-align: right; }
.items .empty-row td { text-align: center; color: #444; padding: 8px; }
.items td.low { color: #dc2626; font-weight: 700; }
.items td.strong { font-weight: 700; }
.items .cell.txt { width: 64px; text-align: left; }
.items .cell.txt.hsn { width: 78px; }
.items tr.manual td:first-child { box-shadow: inset 3px 0 0 #0b6fc4; }
.sq.navy { background: #0b6fc4; }
.lf-sec { font-size: 14px; font-weight: 400; color: #444; padding-bottom: 6px; border-bottom: 1px solid #d9dee5; margin-bottom: 10px; }
.lf-grid.others { grid-template-columns: 1fr 1.4fr 1.4fr 1.4fr; }
.lf-actions { display: flex; gap: 6px; margin-top: 12px; }
.ob { background: #fff; border: 1px solid; border-radius: 3px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.ob.green { color: #16a34a; border-color: #16a34a; } .ob.green:hover { background: #f0fdf4; }
.ob.red { color: #dc2626; border-color: #dc2626; } .ob.red:hover { background: #fef2f2; }
.ob.blue { color: #3b5bdb; border-color: #8094d6; padding: 9px 16px; }
.lf-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-top: 14px; }
.chips { display: flex; background: #6b7fb5; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2); margin-right: 14px; }
.chips span { color: #fff; font-weight: 700; padding: 8px 14px; border-right: 1px solid rgba(255,255,255,.35); font-size: 12px; }
.chips span:last-child { border-right: 0; }
.chips b { background: #fff; color: #333; padding: 0 4px; border-radius: 3px; margin-left: 3px; }

@media (max-width: 1100px) {
    .lf-grid, .lf-grid.others { grid-template-columns: 1fr 1fr; }
    .prod-bar { margin-left: 0; }
}
@media (max-width: 600px) {
    .lf-grid, .lf-grid.others { grid-template-columns: 1fr; }
    .lf-f.span2 { grid-column: auto; }
}
@media print { .sidebar, .topbar, .no-print { display: none !important; } }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.grid-auto .wide { grid-column: 1 / -1; }
.form .actions { display: flex; gap: 8px; }
.rename { display: flex; gap: 6px; }
.rename input { flex: 1; padding: 6px 10px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; }
.cp { display: flex; flex-direction: column; gap: 14px; }
.cp-top { display: flex; gap: 20px; align-items: flex-start; }
.cp-top .grow { flex: 1; }
.cp-logo { width: 140px; height: 140px; border: 1px dashed #cbd2db; border-radius: 4px; display: grid; place-items: center; text-align: center; color: #94a3b8; flex-shrink: 0; background: #fafbfc; }
.cp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cp-logo i { font-size: 30px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; align-self: end; }
.form textarea { resize: vertical; }
.logo img { height: 34px; max-width: 120px; object-fit: contain; vertical-align: middle; }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } .cp-top { flex-direction: column; } }

/* ---------- Nested sidebar menu ---------- */
.has-sub.open .submenu { display: none; }
.has-sub.open > .submenu { display: block; }
.menu .mi { font-size: 14px; width: 18px; margin-right: 8px; text-align: center; }
.menu .lvl0 > a .mi, .menu .lvl0 > .sub-toggle .mi { font-size: 12px; width: auto; margin-right: 4px; }
.submenu .lvl1 > a, .submenu .lvl1 > .sub-toggle { padding: 13px 20px 13px 28px; font-weight: 400; letter-spacing: 0; font-size: 15px; }
.submenu .submenu { background: rgba(0,0,0,.12); }
.submenu .lvl2 > a { padding: 10px 20px 10px 56px; font-size: 14px; }
.submenu .lvl1 .caret { font-size: 11px; }

/* user switcher */
.who { display: flex; align-items: center; gap: 6px; }
.who-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.who .dd-menu { color: #333; font-weight: 400; min-width: 230px; }
.who .dd-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 16px; cursor: pointer; font: inherit; font-size: 14px; }
.who .dd-menu button:hover { background: #f1f5fb; }
.who .dd-menu button.cur { font-weight: 700; color: #2b6cb0; }
.dd-label { display: block; padding: 8px 16px 4px; font-size: 12px; color: #888; border-top: 1px solid #eee; margin-top: 4px; }

/* employee pages */
.status.info { background: #dbeafe; color: #1e40af; }
.status.grey { background: #eef0f3; color: #555; }
.cp-logo.round { border-radius: 50%; width: 120px; height: 120px; overflow: hidden; }
.cp-logo.round img { width: 100%; height: 100%; object-fit: cover; }
.profile-card { display: flex; gap: 22px; align-items: flex-start; }
.profile-card h2 { font-size: 21px; font-weight: 500; }
.profile-card .details { margin-top: 14px; }
.mini-tv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.mini-tv > div { display: flex; flex-direction: column; gap: 4px; }
.mini-tv span:first-child { color: #777; font-size: 13px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-row.cards { grid-template-columns: repeat(3, 1fr); }
.stat-row > * { background: #f6f7f9; border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.stat-row.cards > * { background: #fff; border: 1px solid #e3e6ea; }
.stat-row b { font-size: 19px; color: #333; }
.stat-row span { font-size: 12px; color: #777; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dbeafe; color: #1e40af; font-weight: 700; margin-right: 8px; overflow: hidden; vertical-align: middle; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.list td.wrap { white-space: normal; min-width: 220px; max-width: 420px; }
.list td.nowrap { white-space: nowrap; }
.list tr.click { cursor: pointer; }
.list tr.me-row { background: #f0f7ff; }
.tgt input { width: 110px; padding: 7px 10px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; }
.tva td { min-width: 140px; }
.tva .tva-num { display: block; margin-bottom: 4px; font-size: 13px; }
.tva .progress { height: 6px; }
.pad { padding: 14px 20px; }
.inline-status select { padding: 5px 8px; border-radius: 12px; border: 1px solid #d5dae1; font: inherit; font-size: 13px; }
.inline-status .st-done { background: #dcfce7; } .inline-status .st-info { background: #dbeafe; } .inline-status .st-pending { background: #fef9c3; }
.approve { display: flex; gap: 6px; }
.approve input { width: 120px; padding: 5px 8px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; font-size: 13px; }
.actions form { display: inline-block; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } .profile-card { flex-direction: column; } .mini-tv { grid-template-columns: 1fr; } }
.tgt td { vertical-align: top; }
.tgt td .small { display: block; margin-top: 3px; }
.list tfoot td { vertical-align: top; }

/* auto work report */
.auto-sum { grid-template-columns: repeat(7, 1fr); }
.auto-rep td.strong { font-weight: 700; color: #1e40af; }
.act { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px; background: #eef0f3; }
.act-lead { background: #dcfce7; color: #166534; } .act-quotation { background: #ede9fe; color: #5b21b6; }
.act-followup { background: #fef9c3; color: #854d0e; } .act-call { background: #fce7f3; color: #9d174d; }
.act-visit { background: #dbeafe; color: #1e40af; } .act-whatsapp { background: #d1fae5; color: #065f46; }
.done-form { display: inline-flex; gap: 4px; align-items: center; }
.done-form select, .done-form input { padding: 5px 6px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; font-size: 13px; }
.done-form input { width: 150px; }
.fu-box .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.fu-box .seg label { flex-direction: row; align-items: center; gap: 6px; border: 1px solid #cfd5dd; border-radius: 20px; padding: 6px 12px; cursor: pointer; color: #333; }
.fu-box .seg label:has(input:checked) { border-color: #2b6cb0; background: #eaf2fd; color: #1e40af; }
@media (max-width: 1100px) { .auto-sum { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .auto-sum { grid-template-columns: repeat(2, 1fr); } .done-form { flex-wrap: wrap; } }
.stg input:not([type=color]), .stg select { padding: 7px 10px; border: 1px solid #cfd5dd; border-radius: 3px; font: inherit; font-size: 14px; }
.stg input[readonly] { background: #f6f7f9; color: #555; }
.stg .w-num { width: 70px; }
.stg input[type=color] { width: 42px; height: 32px; border: 1px solid #cfd5dd; border-radius: 3px; padding: 2px; background: #fff; }

/* login + users */
.login-body { display: block; background: linear-gradient(160deg, #3a5a88, #3d6a82); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 30px; }
.login-brand { text-align: center; margin-bottom: 6px; }
.login-brand img { max-height: 60px; max-width: 160px; object-fit: contain; }
.login-brand h1 { font-size: 22px; font-weight: 500; margin: 6px 0 2px; }
.btn.big { justify-content: center; padding: 11px; font-size: 15px; align-self: stretch !important; }
.center { text-align: center; }
.perm-box { border: 1px solid #e3e6ea; border-radius: 4px; padding: 14px; }
.perm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.perm-head span { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #666; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.perm-grid fieldset { border: 1px solid #eef0f3; border-radius: 4px; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.perm-grid legend label { font-weight: 700; color: #1e40af; }
.perm-grid label { flex-direction: row !important; align-items: flex-start; gap: 8px !important; color: #333 !important; cursor: pointer; }
.perm-grid input { margin-top: 3px; }
.who-role { font-size: 11px; background: rgba(255,255,255,.2); color: #fff; border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.who .dd-menu form button { display: flex; gap: 10px; align-items: center; color: #b91c1c; }
.who .dd-menu form { border-top: 1px solid #eee; margin-top: 4px; }
.import-help p { margin-top: 6px; line-height: 1.5; }
.import-sum { grid-template-columns: repeat(5, 1fr); }
.import-sum .ok b { color: #15803d; } .import-sum .warn b { color: #b45309; } .import-sum .bad b { color: #b91c1c; }
.dup-opts { border: 1px solid #e3e6ea; border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.dup-opts label { flex-direction: row !important; gap: 8px !important; color: #333 !important; }
@media (max-width: 760px) { .import-sum { grid-template-columns: 1fr 1fr; } }
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #eaf2fd; border-bottom: 1px solid #c7dbf5; position: sticky; top: 0; z-index: 5; }
.bulk-bar .grow { flex: 1; }
.link-btn { background: none; border: 0; color: #1e6fc4; text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.list th.chk, .list td.chk { width: 34px; text-align: center; }
.list .chk input { width: 16px; height: 16px; cursor: pointer; }
.filters.plain { padding: 0 0 12px; box-shadow: none; border: 0; }
.details.compact { grid-template-columns: 110px 1fr; gap: 6px; margin: 12px 0 16px; }
.chip.scope { background: #eef2ff; color: #3730a3; display: inline-flex; gap: 6px; align-items: center; }
.ul-table th { white-space: nowrap; }
.ul-table th.stage-col { font-size: 11px; }
.ul-table a.sort { color: inherit; display: inline-flex; gap: 5px; align-items: center; }
.ul-table a.sort i { color: #b6bec9; font-size: 11px; }
.ul-table a.sort.on { color: #1e40af; } .ul-table a.sort.on i { color: #1e40af; }
.ul-table td a { color: #1e6fc4; }
.ul-total { min-width: 110px; }
.ul-bar { display: block; height: 4px; background: #eef0f3; border-radius: 3px; margin-top: 4px; }
.ul-bar span { display: block; height: 100%; background: #3b82c4; border-radius: 3px; margin-left: auto; }

/* New / Re inquiry */
.enq-chips { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; font-size: 13px; }
.enq-chips a { text-decoration: none; }
.tva td .muted.small { display: block; margin-top: 2px; }

/* ---------- Visiting card scan (lead form) ---------- */
body.cs-lock { overflow: hidden; }
.cs-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .55); display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; }
.cs-box { background: #fff; width: 100%; max-width: 860px; border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.3); font-size: 13px; overflow: hidden; }
.cs-body { padding: 16px 18px 18px; }
.cs-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-slot-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: #444; }
.cs-slot-top b { font-weight: 500; }
.cs-drop { height: 210px; border: 2px dashed #b8c2cf; border-radius: 4px; background: #f7f9fc; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.cs-drop.over { border-color: #0b6fc4; background: #eaf2fd; }
.cs-drop canvas { max-width: 100%; max-height: 100%; display: block; }
.cs-empty { text-align: center; color: #555; line-height: 1.6; padding: 10px; }
.cs-empty .fa { display: block; font-size: 30px; color: #0b6fc4; margin-bottom: 6px; }
.cs-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-acts .ob { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; }
.cs-acts .ob:not(.green):not(.red):not(.blue) { border-color: #9aa3ad; color: #333; }
.cs-tip { margin: 12px 0 0; }
.cs-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cs-bar { flex: 1; height: 8px; background: #e5e9ef; border-radius: 4px; overflow: hidden; }
.cs-bar i { display: block; height: 100%; width: 0; background: #16a34a; transition: width .2s; }
#csErr, #csDup { margin: 12px 0 0; }
.cs-body .lf-actions { margin-top: 14px; }
.cs-body .lf-actions .ob[disabled] { opacity: .45; cursor: not-allowed; }
.cs-grid { margin-top: 12px; }
.cs-body input, .cs-body textarea { width: 100%; padding: 8px 12px; border: 1px solid #d5dae1; border-radius: 3px; font: inherit; font-size: 13px; min-height: 36px; }
.cs-body input.cs-miss { background: #fffbeb; border-color: #f5c46b; }
.cs-raw { margin-top: 14px; border-top: 1px solid #e5e9ef; padding-top: 10px; }
.cs-raw summary { cursor: pointer; color: #1e6fc4; }
.cs-raw p { margin: 8px 0 6px; }
.cs-raw textarea { font-family: Consolas, monospace; resize: vertical; margin-bottom: 8px; }
.lf input.cs-filled, .lf select.cs-filled { background: #ecfdf3; border-color: #16a34a; transition: background .6s; }
@media (max-width: 700px) {
    .cs-overlay { padding: 0; }
    .cs-box { min-height: 100%; border-radius: 0; }
    .cs-slots { grid-template-columns: 1fr; }
    .cs-drop { height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .cs-bar i, .lf input.cs-filled { transition: none; } }

/* ---------- Mobile friendly (phone / chhoti screen) ---------- */
@media (max-width: 760px) {
    body { font-size: 14px; }
    input, select, textarea { font-size: 16px !important; }          /* iPhone par type karte waqt zoom na ho */
    .topbar { padding: 10px 12px; gap: 8px; }
    .btn-box { padding: 8px 12px; font-size: 14px; }
    .top-icons { gap: 16px; }
    .logo img { height: 28px; max-width: 90px; }
    .dd-menu { max-width: calc(100vw - 24px); }
    .flash { margin: 10px 12px 0; }
    .content { padding: 12px; gap: 12px; }
    .card { padding: 14px; }
    .card-title { font-size: 17px; }
    .card-title.pad { padding: 12px 14px; }
    .page-head h1 { font-size: 19px; }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn { flex: 1 1 auto; justify-content: center; }
    .btn { padding: 10px 14px; }
    .filters { padding: 10px; gap: 8px; }
    .filters input, .filters select { flex: 1 1 100%; min-width: 0; width: 100%; }
    .filters input[type=search] { min-width: 0; }
    .filters .btn { flex: 1 1 auto; justify-content: center; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabs a { white-space: nowrap; padding: 10px 12px; }
    .list th, .list td { padding: 9px 10px; }
    :not(.table-wrap) > table.list { display: block; overflow-x: auto; }   /* bina wrapper wali tables bhi scroll ho */
    .row-actions > a { font-size: 18px; margin-left: 16px; }
    .pager { flex-wrap: wrap; gap: 10px; }
    .grid-auto { grid-template-columns: 1fr 1fr; }
    .details.compact { grid-template-columns: 1fr; gap: 2px; }
    .chart-wrap { height: 280px; }
    .chart-types { flex-wrap: wrap; gap: 12px; }
    .fu-head { padding: 14px 10px; font-size: 17px; }
    .fu-table td { padding: 10px; }
    .tile { padding: 14px; font-size: 15px; }
    .tiles { padding: 14px 0; }
    .source-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .src-count { font-size: 22px; }
    .login-card { padding: 22px; }

    /* Lead form */
    .lf-head { flex-wrap: wrap; gap: 6px; padding: 8px; }
    .lf-head-btns { flex-wrap: wrap; }
    .lf-hbtn { padding: 8px 12px; }
    .lf-body { padding: 12px; }
    .mini-btns { gap: 6px; }
    .mini-btns button, .mini-btns a { width: 30px; height: 28px; font-size: 13px; }
    .ship-chk { width: 44px; }
    .prod-bar { flex-wrap: wrap; row-gap: 6px; }
    .prod-bar .ac.grow { flex: 1 1 calc(100% - 80px); }
    .sq { width: 42px; min-height: 40px; }
    .items { margin-bottom: 16px; }
    .lf-actions { flex-wrap: wrap; }
    .lf-actions .ob { flex: 1 1 45%; padding: 12px; }
    .lf-foot { align-items: stretch; }
    .lf-foot .ob { text-align: center; }
    .chips { flex-wrap: wrap; margin-right: 0; }
    .chips span { flex: 1 1 auto; border-right: 0; }

    /* Lists ko card ki tarah dikhao (leads, follow ups) */
    .list.m-cards, .list.m-cards tbody, .list.m-cards tfoot, .list.m-cards tr, .list.m-cards td { display: block; width: 100%; }
    .list.m-cards thead, .list.m-cards .m-hide { display: none; }
    .list.m-cards tr { position: relative; padding: 10px 4px; border-bottom: 8px solid #f1f3f6; }
    .list.m-cards tbody tr:hover { background: none; }
    .list.m-cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 4px 10px; text-align: right; white-space: normal; min-width: 0; max-width: none; }
    .list.m-cards td[data-label] { justify-content: flex-end; gap: 6px; }
    .list.m-cards td[data-label]::before { content: attr(data-label); color: #777; text-align: left; flex-shrink: 0; margin-right: auto; padding-right: 12px; }
    .list.m-cards td.m-title { display: block; text-align: left; font-size: 16px; font-weight: 500; padding-right: 44px; }
    .list.m-cards td.chk { position: absolute; top: 12px; right: 8px; width: auto; padding: 0; }
    .list.m-cards td.chk input { width: 22px; height: 22px; }
    .list.m-cards td.row-actions { justify-content: flex-end; flex-wrap: wrap; padding-top: 10px; }
    .list.m-cards td.empty { display: block; text-align: center; }
    .list.m-cards tfoot td:empty { display: none; }
    .list.m-cards tfoot td { justify-content: flex-start; text-align: left; }
    .list.m-cards .done-form { display: flex; flex-wrap: wrap; width: 100%; gap: 6px; }
    .list.m-cards .done-form input, .list.m-cards .done-form select { flex: 1 1 100%; width: 100%; padding: 9px 10px; }
    .list.m-cards .done-form .btn { flex: 1; justify-content: center; }
    .bulk-bar { padding: 8px 10px; }
}
@media (max-width: 380px) {
    .grid-auto, .source-grid { grid-template-columns: 1fr; }
    .lf-actions .ob { flex-basis: 100%; }
}