*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#eef3f8;color:#102033}.hidden{display:none!important}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#071b33,#123e66 55%,#94723a)}.login-card{width:min(460px,92vw);background:white;padding:34px;border-radius:24px;box-shadow:0 25px 70px #0007}.badge{display:inline-block;background:#123e66;color:#fff;padding:8px 14px;border-radius:100px;font-weight:700}.login-card h1{margin:18px 0 8px;font-size:29px}.login-card p{color:#5b6a7b}.login-card input{width:100%;padding:14px;margin:9px 0;border:1px solid #cdd7e1;border-radius:12px}.login-card button,.primary{width:100%;padding:14px;border:0;border-radius:12px;background:#123e66;color:white;font-weight:700;cursor:pointer;margin-top:10px}small{display:block;margin-top:18px;color:#667}#app{display:flex;min-height:100vh}aside{width:265px;background:#071b33;color:white;padding:24px;position:sticky;top:0;height:100vh}aside h2{margin-top:0}aside p{font-size:13px;color:#c9d7e8;line-height:1.5}aside button{display:block;width:100%;padding:13px;margin:10px 0;text-align:left;background:#123e66;color:white;border:1px solid #2f5c86;border-radius:12px;cursor:pointer}.logout{background:#7c1f24!important}main{flex:1;padding:28px}.top{display:flex;justify-content:space-between;gap:12px;align-items:center}.top input,.top select,select,input,textarea{padding:11px;border:1px solid #cbd8e5;border-radius:10px;background:white}button{padding:11px 15px;border:0;border-radius:10px;background:#123e66;color:white;cursor:pointer}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:20px 0}.card{background:white;padding:20px;border-radius:18px;box-shadow:0 8px 24px #1d3b5c12;border-left:6px solid #123e66}.card b{font-size:34px;display:block}.card span{color:#64748b}.warn{border-left-color:#d99a00}.danger{border-left-color:#c62828}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:16px;background:white;padding:22px;border-radius:18px;box-shadow:0 8px 24px #1d3b5c12}.formgrid label{font-weight:600}.formgrid input,.formgrid select,.formgrid textarea{width:100%;margin-top:7px}.wide{grid-column:1/-1}.table-wrap{background:white;border-radius:18px;overflow:auto;box-shadow:0 8px 24px #1d3b5c12}table{width:100%;border-collapse:collapse;min-width:1050px}th,td{padding:12px;border-bottom:1px solid #e7edf3;text-align:left;font-size:14px}th{background:#123e66;color:#fff;position:sticky;top:0}.pill{padding:5px 9px;border-radius:100px;font-weight:700;font-size:12px}.pill.Normal{background:#e7f5ec;color:#176b38}.pill.Due{background:#fff4d6;color:#946500}.pill.Expired{background:#ffe2e2;color:#a10f0f}.pill.Disposed{background:#e8eef5;color:#516070}.bars{background:white;border-radius:18px;padding:18px;box-shadow:0 8px 24px #1d3b5c12}.barrow{display:grid;grid-template-columns:160px 1fr 40px;gap:10px;align-items:center;margin:10px 0}.bar{height:16px;background:#dbe8f4;border-radius:30px;overflow:hidden}.bar i{display:block;height:100%;background:#123e66}.alert-card{background:white;border-left:6px solid #c62828;margin:10px 0;padding:14px;border-radius:12px;box-shadow:0 8px 24px #1d3b5c12}@media(max-width:800px){#app{display:block}aside{width:auto;height:auto;position:relative}.formgrid{grid-template-columns:1fr}.top{display:block}}
.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px;margin:18px 0}.chart-card,.report-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.08)}.chart-card h2,.report-card h2{margin-top:0}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:16px}.report-card button{margin:4px 6px 4px 0}.muted{color:#777;font-size:13px}@media(max-width:900px){.chart-grid,.report-grid{grid-template-columns:1fr}}

.card.clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}.card.clickable:hover{transform:translateY(-2px);box-shadow:0 12px 30px #1d3b5c26}.top div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.top input{min-width:260px}.top select{min-width:135px}

.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{padding:7px 9px}.dangerBtn{background:#b42318!important;color:#fff!important}.clickable{cursor:pointer}.clickable:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(0,0,0,.12)}
.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:flex;align-items:center;justify-content:center;z-index:50}.modal-card{background:#fff;border-radius:18px;padding:24px;min-width:330px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.modal-card input{display:block;width:100%;margin:10px 0;padding:12px;border:1px solid #d1d5db;border-radius:10px}.hidden{display:none!important}.dangerBtn{background:#dc2626!important;color:#fff!important}.actions button{margin:2px}.formgrid button{height:42px;align-self:end}

/* v9 Colorful Executive Dashboard */
:root{
  --nav:#08203d; --nav2:#123f68; --bg:#eef4fb; --ink:#061a33;
  --blue:#2563eb; --purple:#7c3aed; --orange:#f59e0b; --red:#dc2626; --green:#16a34a; --cyan:#0891b2; --indigo:#4f46e5;
}
body{background:radial-gradient(circle at top left,#e8f4ff 0,#f6f9fd 38%,#edf3f9 100%);color:var(--ink)}
aside{background:linear-gradient(180deg,#061a33 0%,#092d55 58%,#0d3b70 100%);box-shadow:8px 0 30px #09213d24}
aside h2{font-size:26px;letter-spacing:.3px}aside h2:before{content:'UP';display:inline-grid;place-items:center;width:54px;height:54px;margin-right:12px;border-radius:18px;background:linear-gradient(135deg,#ffd54a,#f9a825);color:#071b33;font-weight:900;box-shadow:0 10px 25px #0004}
aside button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);font-size:15px;transition:.2s}aside button:hover{background:rgba(255,255,255,.18);transform:translateX(3px)}
main{padding:34px}main h1{font-size:34px;margin:0 0 6px}.top button,button{box-shadow:0 10px 22px #123e6620}.top button:hover,button:hover{filter:brightness(1.05)}
.metric-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}.card{border-left:0!important;color:#fff;position:relative;overflow:hidden;min-height:126px;box-shadow:0 18px 40px #14385a20}.card:after{content:'';position:absolute;right:-34px;top:-34px;width:115px;height:115px;border-radius:50%;background:rgba(255,255,255,.17)}.card b{font-size:42px}.card span{color:rgba(255,255,255,.9);font-weight:650}.card-blue{background:linear-gradient(135deg,#2f6df6,#174bbd)}.card-purple{background:linear-gradient(135deg,#8b5cf6,#5b21b6)}.card-orange{background:linear-gradient(135deg,#ffb020,#f97316)}.card-red{background:linear-gradient(135deg,#fb5b5f,#b91c1c)}.card-green{background:linear-gradient(135deg,#35b46b,#15803d)}.card-cyan{background:linear-gradient(135deg,#22b8cf,#0e7490)}.card-indigo{background:linear-gradient(135deg,#6366f1,#3730a3)}.clickable{cursor:pointer}.clickable:hover{transform:translateY(-3px);transition:.2s;box-shadow:0 24px 50px #14385a30}
.chart-grid-premium{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:22px;align-items:stretch}.chart-grid-premium .status-card{grid-row:span 2}.chart-card,.report-card,.table-wrap,.formgrid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.75);box-shadow:0 18px 45px #123e6618}.chart-card{border-radius:24px;padding:24px}.chart-card h2{margin-top:0;font-size:24px}.donut-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center}.donut{width:210px;height:210px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px #fff,0 20px 40px #123e6622}.donut:before{content:'';position:absolute;width:118px;height:118px;border-radius:50%;background:white;box-shadow:inset 0 0 0 1px #eef2f7}.donut div{position:relative;z-index:1;text-align:center}.donut b{display:block;font-size:36px}.donut span{font-size:13px;color:#64748b}.legend{display:flex;flex-direction:column;gap:10px}.legend-row{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;background:#f8fbff!important;color:#123!important;border:1px solid #e6eef7;text-align:left;border-radius:14px;box-shadow:none}.legend-row i{width:14px;height:14px;border-radius:5px}.legend-row span{font-weight:650}.legend-row b{font-size:18px}.legend-row:hover{background:#eef6ff!important;transform:translateX(2px)}
.barrow{gap:14px;margin:13px 0}.barrow span{font-weight:650}.bar{height:18px;background:#eaf1f8;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2f80ed,#56ccf2)}.colorful-bars .barrow:nth-child(2n) .bar i{background:linear-gradient(90deg,#f59e0b,#facc15)}.colorful-bars .barrow:nth-child(3n) .bar i{background:linear-gradient(90deg,#8b5cf6,#c084fc)}.colorful-bars .barrow:nth-child(4n) .bar i{background:linear-gradient(90deg,#10b981,#86efac)}
.alert-card{border-left:6px solid #f59e0b;background:linear-gradient(90deg,#fff8e1,#ffffff);border-radius:16px;padding:16px;margin:12px 0;box-shadow:0 8px 24px #f59e0b20}.pill{font-weight:800;border-radius:999px;padding:7px 11px}.pill.Due{background:#fff3c4;color:#92400e}.pill.Expired{background:#fee2e2;color:#991b1b}.pill.Normal{background:#dcfce7;color:#166534}.pill.Watch{background:#dbeafe;color:#1e40af}.pill.Disposed{background:#dcfce7;color:#166534}
@media(max-width:1100px){.chart-grid-premium{grid-template-columns:1fr}.donut-layout{grid-template-columns:1fr}.donut{margin:auto}aside{width:235px}}

/* v10 Interactive Pending Trend */
#pendingTrend{box-shadow:none;background:transparent;padding:0}.trend-legend{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 14px}.trend-legend span{display:flex;align-items:center;gap:6px;background:#f8fbff;border:1px solid #e6eef7;border-radius:999px;padding:7px 10px;font-weight:700;font-size:12px}.trend-legend i{width:12px;height:12px;border-radius:4px}.c-within{background:#2f80ed}.c-due{background:#f59e0b}.c-expired{background:#dc2626}.c-disposed{background:#16a34a}.trend-card{background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #e6eef7;border-radius:18px;padding:15px;margin:12px 0;box-shadow:0 12px 28px #123e6610;cursor:pointer;transition:.18s}.trend-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px #123e6622}.trend-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.trend-head b{font-size:18px}.trend-head span{color:#64748b;font-weight:700}.stackbar{height:24px;background:#eaf1f8;border-radius:999px;overflow:hidden;display:flex;box-shadow:inset 0 0 0 1px #dde7f2}.seg{display:block;height:100%;min-width:0;transition:filter .15s}.seg:hover{filter:brightness(.9)}.seg.within{background:linear-gradient(90deg,#2f80ed,#56ccf2)}.seg.due{background:linear-gradient(90deg,#f59e0b,#facc15)}.seg.expired{background:linear-gradient(90deg,#ef4444,#b91c1c)}.seg.disposed{background:linear-gradient(90deg,#16a34a,#86efac)}.trend-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.trend-numbers button{background:#f8fbff!important;color:#0f2744;border:1px solid #e6eef7;box-shadow:none;padding:8px;border-radius:12px;font-size:12px;text-align:center}.trend-numbers button:hover{background:#eef6ff!important;transform:translateY(-1px)}.trend-numbers b{font-size:16px;margin-left:4px}.chart-card:nth-child(2){background:linear-gradient(135deg,#ffffff 0%,#f2f8ff 100%);border:1px solid #dcecff}
@media(max-width:650px){.trend-numbers{grid-template-columns:repeat(2,1fr)}.trend-head{display:block}.trend-head span{display:block;margin-top:4px}}


/* v11 Single X/Y Axis Pending Trend - Stacked Bar Chart */
#pendingTrend{background:transparent!important;box-shadow:none!important;padding:0!important}.axis-legend{margin-bottom:18px}.axis-legend span{font-size:13px}.axis-chart{display:grid;grid-template-columns:62px 1fr;gap:12px;min-height:330px;padding:8px 4px 0}.y-axis{display:grid;grid-template-rows:24px repeat(5,1fr);align-items:end;text-align:right;color:#64748b;font-size:12px}.y-axis span{writing-mode:vertical-rl;transform:rotate(180deg);grid-row:1/7;justify-self:start;align-self:center;font-weight:700;color:#334155;letter-spacing:.2px}.y-axis b{font-weight:700;padding-right:8px}.plot-area{position:relative;display:flex;flex-direction:column;min-width:0}.grid-lines{position:absolute;inset:24px 0 42px 0;display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}.grid-lines i{border-top:1px dashed #d9e5f2}.bar-axis{position:relative;z-index:1;display:flex;align-items:flex-end;gap:18px;height:260px;padding:24px 8px 0;border-left:2px solid #d7e3ef;border-bottom:2px solid #d7e3ef;overflow-x:auto}.month-bar-wrap{min-width:70px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer}.month-bar-wrap:hover .vertical-stack{filter:brightness(1.04);transform:translateY(-2px)}.bar-value{font-weight:900;color:#0f2744;margin-bottom:7px;background:#fff;border:1px solid #e6eef7;padding:3px 9px;border-radius:999px;box-shadow:0 6px 14px #123e6612}.vertical-stack{width:46px;min-height:4px;border-radius:12px 12px 4px 4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 12px 22px #123e6620,inset 0 0 0 1px #ffffff80;transition:.18s}.vs{display:block;width:100%;min-height:0}.vs.within{background:linear-gradient(180deg,#34d399,#16a34a)}.vs.due{background:linear-gradient(180deg,#fde047,#f59e0b)}.vs.expired{background:linear-gradient(180deg,#fb7185,#dc2626)}.month-label{font-weight:800;color:#0f2744;margin-top:10px;white-space:nowrap}.mini-counts{display:flex;gap:4px;margin-top:5px;font-size:11px;font-weight:800}.mini-counts span{padding:2px 5px;border-radius:8px;color:#fff}.mini-counts .within{background:#16a34a}.mini-counts .due{background:#f59e0b}.mini-counts .expired{background:#dc2626}.x-axis-title{text-align:center;font-weight:800;color:#334155;margin-top:12px}.c-within{background:#16a34a!important}.c-due{background:#f59e0b!important}.c-expired{background:#dc2626!important}
@media(max-width:700px){.axis-chart{grid-template-columns:42px 1fr}.bar-axis{gap:12px}.month-bar-wrap{min-width:58px}.vertical-stack{width:38px}.y-axis span{display:none}}

/* v12 Executive Dashboard - spacious, reference-style layout */
#app{background:#f4f8fc;}
aside{width:260px!important;padding:28px 18px!important;background:linear-gradient(180deg,#061d39 0%,#082b52 55%,#061d39 100%)!important;}
aside h2{font-size:0!important;margin:0 0 24px!important;display:flex;align-items:center;gap:12px;}
aside h2:before{content:'UP';width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#ffd54a,#f3ad21);display:inline-grid;place-items:center;color:#081b31;font-weight:900;font-size:22px;box-shadow:0 8px 24px #0003;margin-right:0!important;}
aside h2:after{content:'Auraiya Police\A FIR Time Limit Monitoring';white-space:pre;line-height:1.25;font-size:23px;color:#fff;font-weight:800;}
aside p#userBox{position:absolute;left:18px;right:18px;bottom:98px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;color:#dbeafe;}
aside button{height:58px;margin:8px 0!important;padding:0 18px!important;border-radius:10px!important;background:transparent!important;border:0!important;font-size:16px;text-align:left;box-shadow:none!important;}
aside button:hover,aside button:first-of-type{background:rgba(37,99,235,.35)!important;transform:none!important;}
aside .logout{position:absolute;left:18px;right:18px;bottom:28px;width:auto;background:#b91c1c!important;height:48px!important;text-align:center!important;}
main{padding:28px 32px 20px!important;min-width:0;overflow-x:hidden;}
.executive-dashboard{max-width:1260px;margin:0 auto;}
.dash-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px;}
.dash-head h1{font-size:32px!important;margin:0!important;letter-spacing:-.4px;color:#071d38;}
.dash-head p{margin:10px 0 0;color:#536881;font-size:15px;}
.dash-head p span{background:#e8f1ff;color:#0b5ad9;border-radius:8px;padding:7px 10px;margin-left:16px;font-weight:700;font-size:13px;}
.dash-actions{display:flex;gap:14px;align-items:center;}
.dash-actions select,.dash-actions button{height:44px;border-radius:10px;border:1px solid #cfdceb;background:#fff;padding:0 18px;font-weight:800;color:#0e2745;box-shadow:0 6px 18px #123e6610;}
.outline-btn{border:1px solid #2563eb!important;color:#0b5ad9!important;background:#fff!important;}
.danger-top{background:#e12d37!important;color:#fff!important;border-color:#e12d37!important;}
.executive-cards{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:18px!important;margin-bottom:22px!important;}
.executive-cards .card{min-height:130px!important;border-radius:11px!important;padding:20px 18px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;color:#fff!important;box-shadow:0 15px 36px #123e6620!important;}
.executive-cards .card small{display:block;color:#fff!important;font-size:15px;font-weight:700;margin:0!important;}
.executive-cards .card b{font-size:36px!important;line-height:1!important;color:#fff!important;}
.executive-cards .card span{font-size:14px!important;color:#fff!important;opacity:.95;}
.dashboard-grid-main{display:grid;grid-template-columns:minmax(0,2.55fr) 320px;gap:16px;margin-bottom:16px;align-items:stretch;}
.chart-card,.mini-panel{border-radius:9px!important;background:#fff!important;border:1px solid #dbe6f2!important;box-shadow:0 14px 36px #10294a12!important;padding:18px!important;}
.card-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;}
.card-title-row h2,.chart-card h2,.mini-panel h2{margin:0!important;font-size:18px!important;color:#081d38!important;}
.card-title-row h2 small,.chart-card h2 small{font-size:13px;color:#536881;font-weight:700;}
.card-title-row button,.card-title-row select{border:1px solid #d6e3f1;background:#f4f8ff;color:#0b5ad9;border-radius:8px;padding:8px 12px;font-weight:800;box-shadow:none!important;}
.trend-wide{min-height:430px;}
.summary-side{min-height:430px;}
.summary-side .donut-layout.vertical{display:block!important;}
.summary-side .donut{width:220px!important;height:220px!important;margin:18px auto 20px!important;}
.summary-side .donut:before{width:108px!important;height:108px!important;}
.summary-side .legend{gap:6px!important;}
.summary-side .legend-row{grid-template-columns:14px 1fr auto!important;padding:9px 0!important;border:0!important;border-radius:0!important;background:#fff!important;border-bottom:1px solid #edf2f7!important;}
.summary-side .legend-row:last-child{border-bottom:0!important;}
.chart-hint{text-align:center;color:#0b5ad9;font-size:13px;font-weight:700;margin:8px 0 0;}
.bottom-grid{display:grid;grid-template-columns:1.2fr .9fr 1.2fr;gap:16px;align-items:stretch;}
.mini-panel{min-height:225px;overflow:hidden;}
.alert-card{border-left:0!important;border-radius:8px!important;padding:13px 15px!important;margin:9px 0!important;background:#fff1f1!important;box-shadow:none!important;border:1px solid #fee2e2!important;font-size:14px;}
.alert-card b{color:#111827;}
.compact-list .barrow{display:grid!important;grid-template-columns:1fr auto!important;gap:12px!important;padding:13px 0!important;border-bottom:1px solid #edf2f7;margin:0!important;}
.compact-list .barrow .bar{display:none!important;}
.compact-list .barrow span{font-size:14px!important;font-weight:800;}
.compact-list .barrow b{font-size:18px!important;color:#e11d48;}
/* Make stacked axis chart look like the reference */
#pendingTrend .axis-chart{grid-template-columns:52px 1fr!important;min-height:330px!important;padding-top:0!important;}
#pendingTrend .trend-legend{justify-content:center!important;margin:-28px 165px 16px 0!important;}
#pendingTrend .trend-legend span{background:transparent!important;border:0!important;font-size:13px!important;padding:4px 7px!important;}
#pendingTrend .bar-axis{height:285px!important;gap:16px!important;padding:26px 12px 0!important;border-left:0!important;border-bottom:0!important;overflow-x:auto;}
#pendingTrend .vertical-stack{width:32px!important;border-radius:3px 3px 0 0!important;box-shadow:none!important;}
#pendingTrend .bar-value{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-bottom:6px!important;font-size:13px!important;}
#pendingTrend .month-label{font-size:12px!important;line-height:1.1!important;margin-top:8px!important;white-space:normal!important;text-align:center;width:58px;}
#pendingTrend .mini-counts{display:none!important;}
#pendingTrend .x-axis-title{font-size:13px!important;margin-top:6px!important;}
#pendingTrend .grid-lines{inset:24px 0 46px 0!important;}
#pendingTrend .grid-lines i{border-top:1px solid #e2eaf4!important;}
#pendingTrend .y-axis{font-size:12px!important;}
#pendingTrend .y-axis span{font-size:13px!important;}
/* Tables and forms keep full width */
#list,#entry,#reports,#users,#audit{max-width:1260px;margin:0 auto;}
@media(max-width:1280px){.executive-cards{grid-template-columns:repeat(3,1fr)!important}.dashboard-grid-main{grid-template-columns:1fr}.bottom-grid{grid-template-columns:1fr}.summary-side .donut-layout.vertical{display:grid!important;grid-template-columns:240px 1fr!important;align-items:center}.summary-side{min-height:auto}}
@media(max-width:760px){#app{display:block!important}aside{position:relative!important;width:100%!important;height:auto!important}aside p#userBox,.logout{position:static!important}.executive-cards{grid-template-columns:1fr!important}.dash-head,.dash-actions{display:block}.dash-actions>*{width:100%;margin-top:8px}.summary-side .donut-layout.vertical{display:block!important}main{padding:18px!important}}

/* v13 Left Sidebar Layout Fix */
#app{
  display:grid !important;
  grid-template-columns:320px minmax(0,1fr) !important;
  min-height:100vh;
}
aside{
  width:320px !important;
  min-width:320px !important;
  max-width:320px !important;
  height:100vh !important;
  position:sticky !important;
  top:0 !important;
  padding:28px 20px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:10;
}
main{
  min-width:0 !important;
  overflow-x:auto !important;
  padding:34px 42px !important;
}
aside h2{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 8px !important;
  font-size:28px !important;
  line-height:1.13 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
aside h2:before{
  flex:0 0 58px !important;
  width:58px !important;
  height:58px !important;
  margin-right:0 !important;
  border-radius:18px !important;
  font-size:22px !important;
}
aside p#userBox,
aside p{
  max-width:100% !important;
  overflow-wrap:break-word !important;
}
aside button{
  width:100% !important;
  min-height:54px !important;
  padding:15px 18px !important;
  margin:9px 0 !important;
  text-align:left !important;
  font-size:16px !important;
  font-weight:650 !important;
  white-space:normal !important;
}
aside .logout{
  text-align:center !important;
  margin-top:20px !important;
}
#userBox{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  margin:18px 0 20px !important;
  color:#dbeafe !important;
  line-height:1.45 !important;
}
#userBox b,
#userBox strong{
  display:block !important;
  color:#fff !important;
  font-size:16px !important;
  margin-bottom:3px !important;
}
.dash-head{
  gap:22px !important;
}
.executive-cards{
  grid-template-columns:repeat(6,minmax(150px,1fr)) !important;
}
.dashboard-grid-main{
  grid-template-columns:minmax(620px,1.85fr) minmax(300px,.75fr) !important;
}

@media(max-width:1300px){
  #app{grid-template-columns:285px minmax(0,1fr) !important;}
  aside{width:285px !important;min-width:285px !important;max-width:285px !important;padding:24px 16px !important;}
  aside h2{font-size:24px !important;}
  main{padding:28px 28px !important;}
  .executive-cards{grid-template-columns:repeat(3,minmax(180px,1fr)) !important;}
  .dashboard-grid-main{grid-template-columns:1fr !important;}
}
@media(max-width:900px){
  #app{display:block !important;}
  aside{width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;position:relative !important;}
  main{padding:18px !important;}
  .executive-cards{grid-template-columns:repeat(2,minmax(150px,1fr)) !important;}
}
@media(max-width:560px){
  .executive-cards{grid-template-columns:1fr !important;}
  aside h2{font-size:22px !important;}
}

/* v14 FINAL SIDEBAR REBUILD - fixes broken vertical title and overlap */
html, body { width:100%; min-height:100%; overflow-x:hidden; }
#app{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  width:100% !important;
  min-height:100vh !important;
  align-items:stretch !important;
}
aside{
  grid-column:1 !important;
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
  height:100vh !important;
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  padding:22px 16px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  background:linear-gradient(180deg,#061a33 0%,#08284c 55%,#092f5d 100%) !important;
  box-shadow:8px 0 30px rgba(8,32,61,.20) !important;
}
main{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  overflow-x:hidden !important;
  padding:30px 34px !important;
}
/* brand */
aside h2{
  order:0 !important;
  display:grid !important;
  grid-template-columns:58px 1fr !important;
  align-items:center !important;
  column-gap:14px !important;
  width:100% !important;
  margin:0 0 22px 0 !important;
  padding:0 !important;
  line-height:1.15 !important;
  font-size:0 !important;      /* hides original FIR Monitor text */
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
aside h2::before{
  content:'UP' !important;
  display:grid !important;
  place-items:center !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  margin:0 !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,#ffd447,#f6b72f) !important;
  color:#061a33 !important;
  font-weight:900 !important;
  font-size:22px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.25) !important;
}
aside h2::after{
  content:'Auraiya Police\A FIR Time Limit Monitoring' !important;
  white-space:pre-line !important;
  display:block !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:22px !important;
  letter-spacing:.1px !important;
  line-height:1.18 !important;
  overflow:hidden !important;
}
/* sidebar buttons */
aside button{
  order:10 !important;
  width:100% !important;
  height:auto !important;
  min-height:50px !important;
  padding:13px 18px !important;
  margin:5px 0 !important;
  border-radius:12px !important;
  border:0 !important;
  background:transparent !important;
  color:#eef6ff !important;
  text-align:left !important;
  font-size:15.5px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transform:none !important;
}
aside button:hover,
aside button:first-of-type{
  background:linear-gradient(135deg,#174ea6,#1d4ed8) !important;
  color:#fff !important;
  transform:none !important;
}
/* user box near bottom */
aside p#userBox{
  order:50 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:18px 0 12px 0 !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#dbeafe !important;
  line-height:1.38 !important;
  font-size:13px !important;
  overflow-wrap:break-word !important;
}
aside p#userBox b,
aside p#userBox strong{
  display:block !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
}
aside .logout{
  order:70 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  min-height:50px !important;
  margin:14px 0 0 0 !important;
  text-align:center !important;
  background:#c81e1e !important;
  color:#fff !important;
  border-radius:12px !important;
}
/* dashboard responsive room */
.executive-dashboard{max-width:1280px !important; margin:0 auto !important;}
.dash-head{display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:18px !important;}
.executive-cards{grid-template-columns:repeat(6,minmax(130px,1fr)) !important; gap:16px !important;}
.dashboard-grid-main{grid-template-columns:minmax(0,2fr) 320px !important; gap:16px !important;}
@media(max-width:1320px){
  #app{grid-template-columns:280px minmax(0,1fr) !important;}
  aside{width:280px !important; min-width:280px !important; max-width:280px !important; padding:20px 14px !important;}
  aside h2{grid-template-columns:52px 1fr !important; column-gap:12px !important;}
  aside h2::before{width:52px !important; height:52px !important; min-width:52px !important; font-size:20px !important;}
  aside h2::after{font-size:20px !important;}
  main{padding:26px 24px !important;}
  .executive-cards{grid-template-columns:repeat(3,minmax(170px,1fr)) !important;}
  .dashboard-grid-main{grid-template-columns:1fr !important;}
}
@media(max-width:820px){
  #app{display:block !important;}
  aside{position:relative !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important;}
  main{padding:18px !important; overflow-x:hidden !important;}
  .executive-cards{grid-template-columns:repeat(2,minmax(140px,1fr)) !important;}
  .dash-head{display:block !important;}
  .dash-actions{display:grid !important; grid-template-columns:1fr !important; gap:8px !important; margin-top:12px !important;}
}
@media(max-width:560px){
  .executive-cards{grid-template-columns:1fr !important;}
}

/* v15 SIDEBAR LOGO + TITLE FINAL FIX */
#app{
  grid-template-columns:360px minmax(0,1fr) !important;
}
aside{
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
  padding:26px 22px !important;
}
.brandBox{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  width:100% !important;
  margin:0 0 24px 0 !important;
  padding:0 !important;
}
.brandBox img{
  width:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
  object-fit:contain !important;
  display:block !important;
}
.brandBox h2{
  all:unset !important;
  display:block !important;
  color:#fff !important;
  font-family:Segoe UI,Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:28px !important;
  line-height:1.08 !important;
  letter-spacing:.1px !important;
  white-space:nowrap !important;
  margin:0 0 5px 0 !important;
}
.brandBox p{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#dbeafe !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
/* Disable old h2 pseudo-logo rules completely */
aside > h2,
aside h2::before,
aside h2::after{ content:none !important; display:none !important; }
aside button{
  min-height:52px !important;
  padding:14px 18px !important;
  font-size:16px !important;
}
main{
  padding:32px 38px !important;
}
@media(max-width:1380px){
  #app{grid-template-columns:340px minmax(0,1fr) !important;}
  aside{width:340px !important;min-width:340px !important;max-width:340px !important;}
  .brandBox h2{font-size:26px !important;}
  .brandBox p{font-size:14px !important;}
}
@media(max-width:980px){
  #app{display:block !important;}
  aside{position:relative !important;width:100% !important;min-width:0 !important;max-width:none !important;height:auto !important;}
  .brandBox h2,.brandBox p{white-space:normal !important;}
}

/* v16 Notification + Bulk Import UI */
.notification-strip{margin:18px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#e8f2ff,#fff7df);border:1px solid #dbe8fb;border-radius:18px;padding:14px 18px;box-shadow:0 10px 28px rgba(15,45,85,.08)}
.notification-strip b{display:block;color:#0b2341;font-size:17px}.notification-strip span{display:block;color:#51627a;margin-top:4px}.notification-strip button,.action-row button{border:0;border-radius:12px;padding:11px 16px;font-weight:800;background:#174ea6;color:white;cursor:pointer}
.notify-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:22px}.wide-card{grid-column:auto}.digest-box{white-space:pre-wrap;background:#071f3d;color:#eaf3ff;border-radius:16px;padding:18px;min-height:260px;line-height:1.55;font-family:Consolas,monospace;overflow:auto}.digest-box.small{min-height:180px;background:#f8fbff;color:#0b2341;border:1px solid #dce7f5}.action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.whatsappBtn{background:#25D366!important;color:#052e16!important}.report-card label{display:block;margin:12px 0;color:#0b2341;font-weight:700}.report-card input,.report-card textarea,.report-card select{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #cbd8ea;border-radius:12px;padding:11px;background:white;font-size:15px}.report-card textarea{min-height:110px}.report-card ul{line-height:1.8;color:#263b59}.muted{color:#6b7c93;font-size:13px}
@media(max-width:1100px){.notify-grid{grid-template-columns:1fr}.notification-strip{flex-direction:column;align-items:flex-start}}

/* Logout visibility fix */
#app.hidden {
  display: none !important;
}
#login.hidden {
  display: none !important;
}

/* Clean Pending Trend chart: hide misplaced Y-axis numeric labels */
#pendingTrend .y-axis b {
  display: none !important;
}

#pendingTrend .y-axis span {
  display: block !important;
}

/* Fixed User Top Bar */
#officerInfoTopRight{
  position: fixed !important;
  top: 0 !important;
  left: 360px !important;
  right: 0 !important;
  height: 54px !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #dbeafe !important;
  border-radius: 0 !important;
  padding: 8px 28px !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.08) !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

#officerInfoTopRight div{
  margin: 0 !important;
}

main, .main, #app{
  padding-top: 65px !important;
}

/* ===== GLOBAL HEADER ===== */

#officerInfoTopRight{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dbeafe !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

#officerInfoTopRight .header-left{
    display:flex;
    align-items:center;
    gap:15px;
}

#officerInfoTopRight .header-left img{
    height:50px;
    width:50px;
}

#officerInfoTopRight .header-title{
    display:flex;
    flex-direction:column;
}

#officerInfoTopRight .header-title .main{
    font-size:20px;
    font-weight:800;
    color:#0f172a;
}

#officerInfoTopRight .header-title .sub{
    font-size:12px;
    color:#64748b;
}

#officerInfoTopRight .header-right{
    text-align:right;
}

#officerInfoTopRight .header-right .name{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}

#officerInfoTopRight .header-right .designation{
    font-size:12px;
    color:#64748b;
}

main,
.main-content,
.dashboard-container{
    padding-top:85px !important;
}



/* ===== FINAL FULL WIDTH FIXED TOP BAR ===== */
#officerInfoTopRight{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:74px !important;
  z-index:99999 !important;
  background:#ffffff !important;
  border-bottom:1px solid #dbeafe !important;
  box-shadow:0 4px 16px rgba(15,23,42,.10) !important;
  border-radius:0 !important;
  padding:0 28px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  font-family:inherit !important;
}

#officerInfoTopRight .portal-header-left{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

#officerInfoTopRight .portal-header-left img{
  width:52px !important;
  height:52px !important;
  object-fit:contain !important;
}

#officerInfoTopRight .portal-title-main{
  font-size:22px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  line-height:1.1 !important;
}

#officerInfoTopRight .portal-title-sub{
  font-size:13px !important;
  color:#475569 !important;
  font-weight:600 !important;
  margin-top:4px !important;
}

#officerInfoTopRight .portal-header-right{
  text-align:right !important;
  min-width:300px !important;
}

#officerInfoTopRight .portal-user-name{
  font-size:15px !important;
  font-weight:900 !important;
  color:#111827 !important;
}

#officerInfoTopRight .portal-user-desig{
  font-size:12px !important;
  color:#64748b !important;
  margin-top:3px !important;
}

#officerInfoTopRight .portal-user-cug{
  font-size:12px !important;
  color:#1d4ed8 !important;
  margin-top:3px !important;
  font-weight:700 !important;
}

body{
  padding-top:74px !important;
}

aside{
  top:74px !important;
  height:calc(100vh - 74px) !important;
}

main,
.main,
.content,
.main-content,
#main,
#app{
  padding-top:20px !important;
}

/* ===== MENU HOVER ONLY FIX ===== */
.sidebar a.active,
.sidebar button.active,
.sidebar div.active,
.sidebar li.active {
  background: transparent !important;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar div:hover,
.sidebar li:hover,
.sidebar .smart-or-menu.active {
  background: #245bd4 !important;
  border-radius: 12px !important;
}

/* ===== FORCE SIDEBAR HOVER ONLY FINAL FIX ===== */
.force-no-active-menu {
  background: transparent !important;
  box-shadow: none !important;
}

.force-menu-hover:hover,
.force-menu-current {
  background: #245bd4 !important;
  border-radius: 12px !important;
}


/* ===== CLEAN SIDEBAR HOVER ONLY FINAL ===== */
.sidebar .active:not(.menu-current-clean),
.sidebar .selected:not(.menu-current-clean),
.sidebar .current:not(.menu-current-clean),
.force-menu-current:not(.menu-current-clean),
.force-no-active-menu {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar div:hover,
.sidebar li:hover,
.menu-current-clean {
  background: #245bd4 !important;
  border-radius: 12px !important;
}


/* ===== SMART OR NO BLINK STABLE OVERLAY FINAL ===== */
html.smart-or-open,
body.smart-or-open {
  overflow: hidden !important;
}

.smart-or-overlay-stable {
  position: fixed !important;
  left: 382px !important;
  top: 96px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100vw - 382px) !important;
  height: calc(100vh - 96px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f3f7fc !important;
  z-index: 2147483000 !important;
  padding: 32px 44px !important;
  box-sizing: border-box !important;
  border-left: 1px solid #dbe7f5 !important;
  opacity: 1 !important;
}

.smart-or-overlay-stable .smart-or-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.smart-or-overlay-stable .smart-table-box {
  overflow-x: auto !important;
}

.smart-or-overlay-stable #smartTable thead,
.smart-or-overlay-stable #smartTable th {
  position: static !important;
  top: auto !important;
}

/* ===== LANDING LOGIN PAGE REDESIGN ===== */
.portal-login-box-hidden {
  display: none !important;
}

.portal-login-box-visible {
  display: block !important;
}

#landingLoginPage {
  min-height: 100vh;
  background: linear-gradient(135deg, #071f3a 0%, #103c63 45%, #eef5fb 45%, #f6f9fd 100%);
  color: #0b1f38;
  font-family: inherit;
}

.landing-header {
  height: 88px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 46px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.landing-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.landing-brand h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}

.landing-brand p {
  margin: 4px 0 0;
  color: #5b6c82;
  font-weight: 700;
}

.landing-login-btn,
.landing-actions button {
  background: #123f68;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(18,63,104,0.25);
}

.landing-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  padding: 70px 70px 40px;
  align-items: center;
}

.landing-badge {
  display: inline-block;
  background: #ffd34d;
  color: #08233e;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 900;
  margin-bottom: 18px;
}

.landing-hero-text h2 {
  color: #fff;
  font-size: 54px;
  line-height: 1.05;
  margin: 0 0 20px;
  max-width: 760px;
}

.landing-hero-text p {
  color: #e8f1ff;
  font-size: 20px;
  line-height: 1.6;
  max-width: 760px;
}

.landing-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.landing-actions a {
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.55);
  padding: 12px 24px;
  border-radius: 12px;
}

.landing-panel {
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.16);
}

.landing-panel h3,
.landing-about h3 {
  font-size: 26px;
  margin: 0 0 18px;
  color: #08233e;
}

.landing-feature {
  background: #f1f6fd;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 800;
  border-left: 5px solid #123f68;
}

.landing-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 30px 70px 50px;
}

.landing-about > div {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.landing-about p {
  color: #42556c;
  line-height: 1.7;
  font-size: 17px;
}

.landing-footer {
  text-align: center;
  padding: 20px;
  background: #08233e;
  color: #fff;
  font-weight: 800;
}

@media(max-width: 900px){
  .landing-hero,
  .landing-about {
    grid-template-columns: 1fr;
    padding: 35px 22px;
  }

  .landing-hero-text h2 {
    font-size: 36px;
  }

  .landing-header {
    padding: 0 18px;
  }

  .landing-brand h1 {
    font-size: 20px;
  }
}

/* ===== LANDING FIRST SCREEN FIX ===== */
body.landing-mode > *:not(#landingLoginPage) {
  display: none !important;
}

body.landing-mode #landingLoginPage {
  display: block !important;
}

body.landing-mode {
  margin: 0 !important;
  overflow-x: hidden !important;
}

#landingLoginPage {
  position: relative !important;
  z-index: 999999 !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* ===== Landing Page Top Space Fix ===== */

body.landing-mode,
body.landing-mode html {
    margin: 0 !important;
    padding: 0 !important;
}

body.landing-mode #landingLoginPage {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    position: relative !important;
    top: 0 !important;
}

body.landing-mode #landingLoginPage > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Existing portal container top spacing remove */
body.landing-mode main,
body.landing-mode .container,
body.landing-mode .content,
body.landing-mode .main-content,
body.landing-mode #app {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Landing header flush to top */
body.landing-mode .landing-header {
    margin-top: 0 !important;
    border-top: none !important;
}


/* ===== WHATSAPP SETTINGS PAGE ===== */
.wa-page{
  position:fixed;
  left:382px;
  top:96px;
  right:0;
  bottom:0;
  background:#f3f7fc;
  z-index:2147482500;
  overflow:auto;
  padding:32px 44px;
  box-sizing:border-box;
}
.wa-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.wa-head h1{margin:0;color:#0b1f38}
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wa-card{background:#fff;border-radius:18px;padding:22px;margin-bottom:20px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.wa-card h2{margin-top:0;color:#123f68}
.wa-card label{display:block;font-weight:800;margin:12px 0 6px}
.wa-card input,.wa-card textarea,.wa-card select{width:100%;padding:12px;border:1px solid #cbd8ea;border-radius:10px;box-sizing:border-box}
.wa-btn{background:#123f68;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:900;cursor:pointer;margin-top:12px}
.wa-btn.small{padding:8px 12px;margin:0}
.wa-btn.green{background:#15934a}
.wa-btn.danger{background:#c62828}
.wa-table{width:100%;border-collapse:collapse}
.wa-table th{background:#123f68;color:#fff;text-align:left;padding:12px}
.wa-table td{padding:10px;border-bottom:1px solid #e3ebf5;vertical-align:top}
.wa-ok{color:#15934a}.wa-fail{color:#c62828}
@media(max-width:900px){.wa-page{left:0;top:80px}.wa-grid{grid-template-columns:1fr}}

.wa-direct-menu{
  display:block !important;
  width:90% !important;
  margin:8px auto !important;
  padding:12px 14px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#123f68 !important;
  color:#fff !important;
  font-weight:800 !important;
  cursor:pointer !important;
  text-align:left !important;
}

.wa-page{
  position:fixed !important;
  left:382px !important;
  top:96px !important;
  right:0 !important;
  bottom:0 !important;
  background:#f3f7fc !important;
  z-index:2147483500 !important;
  overflow:auto !important;
  padding:32px 44px !important;
  box-sizing:border-box !important;
}

.wa-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wa-card{background:white;border-radius:18px;padding:22px;margin-bottom:20px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.wa-card label{display:block;font-weight:800;margin:12px 0 6px}
.wa-card input,.wa-card textarea,.wa-card select{width:100%;padding:12px;border:1px solid #cbd8ea;border-radius:10px;box-sizing:border-box}
.wa-btn{background:#123f68;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:900;cursor:pointer;margin-top:12px}
.wa-btn.green{background:#15934a}.wa-btn.danger{background:#c62828}.wa-btn.small{padding:8px 12px;margin:0}
.wa-table{width:100%;border-collapse:collapse}
.wa-table th{background:#123f68;color:white;text-align:left;padding:12px}
.wa-table td{padding:10px;border-bottom:1px solid #e3ebf5}

/* ===== WhatsApp Settings Stable Full Page Overlay Final ===== */
html.wa-open,
body.wa-open {
  overflow: hidden !important;
}

.wa-page-stable,
#waPage.wa-page-stable {
  position: fixed !important;
  left: 382px !important;
  top: 96px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100vw - 382px) !important;
  height: calc(100vh - 96px) !important;
  min-height: calc(100vh - 96px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f3f7fc !important;
  z-index: 2147483500 !important;
  padding: 32px 44px !important;
  box-sizing: border-box !important;
  border-left: 1px solid #dbe7f5 !important;
  opacity: 1 !important;
}

#waPage table thead,
#waPage table th,
#waPage .wa-table thead,
#waPage .wa-table th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

#waPage .wa-card {
  overflow: visible !important;
}

#waPage .wa-table {
  position: relative !important;
}

/* ===== IO MASTER MODULE ===== */
html.io-open, body.io-open { overflow:hidden !important; }

.io-menu-btn{
  display:block !important;
  width:90% !important;
  margin:8px auto !important;
  padding:12px 14px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#123f68 !important;
  color:#fff !important;
  font-weight:800 !important;
  cursor:pointer !important;
  text-align:left !important;
}

.io-page{
  position:fixed !important;
  left:382px !important;
  top:96px !important;
  right:0 !important;
  bottom:0 !important;
  background:#f3f7fc !important;
  z-index:2147483600 !important;
  overflow:auto !important;
  padding:32px 44px !important;
  box-sizing:border-box !important;
  border-left:1px solid #dbe7f5 !important;
}

.io-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.io-head h1{margin:0;color:#0b1f38}
.io-card{background:#fff;border-radius:18px;padding:22px;margin-bottom:20px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.io-card h2{margin-top:0;color:#123f68}
.io-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.io-card label{display:block;font-weight:800;margin:6px 0}
.io-card input,.io-card select{width:100%;padding:12px;border:1px solid #cbd8ea;border-radius:10px;box-sizing:border-box}
.io-btn{background:#123f68;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:900;cursor:pointer;margin:12px 6px 0 0}
.io-btn.secondary{background:#607d8b}
.io-btn.danger{background:#c62828}
.io-btn.small{padding:8px 12px;margin:0 4px}
.io-toolbar{display:flex;gap:12px;margin:12px 0}
.io-toolbar input,.io-toolbar select{padding:11px;border:1px solid #cbd8ea;border-radius:10px}
.io-toolbar input{min-width:360px}
.io-table{width:100%;border-collapse:collapse}
.io-table th{background:#123f68;color:#fff;text-align:left;padding:12px;position:static!important}
.io-table td{padding:10px;border-bottom:1px solid #e3ebf5}
@media(max-width:900px){.io-page{left:0;top:80px}.io-form-grid{grid-template-columns:1fr}.io-toolbar{flex-direction:column}}

/* ===== IO BULK IMPORT CONTROLS ===== */
.io-bulk-controls{
  background:#fff;
  border-radius:18px;
  padding:22px;
  margin-bottom:20px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.io-btn.green{
  background:#15934a !important;
}

/* ===== FMS Landing Page Visibility Fix ===== */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p,
.about-section h1,
.about-section h2,
.about-section h3,
.about-section p,
.features-section h1,
.features-section h2,
.features-section h3,
.features-section p,
.landing-page .text-white,
.landing-page .description,
.landing-page .feature-card p {
    color: #1f2937 !important;
}

/* Keep main hero title highlighted */
.hero-section .portal-title,
.hero-section .main-title {
    color: #0b3d91 !important;
}

/* Feature cards */
.feature-card {
    background: #ffffff !important;
}

.feature-card h3 {
    color: #123f68 !important;
}


/* ===== Landing Hero Text Overlap Fix ===== */
.hero-section,
.landing-hero,
.home-hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero-section::before,
.hero-section::after,
.landing-hero::before,
.landing-hero::after,
.home-hero::before,
.home-hero::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.hero-section > *,
.landing-hero > *,
.home-hero > * {
  position: relative !important;
  z-index: 2 !important;
}

.hero-section p,
.landing-hero p,
.home-hero p {
  max-width: 720px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}

.hero-section h1,
.landing-hero h1,
.home-hero h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
}

@media (min-width: 900px) {
  .hero-section p,
  .landing-hero p,
  .home-hero p {
    width: 62% !important;
  }
}

/* Smart OR Short Description full width */
.smart-detail-grid > div:has(b:first-child){
  min-width: 0;
}

.smart-detail-grid > div:has(b:first-child):has(span){
  word-break: break-word;
}

.smart-detail-grid > div:has(b:first-child):has(span) span{
  white-space: pre-wrap;
}

.smart-detail-grid > div:nth-child(13){
  grid-column: 1 / -1 !important;
  width: 100% !important;
}



/* FIR Register final table alignment fix */
td.short-desc-cell{
  max-width:260px;
  white-space:normal;
  word-break:break-word;
}

td.actions{
  min-width:95px;
  width:95px;
  white-space:normal !important;
  display:table-cell !important;
}

td.actions button{
  display:block;
  width:82px;
  margin:4px 0;
  padding:7px 8px;
  text-align:center;
}

table{
  table-layout:auto;
}

/* FIR Register final alignment */
#list table{
  table-layout:auto;
  width:100%;
}

#list td.short-desc-cell{
  max-width:260px;
  white-space:normal;
  word-break:break-word;
}

#list td.actions{
  min-width:95px;
  width:95px;
  white-space:normal !important;
}

#list td.actions button{
  display:block;
  width:82px;
  margin:4px 0;
  padding:7px 8px;
}