:root{--forest:#1f6b45;--navy:#17324d;--gold:#d6a63c;--coral:#d95d4f;--sky:#3b82c4;--green:var(--forest);--green2:var(--forest);--ink:#172033;--muted:#64748b;--line:#e2e8f0;--bg:#f6f8fb;--nav:var(--navy);--nav2:#10263b;--violet:var(--sky);--shadow:0 18px 50px rgba(23,50,77,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit}.auth-page{min-height:100vh;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at top,#fff 0,#fbfff8 42%,#f6f7ed 100%)}.auth-bg{position:absolute;inset:0;margin:auto;width:min(920px,92vw);height:min(920px,92vw);border-radius:50%;object-fit:cover;opacity:.20;filter:saturate(1.1);z-index:0}.auth-bg-ring{position:absolute;width:min(980px,96vw);height:min(980px,96vw);border-radius:50%;background:radial-gradient(circle,rgba(47,105,53,.10),rgba(34,197,94,.10) 48%,transparent 68%);z-index:0}.auth-card{position:relative;z-index:1;width:min(435px,calc(100vw - 32px));background:rgba(255,255,255,.94);border:1px solid rgba(226,232,240,.95);border-radius:30px;padding:34px 32px;box-shadow:0 25px 90px rgba(15,23,42,.14);backdrop-filter:blur(16px);text-align:center}.auth-logo{width:58px;height:58px;border-radius:20px;object-fit:cover;box-shadow:0 8px 25px rgba(47,105,53,.18)}.kicker{font-size:12px;letter-spacing:.26em;font-weight:900;color:#1f6b45}.auth-card h1{font-size:36px;line-height:1.05;margin:10px 0 6px;font-weight:1000;color:#204f2a}.auth-card p{color:#6b7280;margin:0 0 26px}.field{width:100%;border:1px solid #d9decf;border-radius:18px;background:#fffdf8;padding:16px 18px;font-size:16px;outline:none;transition:.2s}.field:focus{border-color:#6aa06a;box-shadow:0 0 0 5px rgba(47,105,53,.10);background:#eef5ff}.pass-wrap{position:relative}.pass-wrap .field{padding-right:88px}.show-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-weight:800;color:#204f2a;cursor:pointer}.btn{border:0;border-radius:18px;padding:15px 20px;font-weight:900;cursor:pointer;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:.2s}.btn-primary{background:linear-gradient(135deg,#1f6b45,#3f7d34);color:white;box-shadow:0 16px 32px rgba(47,105,53,.22)}.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn-outline{background:#fff;border:1px solid var(--line);color:#172033}.login-form{display:grid;gap:14px}.forgot{font-size:14px;font-weight:800;color:#1f6b45}.flash{margin:0 0 16px;padding:12px 14px;border-radius:14px;text-align:left;font-size:14px}.flash-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.flash-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0} .app-shell{min-height:100vh;background:linear-gradient(135deg,#f8fafc 0%,#fbfcff 55%,#f4fbf6 100%)}.sidebar{width:292px;background:linear-gradient(180deg,var(--nav),#0b1222);color:#dbeafe;position:fixed;inset:0 auto 0 0;z-index:40;padding:22px 16px;display:flex;flex-direction:column;gap:16px;box-shadow:14px 0 42px rgba(15,23,42,.16)}.brand{display:flex;align-items:center;gap:12px;padding:8px 9px 12px}.brand-logo{display:grid;place-items:center;flex:0 0 auto}.brand img{width:44px;height:44px;border-radius:15px;object-fit:cover;box-shadow:0 10px 22px rgba(0,0,0,.18)}.brand strong{display:block;color:white;font-size:15px;line-height:1.2}.brand small{display:block;color:#93a4c7;font-size:12px;margin-top:2px}.profile-card{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px;min-width:0}.avatar,.profile-avatar{width:42px;height:42px;border-radius:14px;background:#1e293b;display:grid;place-items:center;font-weight:950;color:white;flex:0 0 auto}.profile-meta{min-width:0}.profile-meta strong{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-meta small{display:block;color:#a6b5d4;margin-top:2px}.nav-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7184aa;margin:10px 10px 6px}.nav-scroll{overflow:auto;padding-right:4px}.nav-scroll::-webkit-scrollbar{width:6px}.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}.nav a{display:flex;gap:12px;align-items:center;padding:12px 13px;border-radius:14px;color:#cbd5e1;font-weight:760;font-size:14px;transition:.18s}.nav a:hover,.nav a.active{background:linear-gradient(135deg,#17324d,#3b82c4);color:#fff;box-shadow:0 10px 25px rgba(49,46,129,.24)}.nav-icon{width:22px;text-align:center;opacity:.95}.nav-bottom{padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.footer-spacer{margin-top:auto}.workspace{margin-left:292px;min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:20;min-height:92px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.9);box-shadow:0 10px 24px rgba(15,23,42,.035);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}.page-heading{min-width:0}.page-heading h1{margin:0;font-size:28px;letter-spacing:-.035em;color:#111827}.page-heading p{margin:6px 0 0;color:#64748b}.header-actions{display:flex;align-items:center;gap:14px;min-width:320px;justify-content:flex-end}.header-search{height:46px;width:min(390px,34vw);display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;background:#f8fafc;border-radius:999px;padding:0 15px;color:#64748b;transition:.18s}.header-search:focus-within{background:white;border-color:#cbd5e1;box-shadow:0 0 0 5px rgba(47,105,53,.08)}.header-search input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:#111827}.profile-menu{display:flex;align-items:center;gap:10px}.profile-chip{height:46px;display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;background:white;border-radius:999px;padding:4px 12px 4px 4px;box-shadow:0 8px 22px rgba(15,23,42,.05);min-width:0}.profile-chip .profile-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1f6b45,#3b82c4)}.profile-name{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:850;font-size:14px}.burger{display:none;width:46px;height:46px;border:1px solid #e5e7eb;background:#fff;border-radius:15px;box-shadow:0 8px 22px rgba(15,23,42,.05);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.burger span{display:block;width:20px;height:2px;background:#0f172a;border-radius:99px}.main-content{flex:1;padding:28px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{grid-column:span 12;background:white;border:1px solid #edf0f5;border-radius:24px;padding:22px;box-shadow:var(--shadow)}.card.half{grid-column:span 6}.card.third{grid-column:span 4}.card h2{margin:0 0 12px;font-size:18px}.stat{font-size:32px;font-weight:1000;color:#1f4e2a}.muted{color:#64748b}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .full{grid-column:1/-1}label span{display:block;font-weight:800;margin-bottom:7px}.input,select,textarea{width:100%;border:1px solid #dfe3ea;border-radius:14px;padding:12px 14px;background:white;font:inherit;outline:none}.input:focus,select:focus,textarea:focus{border-color:#94a3b8;box-shadow:0 0 0 5px rgba(15,23,42,.05)}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid #eef2f7;padding:12px;vertical-align:top}.badge{display:inline-flex;border-radius:999px;padding:5px 10px;background:#ecfdf5;color:#1f6b45;font-weight:800;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.danger{color:#b63e34}.upload-preview{display:flex;align-items:center;gap:16px}.upload-preview img{width:82px;height:82px;border-radius:24px;object-fit:cover;border:1px solid #e5e7eb}.mini{font-size:13px;color:#64748b}.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:35}.body-lock{overflow:hidden} @media(max-width:1180px){.header-search{width:300px}.profile-name{display:none}.app-header{padding:16px 22px}.main-content{padding:22px}.card.third{grid-column:span 6}}@media(max-width:900px){.sidebar{transform:translateX(-105%);transition:transform .25s ease;width:min(292px,86vw)}.sidebar.is-open{transform:translateX(0)}.mobile-backdrop.is-open{display:block}.workspace{margin-left:0}.app-header{min-height:auto;padding:14px 16px;align-items:center}.page-heading h1{font-size:23px}.page-heading p{display:none}.header-actions{min-width:0;margin-left:auto;gap:8px}.header-search{display:none}.burger{display:flex}.main-content{padding:18px}.card.half,.card.third{grid-column:span 12}.form-grid{grid-template-columns:1fr}.topbar{flex-direction:column}.auth-card{padding:28px 22px}.auth-card h1{font-size:30px}.table{display:block;overflow-x:auto;white-space:nowrap}.upload-preview{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.app-header{gap:10px}.page-heading h1{font-size:20px}.profile-chip{padding:4px}.profile-chip .profile-avatar{width:36px;height:36px}.main-content{padding:14px}.card{border-radius:20px;padding:18px}.grid{gap:14px}.auth-page{padding:16px}.auth-card{border-radius:24px}.brand-copy small{display:none}} /* Branding workspace upgrade: logo + favicon + login background previews */ .branding-grid label{margin-top:14px;display:block}.identity-preview{margin-bottom:18px}.favicon-preview-row{display:flex;align-items:center;gap:14px;margin:16px 0 18px;padding:14px;border:1px solid #eef2f7;border-radius:18px;background:#f8fafc}.favicon-preview-row img{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid #e5e7eb;background:#fff}.note-box{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:12px;margin-top:14px}.login-bg-preview{position:relative;min-height:360px;border-radius:26px;overflow:hidden;border:1px solid #edf0f5;background:#f8fafc;display:grid;place-items:center}.login-bg-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(1.08)}.login-bg-preview:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.46),rgba(255,255,255,.86));z-index:1}.preview-login-card{position:relative;z-index:2;width:min(320px,90%);background:rgba(255,255,255,.92);border:1px solid rgba(226,232,240,.9);border-radius:24px;padding:24px;text-align:center;box-shadow:0 20px 60px rgba(15,23,42,.14);display:grid;gap:8px;justify-items:center}.preview-login-card img{width:54px;height:54px;border-radius:18px;object-fit:cover}.preview-login-card strong{font-size:24px;color:#204f2a}.preview-login-card small{color:#64748b}@media(max-width:900px){.branding-grid .card[style]{grid-column:span 12!important}.login-bg-preview{min-height:280px}} /* V7 image auto-fit fix: uploaded branding pictures must not be cropped */ .auth-bg{object-fit:contain!important;background:transparent!important;width:min(980px,96vw)!important;height:min(980px,96vw)!important;} .auth-logo,.brand img,.upload-preview img,.favicon-preview-row img,.preview-login-card img{object-fit:contain!important;background:#fff!important;padding:2px;} .login-bg-preview>img{object-fit:contain!important;background:#fff!important;} .identity-logo-fit{object-fit:contain!important;background:#fff!important;} /* V8 violation system UI helpers */ .badge.warn{background:#fff7ed;color:#a66f00}.badge.danger-badge{background:#fef2f2;color:#b63e34}.badge.success-badge{background:#ecfdf5;color:#1f6b45}.topbar{display:flex;gap:10px;align-items:center;margin-bottom:16px}.receipt{max-width:820px;margin:auto}@media print{.sidebar,.app-header,.btn{display:none!important}.workspace{margin:0!important}.main-content{padding:0!important}.card{box-shadow:none;border:0}.receipt{max-width:100%}} /* V9: dropdown sidebar, charts, filters, mobile polish */ .nav-accordion{display:block}.nav-group{margin:4px 0 10px}.nav-group-toggle{width:100%;border:0;background:transparent;color:#94a3b8;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:space-between;padding:9px 10px;cursor:pointer}.nav-group-toggle b{font-size:13px;transition:.18s}.nav-group-items{display:none;padding:0 2px}.nav-group.open .nav-group-items{display:block}.nav-group.open .nav-group-toggle b{transform:rotate(180deg)}.filter-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-title h2{margin:0}.chart-row{display:grid;grid-template-columns:minmax(130px,1fr) 2fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #eef2f7}.chart-label strong{display:block}.chart-label span{display:block;color:#64748b;font-size:12px}.chart-track{height:13px;background:#eef2f7;border-radius:999px;overflow:hidden}.chart-track span{display:block;height:100%;background:linear-gradient(90deg,#1f6b45,#3b82c4);border-radius:999px}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.summary-list{display:grid;gap:9px}.summary-list .item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #eef2f7;background:#f8fafc;border-radius:16px}.mobile-card-list{display:none}.receipt-box{border:1px dashed #cbd5e1;border-radius:20px;padding:18px;background:#fff}.total-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.total-panel .total-card{background:#f8fafc;border:1px solid #eef2f7;border-radius:18px;padding:14px}.total-panel strong{display:block;font-size:22px;color:#1f4e2a}.history-card{border:1px solid #eef2f7;border-radius:18px;padding:14px;background:#fff;margin-bottom:10px}.history-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.offense-pill{display:inline-flex;align-items:center;border-radius:999px;background:#eef2ff;color:#17324d;padding:5px 10px;font-weight:900;font-size:12px}.case-ready{border-left:5px solid #d95d4f}.case-ok{border-left:5px solid #1f6b45}@media(max-width:1000px){.filter-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid{grid-template-columns:1fr}.total-panel{grid-template-columns:1fr}}@media(max-width:700px){.filter-strip{grid-template-columns:1fr}.desktop-table{display:none!important}.mobile-card-list{display:grid;gap:12px}.chart-row{grid-template-columns:1fr;gap:8px}.chart-track{height:12px}.card{padding:16px}.btn{width:100%}.actions .btn{width:auto}.section-title{align-items:flex-start;flex-direction:column}.form-grid{gap:12px}.input,select,textarea{min-height:46px}.nav a{padding:13px 14px}.profile-card{padding:12px}.brand{padding-left:4px}.total-panel strong{font-size:20px}} /* V11: Modern responsive UI + sidebar flyout menus */ :root{ --radius-xl:28px; --radius-lg:22px; --soft-shadow:0 20px 60px rgba(15,23,42,.08); --soft-border:#e8edf5; } body{font-size:15px;line-height:1.5;background:linear-gradient(180deg,#f8fafc 0%,#f4f7fb 100%);} .app-shell{min-height:100vh;} .sidebar{overflow:visible!important;background:linear-gradient(180deg,#071126 0%,#0f1b34 48%,#08111f 100%);border-right:1px solid rgba(255,255,255,.06);} .brand{align-items:center;gap:13px;} .brand-logo img,.brand img{width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 32px rgba(0,0,0,.20);} .brand-copy strong{font-size:18px;letter-spacing:-.02em}.brand-copy small{font-size:13px;line-height:1.25;color:#aebbd0}.profile-card{border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .workspace{background:linear-gradient(180deg,#ffffff 0,#f7f9fc 220px,#f4f7fb 100%)} .app-header{position:sticky;top:0;z-index:25;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid #edf1f7;box-shadow:0 8px 30px rgba(15,23,42,.035)} .page-heading h1{letter-spacing:-.045em}.page-heading p{max-width:760px;color:#667085}.header-search{height:48px;border-radius:999px;background:#f8fafc;border:1px solid #e6ebf2}.profile-chip{height:48px;border-radius:999px;border:1px solid #e6ebf2;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.05)}.profile-avatar,.avatar{background:linear-gradient(135deg,#0f766e,#4f46e5);box-shadow:0 10px 24px rgba(79,70,229,.18)} .main-content{max-width:1500px;margin:0 auto;width:100%;}.grid{align-items:start}.card{border:1px solid var(--soft-border);box-shadow:var(--soft-shadow);border-radius:var(--radius-xl);background:rgba(255,255,255,.96)}.card:hover{box-shadow:0 24px 70px rgba(15,23,42,.10)} .input,select,textarea,.field{border-radius:16px;border-color:#dfe6ef;min-height:48px}.input:focus,select:focus,textarea:focus,.field:focus{border-color:#1f6b45;box-shadow:0 0 0 5px rgba(47,105,53,.10)}.btn{border-radius:16px;min-height:46px}.btn-primary{background:linear-gradient(135deg,#276232,#0f766e)} .table{font-size:14px}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;background:#f8fafc}.table th:first-child{border-top-left-radius:14px}.table th:last-child{border-top-right-radius:14px}.table td{color:#253045}.badge{white-space:nowrap}.filter-strip{background:#fff;border:1px solid #edf1f7;border-radius:24px;padding:14px;box-shadow:0 12px 35px rgba(15,23,42,.04)} /* Desktop flyout sidebar groups: items pop to the side instead of pushing other menus down */ @media(min-width:901px){ .nav-scroll{overflow:visible!important;padding-right:0;} .nav-accordion{position:relative;display:grid;gap:8px;} .nav-group{position:relative;margin:0;} .nav-group-toggle{height:48px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);color:#b8c3d6;text-transform:none;letter-spacing:0;font-size:14px;padding:0 14px;justify-content:space-between;} .nav-group-toggle:hover,.nav-group.flyout-open>.nav-group-toggle,.nav-group.open>.nav-group-toggle{background:linear-gradient(135deg,rgba(67,56,202,.95),rgba(47,105,53,.88));color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.22);} .nav-group-toggle b{transform:rotate(-90deg);font-size:14px;} .nav-group.open .nav-group-toggle b,.nav-group.flyout-open .nav-group-toggle b{transform:rotate(-90deg) translateY(2px)} .nav-group-items{display:none!important;position:absolute;left:calc(100% + 14px);top:0;min-width:280px;max-width:340px;padding:12px;background:rgba(8,17,34,.98);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.35);z-index:90;} .nav-group-items:before{content:"";position:absolute;left:-18px;top:0;width:18px;height:100%;} .nav-group:hover .nav-group-items,.nav-group.flyout-open .nav-group-items{display:grid!important;gap:6px;} .nav-group-items a{padding:12px 13px;border-radius:14px;font-size:14px;background:transparent;box-shadow:none!important;} .nav-group-items a:hover,.nav-group-items a.active{background:linear-gradient(135deg,#17324d,#3b82c4);color:#fff;} .nav-group.open .nav-group-items{display:none!important;} .nav-group.open:hover .nav-group-items,.nav-group.open.flyout-open .nav-group-items{display:grid!important;} } /* Tablet and phone: keep clean collapsible drawer, never overflow the screen */ @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ body{font-size:14px}.sidebar{overflow:auto!important}.nav-group-toggle{text-transform:none;letter-spacing:0;font-size:14px;background:rgba(255,255,255,.05);border-radius:15px}.nav-group-items{position:static!important;display:none!important;padding:4px 0 8px 8px}.nav-group.open .nav-group-items,.nav-group.flyout-open .nav-group-items{display:grid!important;gap:6px}.app-header{position:sticky}.main-content{max-width:100%;}.card{border-radius:22px}.table{font-size:13px}.header-actions{gap:8px}.burger{order:2}.profile-chip{order:1}.profile-menu{gap:8px;display:flex;align-items:center}.brand-logo img,.brand img{width:52px;height:52px}.auth-bg{width:94vw!important;height:94vw!important}.auth-card{width:min(430px,calc(100vw - 26px));} } @media(max-width:680px){ .page-heading h1{font-size:22px}.app-header{padding:12px 14px}.main-content{padding:14px}.card{padding:16px}.form-grid{grid-template-columns:1fr!important}.grid{grid-template-columns:1fr!important}.card.half,.card.third,.card[style]{grid-column:1/-1!important}.btn{width:100%}.actions{display:grid;grid-template-columns:1fr 1fr}.actions .btn{width:100%}.profile-chip .profile-name{display:none}.auth-card h1{font-size:28px}.auth-logo{width:54px;height:54px}.login-bg-preview{min-height:250px}.filter-strip{padding:12px;border-radius:20px} } @media(max-width:420px){ .main-content{padding:10px}.card{padding:14px;border-radius:18px}.page-heading h1{font-size:20px}.profile-chip{height:42px}.profile-avatar{width:34px;height:34px}.burger{width:42px;height:42px}.actions{grid-template-columns:1fr}.auth-card{padding:24px 18px}.field{font-size:15px}.table th,.table td{padding:10px 8px} } /* V12: polished responsive layout and cleaner Developer setup pages */ .sidebar{height:100dvh!important;box-sizing:border-box;gap:12px!important;padding-bottom:14px!important;} .brand{padding-top:4px!important;padding-bottom:6px!important;} .profile-card{padding:12px!important;} .nav-bottom{margin-top:auto!important;position:sticky;bottom:0;z-index:8;background:linear-gradient(180deg,rgba(8,17,34,.88),rgba(8,17,34,1));border-top:1px solid rgba(255,255,255,.10)!important;padding:10px 0 0!important;flex-shrink:0;} .nav-bottom a{min-height:44px;align-items:center;white-space:nowrap;} .footer-spacer{display:none!important;} @media(min-width:901px){ .nav-scroll{flex:1 1 auto;min-height:0;} .nav-group-toggle{height:44px!important;} .nav-accordion{gap:7px!important;} .nav-group-items{max-height:min(72vh,620px);overflow-y:auto;} .nav-group-items::-webkit-scrollbar{width:6px}.nav-group-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px} } .setup-page{display:grid;gap:18px;} .compact-card{padding:18px 22px!important;} .setup-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;} .setup-toolbar h2,.setup-toolbar p{margin:0}.setup-toolbar p{margin-top:4px} .setup-layout{display:grid;grid-template-columns:minmax(360px,560px) minmax(0,1fr);gap:20px;align-items:start;} .setup-form-card,.data-panel-card{grid-column:auto!important;min-width:0;} .form-section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;} .form-section-title h2{margin:0 0 3px}.form-section-title p{margin:0;color:#64748b;font-size:14px;} .step-dot{width:34px;height:34px;border-radius:14px;display:inline-grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#1f6b45,#3b82c4);color:#fff;font-weight:950;box-shadow:0 12px 28px rgba(47,105,53,.20);} .clean-form{gap:14px 16px;} .clean-form label span{font-size:13px;letter-spacing:.01em;color:#0f172a;} .field-help{display:block;margin-top:6px;color:#64748b;font-size:12px;} .form-divider{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #e8edf5;background:#f8fafc;border-radius:18px;color:#0f172a;} .form-divider em{font-style:normal;color:#64748b;font-size:13px;margin-left:auto;} .info-box{border:1px solid #e8edf5;background:linear-gradient(180deg,#f8fafc,#fff);border-radius:16px;min-height:48px;padding:12px 14px;color:#475569;font-size:13px;} .sticky-form-actions{display:flex;gap:10px;position:sticky;bottom:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid #eef2f7;border-radius:20px;padding:12px;box-shadow:0 16px 45px rgba(15,23,42,.10);z-index:6;} .sticky-form-actions .btn{flex:1;} .compact-filter{grid-template-columns:2fr 1.2fr 1fr auto!important;box-shadow:none!important;background:#f8fafc!important;margin-bottom:16px;} .table-wrap{width:100%;overflow:auto;border:1px solid #edf1f7;border-radius:20px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);} .table-wrap .table{min-width:980px;} .modern-table th{position:sticky;top:0;z-index:2;background:#f8fafc!important;} .modern-table td,.modern-table th{padding:14px 16px!important;} .btn-sm{min-height:38px!important;padding:9px 14px!important;font-size:13px!important;border-radius:13px!important;} .data-panel-card .section-title{align-items:flex-start;} .data-panel-card{overflow:hidden;} @media(max-width:1280px){.setup-layout{grid-template-columns:1fr;}.setup-form-card,.data-panel-card{width:100%;}.compact-filter{grid-template-columns:1fr 1fr!important;}} @media(max-width:900px){.sidebar{height:100dvh!important;}.nav-bottom{position:static!important;background:transparent;}.setup-toolbar{flex-direction:column;align-items:stretch}.setup-toolbar .actions{display:grid;grid-template-columns:1fr 1fr}.sticky-form-actions{position:static;}.compact-filter{grid-template-columns:1fr!important}.form-divider{align-items:flex-start;flex-direction:column}.form-divider em{margin-left:0}.table-wrap{display:none}.data-panel-card{overflow:visible}.mobile-card-list{display:grid!important;}.nav-scroll{flex:1;min-height:0;overflow-y:auto!important;}} @media(max-width:680px){.setup-layout{gap:14px}.compact-card{padding:16px!important}.setup-form-card,.data-panel-card{padding:16px!important}.sticky-form-actions{display:grid;grid-template-columns:1fr}.setup-toolbar .actions{grid-template-columns:1fr}.info-box{font-size:12px}.step-dot{width:30px;height:30px;border-radius:12px}.form-section-title{gap:10px}.clean-form label span{font-size:12px}.input,select,textarea{font-size:15px;}} /* V13: stable flyout menus + operational role workspace polish */ @media(min-width:901px){ .sidebar{width:292px!important;} .nav-group{isolation:isolate;} .nav-group-items{left:calc(100% - 2px)!important;top:-6px!important;min-width:310px!important;padding:14px!important;pointer-events:auto!important;} .nav-group-items:before{content:"";position:absolute;left:-34px;top:0;width:38px;height:100%;} .nav-group:hover,.nav-group.flyout-open{z-index:120;} .nav-group:hover .nav-group-items,.nav-group.flyout-open .nav-group-items{display:grid!important;gap:7px;} .nav-group-toggle{user-select:none;} } .workspace-panel{display:grid;gap:18px;} .role-hero{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(260px,.85fr);gap:18px;align-items:stretch;} .role-hero .hero-card{background:linear-gradient(135deg,#0f172a,#1e3a8a 50%,#1f6b45);color:#fff;border:0;overflow:hidden;position:relative;} .role-hero .hero-card:after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.10)} .hero-card h2,.hero-card h3{color:#fff}.hero-card p{color:#dbeafe;max-width:780px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.hero-actions .btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)} .profile-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.profile-summary .summary-tile{border:1px solid #edf1f7;border-radius:20px;background:#fff;padding:16px;box-shadow:0 14px 36px rgba(15,23,42,.05)}.summary-tile small{display:block;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.summary-tile strong{display:block;font-size:22px;margin-top:5px;color:#0f172a}.summary-tile.warn strong{color:#a66f00}.summary-tile.danger strong{color:#b63e34}.summary-tile.success strong{color:#1f6b45} .category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.category-card{border:1px solid #edf1f7;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fafc);padding:16px}.category-card h3{margin:0 0 8px;font-size:16px}.category-card .numbers{display:flex;gap:10px;flex-wrap:wrap}.category-card .numbers span{display:inline-flex;gap:4px;align-items:center;border-radius:999px;background:#eef2ff;color:#17324d;padding:5px 9px;font-size:12px;font-weight:900}.category-card .numbers span.warn{background:#fff7ed;color:#a66f00}.category-card .numbers span.danger{background:#fef2f2;color:#b63e34}.category-card .numbers span.success{background:#ecfdf5;color:#1f6b45} .timeline{position:relative;display:grid;gap:14px}.timeline-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px}.timeline-dot{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,#1f6b45,#3b82c4);color:#fff;display:grid;place-items:center;font-weight:950;box-shadow:0 12px 28px rgba(67,56,202,.18)}.timeline-card{border:1px solid #edf1f7;background:#fff;border-radius:20px;padding:15px;box-shadow:0 12px 32px rgba(15,23,42,.045)}.timeline-card h3{margin:0 0 6px;font-size:16px}.timeline-meta{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.timeline-note{font-size:13px;color:#64748b} .billing-layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:18px;align-items:start}.billing-panel{position:sticky;top:114px}.ticket-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid #edf1f7;border-radius:18px;padding:14px;background:#fff;margin-bottom:10px}.ticket-row:hover{border-color:#cbd5e1;box-shadow:0 12px 28px rgba(15,23,42,.055)}.ticket-main strong{display:block}.ticket-main small{display:block;color:#64748b}.amount-large{font-size:28px;font-weight:1000;color:#1f6b45}.payment-box{background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #edf1f7;border-radius:22px;padding:16px}.manager-grid{display:grid;grid-template-columns:minmax(290px,430px) minmax(0,1fr);gap:18px;align-items:start}.quick-list{display:grid;gap:10px}.quick-list a,.quick-list .quick-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #edf1f7;border-radius:18px;background:#fff;padding:14px;color:#0f172a}.quick-list a:hover{border-color:#cbd5e1;box-shadow:0 10px 26px rgba(15,23,42,.06)}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.mini-table{width:100%;border-collapse:collapse}.mini-table td,.mini-table th{padding:10px;border-bottom:1px solid #eef2f7;text-align:left}.mini-table th{color:#64748b;text-transform:uppercase;font-size:12px;letter-spacing:.06em}.role-note{border:1px solid #bbf7d0;background:#f0fdf4;color:#14532d;border-radius:18px;padding:14px;font-weight:750} @media(max-width:1180px){.role-hero,.billing-layout,.manager-grid{grid-template-columns:1fr}.billing-panel{position:static}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-grid{grid-template-columns:1fr}} @media(max-width:700px){.category-grid,.profile-summary{grid-template-columns:1fr}.timeline-item{grid-template-columns:32px minmax(0,1fr);gap:9px}.timeline-dot{width:32px;height:32px;border-radius:12px;font-size:12px}.ticket-row{grid-template-columns:auto minmax(0,1fr)}.ticket-row .ticket-amount{grid-column:1/-1}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.quick-list a,.quick-list .quick-item{align-items:flex-start;flex-direction:column}.amount-large{font-size:24px}} /* V14: compact role menus, cleaner header, stable responsive role workspaces */ @media(min-width:901px){ .sidebar{width:252px!important;padding:18px 12px!important;gap:10px!important;} .workspace{margin-left:252px!important;} .brand{gap:10px!important;padding:4px 6px 8px!important;} .brand-logo img,.brand img{width:48px!important;height:48px!important;border-radius:15px!important;object-fit:contain!important;background:rgba(255,255,255,.92);} .brand-copy strong{font-size:16px!important}.brand-copy small{font-size:11px!important;line-height:1.25!important;} .profile-card{padding:10px!important;border-radius:18px!important;gap:10px!important;} .avatar,.profile-avatar{width:38px!important;height:38px!important;border-radius:13px!important;} .profile-meta strong{font-size:13px!important}.profile-meta small{font-size:12px!important;} .nav a{padding:10px 11px!important;border-radius:13px!important;font-size:13px!important;gap:10px!important;} .nav-icon{width:19px!important;} .nav-section-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7f92b9;font-weight:950;margin:8px 8px 10px;} .role-nav{display:grid!important;gap:5px!important;overflow:auto!important;padding-right:2px;} .role-nav a{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);} .role-nav a:hover,.role-nav a.active{background:linear-gradient(135deg,#17324d,#3b82c4 55%,#1f6b45)!important;color:#fff!important;} .developer-nav{gap:6px!important;} .nav-group-toggle{height:42px!important;border-radius:14px!important;font-size:13px!important;padding:0 12px!important;} .nav-group-items{left:calc(100% + 8px)!important;min-width:265px!important;border-radius:18px!important;padding:10px!important;} .nav-group-items:before{left:-12px!important;width:14px!important;} .nav-group-items a{font-size:13px!important;padding:10px 11px!important;} .nav-bottom{padding-top:8px!important;} .nav-bottom a{font-size:13px!important;min-height:40px!important;} } .page-heading p{display:none!important;} .app-header{min-height:78px!important;padding-top:14px!important;padding-bottom:14px!important;} .page-heading h1{font-size:clamp(22px,2.3vw,30px)!important;} .header-search{height:44px!important;max-width:390px;} .profile-chip{height:44px!important;} .workspace-panel{display:flex!important;flex-direction:column!important;gap:18px!important;width:100%;min-width:0;} .role-hero{width:100%;min-width:0;} .role-hero .card,.workspace-panel>.card,.billing-layout>*{min-width:0;} .profile-summary{display:grid!important;grid-template-columns:repeat(4,minmax(160px,1fr))!important;gap:12px!important;width:100%;align-items:stretch;} .profile-summary .summary-tile{min-width:0!important;overflow:hidden!important;} .summary-tile small{font-size:11px!important;line-height:1.2!important;} .summary-tile strong{font-size:clamp(20px,2.2vw,30px)!important;word-break:break-word;} .billing-layout{display:grid!important;grid-template-columns:minmax(260px,340px) minmax(0,1fr)!important;gap:18px!important;align-items:start!important;} .billing-panel{position:static!important;top:auto!important;z-index:auto!important;} .payment-box{position:relative;z-index:1;} .ticket-row{grid-template-columns:24px minmax(0,1fr) auto!important;} .ticket-main{min-width:0;}.ticket-main strong,.ticket-main small{word-break:break-word;} .ticket-amount{text-align:right;white-space:nowrap;} .report-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;} .chart-row{border-radius:16px;padding:12px!important;border:1px solid #eef2f7!important;background:#fff;margin-bottom:8px;} .chart-track{height:14px!important;} /* Prevent wide tables/forms from forcing horizontal page scroll. */ .card{min-width:0;overflow:visible;} .table-wrap{max-width:100%;} .table{max-width:100%;} .main-content{overflow:hidden;} /* Cleaner role pages: dashboards should feel deploy-ready, not crowded. */ .role-note{font-size:14px;line-height:1.55;} .hero-card p{font-size:14px!important;} .hero-actions .btn{min-height:42px!important;padding:11px 16px!important;} @media(max-width:1180px){ .billing-layout,.role-hero,.report-grid{grid-template-columns:1fr!important;} .profile-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .ticket-amount{text-align:left;white-space:normal;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{width:min(260px,86vw)!important;padding:16px 12px!important;} .workspace{margin-left:0!important;} .nav-section-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7f92b9;font-weight:950;margin:8px 8px 10px;} .role-nav{display:grid!important;gap:6px!important;} .role-nav a{padding:12px!important;border-radius:14px!important;background:rgba(255,255,255,.04);} .app-header{min-height:64px!important;} .page-heading h1{font-size:20px!important;} .profile-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .ticket-row{grid-template-columns:24px minmax(0,1fr)!important;} .ticket-amount{grid-column:2!important;} } @media(max-width:620px){ .profile-summary{grid-template-columns:1fr!important;} .role-hero .hero-card{padding:18px!important;} .billing-layout{gap:12px!important;} .ticket-row{grid-template-columns:1fr!important;} .ticket-row input[type="checkbox"]{width:22px;height:22px;} .ticket-amount{grid-column:1!important;text-align:left;} .report-grid{grid-template-columns:1fr!important;} .summary-tile strong{font-size:24px!important;} } /* V15 Mayor/OMM main dashboard charts */ .executive-dashboard{display:grid;gap:18px;} .dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;} .dash-kpi{background:#fff;border:1px solid #e9eef6;border-radius:22px;padding:18px;box-shadow:0 16px 36px rgba(15,23,42,.055);min-width:0;position:relative;overflow:hidden;} .dash-kpi:after{content:"";position:absolute;right:-18px;top:-26px;width:84px;height:84px;border-radius:999px;background:linear-gradient(135deg,rgba(67,56,202,.10),rgba(22,101,52,.10));} .dash-kpi span{display:block;color:#64748b;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;} .dash-kpi strong{display:block;margin-top:8px;font-size:clamp(24px,2.8vw,38px);font-weight:1000;color:#0f172a;line-height:1;} .dash-kpi small{display:block;margin-top:8px;color:#64748b;font-weight:650;} .dash-kpi.success strong{color:#1f6b45}.dash-kpi.warn strong{color:#a66f00}.dash-kpi.danger strong{color:#b63e34} .analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;} .main-analytics{grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);} .chart-card{background:#fff;border:1px solid #e9eef6;border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(15,23,42,.055);min-width:0;overflow:hidden;} .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;} .card-head h2{margin:0;color:#0f172a;font-size:clamp(18px,1.7vw,24px);} .card-head p{margin:4px 0 0;color:#64748b;font-size:13px;} .mini-link{border:1px solid #e2e8f0;background:#f8fafc;color:#0f172a;text-decoration:none;border-radius:999px;padding:8px 12px;font-weight:850;white-space:nowrap;font-size:13px;} .vertical-chart{min-height:250px;display:flex;align-items:flex-end;gap:12px;border:1px solid #eef2f7;border-radius:20px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;overflow-x:auto;} .vbar-item{display:grid;grid-template-rows:auto 1fr auto;align-items:end;justify-items:center;min-width:70px;height:225px;gap:8px;} .vbar-value{font-weight:1000;color:#1f6b45;font-size:14px;} .vbar-track{height:160px;width:34px;background:#e9eef6;border-radius:999px;display:flex;align-items:flex-end;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);} .vbar-track span{display:block;width:100%;border-radius:999px;background:linear-gradient(180deg,#3b82c4,#1f6b45);min-height:7px;} .vbar-item small{font-size:12px;color:#475569;font-weight:850;white-space:nowrap;} .donut-wrap{display:grid;gap:16px;justify-items:center;padding:8px 0 4px;} .donut-chart{width:205px;height:205px;border-radius:999px;background:conic-gradient(#1f6b45 0 var(--paid),#d6a63c var(--paid) calc(var(--paid) + var(--unpaid)),#3b82c4 calc(var(--paid) + var(--unpaid)) var(--overdue-start),#d95d4f var(--overdue-start) 100%);display:grid;place-items:center;position:relative;box-shadow:0 18px 42px rgba(15,23,42,.10);} .donut-chart:after{content:"";position:absolute;inset:28px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #eef2f7;} .donut-chart b,.donut-chart span{position:relative;z-index:1;text-align:center;} .donut-chart b{font-size:36px;font-weight:1000;color:#0f172a;line-height:1;}.donut-chart span{font-size:12px;color:#64748b;margin-top:34px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;} .donut-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;} .donut-legend span{display:flex;align-items:center;gap:8px;font-weight:800;color:#334155;font-size:13px;}.lg{width:10px;height:10px;border-radius:999px;display:inline-block}.lg.paid{background:#1f6b45}.lg.unpaid{background:#d6a63c}.lg.cases{background:#3b82c4}.lg.overdue{background:#d95d4f} .modern-bars{display:grid;gap:12px;}.modern-bar{border:1px solid #eef2f7;border-radius:18px;background:#fbfdff;padding:13px 14px;}.bar-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px;}.bar-meta strong{font-size:14px;color:#0f172a;}.bar-meta span{font-size:13px;color:#1f6b45;font-weight:950;white-space:nowrap;}.bar-line{height:12px;border-radius:999px;background:#e9eef6;overflow:hidden}.bar-line span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6b45,#1f6b45);}.bar-line.purple span{background:linear-gradient(90deg,#3b82c4,#3b82c4);}.compact-bars .modern-bar{padding:11px 12px;} .category-pill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.category-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #eef2f7;border-radius:20px;background:#fbfdff;padding:14px;}.category-pill strong{display:block;color:#0f172a}.category-pill small{display:block;color:#64748b;margin-top:4px}.ring-mini{width:58px;height:58px;flex:0 0 auto;border-radius:999px;background:conic-gradient(#1f6b45 0 var(--p),#e9eef6 var(--p) 100%);display:grid;place-items:center;position:relative;}.ring-mini:after{content:"";position:absolute;inset:8px;border-radius:999px;background:#fff;}.ring-mini span{position:relative;z-index:1;font-weight:1000;color:#1f6b45;font-size:13px;} .timeline-mini{display:grid;gap:10px;}.timeline-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #eef2f7;border-radius:16px;background:#fbfdff;padding:11px 12px;}.timeline-row .dot{width:10px;height:10px;border-radius:999px;background:#3b82c4;box-shadow:0 0 0 4px #dbeafe}.timeline-row strong{display:block;color:#0f172a;font-size:14px}.timeline-row span{display:block;color:#64748b;font-size:12px}.status-chip{border-radius:999px;padding:6px 9px;background:#eef2ff;color:#17324d;font-size:11px;text-transform:uppercase;white-space:nowrap}.status-chip.paid{background:#dcfce7;color:#1f6b45}.status-chip.unpaid,.status-chip.partial{background:#fff7ed;color:#a66f00} @media(max-width:1180px){.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.main-analytics,.analytics-grid{grid-template-columns:1fr;}.vertical-chart{min-height:220px}.vbar-item{height:200px}} @media(max-width:700px){.dashboard-kpis,.category-pill-grid{grid-template-columns:1fr;}.chart-card{padding:16px;border-radius:20px}.card-head{flex-direction:column}.mini-link{width:100%;text-align:center}.donut-chart{width:180px;height:180px}.vertical-chart{padding:14px}.vbar-item{min-width:58px}.timeline-row{grid-template-columns:auto 1fr}.timeline-row .status-chip{grid-column:2/3;justify-self:start}.dash-kpi{padding:16px}.donut-legend{grid-template-columns:1fr}} /* V16: Treasurer Add Violation category-first selector */ .add-violation-page .full-card{grid-column:1/-1;} .compact-select-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;} .form-section-title{font-size:13px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#475569;border-top:1px solid #edf1f7;padding-top:18px;margin-top:4px;} .violation-picker{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #edf1f7;border-radius:24px;padding:16px;} .violation-picker .wide-select{grid-column:1/-1;} .violation-picker select,.violation-picker input{min-height:54px;} .selected-violation-card{display:none;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:22px;padding:15px;color:#14532d;} .selected-violation-card:not(:empty){display:block;} .violation-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:10px;} .violation-detail-grid div{background:rgba(255,255,255,.72);border:1px solid #d1fae5;border-radius:16px;padding:12px;min-width:0;} .violation-detail-grid span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:900;margin-bottom:4px;} .violation-detail-grid strong{display:block;font-size:14px;color:#0f172a;line-height:1.35;word-break:break-word;} .guide-panel .item{align-items:flex-start;} .action-row{display:flex;justify-content:flex-start;gap:12px;} @media(max-width:1100px){.violation-picker{grid-template-columns:repeat(2,minmax(0,1fr));}.violation-picker label:nth-child(3){grid-column:1/-1;}.violation-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:700px){.compact-select-row{grid-template-columns:1fr;}.violation-picker{grid-template-columns:1fr;padding:12px;border-radius:18px;}.violation-detail-grid{grid-template-columns:1fr;}.action-row .btn{width:100%;}} /* V18: role-based responsive dashboard charts with hover tooltips */ .role-dashboard{display:grid;gap:18px;} .compact-kpis{grid-template-columns:repeat(4,minmax(0,1fr));} .role-action-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid #e8eef7;border-radius:24px;padding:18px 20px;box-shadow:0 18px 45px rgba(15,23,42,.055);} .role-action-card h2{margin:0 0 6px;color:#0f172a;font-size:clamp(18px,1.6vw,24px);} .role-action-card p{margin:0;color:#64748b;font-weight:650;line-height:1.5;} .quick-search-line{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:10px;align-items:center;min-width:min(680px,100%);} .quick-search-line .input{height:48px;} .role-chart-grid{align-items:stretch;} .interactive-card{position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;} .interactive-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(15,23,42,.12)!important;border-color:#c7d2fe!important;z-index:5;} .interactive-card[data-tip]:hover:after,.interactive-bar[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:18px;top:calc(100% + 10px);max-width:min(340px,80vw);background:#0f172a;color:#fff;border-radius:14px;padding:10px 12px;font-size:12px;line-height:1.35;font-weight:800;box-shadow:0 18px 40px rgba(15,23,42,.28);z-index:50;white-space:normal;pointer-events:none;} .interactive-card[data-tip]:hover:before,.interactive-bar[data-tip]:hover:before{content:"";position:absolute;left:28px;top:100%;border:7px solid transparent;border-bottom-color:#0f172a;z-index:51;pointer-events:none;} .interactive-bar{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;background .18s ease;} .interactive-bar:hover{transform:translateX(5px) scale(1.01);box-shadow:0 16px 32px rgba(15,23,42,.10);border-color:#bfdbfe!important;background:#fff;z-index:6;} .hover-bars .bar-line span,.hover-chart .vbar-track span{transition:width .32s ease,height .32s ease,filter .22s ease;} .hover-bars .interactive-bar:hover .bar-line span,.hover-chart .vbar-item:hover .vbar-track span{filter:saturate(1.3) brightness(1.05);} .danger-bars .bar-line span{background:linear-gradient(90deg,#ea580c,#d95d4f)!important;} .purple-bars .bar-line span{background:linear-gradient(90deg,#3b82c4,#7c3aed)!important;} .role-timeline .timeline-row:hover .dot{box-shadow:0 0 0 7px rgba(37,99,235,.16);} .role-dashboard-pnp .role-action-card{background:linear-gradient(135deg,#f8fafc,#eff6ff);} .role-dashboard-treasurer .role-action-card{background:linear-gradient(135deg,#f8fafc,#ecfdf5);} .role-dashboard-mayor .chart-card:hover .ring-mini{transform:scale(1.08);} .ring-mini{transition:transform .22s ease;} @media(max-width:1180px){.compact-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.role-action-card{align-items:stretch;flex-direction:column;}.quick-search-line{grid-template-columns:1fr 1fr;min-width:0;width:100%;}.quick-search-line .input{grid-column:1/-1;}.hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}.hero-actions .btn{justify-content:center;}} @media(max-width:760px){.compact-kpis{grid-template-columns:1fr;}.quick-search-line,.hero-actions{grid-template-columns:1fr;}.role-action-card{padding:16px;border-radius:20px;}.interactive-card[data-tip]:hover:after,.interactive-bar[data-tip]:hover:after{left:8px;right:8px;max-width:none;}.analytics-grid.role-chart-grid{grid-template-columns:1fr!important;}.vertical-chart{scroll-snap-type:x proximity;}.vbar-item{scroll-snap-align:center;}} @media(hover:none){.interactive-card:hover,.interactive-bar:hover{transform:none;}.interactive-card[data-tip]:hover:after,.interactive-card[data-tip]:hover:before,.interactive-bar[data-tip]:hover:after,.interactive-bar[data-tip]:hover:before{display:none;}} /* V19: clickable dashboard drilldowns */ .chart-link{color:inherit;text-decoration:none;cursor:pointer;display:block;} .dash-kpi.chart-link{display:flex;flex-direction:column;gap:6px;} .chart-link:hover{text-decoration:none;} .interactive-bar.chart-link,.modern-bar.chart-link{display:block;} .vbar-item.chart-link{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:inherit;} .timeline-row.chart-link{display:grid;color:inherit;} .category-pill.chart-link{display:flex;color:inherit;} .click-badge{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:8px;border-radius:999px;padding:4px 9px;background:#eef2ff;color:#17324d;font-size:10px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;opacity:.72;transition:.18s ease;} .interactive-card:hover .click-badge,.interactive-bar:hover .click-badge{opacity:1;background:#dbeafe;color:#1d4ed8;transform:translateX(2px);} .donut-legend a{display:flex;align-items:center;gap:8px;color:#334155;text-decoration:none;font-weight:900;border-radius:12px;padding:6px 8px;transition:.18s ease;} .donut-legend a:hover{background:#f1f5f9;transform:translateY(-1px);color:#1d4ed8;} .drilldown-page{display:grid;gap:18px;} .drilldown-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #e9eef6;border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(15,23,42,.055);} .drilldown-toolbar h2{margin:0 0 5px;font-size:24px;}.drilldown-toolbar p{margin:0;color:#64748b;} .compact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;} .drilldown-filter{background:#fff;border:1px solid #e9eef6;border-radius:22px;padding:14px;margin:0;} .drilldown-kpis{margin:0;} .table-card{overflow:hidden;} .btn-sm{padding:9px 12px;border-radius:12px;font-size:12px;min-height:auto;} @media(max-width:780px){.drilldown-toolbar{flex-direction:column;align-items:stretch;border-radius:20px;padding:16px}.compact-actions{justify-content:stretch}.compact-actions .btn{width:100%}.drilldown-filter{grid-template-columns:1fr}.click-badge{display:none}.timeline-row.chart-link{grid-template-columns:auto 1fr}.category-pill.chart-link{display:flex}.vbar-item.chart-link{min-width:62px}} /* V20: all dashboard/card surfaces feel clickable and interactive. */ .clickable-surface{cursor:pointer;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;} .clickable-surface:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,23,42,.12)!important;border-color:#bcd7ff!important;} .clickable-surface:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:3px;} .table tbody tr.clickable-surface:hover{transform:none;background:#f8fbff!important;box-shadow:none!important;} .surface-open-cue{position:absolute;top:10px;right:12px;opacity:0;transform:translateY(-4px);background:#eef6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:950;letter-spacing:.02em;pointer-events:none;transition:opacity .18s ease,transform .18s ease;} .clickable-surface:hover>.surface-open-cue,.clickable-surface:focus-visible>.surface-open-cue{opacity:1;transform:translateY(0);} a.clickable-surface{text-decoration:none;color:inherit;display:block;} .timeline-row.clickable-surface,.modern-bar.clickable-surface,.category-pill.clickable-surface{display:flex;text-decoration:none;color:inherit;} .modern-bar.clickable-surface{display:block;} .history-card.clickable-surface,.quick-item.clickable-surface,.category-card.clickable-surface{overflow:hidden;} .clickable-surface .click-badge{opacity:.85;} .clickable-surface:hover .click-badge{opacity:1;transform:scale(1.03);} @media(max-width:700px){.surface-open-cue{display:none}.clickable-surface:hover{transform:none}} .timeline-card.clickable-surface{cursor:pointer;} .timeline-card.clickable-surface:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(15,23,42,.12)!important;border-color:#bfdbfe!important;} /* V31: smooth non-layout-shifting dashboard hover tooltips and chart polish */ .chart-card{overflow:visible;} .vertical-chart{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain;} .vertical-chart::-webkit-scrollbar{height:8px;} .vertical-chart::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;} .interactive-card[data-tip]:hover:after, .interactive-card[data-tip]:hover:before, .interactive-bar[data-tip]:hover:after, .interactive-bar[data-tip]:hover:before{display:none!important;content:none!important;} .interactive-card:hover{transform:translate3d(0,-4px,0);} .interactive-bar:hover{transform:translate3d(4px,0,0) scale(1.006);} .vbar-item:hover{transform:translate3d(0,-2px,0)!important;} .vbar-item{transition:transform .18s ease,filter .18s ease;} .mg-hover-tooltip{position:fixed;left:0;top:0;max-width:min(340px,calc(100vw - 28px));background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:11px 13px;font-size:12px;line-height:1.35;font-weight:850;box-shadow:0 22px 50px rgba(15,23,42,.28);z-index:99999;pointer-events:none;opacity:0;transform:translate3d(0,8px,0) scale(.98);transition:opacity .14s ease,transform .14s ease;white-space:normal;} .mg-hover-tooltip.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);} .mg-hover-tooltip:before{content:"";position:absolute;width:10px;height:10px;background:#0f172a;border-left:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08);transform:rotate(45deg);left:18px;top:-6px;} @media(max-width:900px){.mg-hover-tooltip{display:none!important}.chart-card{overflow:hidden}.vertical-chart{overflow-x:auto;overflow-y:hidden}.interactive-card:hover,.interactive-bar:hover,.vbar-item:hover{transform:none!important}} /* V31: PNP dashboard ordinance shortcut keeps layout balanced */ .dashboard-kpis.compact-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));} .ordinance-kpi strong{color:#0f766e!important;} /* V32: dashboard tooltip + card polish. Tooltips float outside the card and never push layout. */ .interactive-card,.interactive-bar,.chart-link,.dash-kpi,.vbar-item,.modern-bar,.category-pill,.timeline-row{user-select:none;-webkit-user-select:none;} .dash-kpi strong{font-size:clamp(28px,3.4vw,44px);line-height:1.05;word-break:normal;overflow-wrap:normal;letter-spacing:-.04em;} .dash-kpi span,.dash-kpi small{max-width:100%;overflow:hidden;text-overflow:ellipsis;} .treasurer-action-card .hero-actions .btn{color:#0f172a;background:rgba(255,255,255,.88);border-color:rgba(226,232,240,.85);} .treasurer-action-card .hero-actions .btn-primary{color:#fff;background:linear-gradient(135deg,#15803d,#0f766e);} .treasurer-action-card .hero-actions .btn-outline{color:#0f172a;background:#fff;} .mg-hover-tooltip{--tip-arrow-left:18px;--tip-arrow-top:-6px;--tip-arrow-rotate:45deg;max-width:min(300px,calc(100vw - 32px));will-change:transform,left,top;} .mg-hover-tooltip:before{left:var(--tip-arrow-left);top:var(--tip-arrow-top);transform:rotate(var(--tip-arrow-rotate));} .mg-hover-tooltip[data-place="right"]:before{left:-6px;top:50%;margin-top:-5px;transform:rotate(-45deg);} .mg-hover-tooltip[data-place="left"]:before{left:auto;right:-6px;top:50%;margin-top:-5px;transform:rotate(135deg);} .mg-hover-tooltip[data-place="top"]:before{top:auto;bottom:-6px;left:50%;margin-left:-5px;transform:rotate(225deg);} .mg-hover-tooltip[data-place="bottom"]:before{top:-6px;left:50%;margin-left:-5px;transform:rotate(45deg);} @media(max-width:1100px){.dash-kpi strong{font-size:clamp(24px,5vw,34px)}.dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}} /* V34: clean reports, charts, filters, print/export layout */ .report-page-v34{display:grid;gap:18px;min-width:0}.report-filter-card{background:#fff;border:1px solid #e9eef6;border-radius:24px;padding:18px;box-shadow:0 18px 45px rgba(15,23,42,.055);overflow:visible}.report-filter-grid{display:grid;grid-template-columns:160px 160px minmax(170px,1fr) minmax(145px,.8fr) minmax(240px,1.4fr) auto;gap:12px;align-items:end}.report-filter-grid label{display:grid;gap:7px;min-width:0}.report-filter-grid label span{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.10em;color:#64748b}.report-filter-grid .input{height:48px;border-radius:16px;font-size:14px;font-weight:750}.report-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}.report-actions .btn{height:48px;padding:0 16px;border-radius:16px;white-space:nowrap}.report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.report-kpi{position:relative;overflow:hidden;display:block;min-width:0;background:#fff;border:1px solid #e9eef6;border-radius:22px;padding:18px;text-decoration:none;color:inherit;box-shadow:0 16px 36px rgba(15,23,42,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.report-kpi:after{content:"";position:absolute;right:-24px;top:-28px;width:90px;height:90px;border-radius:999px;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(22,101,52,.10))}.report-kpi:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,23,42,.11);border-color:#bfdbfe}.report-kpi span{display:block;color:#64748b;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-kpi strong{display:block;margin-top:8px;font-size:clamp(24px,2.8vw,38px);font-weight:1000;line-height:1;letter-spacing:-.04em;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-kpi small{display:block;margin-top:8px;color:#64748b;font-weight:750}.report-kpi.success strong{color:#1f6b45}.report-kpi.warn strong{color:#a66f00}.report-kpi.danger strong{color:#b63e34}.report-chart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.75fr);gap:18px;align-items:stretch}.report-card{min-width:0;background:#fff;border:1px solid #e9eef6;border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(15,23,42,.055);overflow:visible}.report-card.wide{grid-column:auto}.report-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.report-card-head h2{margin:0;font-size:clamp(18px,1.7vw,24px);line-height:1.15;color:#0f172a}.report-card-head p{margin:5px 0 0;color:#64748b;font-size:13px}.report-month-chart{min-height:260px;display:flex;gap:16px;align-items:flex-end;border:1px solid #eef2f7;border-radius:20px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;overflow-x:auto;overflow-y:hidden}.report-month-chart::-webkit-scrollbar{height:8px}.report-month-chart::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.report-vbar{height:220px;min-width:72px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;align-items:end;justify-items:center;text-decoration:none;color:inherit;position:relative;transition:transform .18s ease}.report-vbar:hover{transform:translateY(-3px)}.report-vbar b{font-size:14px;color:#1f6b45;font-weight:1000}.report-vbar span{height:160px;width:36px;border-radius:999px;background:#e9eef6;display:flex;align-items:flex-end;overflow:hidden}.report-vbar span i{display:block;width:100%;border-radius:999px;background:linear-gradient(180deg,#3b82c4,#1f6b45);min-height:8px;transition:filter .18s ease}.report-vbar:hover span i{filter:saturate(1.25) brightness(1.05)}.report-vbar small{font-size:12px;color:#475569;font-weight:900;white-space:nowrap}.report-bars,.report-pay-list{display:grid;gap:11px}.report-bar,.report-pay-row{display:block;text-decoration:none;color:inherit;border:1px solid #eef2f7;border-radius:18px;background:#fbfdff;padding:13px 14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.report-bar:hover,.report-pay-row:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.09);border-color:#bfdbfe}.report-bar-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}.report-bar-meta strong{font-size:14px;color:#0f172a;min-width:0}.report-bar-meta span{font-size:12px;color:#1f6b45;font-weight:950;white-space:nowrap}.report-bar-track{height:12px;background:#e9eef6;border-radius:999px;overflow:hidden}.report-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6b45,#1f6b45)}.report-bars.purple .report-bar-track i{background:linear-gradient(90deg,#3b82c4,#3b82c4)}.report-pay-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.report-pay-row small{display:block;color:#64748b;margin-top:4px}.report-pay-row b{color:#1f6b45;font-size:15px}.report-pay-row .report-bar-track{grid-column:1/-1}.report-table-card{overflow:hidden}.report-table-wrap{overflow:auto;border:1px solid #eef2f7;border-radius:18px}.report-table{min-width:900px}.report-table tbody tr{cursor:pointer;transition:background .15s ease}.report-table tbody tr:hover{background:#f8fbff}.report-table small{color:#64748b}.empty-state{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:18px;padding:18px;color:#64748b} @media(max-width:1280px){.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-search{grid-column:1/-1}.report-actions{grid-column:1/-1;justify-content:stretch}.report-actions .btn{flex:1}.report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-chart-grid{grid-template-columns:1fr}} @media(max-width:680px){.report-filter-grid,.report-kpi-grid{grid-template-columns:1fr}.report-actions{display:grid;grid-template-columns:1fr 1fr}.report-actions .btn{width:100%;padding:0 10px}.report-card,.report-filter-card{border-radius:20px;padding:16px}.report-month-chart{padding:14px}.report-vbar{min-width:58px}.report-kpi strong{font-size:28px}.report-card-head{flex-direction:column}.report-pay-row{grid-template-columns:1fr}.report-pay-row b{justify-self:start}.report-table{min-width:760px}} @media print{body{background:#fff!important}.sidebar,.app-header,.no-print,.report-actions,.header-search,.profile-chip{display:none!important}.workspace{margin-left:0!important}.main-content{padding:0!important}.report-page-v34{gap:12px}.report-card,.report-kpi,.report-filter-card{box-shadow:none!important;border-color:#d1d5db!important;break-inside:avoid}.report-kpi-grid{grid-template-columns:repeat(4,1fr)}.report-chart-grid{grid-template-columns:1fr 1fr}.report-table{min-width:0;font-size:11px}.report-table-wrap{overflow:visible}.report-month-chart{min-height:180px}.report-vbar{height:160px}.report-vbar span{height:100px}} /* V35: reports are a unique report workspace, not dashboard copies */ .report-page-v34{display:none!important} .report-workspace-v35{display:grid;gap:18px;min-width:0} .report-toolbar{background:#fff;border:1px solid #e8eef7;border-radius:26px;padding:18px;box-shadow:0 18px 46px rgba(15,23,42,.055);overflow:visible} .report-filter-panel{display:grid;grid-template-columns:1.2fr 150px 150px minmax(180px,1fr) minmax(150px,.7fr) minmax(240px,1.35fr) auto;gap:12px;align-items:end} .report-filter-title{align-self:center;min-width:210px}.report-filter-title strong{display:block;font-size:18px;font-weight:1000;color:#0f172a}.report-filter-title small{display:block;margin-top:4px;color:#64748b;font-weight:650;line-height:1.35}.report-filter-panel label{display:grid;gap:7px;min-width:0}.report-filter-panel label span{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.10em;color:#64748b}.report-filter-panel .input{height:48px;border-radius:16px;font-size:14px;font-weight:760;background:#fff}.report-tool-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}.report-tool-actions .btn{height:48px;padding:0 15px;border-radius:16px;white-space:nowrap} .report-sheet-summary{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.7fr);gap:16px;align-items:stretch}.report-sheet-title{background:linear-gradient(135deg,#0f172a,#14532d);color:#fff;border-radius:26px;padding:22px 24px;box-shadow:0 20px 50px rgba(15,23,42,.13)}.report-sheet-title span{display:block;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.13em;color:#cbd5e1}.report-sheet-title strong{display:block;margin-top:8px;font-size:clamp(20px,2.2vw,30px);line-height:1.08;letter-spacing:-.03em}.report-sheet-title small{display:block;margin-top:8px;color:#dbeafe;font-weight:700}.report-fact-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.report-fact{display:grid;align-content:center;gap:6px;min-height:118px;text-decoration:none;color:inherit;background:#fff;border:1px solid #e8eef7;border-radius:24px;padding:18px;box-shadow:0 16px 38px rgba(15,23,42,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.report-fact:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,23,42,.11);border-color:#bfdbfe}.report-fact b{font-size:clamp(22px,2.3vw,34px);font-weight:1000;line-height:1;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-fact span{font-size:12px;font-weight:950;color:#64748b;text-transform:uppercase;letter-spacing:.07em}.report-fact.success b{color:#1f6b45}.report-fact.warn b{color:#a66f00}.report-fact.danger b{color:#b63e34} .report-analytics-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:18px;align-items:start}.report-panel{background:#fff;border:1px solid #e8eef7;border-radius:26px;padding:20px;box-shadow:0 18px 46px rgba(15,23,42,.055);overflow:visible;min-width:0}.report-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.report-panel-head span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-weight:1000}.report-panel-head h2{margin:4px 0 0;font-size:clamp(18px,1.8vw,26px);line-height:1.15;letter-spacing:-.025em;color:#0f172a}.mini-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:8px 12px;text-decoration:none;font-weight:950;font-size:12px}.monthly-panel{grid-row:span 2}.report-line-chart{height:420px;border:1px solid #eef2f7;border-radius:22px;background:linear-gradient(180deg,#f8fafc,#fff);padding:20px;display:flex;gap:18px;align-items:flex-end;overflow-x:auto;overflow-y:hidden}.report-line-chart::-webkit-scrollbar{height:8px}.report-line-chart::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.report-column{height:100%;min-width:78px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;align-items:end;justify-items:center;text-decoration:none;color:inherit;transition:transform .18s ease}.report-column:hover{transform:translateY(-3px)}.report-column em{font-style:normal;color:#1f6b45;font-weight:1000}.report-column i{display:block;width:40px;border-radius:999px;background:linear-gradient(180deg,#3b82c4,#1f6b45);box-shadow:0 8px 20px rgba(37,99,235,.16);min-height:12px}.report-column small{font-size:12px;color:#475569;font-weight:950;white-space:nowrap}.report-horizontal-list{display:grid;gap:11px}.report-horizontal-list .report-bar,.report-horizontal-list .report-pay-row{border:1px solid #eef2f7;background:#fbfdff;border-radius:18px;padding:14px;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.report-horizontal-list .report-bar:hover,.report-horizontal-list .report-pay-row:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.09);border-color:#bfdbfe}.report-horizontal-list .report-bar-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:9px}.report-horizontal-list .report-bar-meta strong{font-size:14px;color:#0f172a}.report-horizontal-list .report-bar-meta span{font-size:12px;color:#1f6b45;font-weight:950;white-space:nowrap}.report-horizontal-list .report-bar-track{height:11px;background:#e9eef6;border-radius:999px;overflow:hidden}.report-horizontal-list .report-bar-track i{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,#1f6b45,#1f6b45)}.report-horizontal-list.purple .report-bar-track i{background:linear-gradient(90deg,#3b82c4,#3b82c4)}.money-list .report-pay-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.money-list .report-pay-row small{display:block;color:#64748b;margin-top:4px}.money-list .report-pay-row b{color:#1f6b45}.money-list .report-pay-row .report-bar-track{grid-column:1/-1}.report-register-panel{overflow:hidden}.report-register-wrap{overflow:auto;border:1px solid #eef2f7;border-radius:18px}.report-register{min-width:980px}.report-register tbody tr{cursor:pointer;transition:background .15s ease}.report-register tbody tr:hover{background:#f8fbff}.report-register small{color:#64748b}.empty-state{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:18px;padding:18px;color:#64748b} @media(max-width:1450px){.report-filter-panel{grid-template-columns:1fr 1fr 1fr}.report-filter-title,.report-search,.report-tool-actions{grid-column:1/-1}.report-tool-actions{justify-content:stretch}.report-tool-actions .btn{flex:1}.report-sheet-summary{grid-template-columns:1fr}.report-analytics-grid{grid-template-columns:1fr 1fr}.monthly-panel{grid-column:1/-1;grid-row:auto}.report-line-chart{height:330px}.report-fact-list{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.report-analytics-grid{grid-template-columns:1fr}.report-fact-list{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-panel{grid-template-columns:1fr 1fr}.report-line-chart{height:280px}} @media(max-width:620px){.report-filter-panel,.report-fact-list{grid-template-columns:1fr}.report-tool-actions{display:grid;grid-template-columns:1fr 1fr}.report-toolbar,.report-panel,.report-sheet-title{border-radius:20px;padding:16px}.report-line-chart{height:240px;padding:14px}.report-column{min-width:60px}.report-column i{width:32px}.report-panel-head{flex-direction:column}.report-register{min-width:820px}} @media print{body{background:#fff!important}.sidebar,.app-header,.no-print,.header-search,.profile-chip{display:none!important}.workspace{margin-left:0!important}.main-content{padding:0!important}.report-workspace-v35{gap:12px}.report-panel,.report-fact,.report-sheet-title{box-shadow:none!important;border:1px solid #d1d5db!important;break-inside:avoid}.report-sheet-summary{grid-template-columns:1fr}.report-fact-list{grid-template-columns:repeat(4,1fr)}.report-analytics-grid{grid-template-columns:1fr 1fr}.report-line-chart{height:220px}.report-register{min-width:0;font-size:11px}.report-register-wrap{overflow:visible}.report-column i{background:#555!important}.report-horizontal-list .report-bar-track i{background:#555!important}} /* V39: Role-focused reports. PNP and Mayor reports are no longer copies of Treasurer reports. */ .role-report-workspace{display:grid;gap:18px;min-width:0} .role-report-filter{background:#fff;border:1px solid #e8eef7;border-radius:24px;padding:18px;box-shadow:0 18px 45px rgba(15,23,42,.055)} .role-report-filter-grid{display:grid;grid-template-columns:minmax(230px,.9fr) 145px 145px minmax(180px,1fr) minmax(160px,.8fr) minmax(230px,1.2fr);gap:12px;align-items:end} .role-filter-title{align-self:center}.role-filter-title strong{display:block;font-size:18px;font-weight:1000;color:#0f172a}.role-filter-title small{display:block;margin-top:4px;color:#64748b;font-weight:650;line-height:1.35} .role-report-filter label{display:grid;gap:7px;min-width:0}.role-report-filter label span{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.11em;color:#64748b}.role-report-filter .input{height:48px;border-radius:16px;background:#fff;font-weight:750}.role-filter-search{grid-column:auto}.role-filter-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.role-filter-actions .btn{height:48px;border-radius:16px;padding:0 14px} .role-report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.role-report-summary>div{position:relative;overflow:hidden;min-height:126px;background:#fff;border:1px solid #e8eef7;border-radius:24px;padding:18px;box-shadow:0 16px 40px rgba(15,23,42,.055)}.role-report-summary>div:after{content:"";position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:999px;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(22,101,52,.10))}.role-report-summary span{display:block;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.11em;color:#64748b}.role-report-summary strong{display:block;margin-top:10px;font-size:clamp(26px,3vw,42px);line-height:1;font-weight:1000;color:#0f172a;letter-spacing:-.04em}.role-report-summary small{display:block;margin-top:9px;color:#64748b;font-weight:800}.role-pnp-summary>div:nth-child(2) strong,.role-pnp-summary>div:nth-child(3) strong{color:#b63e34}.role-pnp-summary>div:nth-child(4) strong,.role-mayor-summary>div:nth-child(3) strong{color:#a66f00}.role-mayor-summary>div:nth-child(2) strong{color:#1f6b45}.role-mayor-summary>div:nth-child(4) strong{color:#b63e34} .role-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.role-report-grid .wide{grid-column:1/-1}.role-report-panel{background:#fff;border:1px solid #e8eef7;border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(15,23,42,.055);min-width:0;overflow:hidden}.role-report-panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.role-report-panel header span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-weight:1000}.role-report-panel h2{margin:4px 0 0;color:#0f172a;font-size:clamp(19px,1.8vw,26px);line-height:1.14;letter-spacing:-.025em}.role-report-panel p{margin:6px 0 0;color:#64748b;font-weight:650;line-height:1.4}.role-report-bars{display:grid;gap:12px}.role-report-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #eef2f7;background:#fbfdff;border-radius:18px;padding:14px}.role-report-bar strong{display:block;color:#0f172a;font-size:15px}.role-report-bar span{display:block;margin-top:3px;color:#64748b;font-size:12px;font-weight:800}.role-report-bar b{font-size:15px;color:#1f6b45;font-weight:1000;white-space:nowrap}.role-report-bar i{grid-column:1/-1;height:12px;border-radius:999px;background:#e9eef6;overflow:hidden}.role-report-bar i em{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6b45,#1f6b45)}.danger-bars .role-report-bar i em{background:linear-gradient(90deg,#f97316,#d95d4f)}.warning-bars .role-report-bar i em{background:linear-gradient(90deg,#d6a63c,#3b82c4)}.purple-bars .role-report-bar i em{background:linear-gradient(90deg,#3b82c4,#3b82c4)}.money-bars .role-report-bar i em{background:linear-gradient(90deg,#1f6b45,#1f6b45)}.role-report-bar.money b{color:#1f6b45}.two-col-bars{grid-template-columns:repeat(2,minmax(0,1fr))} .role-month-bars{height:300px;border:1px solid #eef2f7;border-radius:22px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;display:flex;gap:18px;align-items:flex-end;overflow-x:auto;overflow-y:hidden}.role-month-bar{height:100%;min-width:72px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;align-items:end;justify-items:center;text-decoration:none;color:inherit}.role-month-bar b{font-size:14px;color:#1f6b45;font-weight:1000}.role-month-bar i{display:block;width:38px;border-radius:999px;background:linear-gradient(180deg,#3b82c4,#1f6b45);min-height:12px;box-shadow:0 8px 18px rgba(37,99,235,.16)}.role-month-bar span{font-size:12px;color:#475569;font-weight:950;white-space:nowrap}.role-register-panel{overflow:hidden}.role-register-panel .report-register-wrap{overflow:auto;border:1px solid #eef2f7;border-radius:18px}.role-register-panel .report-register{min-width:930px}.role-register-panel tbody tr{cursor:pointer;transition:background .15s ease}.role-register-panel tbody tr:hover{background:#f8fbff} @media(max-width:1250px){.role-report-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.role-filter-title,.role-filter-search,.role-filter-actions{grid-column:1/-1}.role-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col-bars{grid-template-columns:1fr}} @media(max-width:800px){.role-report-filter-grid,.role-report-grid{grid-template-columns:1fr}.role-report-summary{grid-template-columns:1fr}.role-filter-actions{grid-template-columns:1fr 1fr}.role-report-filter,.role-report-panel{border-radius:20px;padding:16px}.role-month-bars{height:240px;padding:14px}.role-register-panel .report-register{min-width:820px}} @media(max-width:520px){.role-filter-actions{grid-template-columns:1fr}.role-report-summary>div{min-height:110px}.role-month-bar{min-width:58px}.role-month-bar i{width:32px}} /* V40: role-focused reports layout polish for PNP and Mayor/OMM. Prevent filter bars, summary cards, and report panels from overflowing or squeezing. */ .role-report-workspace{ width:100%; max-width:100%; overflow:hidden; gap:18px!important; } .role-report-filter{ width:100%; max-width:100%; overflow:hidden!important; padding:20px!important; } .role-report-filter-grid{ display:grid!important; grid-template-columns:repeat(4,minmax(160px,1fr))!important; gap:14px!important; align-items:end!important; width:100%!important; max-width:100%!important; } .role-filter-title{ grid-column:1/-1!important; min-width:0!important; display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; padding-bottom:2px!important; } .role-filter-title strong{ font-size:clamp(18px,1.6vw,22px)!important; line-height:1.15!important; } .role-filter-title small{ max-width:520px!important; text-align:right!important; font-size:13px!important; line-height:1.35!important; } .role-report-filter label, .role-report-filter .input{ min-width:0!important; width:100%!important; } .role-filter-search{ grid-column:span 2!important; } .role-filter-actions{ grid-column:1/-1!important; display:grid!important; grid-template-columns:repeat(4,minmax(140px,1fr))!important; gap:10px!important; } .role-filter-actions .btn{ width:100%!important; min-width:0!important; white-space:nowrap!important; } .role-report-summary{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important; gap:14px!important; width:100%!important; max-width:100%!important; } .role-report-summary>div{ min-width:0!important; overflow:hidden!important; border-radius:22px!important; padding:18px 20px!important; } .role-report-summary strong{ display:block!important; max-width:100%!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; font-size:clamp(26px,3vw,40px)!important; line-height:1!important; } .role-report-summary span, .role-report-summary small{ overflow:hidden!important; text-overflow:ellipsis!important; } .role-report-grid, .mayor-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; align-items:start!important; width:100%!important; max-width:100%!important; } .role-report-panel{ min-width:0!important; max-width:100%!important; overflow:hidden!important; border-radius:24px!important; } .role-report-panel.wide{ grid-column:1/-1!important; } .role-report-panel header{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:12px!important; flex-wrap:wrap!important; } .role-report-panel header h2{ font-size:clamp(20px,2vw,27px)!important; line-height:1.12!important; margin-bottom:4px!important; } .role-report-panel header p{ max-width:760px!important; line-height:1.4!important; } .role-report-bars{ display:grid!important; gap:12px!important; width:100%!important; } .role-report-bar{ min-width:0!important; width:100%!important; overflow:hidden!important; } .role-report-bar>div{ min-width:0!important; } .role-report-bar strong{ display:block!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:normal!important; line-height:1.25!important; } .role-report-bar b{ white-space:nowrap!important; } .role-month-bars{ min-height:260px!important; height:auto!important; overflow-x:auto!important; overflow-y:hidden!important; padding-bottom:10px!important; } .role-month-bar{ min-width:72px!important; } .role-register-panel{ grid-column:1/-1!important; } .report-register-wrap{ width:100%!important; max-width:100%!important; overflow:auto!important; } .report-register{ width:100%!important; min-width:920px!important; } .role-report-workspace .chart-tip::after, .role-report-workspace .chart-tip::before{ pointer-events:none!important; } @media(max-width:1400px){ .role-report-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .role-filter-search{grid-column:span 1!important;} } @media(max-width:1150px){ .role-report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .role-filter-title{align-items:flex-start!important;flex-direction:column!important;} .role-filter-title small{text-align:left!important;max-width:100%!important;} .role-filter-search{grid-column:1/-1!important;} .role-filter-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .role-report-grid,.mayor-grid{grid-template-columns:1fr!important;} } @media(max-width:640px){ .role-report-filter{padding:16px!important;border-radius:20px!important;} .role-report-filter-grid, .role-filter-actions, .role-report-summary{ grid-template-columns:1fr!important; } .role-report-panel{border-radius:20px!important;padding:16px!important;} .role-report-summary strong{font-size:30px!important;} .role-month-bars{min-height:220px!important;} .report-register{min-width:780px!important;} } /* V41: login background logo size adjustment Make uploaded login background slightly smaller so more of the seal/logo is visible behind the card. */ .auth-page .auth-bg{ width:min(780px,78vw)!important; height:min(780px,78vw)!important; object-fit:contain!important; opacity:.22!important; transform:scale(.96)!important; transform-origin:center center!important; } .auth-page .auth-bg-ring{ width:min(840px,84vw)!important; height:min(840px,84vw)!important; } @media(max-width:760px){ .auth-page .auth-bg{width:88vw!important;height:88vw!important;opacity:.18!important;} .auth-page .auth-bg-ring{width:94vw!important;height:94vw!important;} } /* V43: remove all visible Open hover/cue badges; keep only chart data tooltips */ .click-badge{display:none!important;visibility:hidden!important;} .interactive-card[data-tip]:hover:after,.interactive-card[data-tip]:hover:before,.interactive-bar[data-tip]:hover:after,.interactive-bar[data-tip]:hover:before{display:none!important;content:none!important;} .chart-link .click-badge,.interactive-bar .click-badge,.interactive-card .click-badge{display:none!important;} /* V44: Developer Law / Ordinance Management clean registry UI */ .law-page{display:grid;gap:18px;max-width:1500px;margin:0 auto;} .law-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#ffffff 0%,#f4fbf6 100%);} .law-hero h2{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;margin:2px 0 8px;} .eyebrow{margin:0 0 4px;color:#1f6b45;font-weight:950;font-size:12px;letter-spacing:.12em;text-transform:uppercase;} .law-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:12px;min-width:300px;} .law-hero-stats div{background:#fff;border:1px solid #e8eef6;border-radius:18px;padding:14px;box-shadow:0 10px 26px rgba(15,23,42,.045);} .law-hero-stats strong{display:block;font-size:30px;line-height:1;color:#1f6b45;font-weight:1000;} .law-hero-stats span{display:block;margin-top:6px;color:#64748b;font-size:12px;font-weight:850;} .law-workspace{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:18px;align-items:start;} .law-form-card,.law-list-card{min-width:0;overflow:hidden;} .split-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;} .split-title h2{margin-bottom:4px;} .ordinance-form{grid-template-columns:1fr 1fr;} .law-filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) 160px auto auto;gap:10px;align-items:center;background:#f8fafc;border:1px solid #edf2f7;border-radius:18px;padding:12px;margin:10px 0 16px;} .ordinance-list{display:grid;gap:10px;max-height:660px;overflow:auto;padding-right:4px;} .ordinance-list::-webkit-scrollbar{width:7px}.ordinance-list::-webkit-scrollbar-thumb{background:#d7dee9;border-radius:999px} .ordinance-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid #e9eef6;background:#fff;border-radius:18px;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.035);} .ordinance-card.is-inactive{background:#fbfbfc;opacity:.82;} .ord-main{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;min-width:0;} .ord-no{display:inline-flex;justify-content:center;align-items:center;min-height:42px;border-radius:14px;background:#eef2ff;color:#17324d;font-weight:1000;letter-spacing:.02em;text-align:center;padding:8px;word-break:break-word;} .ord-text{min-width:0;}.ord-text h3{margin:0;font-size:16px;line-height:1.32;color:#111827;}.ord-text p{margin:6px 0 0;color:#64748b;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .ord-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;align-items:center;}.ord-meta span{display:inline-flex;border-radius:999px;background:#f1f5f9;color:#475569;font-size:11px;font-weight:850;padding:5px 9px;} .ord-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:135px;}.ord-actions .btn{padding:10px 12px;border-radius:14px;font-size:13px;min-height:40px;} .empty-state{border:1px dashed #cbd5e1;border-radius:18px;padding:26px;text-align:center;color:#64748b;background:#f8fafc;font-weight:800;} @media(max-width:1180px){.law-workspace{grid-template-columns:1fr}.law-hero{align-items:flex-start;flex-direction:column}.law-hero-stats{width:100%;min-width:0}.ordinance-list{max-height:none;overflow:visible}.law-filter-bar{grid-template-columns:1fr 160px auto auto}} @media(max-width:780px){.law-filter-bar{grid-template-columns:1fr}.ordinance-form{grid-template-columns:1fr}.ordinance-card{grid-template-columns:1fr}.ord-main{grid-template-columns:1fr}.ord-no{justify-content:flex-start;width:max-content;max-width:100%}.ord-actions{justify-content:flex-start}.law-hero-stats{grid-template-columns:1fr}.split-title{flex-direction:column}.split-title .btn{width:100%;}} /* V45: Law / Ordinance page full-width layout polish */ .law-page{ width:100%; max-width:100%; margin:0; gap:22px; } .law-hero{ width:100%; padding:28px; border-radius:28px; } .law-hero > div:first-child{ flex:1 1 auto; min-width:0; } .law-hero-stats{ flex:0 0 auto; min-width:360px; } .law-hero-stats div{ min-height:92px; display:flex; flex-direction:column; justify-content:center; } .law-workspace{ grid-template-columns:1fr!important; width:100%; gap:22px; } .law-form-card,.law-list-card{ width:100%; max-width:100%; } .law-list-card{ padding:26px; } .ordinance-list{ max-height:none; overflow:visible; padding-right:0; gap:12px; } .ordinance-card{ grid-template-columns:minmax(0,1fr) minmax(190px,auto); padding:18px; } .ord-main{ grid-template-columns:140px minmax(0,1fr); } .ord-no{ min-height:52px; font-size:15px; } .ord-text h3{ font-size:18px; line-height:1.28; } .ord-text p{ max-width:100%; -webkit-line-clamp:2; } .ord-actions{ min-width:190px; } .ord-actions .btn{ width:100%; justify-content:center; } .law-filter-bar{ grid-template-columns:minmax(320px,1fr) 190px 110px 110px; } @media(max-width:1180px){ .law-hero{padding:22px;} .law-hero-stats{min-width:0;width:100%;} .ordinance-card{grid-template-columns:1fr;} .ord-actions{min-width:0;justify-content:flex-start;} .ord-actions .btn{width:auto;} .law-filter-bar{grid-template-columns:1fr 180px auto auto;} } @media(max-width:780px){ .law-hero{padding:18px;border-radius:22px;} .law-list-card{padding:18px;} .law-filter-bar{grid-template-columns:1fr;} .ord-main{grid-template-columns:1fr;gap:10px;} .ord-no{width:max-content;max-width:100%;min-height:42px;} .ord-actions{display:grid;grid-template-columns:1fr;} .ord-actions .btn{width:100%;} } /* V50: no visible Open hover labels anywhere; chart tooltips only when explicitly enabled */ .surface-open-cue{display:none!important;} .clickable-surface:hover>.surface-open-cue,.clickable-surface:focus-visible>.surface-open-cue{display:none!important;} .pnp-dashboard-clean .chart-card,.pnp-dashboard-clean .modern-bars{display:none!important;} .pnp-dashboard-clean .pnp-result-area{margin-top:22px;} .pnp-dashboard-clean .compact-filter{display:grid;grid-template-columns:minmax(260px,1fr) auto auto auto auto;gap:12px;align-items:center;} .pnp-dashboard-clean .field-lookup-card{padding:26px;border:1px solid #bfdbfe;background:linear-gradient(135deg,#fff,#f8fbff);} .pnp-dashboard-clean .lookup-copy h2{margin:0 0 8px;font-size:1.45rem;} .pnp-dashboard-clean .lookup-copy p{max-width:720px;margin:0 0 18px;color:#475569;font-weight:700;line-height:1.55;} .pnp-dashboard-clean .violator-result-grid{display:grid;gap:14px;} .pnp-dashboard-clean .result-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line,#e7edf6);border-radius:24px;padding:18px;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.06);transition:.18s ease;} .pnp-dashboard-clean .result-card:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(15,23,42,.12);border-color:#b9d4ff;} .pnp-dashboard-clean .result-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;} .pnp-dashboard-clean .result-main h3{margin:0 0 6px;font-size:1.05rem;} .pnp-dashboard-clean .result-main p{margin:0;} .pnp-dashboard-clean .result-stats{display:grid;grid-template-columns:repeat(5,minmax(80px,1fr));gap:10px;margin:16px 0 10px;} .pnp-dashboard-clean .result-stats span{background:#f8fafc;border:1px solid #edf2f7;border-radius:16px;padding:10px 12px;} .pnp-dashboard-clean .result-stats b{display:block;font-size:1.08rem;} .pnp-dashboard-clean .result-stats small{display:block;color:#64748b;font-size:.78rem;} .pnp-dashboard-clean .money-stat b{color:#1f6b45;} .pnp-dashboard-clean .last-violation{border-top:1px dashed #e5e7eb;padding-top:12px;color:#334155;} .pnp-dashboard-clean .last-violation em{display:inline-block;margin-left:8px;font-style:normal;background:#eef2ff;color:#17324d;border-radius:999px;padding:4px 9px;font-weight:800;font-size:.78rem;} .pnp-dashboard-clean .result-action{margin-top:12px;font-weight:900;color:#1f6b45;} .pnp-dashboard-clean .empty-state{border:1px dashed #cbd5e1;border-radius:20px;padding:20px;background:#f8fafc;} @media(max-width:980px){.pnp-dashboard-clean .compact-filter{grid-template-columns:1fr 1fr}.pnp-dashboard-clean .compact-filter .input{grid-column:1/-1;}} @media(max-width:700px){.pnp-dashboard-clean .compact-filter{grid-template-columns:1fr}.pnp-dashboard-clean .dashboard-kpis{grid-template-columns:1fr 1fr}.pnp-dashboard-clean .result-main{display:block}.pnp-dashboard-clean .result-main .badge{margin-top:10px}.pnp-dashboard-clean .result-stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.pnp-dashboard-clean .dashboard-kpis,.pnp-dashboard-clean .result-stats{grid-template-columns:1fr}.pnp-dashboard-clean .field-lookup-card{padding:18px}} /* V51: PNP cleanup - smaller sidebar menu and violator directory */ .pnp-nav{ gap:8px!important; padding-right:0!important; overflow:visible!important; } .pnp-nav .nav-section-label{ margin:8px 8px 8px!important; font-size:10px!important; } .pnp-nav a{ min-height:54px!important; padding:12px 14px!important; border-radius:16px!important; font-size:14px!important; gap:11px!important; align-items:center!important; } .pnp-nav .nav-icon{ width:20px!important; font-size:13px!important; } .pnp-nav a.active{ min-height:58px!important; } .pnp-dashboard-clean .dashboard-kpis.compact-kpis{ grid-template-columns:repeat(4,minmax(160px,1fr)); } .pnp-dashboard-clean .compact-filter{ grid-template-columns:minmax(280px,1fr) auto auto auto!important; } .pnp-dashboard-clean .field-lookup-card .btn[href$="pending.php"]{ display:none!important; } .pnp-violator-list-page{ display:grid; gap:18px; } .pnp-list-toolbar{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(520px,1.15fr); gap:18px; align-items:end; } .pnp-list-toolbar h2{margin:0 0 8px;font-size:1.35rem;} .pnp-list-toolbar p{margin:0;line-height:1.5;font-weight:700;} .pnp-list-filter{ grid-template-columns:minmax(220px,1fr) auto auto auto!important; margin:0!important; } .violator-directory-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .violator-directory-card{ display:block; color:inherit; text-decoration:none; background:#fff; border:1px solid #e7edf6; border-radius:24px; padding:18px; box-shadow:0 14px 34px rgba(15,23,42,.055); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .violator-directory-card:hover{ transform:translateY(-2px); border-color:#b9d4ff; box-shadow:0 18px 44px rgba(15,23,42,.10); } .directory-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .directory-top h3{margin:0 0 6px;font-size:1.06rem;} .directory-top p{margin:0;} .directory-mini-stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:14px 0 12px; } .directory-mini-stats span{ min-width:0; background:#f8fafc; border:1px solid #edf2f7; border-radius:15px; padding:9px 10px; } .directory-mini-stats b{ display:block; font-weight:1000; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .directory-mini-stats span:last-child b{color:#1f6b45;} .directory-mini-stats small{display:block;color:#64748b;font-size:.76rem;} .directory-latest{ margin:0 0 10px; padding-top:10px; border-top:1px dashed #e5e7eb; color:#334155; } .open-profile-link{color:#1f6b45;} @media(max-width:1180px){ .pnp-list-toolbar{grid-template-columns:1fr;} .pnp-list-filter{grid-template-columns:1fr auto auto auto!important;} .pnp-dashboard-clean .dashboard-kpis.compact-kpis{grid-template-columns:repeat(2,minmax(160px,1fr));} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .pnp-nav{overflow:auto!important;} .pnp-nav a{min-height:50px!important;padding:11px 13px!important;} .violator-directory-grid{grid-template-columns:1fr;} } @media(max-width:700px){ .pnp-list-filter,.pnp-dashboard-clean .compact-filter{grid-template-columns:1fr!important;} .directory-top{display:block;} .directory-top .badge{margin-top:10px;} .directory-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:520px){ .pnp-dashboard-clean .dashboard-kpis.compact-kpis,.directory-mini-stats{grid-template-columns:1fr;} } /* V52 PNP simplified dashboard and menu cleanup */ .pnp-single-nav{gap:6px!important;overflow:visible!important;} .pnp-single-nav .nav-section-label{margin:6px 8px 6px!important;font-size:10px!important;} .pnp-single-nav a{min-height:48px!important;padding:10px 13px!important;border-radius:14px!important;font-size:13px!important;} .pnp-single-nav a.active{min-height:50px!important;} .pnp-dashboard-single-workspace{display:grid;gap:22px;} .pnp-dashboard-single-workspace .dashboard-kpis{display:none!important;} .pnp-main-lookup{padding:28px!important;border-color:#bfdbfe!important;background:linear-gradient(135deg,#fff,#f8fbff)!important;} .pnp-lookup-form{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(190px,.65fr) auto auto;gap:12px;align-items:center;margin-top:18px;} .pnp-lookup-form .input,.pnp-lookup-form select{min-height:52px;} .pnp-lookup-actions{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:12px;margin-top:12px;max-width:760px;} .pnp-lookup-actions .btn,.pnp-lookup-form .btn{min-height:52px;display:flex;align-items:center;justify-content:center;} .pnp-dashboard-single-workspace .pnp-result-area{margin-top:0!important;} @media(max-width:1180px){.pnp-lookup-form{grid-template-columns:1fr 1fr}.pnp-lookup-actions{grid-template-columns:repeat(3,1fr);max-width:none;}} @media(max-width:760px){.pnp-lookup-form,.pnp-lookup-actions{grid-template-columns:1fr}.pnp-main-lookup{padding:18px!important}.pnp-single-nav a{min-height:46px!important}} /* V53: PNP final clean dashboard workflow */ .pnp-single-nav{ gap:4px!important; padding-top:4px!important; } .pnp-single-nav a{ min-height:42px!important; padding:9px 12px!important; border-radius:13px!important; font-size:13px!important; } .pnp-single-nav a.active{ min-height:44px!important; } .pnp-dashboard-single-workspace .pnp-lookup-actions{ grid-template-columns:repeat(2,minmax(180px,1fr)); max-width:560px; } .pnp-dashboard-single-workspace .pnp-result-area{ margin-top:0!important; } @media(max-width:760px){ .pnp-dashboard-single-workspace .pnp-lookup-actions{grid-template-columns:1fr;max-width:none;} } /* V55: PNP reports register-only cleanup */ .pnp-report-v55 .role-report-filter{padding:18px 20px!important;} .pnp-report-filter-v55{display:grid;gap:14px;width:100%;min-width:0;} .pnp-report-filter-v55 .filter-topline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;min-width:0;} .pnp-report-filter-v55 .filter-searchline{display:grid;grid-template-columns:minmax(260px,1fr) 160px 150px 180px 150px;gap:12px;align-items:end;min-width:0;} .pnp-report-filter-v55 label{display:grid;gap:7px;min-width:0;} .pnp-report-filter-v55 label span{font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.11em;color:#64748b;} .pnp-report-filter-v55 .input{height:48px;border-radius:16px;background:#fff;font-weight:750;width:100%;min-width:0;} .pnp-report-filter-v55 .btn{height:48px;border-radius:16px;width:100%;white-space:nowrap;} .pnp-register-v55{padding:0!important;border-radius:24px!important;overflow:hidden!important;} .pnp-register-v55 .report-register-wrap{border:0!important;border-radius:0!important;} .pnp-register-v55 .report-register{min-width:930px!important;} .pnp-register-v55 .table thead th{background:#f8fafc;color:#475569;font-size:11px;letter-spacing:.10em;text-transform:uppercase;} @media(max-width:1180px){ .pnp-report-filter-v55 .filter-topline{grid-template-columns:repeat(2,minmax(0,1fr));} .pnp-report-filter-v55 .filter-searchline{grid-template-columns:1fr 1fr 1fr;} .pnp-report-filter-v55 .filter-searchline label{grid-column:1/-1;} } @media(max-width:700px){ .pnp-report-filter-v55 .filter-topline,.pnp-report-filter-v55 .filter-searchline{grid-template-columns:1fr;} .pnp-register-v55{border-radius:20px!important;} .pnp-register-v55 .report-register{min-width:780px!important;} } /* V56: PNP reports direct filtered results, no extra card/title block */ .pnp-report-v55 .pnp-results-direct{ margin-top:18px; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; overflow:visible!important; } .pnp-report-v55 .pnp-results-note{ display:none!important; } .pnp-report-v55 .pnp-results-direct .report-register-wrap{ background:#fff; border:1px solid #e8eef7; border-radius:22px; overflow:auto; box-shadow:0 16px 38px rgba(15,23,42,.045); } .pnp-report-v55 .pnp-direct-table{ width:100%; min-width:940px; border-collapse:separate; border-spacing:0; } .pnp-report-v55 .pnp-direct-table thead th{ background:#f8fafc!important; color:#475569!important; font-size:11px!important; letter-spacing:.10em!important; text-transform:uppercase!important; padding:14px 16px!important; } .pnp-report-v55 .pnp-direct-table td{ padding:16px!important; vertical-align:top; } .pnp-report-v55 .pnp-direct-table tr:hover td{ background:#fbfdff; } .pnp-report-v55 .filter-searchline{ grid-template-columns:minmax(320px,1fr) 170px 150px 180px 150px!important; } @media(max-width:1180px){ .pnp-report-v55 .filter-searchline{grid-template-columns:1fr 1fr!important;} .pnp-report-v55 .filter-searchline label{grid-column:1/-1;} } @media(max-width:700px){ .pnp-report-v55 .filter-searchline{grid-template-columns:1fr!important;} .pnp-report-v55 .pnp-results-direct .report-register-wrap{border-radius:18px;} .pnp-report-v55 .pnp-direct-table{min-width:780px;} } /* V59: Final PNP clean/direct workflow */ .pnp-final .page-heading p, .pnp-dashboard-final .lookup-copy, .pnp-profile-clean .timeline-extra, .pnp-profile-clean .role-note, .pnp-profile-clean .hero-card, .pnp-profile-clean .role-hero{display:none!important;} .pnp-single-nav, .pnp-nav{display:block!important;flex:0 0 auto!important;overflow:visible!important;min-height:auto!important;} .pnp-single-nav .nav-section-label{margin:4px 8px 8px!important;font-size:10px!important;letter-spacing:.14em!important;} .pnp-single-nav a{min-height:44px!important;height:44px!important;padding:8px 12px!important;border-radius:14px!important;font-size:13px!important;} .pnp-dashboard-final{gap:16px!important;} .pnp-dashboard-final .pnp-main-lookup{padding:24px!important;} .pnp-dashboard-final .pnp-main-lookup h2{margin:0 0 14px!important;font-size:1.35rem!important;} .pnp-dashboard-final .pnp-lookup-form{grid-template-columns:minmax(260px,1fr) minmax(180px,.55fr) 150px 150px!important;margin-top:0!important;} .pnp-dashboard-final .pnp-lookup-form .input, .pnp-dashboard-final .pnp-lookup-form select, .pnp-dashboard-final .pnp-lookup-form .btn{min-height:48px!important;border-radius:16px!important;} .pnp-dashboard-final .pnp-lookup-actions{grid-template-columns:repeat(3,minmax(140px,1fr))!important;max-width:620px!important;margin-top:12px!important;} .pnp-dashboard-final .pnp-lookup-actions .btn{min-height:44px!important;border-radius:14px!important;} .pnp-clean-results{padding:20px!important;} .pnp-clean-results .section-title{margin-bottom:12px!important;} .pnp-final-stats, .pnp-dashboard-clean .result-stats.pnp-final-stats{grid-template-columns:repeat(4,minmax(90px,1fr))!important;} .pnp-dashboard-clean .result-card{border-radius:20px!important;padding:16px!important;} .pnp-dashboard-clean .result-action{font-size:.9rem!important;margin-top:10px!important;} .pnp-dashboard-clean .last-violation{font-size:.92rem!important;} .pnp-profile-clean{display:grid;gap:16px;} .profile-head-card{padding:22px!important;} .profile-head-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;} .profile-head-main h2{font-size:1.65rem!important;margin:0 0 6px!important;} .profile-head-main p{margin:0!important;} .pnp-profile-summary-clean{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:14px 0!important;} .pnp-profile-summary-clean .summary-tile{padding:13px 14px!important;border-radius:16px!important;box-shadow:none!important;} .pnp-profile-summary-clean .summary-tile strong{font-size:20px!important;} .pnp-profile-summary-clean .summary-tile.money strong{color:#1f6b45!important;font-size:19px!important;} .profile-actions-clean{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;} .profile-actions-clean .btn{min-height:42px;border-radius:14px;} .pnp-category-clean-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .pnp-category-clean-grid .category-card{padding:16px!important;border-radius:18px!important;} .pnp-category-clean-grid .category-card h3{font-size:1rem!important;line-height:1.3!important;} .pnp-timeline-clean .timeline-card{padding:16px!important;border-radius:18px!important;} .timeline-clean-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;} .timeline-clean-head h3{margin:0 0 7px!important;font-size:1rem!important;line-height:1.35!important;} .timeline-clean-head p{margin:0!important;} .timeline-clean-head>strong{white-space:nowrap;color:#1f6b45;font-size:1rem;} .pnp-timeline-clean .timeline-note{margin:10px 0 0!important;} .pnp-list-toolbar{grid-template-columns:1fr minmax(520px,1fr)!important;padding:20px!important;} .pnp-list-toolbar h2{margin:0!important;} .pnp-list-toolbar p{display:none!important;} .violator-directory-card{padding:16px!important;border-radius:20px!important;} .directory-mini-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;} .directory-latest{font-size:.92rem!important;} .open-profile-link{font-size:.92rem!important;} .case-dashboard{grid-template-columns:repeat(4,minmax(0,1fr))!important;} .case-kpi{padding:16px!important;border-radius:18px!important;} .case-kpi p{display:none!important;} .case-toolbar{grid-template-columns:minmax(260px,1fr) 150px 130px!important;} .case-card{border-radius:20px!important;padding:16px!important;} .case-muted{font-size:13px!important;} @media(max-width:1180px){ .pnp-dashboard-final .pnp-lookup-form{grid-template-columns:1fr 1fr!important;} .pnp-profile-summary-clean{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .pnp-category-clean-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .pnp-list-toolbar{grid-template-columns:1fr!important;} } @media(max-width:760px){ .pnp-dashboard-final .pnp-lookup-form, .pnp-dashboard-final .pnp-lookup-actions, .case-toolbar{grid-template-columns:1fr!important;max-width:none!important;} .pnp-profile-summary-clean, .pnp-category-clean-grid, .directory-mini-stats, .case-dashboard{grid-template-columns:1fr!important;} .profile-head-main,.timeline-clean-head{display:block!important;} .timeline-clean-head>strong{display:inline-block;margin-top:8px;} } /* V64 PNP profile clickable actual history filter */ .pnp-profile-summary-clean a.summary-tile{text-decoration:none;color:inherit;display:block;cursor:pointer;transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;} .pnp-profile-summary-clean a.summary-tile:hover{transform:translateY(-1px);border-color:#bbf7d0!important;box-shadow:0 10px 22px rgba(22,101,52,.08)!important;} .pnp-profile-summary-clean .summary-tile.active-filter{border-color:#1f6b45!important;background:#f0fdf4!important;box-shadow:0 0 0 3px rgba(34,197,94,.10)!important;} .pnp-history-title-clean{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} /* V65 PNP actual history clean: no category-letter dots, direct ordinance-first records */ .pnp-timeline-clean .timeline-item.no-dot{grid-template-columns:1fr!important;} .pnp-timeline-clean .timeline-item.no-dot .timeline-card{grid-column:1/-1!important;} .pnp-profile-summary-clean .summary-tile.money{text-decoration:none;color:inherit;display:block;cursor:pointer;} .pnp-profile-summary-clean .summary-tile.money:hover{transform:translateY(-1px);border-color:#bbf7d0!important;box-shadow:0 10px 22px rgba(22,101,52,.08)!important;} /* V67 PNP case clarity: viewer-only, clear case status labels */ .pnp-timeline-clean .timeline-card.case-filed{border-color:#fecaca!important;background:linear-gradient(180deg,#fff,#fffafa)!important;} .pnp-timeline-clean .timeline-card.case-ready{border-color:#fed7aa!important;background:linear-gradient(180deg,#fff,#fff7ed)!important;} .timeline-amount-box{text-align:right;min-width:120px;white-space:nowrap;} .timeline-amount-box small{display:block;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:900;font-size:11px;margin-bottom:4px;} .timeline-amount-box strong{color:#1f6b45;font-size:1.05rem;} .pnp-clear-statuses .badge{font-size:12px!important;} @media(max-width:760px){.timeline-amount-box{text-align:left;margin-top:8px;}} /* V68: full violation detail drilldown */ .timeline-card[data-href]{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;} .timeline-card[data-href]:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(15,23,42,.10)!important;border-color:#93c5fd!important;} .violation-detail-page{max-width:1320px;margin:0 auto;} .violation-detail-hero{padding:24px!important;} .detail-hero-main{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;} .detail-hero-main h2{margin:0 0 6px;font-size:clamp(22px,2vw,30px);line-height:1.25;} .detail-amount-box{min-width:170px;border:1px solid #e5edf7;border-radius:18px;padding:14px 16px;background:#f8fafc;text-align:right;} .detail-amount-box small,.detail-field-grid small,.detail-list-item span,.detail-list-item small{display:block;color:#64748b;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;} .detail-amount-box strong{font-size:24px;color:#1f6b45;} .detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;} .detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;} .detail-section-card{padding:24px!important;margin-top:18px;} .detail-grid .detail-section-card{margin-top:0;} .detail-section-card h2{margin:0 0 16px;font-size:22px;} .detail-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .detail-field-grid.three-col{grid-template-columns:repeat(3,minmax(0,1fr));} .detail-field-grid>div{border:1px solid #e8eef7;border-radius:16px;background:#fbfdff;padding:13px 14px;min-height:72px;} .detail-field-grid strong{display:block;margin-top:4px;color:#0f172a;line-height:1.35;word-break:break-word;} .detail-status-row{margin-top:14px!important;} .detail-note-box{margin-top:14px;border:1px solid #e8eef7;border-radius:16px;background:#fbfdff;padding:14px;} .detail-note-box p{margin:6px 0 0;color:#334155;} .detail-list-item{border:1px solid #e8eef7;border-radius:16px;background:#fbfdff;padding:14px;margin-top:10px;display:grid;gap:4px;} .detail-list-item b{color:#1f6b45;font-size:18px;} @media (max-width:900px){.detail-hero-main{display:block}.detail-amount-box{text-align:left;margin-top:12px}.detail-grid,.detail-field-grid,.detail-field-grid.three-col{grid-template-columns:1fr}.violation-detail-hero,.detail-section-card{padding:18px!important}} /* V70: final global UI sizing polish - smaller, readable dashboard cards across all roles */ :root{ --ui-radius-lg:22px; --ui-radius-md:16px; --ui-shadow-soft:0 14px 34px rgba(15,23,42,.055); } body{font-size:14px;line-height:1.45;color:#172033;} .sidebar{width:270px!important;padding:18px 14px!important;gap:12px!important;} .workspace{margin-left:270px!important;} .brand{padding:6px 7px 10px!important;gap:10px!important;} .brand img{width:42px!important;height:42px!important;border-radius:14px!important;} .brand strong{font-size:14px!important;} .brand small{font-size:11px!important;line-height:1.2!important;} .profile-card{padding:11px 12px!important;border-radius:17px!important;} .avatar,.profile-avatar{width:38px!important;height:38px!important;border-radius:13px!important;font-size:14px!important;} .profile-meta strong{font-size:13px!important;} .profile-meta small{font-size:11px!important;} .nav-title,.nav-section-label{font-size:10px!important;letter-spacing:.14em!important;margin:8px 9px 6px!important;} .nav a,.role-nav a,.pnp-single-nav a{min-height:46px!important;height:auto!important;padding:10px 12px!important;border-radius:14px!important;font-size:13px!important;gap:10px!important;} .nav-icon{width:18px!important;font-size:13px!important;} .app-header{min-height:78px!important;padding:16px 26px!important;} .page-heading h1{font-size:26px!important;line-height:1.08!important;letter-spacing:-.035em!important;} .page-heading p{font-size:13px!important;line-height:1.35!important;} .header-search{height:44px!important;width:min(370px,32vw)!important;} .profile-chip{height:44px!important;} .profile-chip .profile-avatar{width:36px!important;height:36px!important;} .profile-name{font-size:13px!important;} .main-content{padding:24px!important;} .card,.chart-card,.report-card,.report-filter-card,.dash-kpi,.role-action-card,.profile-head-card,.pnp-clean-results,.field-lookup-card{border-radius:var(--ui-radius-lg)!important;box-shadow:var(--ui-shadow-soft)!important;} .card{padding:20px!important;} .card h2,.chart-card h2,.report-card h2{font-size:18px!important;line-height:1.2!important;} .btn{min-height:44px!important;padding:11px 16px!important;border-radius:15px!important;font-size:13px!important;font-weight:900!important;} .input,select,textarea{font-size:14px!important;border-radius:14px!important;padding:11px 13px!important;} label span{font-size:13px!important;} .dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))!important;gap:14px!important;align-items:stretch!important;} .dash-kpi,.report-kpi{min-width:0!important;min-height:138px!important;padding:16px 17px!important;border-radius:20px!important;overflow:hidden!important;} .dash-kpi:after,.report-kpi:after{width:76px!important;height:76px!important;right:-18px!important;top:-22px!important;opacity:.95!important;} .dash-kpi span,.report-kpi span{font-size:10.5px!important;letter-spacing:.11em!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:calc(100% - 26px)!important;color:#52627a!important;} .dash-kpi strong,.report-kpi strong{font-size:clamp(22px,1.8vw,31px)!important;line-height:1.02!important;letter-spacing:-.045em!important;margin-top:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;display:block!important;} .dash-kpi small,.report-kpi small{font-size:12px!important;line-height:1.35!important;font-weight:760!important;color:#64748b!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;margin-top:9px!important;} .dash-kpi.success strong,.report-kpi.success strong{color:#1f6b45!important;} .dash-kpi.warn strong,.report-kpi.warn strong{color:#a66f00!important;} .dash-kpi.danger strong,.report-kpi.danger strong{color:#b63e34!important;} .role-action-card{padding:22px 24px!important;gap:16px!important;} .role-action-card h2{font-size:22px!important;line-height:1.15!important;margin-bottom:8px!important;} .role-action-card p{font-size:14px!important;line-height:1.5!important;max-width:650px!important;} .hero-actions{gap:10px!important;} .hero-actions .btn{white-space:nowrap!important;} .chart-card{padding:20px!important;} .card-head h2,.report-card-head h2{font-size:22px!important;} .card-head p,.report-card-head p{font-size:13px!important;} .modern-bar,.timeline-row,.category-pill{border-radius:16px!important;padding:12px 13px!important;} .timeline-row strong,.modern-bar strong,.category-pill strong{font-size:13.5px!important;} .timeline-row span,.modern-bar small,.category-pill small{font-size:12px!important;} .table th,.table td,.mini-table th,.mini-table td{font-size:13px!important;padding:10px 11px!important;} .badge{font-size:11px!important;padding:5px 9px!important;} /* Treasurer dashboard: keep 5 cards clean on desktop without text spilling */ .role-dashboard-treasurer .dashboard-kpis, .treasurer-dashboard .dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;} .role-dashboard-treasurer .dash-kpi strong, .treasurer-dashboard .dash-kpi strong{font-size:clamp(23px,1.65vw,30px)!important;} .role-dashboard-treasurer .dash-kpi span, .treasurer-dashboard .dash-kpi span{max-width:calc(100% - 18px)!important;} /* No annoying hover popups on normal cards/menus/buttons; chart-specific JS tooltip may still work. */ .nav a[title],.btn[title],.dash-kpi[title],.report-kpi[title],.role-action-card[title]{pointer-events:auto;} .interactive-card:not(.chart-link)[data-tip]:hover:after, .interactive-card:not(.chart-link)[data-tip]:hover:before{display:none!important;content:none!important;} @media(max-width:1180px){ .sidebar{width:260px!important;} .workspace{margin-left:260px!important;} .dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .dash-kpi strong,.report-kpi strong{font-size:clamp(22px,3.2vw,30px)!important;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{width:min(260px,86vw)!important;transform:translateX(-105%);} .workspace{margin-left:0!important;} .app-header{min-height:64px!important;padding:13px 16px!important;} .main-content{padding:18px!important;} .page-heading h1{font-size:21px!important;} } @media(max-width:640px){ .dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:1fr!important;} .dash-kpi,.report-kpi{min-height:auto!important;padding:15px!important;} .dash-kpi strong,.report-kpi strong{font-size:28px!important;} .role-action-card{padding:18px!important;} } /* V72 clean scroll panels: keep long system results compact and avoid wasted page height */ .violation-result-list, .ordinance-list, .case-list, .pnp-timeline-clean, .report-register-wrap, .shared-record-list, .search-results-list, .payment-ticket-list, .contested-list{ max-height:min(62vh,640px); overflow-y:auto; overflow-x:hidden; padding-right:8px; scrollbar-gutter:stable; } .violation-result-list{max-height:min(50vh,430px);} .ordinance-list{max-height:min(64vh,680px);} .pnp-timeline-clean{max-height:min(66vh,700px);} .report-register-wrap{max-height:min(64vh,680px);overflow:auto;} .violation-result-list::-webkit-scrollbar, .ordinance-list::-webkit-scrollbar, .case-list::-webkit-scrollbar, .pnp-timeline-clean::-webkit-scrollbar, .report-register-wrap::-webkit-scrollbar, .shared-record-list::-webkit-scrollbar, .search-results-list::-webkit-scrollbar, .payment-ticket-list::-webkit-scrollbar, .contested-list::-webkit-scrollbar{width:7px;height:7px;} .violation-result-list::-webkit-scrollbar-thumb, .ordinance-list::-webkit-scrollbar-thumb, .case-list::-webkit-scrollbar-thumb, .pnp-timeline-clean::-webkit-scrollbar-thumb, .report-register-wrap::-webkit-scrollbar-thumb, .shared-record-list::-webkit-scrollbar-thumb, .search-results-list::-webkit-scrollbar-thumb, .payment-ticket-list::-webkit-scrollbar-thumb, .contested-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;} .violation-result-card{min-height:72px;} .violation-picker.full{margin-bottom:0;} @media(max-width:760px){ .violation-result-list,.ordinance-list,.case-list,.pnp-timeline-clean,.report-register-wrap{max-height:60vh;} } /* V49: Login page size matched to reference login screen Balanced normal card, readable text, and large but soft background seal. */ .auth-page{ padding:24px!important; min-height:100vh!important; display:grid!important; place-items:center!important; } .auth-page .auth-bg{ width:min(820px,82vw)!important; height:min(820px,82vw)!important; opacity:.17!important; object-fit:contain!important; transform:none!important; } .auth-page .auth-bg-ring{ width:min(880px,88vw)!important; height:min(880px,88vw)!important; opacity:.72!important; } .auth-card{ width:min(435px,calc(100vw - 36px))!important; border-radius:27px!important; padding:30px 30px 28px!important; box-shadow:0 20px 62px rgba(15,23,42,.12)!important; } .auth-logo{ width:44px!important; height:44px!important; border-radius:15px!important; padding:2px!important; margin-bottom:8px!important; } .auth-card .kicker{ font-size:11px!important; letter-spacing:.24em!important; line-height:1.25!important; margin-top:2px!important; } .auth-card h1{ font-size:32px!important; line-height:1.08!important; letter-spacing:-.035em!important; margin:10px 0 6px!important; font-weight:950!important; } .auth-card p{ font-size:14px!important; line-height:1.45!important; margin:0 0 24px!important; } .login-form{ gap:13px!important; } .field{ border-radius:15px!important; padding:14px 18px!important; font-size:15px!important; min-height:56px!important; } .pass-wrap .field{ padding-right:82px!important; } .show-btn{ right:13px!important; font-size:13px!important; } .auth-card .btn, .login-form .btn{ border-radius:15px!important; padding:13px 18px!important; font-size:14.5px!important; min-height:54px!important; } .forgot{ font-size:13.5px!important; margin-top:2px!important; } @media(max-width:760px){ .auth-page{padding:18px!important;align-items:center!important;} .auth-page .auth-bg{width:min(660px,120vw)!important;height:min(660px,120vw)!important;opacity:.13!important;} .auth-page .auth-bg-ring{width:min(720px,130vw)!important;height:min(720px,130vw)!important;} .auth-card{width:min(390px,calc(100vw - 28px))!important;padding:25px 20px!important;border-radius:24px!important;} .auth-logo{width:42px!important;height:42px!important;} .auth-card h1{font-size:28px!important;} .auth-card p{font-size:13.5px!important;margin-bottom:20px!important;} .field{min-height:52px!important;font-size:14px!important;padding:13px 15px!important;} .login-form .btn{min-height:52px!important;} } @media(max-height:720px) and (min-width:761px){ .auth-page .auth-bg{width:min(720px,78vw)!important;height:min(720px,78vw)!important;opacity:.15!important;} .auth-page .auth-bg-ring{width:min(780px,84vw)!important;height:min(780px,84vw)!important;} .auth-card{padding:25px 28px!important;} .auth-card h1{font-size:30px!important;} .field,.login-form .btn{min-height:52px!important;} } /* V72: Mayor/OMM dashboard accurate charts + modern compact UI */ .omm-dashboard-v2{gap:20px!important;min-width:0;} .omm-dashboard-v2 .omm-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;} .omm-dashboard-v2 .dash-kpi{border-radius:24px!important;padding:18px 18px 17px!important;background:linear-gradient(180deg,#ffffff,#fbfdff)!important;border-color:#e7edf6!important;box-shadow:0 18px 42px rgba(15,23,42,.06)!important;} .omm-dashboard-v2 .dash-kpi strong{font-size:clamp(26px,2.5vw,38px)!important;white-space:nowrap!important;line-height:1.05!important;} .omm-dashboard-v2 .dash-kpi small{font-size:12px!important;line-height:1.35!important;} .omm-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch;min-width:0;} .omm-top-grid{grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);} .omm-monitor-grid{grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);} .omm-card{min-width:0;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e7edf6;border-radius:26px;padding:22px;box-shadow:0 18px 46px rgba(15,23,42,.06);overflow:hidden;} .omm-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;} .omm-card-head h2{margin:0;color:#0f172a;font-size:clamp(20px,1.7vw,26px);line-height:1.12;letter-spacing:-.035em;} .omm-card-head p{margin:5px 0 0;color:#64748b;font-size:13px;line-height:1.4;} .omm-month-chart{height:300px;border:1px solid #eef2f7;border-radius:22px;background:linear-gradient(180deg,#f8fafc,#fff);padding:18px;display:grid;grid-template-columns:repeat(6,minmax(72px,1fr));gap:14px;align-items:end;overflow-x:auto;overflow-y:hidden;} .omm-month-item{height:252px;text-decoration:none;color:inherit;display:grid;grid-template-rows:auto 1fr auto;gap:9px;justify-items:center;align-items:end;min-width:72px;transition:transform .18s ease;} .omm-month-item:hover{transform:translateY(-3px);} .omm-month-item b{font-size:14px;color:#1f6b45;font-weight:1000;line-height:1;} .omm-month-item span{height:190px;width:min(48px,70%);border-radius:999px;background:#e9eef6;display:flex;align-items:flex-end;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);} .omm-month-item span i{display:block;width:100%;min-height:7px;border-radius:999px;background:linear-gradient(180deg,#4f46e5,#059669);} .omm-month-item small{font-size:12px;font-weight:900;color:#475569;text-align:center;white-space:nowrap;} .omm-donut-layout{display:grid;gap:18px;justify-items:center;align-content:center;min-height:300px;} .omm-donut{width:210px;height:210px;border-radius:999px;background:conic-gradient(#1f6b45 0 var(--paid-end),#3b82f6 var(--paid-end) var(--partial-end),#d6a63c var(--partial-end) 100%);display:grid;place-items:center;position:relative;text-decoration:none;color:inherit;box-shadow:0 18px 44px rgba(15,23,42,.11);} .omm-donut:after{content:"";position:absolute;inset:30px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #eef2f7;} .omm-donut b,.omm-donut span{position:relative;z-index:1;display:block;text-align:center;} .omm-donut b{font-size:38px;font-weight:1000;color:#0f172a;line-height:.95;letter-spacing:-.04em;} .omm-donut span{font-size:12px;color:#64748b;font-weight:950;text-transform:uppercase;letter-spacing:.10em;margin-top:38px;} .omm-legend{display:grid;grid-template-columns:1fr;gap:9px;width:100%;} .omm-legend a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-decoration:none;color:#334155;border:1px solid #eef2f7;border-radius:15px;background:#fbfdff;padding:10px 12px;} .omm-legend i{width:11px;height:11px;border-radius:999px;display:block;}.omm-legend i.paid{background:#1f6b45}.omm-legend i.partial{background:#3b82f6}.omm-legend i.unpaid{background:#d6a63c} .omm-legend strong{font-size:13px;color:#0f172a;font-weight:950;}.omm-legend span{font-size:12px;color:#64748b;font-weight:900;white-space:nowrap;} .omm-mini-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .omm-mini-stat{display:block;text-decoration:none;color:inherit;border:1px solid #eef2f7;border-radius:20px;background:#fbfdff;padding:16px;min-width:0;} .omm-mini-stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#64748b;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .omm-mini-stat strong{display:block;margin-top:8px;font-size:clamp(24px,2.6vw,34px);line-height:1;font-weight:1000;color:#0f172a;} .omm-mini-stat.danger strong{color:#b63e34}.omm-mini-stat.warn strong{color:#a66f00}.omm-mini-stat.primary strong{color:#17324d} .omm-bars{display:grid;gap:11px;}.omm-bar{display:block;text-decoration:none;color:inherit;border:1px solid #eef2f7;background:#fbfdff;border-radius:18px;padding:13px 14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}.omm-bar:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.09);border-color:#bfdbfe;} .omm-bar div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;}.omm-bar strong{font-size:14px;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;}.omm-bar span{font-size:12px;color:#1f6b45;font-weight:950;white-space:nowrap;}.omm-bar em{display:block;height:12px;border-radius:999px;background:#e9eef6;overflow:hidden;}.omm-bar em i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6b45,#1f6b45);}.omm-bars.purple .omm-bar em i{background:linear-gradient(90deg,#3b82c4,#3b82c4);} .omm-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.omm-category{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:inherit;border:1px solid #eef2f7;background:#fbfdff;border-radius:20px;padding:14px;min-width:0;}.omm-category div{min-width:0}.omm-category strong{display:block;color:#0f172a;font-size:14px;line-height:1.25;}.omm-category small{display:block;margin-top:4px;color:#64748b;font-size:12px;font-weight:850}.omm-category>span{width:56px;height:56px;flex:0 0 56px;border-radius:999px;background:conic-gradient(#1f6b45 0 var(--p),#e9eef6 var(--p) 100%);display:grid;place-items:center;position:relative;}.omm-category>span:after{content:"";position:absolute;inset:8px;border-radius:999px;background:#fff}.omm-category b{position:relative;z-index:1;font-size:13px;color:#1f6b45;font-weight:1000;} .omm-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.omm-timeline-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;text-decoration:none;color:inherit;border:1px solid #eef2f7;background:#fbfdff;border-radius:17px;padding:12px 13px;min-width:0;}.omm-timeline-row>i{width:10px;height:10px;border-radius:999px;background:#3b82c4;box-shadow:0 0 0 4px #dbeafe;}.omm-timeline-row strong{display:block;font-size:14px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.omm-timeline-row span{display:block;font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media(max-width:1280px){.omm-dashboard-v2 .omm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.omm-top-grid,.omm-monitor-grid,.omm-analytics-grid{grid-template-columns:1fr!important}.omm-month-chart{height:280px}.omm-month-item{height:232px}.omm-month-item span{height:170px}.omm-timeline{grid-template-columns:1fr}} @media(max-width:760px){.omm-dashboard-v2{gap:14px!important}.omm-dashboard-v2 .omm-kpis{grid-template-columns:1fr!important}.omm-card{padding:16px;border-radius:22px}.omm-card-head{display:grid;gap:10px}.omm-card-head .mini-link{width:100%;justify-content:center;text-align:center}.omm-month-chart{grid-template-columns:repeat(6,72px);height:250px;padding:14px}.omm-month-item{height:210px}.omm-month-item span{height:150px;width:38px}.omm-donut{width:180px;height:180px}.omm-donut:after{inset:26px}.omm-mini-stat-grid,.omm-category-grid{grid-template-columns:1fr}.omm-timeline-row{grid-template-columns:auto 1fr}.omm-timeline-row .status-chip{grid-column:2;justify-self:start}.omm-bar div{align-items:flex-start;flex-direction:column;gap:4px}} /* V73: whole-system UI polish, responsive balance, and compact storage release */ :root{ --mg-card-radius:24px; --mg-card-pad:clamp(16px,1.7vw,24px); --mg-gap:clamp(14px,1.6vw,20px); --mg-text:#0f172a; --mg-muted:#64748b; --mg-border:#e6edf6; --mg-soft:#f8fafc; --mg-green:#1f6b45; --mg-blue:#3b82c4; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-size:15px;line-height:1.55;color:var(--mg-text);} a{text-decoration:none;} .workspace{min-width:0;} .main-content{padding:clamp(18px,2.2vw,32px)!important;min-width:0;} .workspace-panel,.card,.chart-card,.dash-kpi,.profile-box,.manager-card,.report-card,.table-card,.section-card{ border-color:var(--mg-border)!important; border-radius:var(--mg-card-radius)!important; box-shadow:0 18px 46px rgba(15,23,42,.055)!important; min-width:0; } .workspace-panel{display:grid;gap:var(--mg-gap);} .card,.chart-card,.profile-box,.manager-card,.report-card,.section-card{padding:var(--mg-card-pad)!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;overflow:hidden;} .card h2,.chart-card h2,.section-card h2,.profile-box h2{font-size:clamp(19px,1.6vw,25px)!important;line-height:1.15!important;letter-spacing:-.035em!important;margin:0 0 6px!important;} .card p,.chart-card p,.section-card p,.profile-box p,.muted{font-size:clamp(13px,1vw,14px)!important;line-height:1.45!important;color:var(--mg-muted)!important;} .dashboard-kpis,.compact-kpis{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:14px!important;align-items:stretch!important;} .dash-kpi{padding:18px!important;overflow:hidden!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;} .dash-kpi span{font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#64748b!important;font-weight:950!important;} .dash-kpi strong{display:block!important;font-size:clamp(25px,2.45vw,36px)!important;line-height:1.05!important;letter-spacing:-.04em!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;} .dash-kpi small{font-size:12.5px!important;line-height:1.35!important;color:#64748b!important;} .analytics-grid,.role-chart-grid,.manager-grid,.report-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--mg-gap)!important;align-items:start!important;min-width:0!important;} .card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin-bottom:14px!important;} .card-head .mini-link,.mini-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;padding:9px 14px!important;min-height:38px!important;white-space:nowrap!important;font-size:13px!important;font-weight:900!important;background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #dbeafe!important;} .btn,.button,button[type=submit],input[type=submit]{min-height:44px;border-radius:15px!important;font-weight:900!important;letter-spacing:-.01em!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.2!important;} .hero-actions,.top-actions,.profile-top-menu,.action-row,.form-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center!important;justify-content:center!important;} .hero-actions .btn,.top-actions .btn,.profile-top-menu .btn,.action-row .btn,.form-actions .btn{flex:0 1 auto;min-width:150px;} input,select,textarea,.field{font-size:14.5px!important;border-radius:15px!important;min-width:0!important;} .table-wrap,.table-responsive,.scroll-table,.records-scroll,.payment-ticket-list,.data-scroll{max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;border-radius:18px;} .table-wrap,.table-responsive,.scroll-table,.records-scroll,.data-scroll{max-height:520px;} table{width:100%;border-collapse:collapse;min-width:720px;} th{position:sticky;top:0;z-index:2;background:#f8fafc!important;color:#64748b!important;font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;} td,th{padding:12px 13px!important;vertical-align:top!important;line-height:1.35!important;} td{font-size:14px!important;color:#1e293b!important;} .status-chip,.badge{border-radius:999px!important;padding:7px 11px!important;font-size:12px!important;font-weight:950!important;white-space:nowrap!important;} /* Better sidebar/header proportions */ .sidebar{width:300px!important;max-width:300px!important;} .brand{gap:12px!important;}.brand-logo img{width:52px!important;height:52px!important;object-fit:contain!important;}.brand-copy strong{font-size:15px!important}.brand-copy small{font-size:12px!important;line-height:1.25!important;} .profile-card{padding:14px!important;border-radius:19px!important;}.avatar,.profile-avatar{flex:0 0 auto;}.profile-meta strong,.profile-name{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.profile-meta small{font-size:12px!important;} .nav a,.nav-group-toggle{min-height:52px!important;border-radius:15px!important;font-size:14px!important;} .nav-icon{width:24px!important;text-align:center;} .app-header{gap:16px!important;padding:18px clamp(18px,2vw,30px)!important;min-width:0;} .page-heading h1{font-size:clamp(25px,2.2vw,34px)!important;letter-spacing:-.04em!important;line-height:1.05!important;}.page-heading p{font-size:13px!important;} .header-actions{gap:12px!important;min-width:0;}.header-search{width:min(470px,35vw)!important;min-width:240px!important;}.header-search input{height:48px!important;} .profile-chip{height:48px!important;border-radius:999px!important;padding:8px 13px!important;} /* Global chart/card upgrades */ .vertical-chart,.modern-bars,.timeline-mini,.role-timeline,.quick-list{min-width:0;overflow:auto;-webkit-overflow-scrolling:touch;} .vertical-chart{max-height:340px;} .modern-bars,.timeline-mini,.role-timeline,.quick-list{max-height:460px;padding-right:4px;} .interactive-bar,.timeline-row,.quick-list a,.quick-list .quick-item{border-radius:17px!important;min-width:0;} .bar-meta strong,.timeline-row strong,.quick-list strong{min-width:0;overflow:hidden;text-overflow:ellipsis;} /* Amounts must never break awkwardly */ .amount-large,.money,.currency,.dash-kpi strong,.summary-tile strong,.metric-card strong{font-variant-numeric:tabular-nums;overflow-wrap:normal!important;word-break:normal!important;} /* Compact mobile cards for table-heavy pages */ @media(max-width:1180px){ .analytics-grid,.role-chart-grid,.manager-grid,.report-grid{grid-template-columns:1fr!important;} .header-search{width:min(420px,42vw)!important;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{width:min(310px,86vw)!important;max-width:min(310px,86vw)!important;} .app-shell{grid-template-columns:1fr!important;} .app-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);display:grid!important;grid-template-columns:1fr;} .header-actions{display:grid!important;grid-template-columns:1fr auto!important;width:100%;} .header-search{width:100%!important;min-width:0!important;} .profile-name{display:none!important;} .burger{display:inline-grid!important;} } @media(max-width:700px){ body{font-size:14px;} .main-content{padding:14px!important;} .workspace-panel{gap:14px!important;} .card,.chart-card,.profile-box,.manager-card,.report-card,.section-card{padding:16px!important;border-radius:21px!important;} .dashboard-kpis,.compact-kpis{grid-template-columns:1fr!important;gap:12px!important;} .dash-kpi{padding:16px!important;} .dash-kpi strong{font-size:28px!important;} .card-head{display:grid!important;gap:10px!important;} .card-head .mini-link,.mini-link{width:100%;} .hero-actions,.top-actions,.profile-top-menu,.action-row,.form-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;} .hero-actions .btn,.top-actions .btn,.profile-top-menu .btn,.action-row .btn,.form-actions .btn{width:100%!important;min-width:0!important;} table{min-width:680px;} td,th{padding:10px 11px!important;font-size:13.5px!important;} .header-actions{grid-template-columns:1fr auto!important;} .page-heading h1{font-size:25px!important;} } @media(max-width:420px){ .main-content{padding:12px!important;} .app-header{padding:14px!important;} .header-search input{height:44px!important;font-size:13.5px!important;} .profile-chip{height:44px!important;padding:6px 9px!important;} } /* V74: PNP violator profile record search for offense checking */ .profile-record-search{ display:grid; grid-template-columns:minmax(260px,1fr) 150px auto; gap:10px; align-items:end; margin:0 0 14px; padding:14px; border:1px solid #e5edf7; border-radius:18px; background:linear-gradient(180deg,#fbfdff,#ffffff); } .profile-record-search label{display:grid;gap:7px;margin:0;} .profile-record-search label span{ font-size:12px!important; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#52627a; } .profile-record-search .input{min-height:46px!important;} .profile-record-search .btn{min-height:46px!important;white-space:nowrap;} .record-search-note{ margin:0 0 14px; padding:11px 13px; border-radius:15px; background:#ecfdf5; border:1px solid #bbf7d0; color:#14532d; font-size:13px; line-height:1.45; } .empty-search-result{ border:1px dashed #cbd5e1; background:#f8fafc; border-radius:18px; padding:18px; color:#334155; } .empty-search-result strong{display:block;color:#0f172a;margin-bottom:4px;font-size:15px;} .empty-search-result p{margin:0;font-size:13px;line-height:1.45;} .same-record-badge{background:#eef2ff!important;color:#17324d!important;} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .profile-record-search{grid-template-columns:1fr 1fr;} .profile-record-search label{grid-column:1/-1;} } @media(max-width:640px){ .profile-record-search{grid-template-columns:1fr;padding:12px;} .profile-record-search .btn{width:100%;} } /* V50: whole-system desktop gutter fix Prevents the fixed sidebar from visually touching or overlapping page content. Applies to all modules: Developer, Treasurer, PNP, Mayor/OMM. */ @media (min-width:901px){ :root{ --mg-sidebar-width:260px; --mg-content-gutter:22px; --mg-workspace-left:calc(var(--mg-sidebar-width) + var(--mg-content-gutter)); } .sidebar{ width:var(--mg-sidebar-width)!important; } .workspace{ margin-left:var(--mg-workspace-left)!important; width:calc(100% - var(--mg-workspace-left))!important; max-width:calc(100vw - var(--mg-workspace-left))!important; min-width:0!important; overflow-x:hidden!important; } .app-header{ padding-left:30px!important; padding-right:30px!important; border-left:1px solid rgba(226,232,240,.75)!important; } .main-content{ padding-left:30px!important; padding-right:30px!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } .page-heading, .header-actions, .card, .grid, .workspace-panel, .law-page, .law-workspace, .law-hero, .form-grid, .table-wrap, .table-responsive{ min-width:0!important; max-width:100%!important; } .page-heading h1{ line-height:1.18!important; overflow-wrap:anywhere!important; } } /* Extra-safe spacing for wide developer screens and pages with long titles/forms. */ @media (min-width:1280px){ .main-content{padding-left:34px!important;padding-right:34px!important;} .app-header{padding-left:34px!important;padding-right:34px!important;} } /* Keep mobile unchanged: sidebar collapses and content uses full width. */ @media (max-width:900px){ .workspace{width:100%!important;max-width:100%!important;margin-left:0!important;} } /* V51: whole-system header alignment polish Keeps the top title, search box, and profile chip aligned inside the same content box on every role page. This removes the oversized desktop gap while keeping safe spacing from the fixed sidebar. */ @media (min-width:901px){ :root{ --mg-sidebar-width:260px; --mg-page-pad:clamp(24px,2.4vw,34px); } .sidebar{width:var(--mg-sidebar-width)!important;} .workspace{ margin-left:var(--mg-sidebar-width)!important; width:calc(100% - var(--mg-sidebar-width))!important; max-width:calc(100vw - var(--mg-sidebar-width))!important; min-width:0!important; overflow-x:hidden!important; } .app-header{ min-height:76px!important; padding:14px var(--mg-page-pad)!important; display:grid!important; grid-template-columns:minmax(230px,1fr) minmax(360px,auto)!important; align-items:center!important; justify-content:stretch!important; gap:20px!important; border-left:0!important; } .page-heading{min-width:0!important;align-self:center!important;} .page-heading h1{ margin:0!important; font-size:clamp(24px,1.9vw,30px)!important; line-height:1.1!important; letter-spacing:-.035em!important; white-space:normal!important; } .header-actions{ min-width:0!important; width:100%!important; max-width:720px!important; margin-left:auto!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:14px!important; } .header-search{ flex:1 1 360px!important; width:auto!important; max-width:520px!important; min-width:260px!important; height:44px!important; } .profile-menu{flex:0 0 auto!important;min-width:0!important;} .profile-chip{height:44px!important;max-width:220px!important;} .main-content{ padding-left:var(--mg-page-pad)!important; padding-right:var(--mg-page-pad)!important; } } @media (min-width:901px) and (max-width:1180px){ .app-header{grid-template-columns:minmax(200px,.9fr) minmax(300px,1fr)!important;gap:14px!important;} .header-actions{max-width:560px!important;} .header-search{min-width:220px!important;max-width:390px!important;} .profile-chip{max-width:170px!important;} } @media (max-width:900px){ .app-header{align-items:center!important;} .header-actions{align-items:center!important;} } /* V52: Whole-system sidebar improvement Cleaner sidebar sizes for every role and compact inline Developer sections. Developer no longer uses large side hover flyouts; sections open neatly inside the sidebar. */ @media (min-width:901px){ :root{ --mg-sidebar-width:260px; } .sidebar{ width:var(--mg-sidebar-width)!important; padding:16px 12px!important; gap:11px!important; overflow:hidden!important; } .brand{padding:6px 6px 8px!important;gap:10px!important;} .brand img{width:42px!important;height:42px!important;border-radius:14px!important;} .brand strong{font-size:14px!important;line-height:1.15!important;} .brand small{font-size:11px!important;line-height:1.22!important;max-width:170px!important;} .profile-card{padding:10px 11px!important;border-radius:16px!important;min-height:62px!important;} .avatar,.profile-avatar{width:38px!important;height:38px!important;border-radius:13px!important;} .profile-meta strong{font-size:13px!important;line-height:1.2!important;} .profile-meta small{font-size:11px!important;} .nav-scroll{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; padding:0 3px 6px 0!important; } .nav a,.role-nav a,.pnp-single-nav a{ min-height:43px!important; padding:9px 11px!important; border-radius:13px!important; font-size:13px!important; line-height:1.15!important; gap:9px!important; box-shadow:none!important; } .nav-icon{width:18px!important;font-size:12px!important;} .nav-title,.nav-section-label{ margin:7px 8px 6px!important; font-size:9.5px!important; letter-spacing:.13em!important; line-height:1.2!important; } .nav-bottom{padding-top:8px!important;} .nav-bottom a{min-height:42px!important;} /* Developer compact accordion, not oversized flyout */ .developer-nav{ display:grid!important; gap:7px!important; overflow-y:auto!important; overflow-x:hidden!important; padding-right:4px!important; } .developer-nav .nav-group{ position:static!important; margin:0!important; z-index:auto!important; isolation:auto!important; } .developer-nav .nav-group-toggle{ width:100%!important; height:43px!important; min-height:43px!important; padding:0 12px!important; border-radius:14px!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.06)!important; color:#d8e2f2!important; text-transform:none!important; letter-spacing:0!important; font-size:13px!important; font-weight:900!important; box-shadow:none!important; } .developer-nav .nav-group-toggle span{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .developer-nav .nav-group-toggle b{ transform:rotate(90deg)!important; font-size:13px!important; opacity:.75!important; transition:transform .18s ease!important; } .developer-nav .nav-group.open>.nav-group-toggle, .developer-nav .nav-group.flyout-open>.nav-group-toggle{ background:linear-gradient(135deg,#17324d,#1f6b45)!important; color:#fff!important; } .developer-nav .nav-group.open>.nav-group-toggle b, .developer-nav .nav-group.flyout-open>.nav-group-toggle b{ transform:rotate(270deg)!important; opacity:1!important; } .developer-nav .nav-group-items, .developer-nav .nav-group:hover .nav-group-items, .developer-nav .nav-group.open:hover .nav-group-items{ position:static!important; left:auto!important; top:auto!important; min-width:0!important; max-width:none!important; width:100%!important; max-height:none!important; padding:6px 0 2px 10px!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; display:none!important; overflow:visible!important; } .developer-nav .nav-group-items:before{display:none!important;} .developer-nav .nav-group.open .nav-group-items, .developer-nav .nav-group.flyout-open .nav-group-items{ display:grid!important; gap:5px!important; } .developer-nav .nav-group-items a{ min-height:38px!important; padding:8px 10px!important; border-radius:12px!important; font-size:12.5px!important; background:rgba(255,255,255,.035)!important; border:1px solid rgba(255,255,255,.035)!important; } .developer-nav .nav-group-items a:hover, .developer-nav .nav-group-items a.active{ background:linear-gradient(135deg,#17324d,#3b82c4 65%,#1f6b45)!important; color:#fff!important; } } @media (max-width:900px){ .sidebar{width:min(270px,86vw)!important;padding:15px 12px!important;gap:11px!important;} .nav-scroll{overflow-y:auto!important;overflow-x:hidden!important;} .nav a,.role-nav a,.pnp-single-nav a{min-height:44px!important;padding:10px 12px!important;font-size:13px!important;border-radius:13px!important;} .developer-nav .nav-group-toggle{height:44px!important;min-height:44px!important;font-size:13px!important;border-radius:13px!important;padding:0 12px!important;} .developer-nav .nav-group-items{position:static!important;padding:6px 0 2px 10px!important;background:transparent!important;border:0!important;box-shadow:none!important;} .developer-nav .nav-group-items a{min-height:40px!important;font-size:12.5px!important;padding:9px 10px!important;} } /* V53: Developer desktop sidebar hover flyouts on the right side. Menus no longer expand downward on desktop; they pop out beside the sidebar, stay fully visible within the viewport, and keep compact readable sizing. */ @media (min-width:901px){ .sidebar{overflow:visible!important;z-index:1000!important;} .nav-scroll{overflow:visible!important;} .developer-nav{overflow:visible!important;position:relative!important;} .developer-nav .nav-group{position:relative!important;z-index:auto!important;isolation:auto!important;} .developer-nav .nav-group:hover, .developer-nav .nav-group.flyout-open{z-index:3000!important;} .developer-nav .nav-group-toggle{cursor:pointer!important;} .developer-nav .nav-group-toggle b{transform:rotate(0deg)!important;} .developer-nav .nav-group.open>.nav-group-toggle b, .developer-nav .nav-group.flyout-open>.nav-group-toggle b, .developer-nav .nav-group:hover>.nav-group-toggle b{transform:rotate(0deg) translateX(2px)!important;} .developer-nav .nav-group-items, .developer-nav .nav-group.open .nav-group-items, .developer-nav .nav-group.open:hover .nav-group-items{ position:absolute!important; left:calc(100% + 12px)!important; top:50%!important; transform:translateY(-50%)!important; width:260px!important; min-width:260px!important; max-width:280px!important; max-height:calc(100vh - 36px)!important; overflow-y:auto!important; overflow-x:hidden!important; padding:10px!important; margin:0!important; border-radius:18px!important; border:1px solid rgba(255,255,255,.14)!important; background:linear-gradient(180deg,rgba(9,18,36,.98),rgba(14,25,47,.98))!important; box-shadow:0 24px 70px rgba(2,6,23,.42)!important; backdrop-filter:blur(18px)!important; display:none!important; gap:6px!important; } .developer-nav .nav-group-items:before{ content:""!important; display:block!important; position:absolute!important; left:-14px!important; top:0!important; width:14px!important; height:100%!important; } .developer-nav .nav-group:hover .nav-group-items, .developer-nav .nav-group.flyout-open .nav-group-items{ display:grid!important; } .developer-nav .nav-group-items a{ min-height:39px!important; padding:9px 10px!important; border-radius:12px!important; font-size:12.5px!important; line-height:1.18!important; white-space:normal!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.055)!important; } .developer-nav .nav-group-items a:hover, .developer-nav .nav-group-items a.active{ background:linear-gradient(135deg,#17324d,#3b82c4 60%,#1f6b45)!important; color:#fff!important; } .developer-nav .nav-group-items::-webkit-scrollbar{width:6px!important;} .developer-nav .nav-group-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)!important;border-radius:999px!important;} } /* V54: Final Developer sidebar right-side flyout fix. Active groups no longer expand downward inside the sidebar on desktop. Submenus are fixed to the right edge of the sidebar, viewport-aware, and compact. */ @media (min-width:901px){ .developer-nav .nav-group.active-group > .nav-group-toggle, .developer-nav .nav-group:hover > .nav-group-toggle, .developer-nav .nav-group.flyout-open > .nav-group-toggle{ background:linear-gradient(135deg,#17324d,#1f6b45)!important; color:#fff!important; } .developer-nav .nav-group.active-group > .nav-group-toggle b, .developer-nav .nav-group:hover > .nav-group-toggle b, .developer-nav .nav-group.flyout-open > .nav-group-toggle b{ transform:rotate(0deg) translateX(2px)!important; opacity:1!important; } .developer-nav .nav-group > .nav-group-items, .developer-nav .nav-group.open > .nav-group-items, .developer-nav .nav-group.active-group > .nav-group-items{ position:fixed!important; left:calc(var(--mg-sidebar-width,260px) + 12px)!important; top:var(--mg-flyout-top,120px)!important; transform:none!important; width:270px!important; min-width:270px!important; max-width:290px!important; max-height:min(70vh,520px)!important; overflow-y:auto!important; overflow-x:hidden!important; padding:10px!important; margin:0!important; border-radius:18px!important; border:1px solid rgba(148,163,184,.24)!important; background:linear-gradient(180deg,rgba(9,18,36,.98),rgba(14,25,47,.98))!important; box-shadow:0 24px 70px rgba(2,6,23,.38)!important; backdrop-filter:blur(18px)!important; display:none!important; gap:6px!important; z-index:5000!important; } .developer-nav .nav-group > .nav-group-items:before{ content:""!important; display:block!important; position:absolute!important; left:-14px!important; top:0!important; width:14px!important; height:100%!important; } .developer-nav .nav-group:hover > .nav-group-items, .developer-nav .nav-group.flyout-open > .nav-group-items{ display:grid!important; } .developer-nav .nav-group > .nav-group-items a{ min-height:40px!important; padding:9px 10px!important; border-radius:12px!important; font-size:12.5px!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.055)!important; } .developer-nav .nav-group > .nav-group-items a:hover, .developer-nav .nav-group > .nav-group-items a.active{ background:linear-gradient(135deg,#17324d,#3b82c4 60%,#1f6b45)!important; color:#fff!important; } } @media (max-width:900px){ .developer-nav .nav-group.active-group > .nav-group-items{display:grid!important;} } /* V25 whole-system responsive safety pass: prevent tables/cards from overflowing on large screens and phones */ .workspace,.main-content,.card,.grid,.manager-grid,.report-grid,.analytics-grid,.dashboard-kpis{min-width:0!important;} .main-content{max-width:100%;overflow-x:hidden!important;} .card{max-width:100%;} .table-wrap,.print-table-wrap,.data-table-wrap,.records-scroll,.scroll-table{max-width:100%;overflow-x:auto;} .table,.data-table{width:100%;} .table th,.table td,.data-table th,.data-table td{overflow-wrap:anywhere;word-break:normal;} .actions{min-width:0;} .actions .btn{white-space:normal;} .form-grid input,.form-grid select,.form-grid textarea,.topbar input,.topbar select{min-width:0;} @media(max-width:760px){ .card{padding:16px!important;border-radius:20px!important;} .form-grid{gap:12px!important;} .topbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;} .topbar .btn,.topbar input,.topbar select{width:100%!important;} .actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%;} .actions .btn{width:100%;min-height:42px;} } /* LGU-MDVMS receipt layout fix: keep Payment / OR Record readable and prevent horizontal overflow */ .receipt-card{max-width:100%;overflow:hidden}.receipt-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.receipt-title-row h2{font-size:22px;margin:0 0 8px}.receipt-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 18px}.receipt-meta-item{border:1px solid #e6ecf3;background:#f8fafc;border-radius:16px;padding:12px 14px;min-width:0}.receipt-meta-item span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;font-weight:900;margin-bottom:4px}.receipt-meta-item strong{display:block;font-size:14px;color:#0f172a;line-height:1.35;overflow-wrap:anywhere}.receipt-meta-wide{grid-column:span 2}.receipt-table-wrap{width:100%;overflow:hidden;border:1px solid #e8eef6;border-radius:18px;background:#fff;margin-top:8px}.receipt-table{table-layout:fixed;width:100%;min-width:0}.receipt-table th{background:#f8fafc;color:#64748b;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:950;white-space:normal}.receipt-table th,.receipt-table td{padding:14px 14px}.receipt-col-violation{width:68%}.receipt-col-offense{width:17%}.receipt-col-amount{width:15%}.receipt-violation-cell{min-width:0}.receipt-main-line{font-weight:900;color:#0f172a;line-height:1.35;overflow-wrap:anywhere}.receipt-citation{display:inline-flex;margin-top:6px;background:#eff6ff;color:#1e40af;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:950}.receipt-sub-line{margin-top:7px;color:#475569;font-size:13px;line-height:1.45;overflow-wrap:anywhere}.receipt-link{display:inline-block;margin-top:7px;font-size:13px;font-weight:850;color:#1f6b45}.receipt-offense-cell{font-weight:800;color:#0f172a;line-height:1.35}.receipt-amount-cell{text-align:right;font-weight:950;color:#0f172a;white-space:nowrap}.receipt-total-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 4px}.receipt-total-box>div{border:1px solid #e6ecf3;background:#fbfdff;border-radius:16px;padding:13px 15px}.receipt-total-box span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;font-weight:900;margin-bottom:5px}.receipt-total-box strong{display:block;font-size:18px;line-height:1.25;color:#0f172a;overflow-wrap:anywhere}.receipt-total-box>div:first-child strong{font-size:22px;color:#14532d}.receipt-actions{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid #e8eef6}.receipt-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center} @media(max-width:980px){.receipt-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.receipt-meta-wide{grid-column:span 2}.receipt-col-violation{width:60%}.receipt-col-offense{width:20%}.receipt-col-amount{width:20%}} @media(max-width:700px){.receipt-card{padding:18px}.receipt-title-row h2{font-size:20px}.receipt-meta-grid,.receipt-total-box{grid-template-columns:1fr}.receipt-meta-wide{grid-column:auto}.receipt-table-wrap{border:0;background:transparent}.receipt-table,.receipt-table thead,.receipt-table tbody,.receipt-table tr,.receipt-table th,.receipt-table td{display:block;width:100%}.receipt-table thead{display:none}.receipt-table tr{border:1px solid #e8eef6;background:#fff;border-radius:16px;padding:12px;margin-bottom:12px}.receipt-table td{border:0;padding:6px 4px}.receipt-offense-cell:before{content:'Offense: ';font-weight:900;color:#64748b}.receipt-amount-cell{text-align:left}.receipt-amount-cell:before{content:'Amount Paid: ';font-weight:900;color:#64748b}.receipt-actions{display:grid;grid-template-columns:1fr}.receipt-actions .btn{width:100%}} /* V57: Developer sidebar no-dropdown final Developer navigation is now a flat direct list: no accordion, no hover flyout, no open submenu. */ .developer-flat-nav{ display:block!important; overflow-y:auto!important; overflow-x:hidden!important; padding-right:4px!important; } .developer-flat-nav .developer-section-label{ margin:12px 8px 6px!important; padding:0!important; color:#8fa2c3!important; font-size:9.5px!important; line-height:1.2!important; letter-spacing:.14em!important; text-transform:uppercase!important; font-weight:950!important; } .developer-flat-nav a{ display:flex!important; align-items:center!important; gap:9px!important; min-height:40px!important; padding:8px 11px!important; margin:0 0 5px!important; border-radius:13px!important; font-size:12.8px!important; line-height:1.18!important; white-space:normal!important; box-shadow:none!important; } .developer-flat-nav a span:last-child{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; } .developer-flat-nav .nav-icon{ width:18px!important; flex:0 0 18px!important; text-align:center!important; font-size:12px!important; } .developer-flat-nav .nav-group, .developer-flat-nav .nav-group-toggle, .developer-flat-nav .nav-group-items{ display:none!important; } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .developer-flat-nav a{min-height:42px!important;font-size:13px!important;} } /* V58: Developer sidebar right-flyout final behavior. Desktop: groups stay compact in sidebar and submenus only pop on the right on hover/click. It must not open downward or overlap inside the sidebar. Mobile/tablet: touch-friendly accordion. */ .developer-flyout-nav{ display:grid!important; gap:8px!important; padding-right:4px!important; overflow-y:auto!important; overflow-x:visible!important; } .developer-flyout-nav .nav-section-label{display:none!important;} .developer-flyout-nav .nav-group{ position:relative!important; margin:0!important; z-index:auto!important; } .developer-flyout-nav .nav-group-toggle{ width:100%!important; min-height:46px!important; height:46px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; padding:0 13px!important; border-radius:15px!important; border:1px solid rgba(255,255,255,.07)!important; background:rgba(255,255,255,.045)!important; color:#e5edf9!important; font:inherit!important; font-size:13.8px!important; font-weight:900!important; line-height:1.15!important; text-align:left!important; cursor:pointer!important; box-shadow:none!important; } .developer-flyout-nav .nav-group-toggle span{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .developer-flyout-nav .nav-group-toggle b{ font-size:18px!important; line-height:1!important; opacity:.85!important; transform:none!important; } .developer-flyout-nav .nav-group.active-group>.nav-group-toggle, .developer-flyout-nav .nav-group:hover>.nav-group-toggle, .developer-flyout-nav .nav-group.flyout-open>.nav-group-toggle{ color:#fff!important; background:linear-gradient(135deg,#17324d,#3b82c4 55%,#1f6b45)!important; border-color:rgba(255,255,255,.13)!important; } .developer-flyout-nav .nav-group.active-group>.nav-group-toggle b, .developer-flyout-nav .nav-group:hover>.nav-group-toggle b, .developer-flyout-nav .nav-group.flyout-open>.nav-group-toggle b{ transform:translateX(2px)!important; opacity:1!important; } @media (min-width:901px){ .sidebar, #appSidebar{ overflow:visible!important; z-index:4000!important; } .developer-flyout-nav, .developer-flyout-nav.nav-scroll{ overflow:visible!important; position:relative!important; } .developer-flyout-nav .nav-group:hover, .developer-flyout-nav .nav-group.flyout-open{ z-index:6000!important; } .developer-flyout-nav .nav-group > .nav-group-items, .developer-flyout-nav .nav-group.open > .nav-group-items, .developer-flyout-nav .nav-group.active-group > .nav-group-items{ position:fixed!important; left:var(--developer-flyout-left, 292px)!important; top:var(--developer-flyout-top, 120px)!important; transform:none!important; width:270px!important; min-width:270px!important; max-width:min(300px, calc(100vw - 320px))!important; max-height:min(440px, calc(100vh - 28px))!important; display:none!important; grid-template-columns:1fr!important; gap:7px!important; padding:10px!important; margin:0!important; overflow-y:auto!important; overflow-x:hidden!important; border-radius:18px!important; border:1px solid rgba(148,163,184,.24)!important; background:linear-gradient(180deg,rgba(8,17,34,.985),rgba(14,25,47,.985))!important; box-shadow:0 24px 70px rgba(2,6,23,.45)!important; backdrop-filter:blur(16px)!important; z-index:7000!important; } .developer-flyout-nav .nav-group > .nav-group-items:before{ content:""!important; position:absolute!important; left:-14px!important; top:0!important; width:14px!important; height:100%!important; display:block!important; } .developer-flyout-nav .nav-group:hover > .nav-group-items, .developer-flyout-nav .nav-group.flyout-open > .nav-group-items{ display:grid!important; } .developer-flyout-nav .nav-group > .nav-group-items a{ min-height:40px!important; display:flex!important; align-items:center!important; gap:9px!important; padding:9px 10px!important; border-radius:12px!important; color:#dce7f7!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.055)!important; font-size:12.6px!important; font-weight:850!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; text-decoration:none!important; } .developer-flyout-nav .nav-group > .nav-group-items a:hover, .developer-flyout-nav .nav-group > .nav-group-items a.active{ color:#fff!important; background:linear-gradient(135deg,#17324d,#3b82c4 60%,#1f6b45)!important; } .developer-flyout-nav .nav-icon{ width:18px!important; flex:0 0 18px!important; text-align:center!important; font-size:12px!important; } .developer-flyout-nav .nav-group-items::-webkit-scrollbar{width:6px!important;} .developer-flyout-nav .nav-group-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)!important;border-radius:999px!important;} } @media (max-width:900px){ .developer-flyout-nav{overflow-y:auto!important;overflow-x:hidden!important;gap:7px!important;} .developer-flyout-nav .nav-group > .nav-group-items{ position:static!important; display:none!important; width:100%!important; max-height:none!important; padding:6px 0 2px 10px!important; margin:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; } .developer-flyout-nav .nav-group.open > .nav-group-items, .developer-flyout-nav .nav-group.flyout-open > .nav-group-items, .developer-flyout-nav .nav-group.active-group > .nav-group-items{ display:grid!important; gap:5px!important; } .developer-flyout-nav .nav-group-items a{ min-height:40px!important; padding:9px 10px!important; border-radius:12px!important; font-size:12.5px!important; background:rgba(255,255,255,.035)!important; } } /* V80 Modern System Upgrade: mobile-first, responsive, accessible, compact professional UI */ .skip-link{position:absolute;left:-999px;top:8px;z-index:9999;background:#fff;color:var(--ink);border:2px solid var(--green);border-radius:12px;padding:10px 14px;font-weight:800}.skip-link:focus{left:12px}.app-body{min-width:0}.main-content:focus{outline:none}.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:5px}.breadcrumb a{color:var(--green2)}.header-back{white-space:nowrap}.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:none}.btn-ghost:hover{border-color:rgba(47,105,53,.35);color:var(--green)} .card,.auth-card,.stat-card,.metric-card,.summary-tile,.dash-kpi,.chart-card,.history-card,.timeline-card,.role-action-card{border-radius:22px;border:1px solid rgba(226,232,240,.95);box-shadow:0 12px 34px rgba(15,23,42,.06)}.card h2,.card h3{letter-spacing:-.02em}.btn{min-height:40px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;line-height:1.1}.actions{gap:10px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;min-height:24px;padding:5px 10px;font-weight:800;font-size:12px;line-height:1}.flash{border-radius:16px;border:1px solid rgba(226,232,240,.95);box-shadow:0 10px 26px rgba(15,23,42,.06);font-weight:700}.flash-success{background:#ecfdf3;color:#1f6b45;border-color:#bbf7d0}.flash-error,.flash-danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}.flash-warning,.flash-warn{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.flash-info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe} input.input,select,textarea,.field,.input{min-height:42px;border:1px solid #dbe3ea;border-radius:13px;background:#fff;color:var(--ink);font-size:14px}textarea{min-height:105px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full,label.full{grid-column:1/-1}label span,.form-label{font-size:12px;font-weight:800;color:#374151;letter-spacing:.01em}.required::after,label:has([required])>span::after{content:' *';color:#d95d4f}.input:focus,.field:focus,select:focus,textarea:focus{outline:3px solid rgba(11,122,75,.16);border-color:rgba(11,122,75,.55)}.input[aria-invalid="true"],.field[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#d95d4f;outline:3px solid rgba(220,38,38,.12)}.field-error{font-size:12px;color:#b63e34;font-weight:750;margin-top:5px} .table-wrap,.report-register-wrap,.filed-table-wrap,.vp-scroll,.records-scroll,.data-scroll{width:100%;overflow:auto;max-width:100%;border-radius:18px;-webkit-overflow-scrolling:touch}.table,.vp-table{width:100%;border-collapse:separate;border-spacing:0}.table th,.table td,.vp-table th,.vp-table td{vertical-align:middle}.table thead th,.vp-table thead th,.report-register thead th{position:sticky;top:0;z-index:2;background:#f8fafc}.table tbody tr:hover,.vp-table tbody tr:hover{background:#fbfdf8}.empty-state{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:22px;padding:28px;text-align:center;color:var(--muted)}.empty-state h3{margin:8px 0 6px;color:var(--ink)}.empty-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:#fff;border:1px solid var(--line);font-size:24px}.empty-actions{margin-top:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.smart-empty-row td{text-align:center!important;padding:22px!important;color:var(--muted)!important;font-weight:750!important}.clickable-surface:focus{outline:3px solid rgba(11,122,75,.22);outline-offset:3px} .toast-stack{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:9999;pointer-events:none}.toast{background:#0f172a;color:white;border-radius:16px;padding:12px 14px;box-shadow:0 14px 40px rgba(15,23,42,.22);font-weight:750;max-width:min(360px,calc(100vw - 32px));opacity:0;transform:translateY(10px);transition:.22s ease}.toast.show{opacity:1;transform:none}.toast.success{background:#1f6b45}.toast.error{background:#991b1b}.toast.warn{background:#9a3412} .filter-bar,.filters,.search-panel,.report-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.filter-bar .input,.filters .input,.search-panel .input,.report-filters .input{min-width:min(220px,100%)}.kpi-grid,.stats-grid,.dashboard-grid,.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.chart-grid,.reports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.profile-chip{min-width:0}.profile-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-copy strong,.brand-copy small{display:block;line-height:1.15}.brand-logo img,.auth-logo,img{max-width:100%;height:auto}.app-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(248,250,247,.86)} @media (max-width:1100px){.header-search{min-width:0;flex:1}.profile-name{display:none}.app-header{gap:12px}.header-actions{gap:8px}} @media (max-width:900px){body.body-lock{overflow:hidden}.app-shell{display:block}.sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);transform:translateX(-105%);z-index:80;transition:transform .24s ease}.sidebar.is-open{transform:translateX(0)}.mobile-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);opacity:0;pointer-events:none;z-index:70;transition:.2s}.mobile-backdrop.is-open{opacity:1;pointer-events:auto}.workspace{min-width:0}.app-header{padding:12px 14px;align-items:flex-start}.page-heading h1{font-size:clamp(22px,6vw,30px)}.header-actions{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center}.header-search{grid-column:1/-1;order:2;width:100%}.header-back{display:none}.burger{display:inline-flex}.main-content{padding:14px}.form-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr!important}.card{padding:16px;border-radius:18px}.actions .btn,.btn{min-height:44px}.nav-group-items{position:static!important;max-height:none!important}.developer-nav .nav-group .nav-group-items{display:none}.developer-nav .nav-group.open .nav-group-items,.developer-nav .nav-group.active-group .nav-group-items{display:block}} @media (max-width:700px){.table-wrap,.report-register-wrap,.filed-table-wrap,.vp-scroll{overflow:visible}.table.responsive-ready,.vp-table.responsive-ready,.report-register.responsive-ready{display:block;border-spacing:0}.table.responsive-ready thead,.vp-table.responsive-ready thead,.report-register.responsive-ready thead{display:none}.table.responsive-ready tbody,.table.responsive-ready tr,.table.responsive-ready td,.vp-table.responsive-ready tbody,.vp-table.responsive-ready tr,.vp-table.responsive-ready td,.report-register.responsive-ready tbody,.report-register.responsive-ready tr,.report-register.responsive-ready td{display:block;width:100%}.table.responsive-ready tr,.vp-table.responsive-ready tr,.report-register.responsive-ready tr{background:#fff;border:1px solid var(--line);border-radius:18px;margin:0 0 12px;padding:12px;box-shadow:0 10px 24px rgba(15,23,42,.05)}.table.responsive-ready td,.vp-table.responsive-ready td,.report-register.responsive-ready td{border:0!important;padding:8px 4px!important;display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:10px;align-items:start;text-align:left!important}.table.responsive-ready td::before,.vp-table.responsive-ready td::before,.report-register.responsive-ready td::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:900}.table.responsive-ready td:empty,.vp-table.responsive-ready td:empty,.report-register.responsive-ready td:empty{display:none}.table.responsive-ready td:last-child,.vp-table.responsive-ready td:last-child{padding-bottom:0!important}.table.responsive-ready td:last-child .btn,.vp-table.responsive-ready td:last-child .btn{width:100%;margin-top:4px}.desktop-table{display:table}.mobile-card-list{display:grid;gap:12px}.auth-card{width:calc(100vw - 24px);padding:26px 22px;border-radius:24px}.auth-page{place-items:start center;padding-top:24px}.filter-bar,.filters,.search-panel,.report-filters{display:grid;grid-template-columns:1fr;width:100%}.filter-bar .btn,.filters .btn,.search-panel .btn,.report-filters .btn{width:100%}.toast-stack{right:12px;left:12px;bottom:12px}.toast{max-width:none}.breadcrumb{font-size:11px}.summary-grid,.kpi-grid,.stats-grid{grid-template-columns:1fr 1fr}.chart-grid,.reports-grid{grid-template-columns:1fr}} @media (max-width:430px){.main-content{padding:10px}.app-header{padding:10px}.summary-grid,.kpi-grid,.stats-grid{grid-template-columns:1fr}.btn{width:100%}.actions{display:grid;grid-template-columns:1fr;width:100%}.page-heading p{font-size:13px}.table.responsive-ready td,.vp-table.responsive-ready td,.report-register.responsive-ready td{grid-template-columns:1fr;gap:4px}.brand-copy small{display:none}} @media print{.sidebar,.app-header,.mobile-backdrop,.toast-stack,.skip-link,.btn,.actions.no-print{display:none!important}.workspace,.main-content{padding:0!important;margin:0!important}.card{box-shadow:none;border:1px solid #ddd}.table-wrap{overflow:visible}.table thead th{position:static}.app-shell{display:block}body{background:white;color:#111}} /* V81: Proper responsive header + hamburger placement Fixes mobile header where avatar and hamburger dropped under the title. */ .header-menu-btn{display:none!important;flex:0 0 auto;} .app-header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:16px!important; } .app-header .page-heading{flex:1 1 auto;min-width:0;} .app-header .header-actions{flex:0 1 auto;} .burger{ position:relative; border:1px solid #dfe6f0!important; background:linear-gradient(180deg,#ffffff,#f8fafc)!important; color:#0f172a!important; box-shadow:0 10px 24px rgba(15,23,42,.075)!important; } .burger span{transition:transform .2s ease,opacity .2s ease,background .2s ease;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .workspace{margin-left:0!important;} .app-header{ display:flex!important; grid-template-columns:none!important; min-height:62px!important; padding:10px 12px!important; gap:10px!important; border-bottom:1px solid #e8edf5!important; background:rgba(255,255,255,.96)!important; } .header-menu-btn{ display:inline-flex!important; width:44px!important; height:44px!important; border-radius:14px!important; align-items:center!important; justify-content:center!important; flex-direction:column!important; gap:5px!important; order:1!important; } .app-header .page-heading{ order:2!important; flex:1 1 auto!important; min-width:0!important; } .app-header .breadcrumb{display:none!important;} .app-header .page-heading h1{ font-size:clamp(18px,5vw,22px)!important; line-height:1.1!important; margin:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; letter-spacing:-.03em!important; } .app-header .page-heading p{display:none!important;} .app-header .header-actions{ order:3!important; display:flex!important; width:auto!important; min-width:0!important; margin-left:0!important; gap:8px!important; justify-content:flex-end!important; align-items:center!important; } .app-header .header-search, .app-header .header-back{display:none!important;} .app-header .profile-menu{display:flex!important;align-items:center!important;gap:0!important;} .app-header .profile-chip{ width:44px!important; height:44px!important; padding:0!important; border-radius:14px!important; display:grid!important; place-items:center!important; background:linear-gradient(180deg,#fff,#f8fafc)!important; box-shadow:0 10px 24px rgba(15,23,42,.075)!important; } .app-header .profile-chip .profile-avatar{ width:34px!important; height:34px!important; border-radius:12px!important; font-size:14px!important; } .app-header .profile-name{display:none!important;} .main-content{padding-top:14px!important;} } @media(max-width:480px){ .app-header{padding:9px 10px!important;gap:8px!important;} .header-menu-btn,.app-header .profile-chip{width:42px!important;height:42px!important;border-radius:13px!important;} .app-header .page-heading h1{font-size:19px!important;} } /* V82: global responsive cleanup, proper device layouts, cleaner header/menu */ :root{--tap:44px;--header-h:76px;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{overflow-x:hidden;} img,svg,video,canvas{max-width:100%;height:auto;} .workspace,.main-content,.workspace-panel,.card,.chart-card,.table-wrap,.report-table-wrap{min-width:0;} .app-header{min-height:var(--header-h)!important;padding:12px clamp(16px,2vw,28px)!important;gap:16px!important;display:grid!important;grid-template-columns:minmax(170px,.85fr) minmax(360px,1.15fr)!important;align-items:center!important;} .page-heading{display:grid;gap:4px;} .page-heading h1{font-size:clamp(22px,1.9vw,30px)!important;line-height:1.05!important;max-width:100%;} .breadcrumb{font-size:13px;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis;} .header-actions{min-width:0!important;width:100%;display:grid!important;grid-template-columns:auto minmax(220px,1fr) auto!important;gap:12px!important;justify-content:stretch!important;align-items:center!important;} .header-back{min-height:44px!important;padding:0 18px!important;white-space:nowrap;} .header-search{width:100%!important;min-width:0!important;height:48px!important;} .profile-chip{height:48px!important;max-width:230px;} .profile-name{max-width:130px;} .btn,.nav a,.nav-group-toggle,.input,select,textarea,button{min-height:var(--tap);} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;} .sidebar{overflow:hidden;} .nav-scroll{max-height:calc(100vh - 260px);} .nav a{min-height:46px;} .nav-section-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;align-items:stretch;} .dash-kpi{min-height:142px;display:flex;flex-direction:column;justify-content:center;} .role-action-card{display:grid!important;grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr)!important;align-items:center!important;gap:18px!important;} .role-action-card p{max-width:560px;margin-bottom:0!important;} .hero-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:12px!important;width:100%;} .hero-actions .btn{width:100%;} .card,.chart-card,.dash-kpi,.role-action-card{overflow:hidden;} .table-wrap,.report-table-wrap{overflow:auto;border-radius:18px;} .table th{position:sticky;top:0;background:#fff;z-index:1;} .table td,.table th{word-break:normal;} .empty-state{display:grid;place-items:center;text-align:center;gap:6px;} small.muted,.muted small{line-height:1.35;} @media(max-width:1280px){ .app-header{grid-template-columns:minmax(170px,.7fr) minmax(300px,1.3fr)!important;} .header-actions{grid-template-columns:auto minmax(180px,1fr) auto!important;} .profile-name{display:none;} } @media(max-width:1024px){ .app-header{grid-template-columns:minmax(160px,.65fr) minmax(260px,1.35fr)!important;} .header-back{padding:0 14px!important;} .role-action-card{grid-template-columns:1fr!important;align-items:stretch!important;} .analytics-grid,.report-grid,.billing-layout{grid-template-columns:1fr!important;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ :root{--header-h:64px;} .workspace{margin-left:0!important;} .app-header{position:sticky;top:0;grid-template-columns:52px minmax(0,1fr) 52px!important;min-height:var(--header-h)!important;padding:8px 12px!important;gap:8px!important;} .header-menu-btn{display:flex!important;grid-column:1;grid-row:1;width:48px!important;height:48px!important;border-radius:16px!important;} .page-heading{grid-column:2;grid-row:1;text-align:center;align-items:center;justify-items:center;overflow:hidden;} .breadcrumb,.page-heading p{display:none!important;} .page-heading h1{font-size:clamp(17px,5vw,22px)!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;} .header-actions{grid-column:3;grid-row:1;width:52px!important;display:flex!important;justify-content:flex-end!important;} .header-back,.header-search{display:none!important;} .profile-chip{width:48px!important;height:48px!important;padding:4px!important;border-radius:16px!important;box-shadow:0 8px 20px rgba(15,23,42,.08)!important;} .profile-chip .profile-avatar{width:38px!important;height:38px!important;border-radius:14px!important;} .profile-name{display:none!important;} .main-content{padding:14px!important;} .sidebar{top:0!important;width:min(285px,86vw)!important;border-radius:0 24px 24px 0;} .mobile-backdrop.is-open{display:block!important;} .brand{padding:6px 6px 10px!important;} .profile-card{padding:12px!important;border-radius:16px!important;} .nav-scroll{max-height:calc(100vh - 235px);} .card,.chart-card,.dash-kpi,.role-action-card{border-radius:20px!important;padding:16px!important;} .form-grid,.filter-strip,.report-filter-grid,.role-report-filter-grid{grid-template-columns:1fr!important;} } @media(max-width:760px){ .dashboard-kpis,.compact-kpis,.profile-summary,.category-grid{grid-template-columns:1fr!important;} .dash-kpi{min-height:118px;} .table.responsive-card-table,.table.responsive-card-table thead,.table.responsive-card-table tbody,.table.responsive-card-table th,.table.responsive-card-table td,.table.responsive-card-table tr{display:block!important;} .table.responsive-card-table thead,.table.responsive-card-table tr:first-child:has(th){display:none!important;} .table.responsive-card-table{border-collapse:separate!important;border-spacing:0!important;white-space:normal!important;overflow:visible!important;} .table.responsive-card-table tbody{display:grid!important;gap:12px!important;} .table.responsive-card-table tr{background:#fff;border:1px solid #e8eef6;border-radius:18px;padding:10px 12px;box-shadow:0 10px 24px rgba(15,23,42,.045);} .table.responsive-card-table td{border:0!important;padding:9px 0!important;display:grid!important;grid-template-columns:42% minmax(0,1fr)!important;gap:10px!important;align-items:start!important;white-space:normal!important;} .table.responsive-card-table td:before{content:attr(data-label);font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.06em;color:#64748b;font-weight:950;} .table.responsive-card-table td:empty{display:none!important;} .actions{display:grid!important;grid-template-columns:1fr!important;width:100%;} .actions .btn,.table .btn{width:100%;} .hero-actions{grid-template-columns:1fr!important;} .vertical-chart{overflow-x:auto!important;} } @media(max-width:420px){ .main-content{padding:10px!important;} .page-heading h1{font-size:17px!important;} .card,.chart-card,.dash-kpi,.role-action-card{padding:14px!important;border-radius:18px!important;} .table.responsive-card-table td{grid-template-columns:1fr!important;gap:3px!important;} } @media(min-width:1600px){ :root{--header-h:84px;} .main-content{padding:34px 40px!important;} .page-heading h1{font-size:34px!important;} .dashboard-kpis{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;} .dash-kpi{min-height:160px;} .chart-card{padding:24px!important;} } @media(min-width:1900px){ body{font-size:17px;} .sidebar{width:285px!important;} .workspace{margin-left:285px!important;} .dashboard-kpis{grid-template-columns:repeat(5,minmax(240px,1fr))!important;} } /* V83: Sidebar profile card cleanup Remove duplicated user block from every role sidebar so menus fit better. Profile access remains available in the top header avatar/chip. */ .sidebar .profile-card{display:none!important;} .sidebar{gap:10px!important;} .brand{padding:6px 8px 14px!important;} .nav-scroll{flex:1;min-height:0;overflow-y:auto!important;} .nav-bottom{margin-top:4px!important;} @media (min-width:901px){ .sidebar{padding-top:20px!important;padding-bottom:12px!important;} .nav a{min-height:42px;} } @media (max-width:900px){ .sidebar{gap:10px!important;} .brand{padding-bottom:10px!important;} .nav a{min-height:46px;} } /* V84: Clean modern sidebar/navigation standard across all roles */ :root{ --mg-sidebar-open:278px; --mg-sidebar-collapsed:78px; } @media(min-width:901px){ .sidebar{ width:var(--mg-sidebar-open)!important; max-width:var(--mg-sidebar-open)!important; padding:18px 14px!important; gap:12px!important; overflow:hidden!important; } .workspace{margin-left:var(--mg-sidebar-open)!important;transition:margin-left .22s ease;} } .sidebar .brand{ min-height:58px!important; padding:7px 6px 14px!important; gap:11px!important; position:relative; flex-shrink:0; } .sidebar .brand img{width:44px!important;height:44px!important;border-radius:50%!important;} .brand-copy{min-width:0!important;} .brand-copy strong{font-size:15px!important;line-height:1.08!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .brand-copy small{font-size:12px!important;line-height:1.18!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .sidebar-collapse-btn,.sidebar-close-btn{ width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.07);color:#e5edff;display:inline-grid;place-items:center; font-size:20px;font-weight:950;cursor:pointer;transition:.18s; } .sidebar-collapse-btn:hover,.sidebar-close-btn:hover{background:rgba(255,255,255,.13);} .sidebar-collapse-btn{margin-left:auto;} .sidebar-close-btn{display:none;} .role-nav{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:visible!important; padding:4px 4px 10px 0!important; display:grid!important; align-content:start!important; gap:5px!important; } .role-nav::-webkit-scrollbar{width:5px}.role-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px} .nav-section-label{ margin:12px 8px 6px!important; font-size:10px!important; letter-spacing:.16em!important; line-height:1!important; text-transform:uppercase!important; color:#8fa2c8!important; font-weight:950!important; } .role-nav a,.nav-bottom a{ min-height:45px!important; height:auto!important; border-radius:14px!important; padding:10px 12px!important; gap:11px!important; font-size:13.5px!important; font-weight:850!important; letter-spacing:-.01em!important; background:rgba(255,255,255,.035)!important; border:1px solid rgba(255,255,255,.045)!important; box-shadow:none!important; position:relative!important; white-space:nowrap!important; } .role-nav a:hover,.role-nav a.active,.nav-bottom a:hover{ background:linear-gradient(135deg,#17324d,#3b82c4 58%,#15803d)!important; color:#fff!important; border-color:rgba(255,255,255,.10)!important; transform:none!important; } .role-nav a.active:before{ content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 999px 999px 0;background:#fff; } .nav-icon{width:21px!important;min-width:21px!important;text-align:center!important;font-size:13px!important;opacity:.98!important;} .nav-text{min-width:0;overflow:hidden;text-overflow:ellipsis;} .nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#ef4444;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;font-weight:950;} .footer-spacer{display:none!important;} .nav-bottom{ flex:0 0 auto!important; padding:8px 0 0!important; margin-top:4px!important; border-top:1px solid rgba(255,255,255,.08)!important; background:transparent!important; } .nav-bottom a{min-height:43px!important;} /* Disable normal sidebar hover popups/tooltips while expanded. */ .sidebar:not(.is-collapsed) .nav a:after{display:none!important;content:none!important;} /* Collapsed desktop sidebar: icons remain visible; tooltip is allowed only here. */ @media(min-width:901px){ body.sidebar-collapsed .sidebar{ width:var(--mg-sidebar-collapsed)!important; max-width:var(--mg-sidebar-collapsed)!important; padding:16px 10px!important; overflow:visible!important; } body.sidebar-collapsed .workspace{margin-left:var(--mg-sidebar-collapsed)!important;} body.sidebar-collapsed .brand{justify-content:center!important;padding:6px 0 12px!important;} body.sidebar-collapsed .brand-logo img{width:42px!important;height:42px!important;} body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-text, body.sidebar-collapsed .nav-section-label, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .nav-bottom a span:last-child{display:none!important;} body.sidebar-collapsed .sidebar-collapse-btn{position:absolute;right:-17px;top:22px;z-index:5;background:#fff;color:#0f172a;border-color:#e5e7eb;box-shadow:0 10px 26px rgba(15,23,42,.16);} body.sidebar-collapsed .role-nav{overflow:visible!important;padding:8px 0!important;gap:8px!important;} body.sidebar-collapsed .role-nav a, body.sidebar-collapsed .nav-bottom a{justify-content:center!important;min-height:48px!important;padding:0!important;border-radius:16px!important;} body.sidebar-collapsed .nav-icon{width:auto!important;min-width:0!important;font-size:16px!important;} body.sidebar-collapsed .role-nav a[data-nav-label]:hover:after, body.sidebar-collapsed .nav-bottom a:hover:after{ content:attr(data-nav-label); position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%); background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:12px; padding:8px 10px;font-size:12px;font-weight:900;white-space:nowrap;z-index:9999; box-shadow:0 16px 36px rgba(15,23,42,.22);pointer-events:none; } body.sidebar-collapsed .nav-bottom a:after{content:attr(data-nav-label);} } /* Mobile and tablet slide-in menu rules */ @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{ width:min(310px,86vw)!important; max-width:min(310px,86vw)!important; height:100dvh!important; padding:16px 12px!important; transform:translateX(-105%); transition:transform .22s ease!important; overflow:hidden!important; } .sidebar.is-open{transform:translateX(0)!important;} .sidebar-collapse-btn{display:none!important;} .sidebar-close-btn{display:inline-grid!important;margin-left:auto;} .brand-copy strong{font-size:14px!important;} .brand-copy small{font-size:11px!important;} .role-nav{gap:6px!important;} .role-nav a,.nav-bottom a{min-height:48px!important;font-size:14px!important;padding:12px!important;border-radius:15px!important;} .nav-section-label{margin-top:12px!important;} .mobile-backdrop.is-open{display:block!important;opacity:1!important;pointer-events:auto!important;} .sidebar .nav a:after{display:none!important;content:none!important;} } /* Large screens/projector: keep sidebar readable and content spacious. */ @media(min-width:1500px){ :root{--mg-sidebar-open:286px;} .role-nav a,.nav-bottom a{min-height:48px!important;font-size:14px!important;} .nav-section-label{font-size:10.5px!important;} } /* V85: keep Log out anchored at the real bottom of the sidebar for all roles */ .sidebar{ position:fixed!important; height:100dvh!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; box-sizing:border-box!important; } .sidebar .brand{ flex:0 0 auto!important; } .sidebar .nav-scroll, .sidebar .role-nav{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; padding-bottom:18px!important; } .sidebar .footer-spacer{ display:none!important; } .sidebar .nav-bottom{ flex:0 0 auto!important; margin-top:auto!important; position:relative!important; bottom:auto!important; left:auto!important; right:auto!important; z-index:3!important; padding:12px 0 0!important; border-top:1px solid rgba(255,255,255,.10)!important; background:linear-gradient(180deg,rgba(8,17,34,.92),#08111f 70%)!important; box-shadow:0 -10px 22px rgba(8,17,34,.28)!important; } .sidebar .nav-bottom a{ min-height:48px!important; width:100%!important; } @media(min-width:901px){ .sidebar.is-collapsed .nav-bottom a{ justify-content:center!important; padding-left:0!important; padding-right:0!important; } } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{ overflow:hidden!important; } .sidebar .nav-scroll, .sidebar .role-nav{ flex:1 1 auto!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; } .sidebar .nav-bottom{ margin-top:auto!important; position:relative!important; padding-bottom:env(safe-area-inset-bottom)!important; } } /* V86: deployment-ready responsive header, navbar, sidebar, and popup sizing polish. Goal: clean menus on all devices, correct tap sizes, no annoying hover popups, compact but readable desktop layout, slide-in mobile menu, and projector-safe sizing. */ :root{ --mg-touch:44px; --mg-header-h:78px; --mg-radius-control:14px; --mg-content-max:1760px; } html{font-size:16px;-webkit-text-size-adjust:100%;} body{min-width:320px;overflow-x:hidden;} .skip-link{position:fixed;left:12px;top:-80px;z-index:10000;background:#0f172a;color:#fff;padding:10px 14px;border-radius:12px;font-weight:900;transition:top .15s ease;} .skip-link:focus{top:12px;} .workspace,.main-content,.app-header,.card,.table-wrap{min-width:0;max-width:100%;} .main-content{width:100%;max-width:var(--mg-content-max);margin:0 auto;} .app-header{ min-height:var(--mg-header-h)!important; padding:14px clamp(14px,2vw,30px)!important; gap:14px!important; display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; } .header-menu-btn{grid-column:1;} .page-heading{grid-column:2;overflow:hidden;} .page-heading h1{font-size:clamp(20px,2.1vw,30px)!important;line-height:1.08!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .page-heading p{max-width:720px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .breadcrumb{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;font-weight:850;color:#64748b;} .breadcrumb a,.breadcrumb strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .header-actions{grid-column:3;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;} .header-actions .btn,.profile-chip,.header-search,.burger{min-height:var(--mg-touch)!important;} .header-back{height:44px!important;padding:0 14px!important;border-radius:999px!important;background:#fff!important;border:1px solid #e5e7eb!important;color:#334155!important;box-shadow:0 8px 20px rgba(15,23,42,.04)!important;white-space:nowrap!important;} .header-search{height:44px!important;width:clamp(220px,26vw,360px)!important;border-radius:999px!important;} .profile-chip{height:44px!important;max-width:220px!important;padding-right:11px!important;} .profile-chip .profile-avatar{width:36px!important;height:36px!important;font-size:14px!important;} .profile-name{max-width:132px!important;} .sidebar{overscroll-behavior:contain;} .sidebar .brand{border-bottom:1px solid rgba(255,255,255,.075);} .role-nav a,.nav-bottom a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .role-nav a:focus-visible,.nav-bottom a:focus-visible,.burger:focus-visible,.sidebar-close-btn:focus-visible,.sidebar-collapse-btn:focus-visible,.profile-chip:focus-visible,.btn:focus-visible,.header-search:focus-within{outline:3px solid rgba(37,99,235,.26)!important;outline-offset:2px!important;} .nav-section-label:first-child{margin-top:4px!important;} .nav-icon{display:inline-grid!important;place-items:center!important;} /* Normal expanded menus must not show popups. Only collapsed desktop icons may show labels. */ .sidebar:not(.is-collapsed) .role-nav a:hover:after, .sidebar:not(.is-collapsed) .nav-bottom a:hover:after, .sidebar:not(.is-collapsed) .role-nav a:focus:after, .sidebar:not(.is-collapsed) .nav-bottom a:focus:after{display:none!important;content:none!important;} /* Header should remain usable when laptop width is tight. */ @media(max-width:1240px) and (min-width:901px){ .app-header{grid-template-columns:auto minmax(180px,1fr) auto!important;} .header-search{width:240px!important;} .header-back{display:none!important;} .profile-name{display:none!important;} .profile-chip{padding:4px!important;} } @media(max-width:1080px) and (min-width:901px){ .header-search{display:none!important;} .page-heading p{display:none!important;} } /* Tablet and mobile: slide-in sidebar, clean header, no hover tooltip, correct tap size. */ @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ :root{--mg-header-h:64px;} body.sidebar-collapsed .workspace{margin-left:0!important;} .app-header{ position:sticky!important; grid-template-columns:46px minmax(0,1fr) auto!important; min-height:64px!important; padding:10px 12px!important; } .burger{width:44px!important;height:44px!important;border-radius:14px!important;display:flex!important;} .breadcrumb{display:none!important;} .page-heading h1{font-size:clamp(18px,5vw,22px)!important;} .header-actions{gap:6px!important;} .header-back,.header-search{display:none!important;} .profile-chip{width:44px!important;height:44px!important;padding:4px!important;border-radius:50%!important;} .profile-name{display:none!important;} .main-content{padding:14px!important;} .sidebar{box-shadow:18px 0 42px rgba(15,23,42,.30)!important;} .sidebar .brand{min-height:60px!important;} .role-nav a,.nav-bottom a{min-height:50px!important;font-size:14px!important;line-height:1.15!important;} .nav-icon{font-size:15px!important;width:24px!important;min-width:24px!important;} .nav-bottom{padding-top:10px!important;} .mobile-backdrop{backdrop-filter:blur(2px);} } /* Small phones: keep content readable and avoid oversized cards/menus. */ @media(max-width:520px){ .app-header{grid-template-columns:42px minmax(0,1fr) 42px!important;gap:8px!important;padding:9px 10px!important;} .burger,.profile-chip{width:42px!important;height:42px!important;min-height:42px!important;} .profile-chip .profile-avatar{width:34px!important;height:34px!important;} .page-heading h1{font-size:18px!important;letter-spacing:-.02em!important;} .main-content{padding:12px!important;} .card,.chart-card,.role-report-panel,.role-report-filter{border-radius:18px!important;padding:14px!important;} .btn{min-height:44px!important;padding:11px 14px!important;border-radius:14px!important;} .input,select,textarea{min-height:44px!important;border-radius:13px!important;font-size:15px!important;} .sidebar{width:min(300px,88vw)!important;max-width:min(300px,88vw)!important;padding:14px 10px!important;} .brand-copy strong{max-width:190px!important;} .brand-copy small{display:none!important;} .role-nav a,.nav-bottom a{min-height:48px!important;padding:11px!important;} .nav-section-label{font-size:9.5px!important;margin:11px 8px 5px!important;} } @media(max-width:380px){ .page-heading h1{font-size:16.5px!important;} .main-content{padding:10px!important;} .sidebar{width:90vw!important;max-width:90vw!important;} .role-nav a,.nav-bottom a{font-size:13.5px!important;} } /* Wide desktop/projector: spacious content without comically large menus. */ @media(min-width:1500px){ :root{--mg-header-h:84px;} .main-content{padding-left:clamp(32px,3vw,52px)!important;padding-right:clamp(32px,3vw,52px)!important;} .app-header{padding-left:clamp(24px,2.4vw,42px)!important;padding-right:clamp(24px,2.4vw,42px)!important;} .header-search{width:390px!important;} .profile-name{max-width:165px!important;} } @media(min-width:1900px){ :root{--mg-sidebar-open:292px;--mg-sidebar-collapsed:82px;} body{font-size:17px;} .role-nav a,.nav-bottom a{font-size:14.5px!important;min-height:50px!important;} .page-heading h1{font-size:34px!important;} } /* Print/export: remove navigation surfaces and keep official reports clean. */ @media print{ .sidebar,.mobile-backdrop,.app-header,.toast-stack{display:none!important;} .workspace{margin-left:0!important;} .main-content{max-width:none!important;padding:0!important;} } /* ====================================================================== MGTrack V88 — COMPLETE ALL-DEVICE RESPONSIVE DEPLOYMENT STANDARD Shared rules apply to Developer, PNP, Treasurer, and Mayor/OMM pages. ====================================================================== */ :root{ --v88-phone-gutter:14px; --v88-tablet-gutter:20px; --v88-desktop-gutter:28px; --v88-touch:44px; --v88-content-max:1760px; --v88-readable:78ch; } html{min-width:320px;scroll-padding-top:calc(var(--mg-header-h,76px) + 12px);} body{overflow-x:hidden;} img,svg,video,canvas{max-width:100%;height:auto;} .main-content>*{min-width:0;} .main-content{width:100%;max-width:var(--v88-content-max);margin-inline:auto;} .card,.panel,.widget,.stat-card,.summary-card{min-width:0;overflow-wrap:anywhere;} .page-heading{min-width:0;} .page-heading h1{overflow-wrap:anywhere;text-wrap:balance;} .page-heading p{max-width:var(--v88-readable);} .actions,.toolbar,.filters,.filter-row,.section-title{min-width:0;flex-wrap:wrap;} .input,select,textarea,input[type="text"],input[type="search"],input[type="number"],input[type="date"],input[type="email"],input[type="password"],input[type="file"]{max-width:100%;} button,.btn,a.btn,input[type="submit"]{min-height:var(--v88-touch);} .table-wrap,.report-register-wrap,.filed-table-wrap,.print-table-wrap,.vp-scroll{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;} table{max-width:100%;} canvas{width:100%!important;max-height:460px;} /* Consistent profile/identity alignment on narrow and medium screens. */ .vp-profile-head,.profile-hero,.violator-profile-hero,.profile-summary,.identity-block{ min-width:0; } /* Tablet: compact, touch-friendly, up to two useful columns. */ @media (min-width:768px) and (max-width:1180px){ .main-content{padding:var(--v88-tablet-gutter)!important;} .grid,.dashboard-grid,.stats-grid,.summary-grid,.manager-grid{gap:18px!important;} .stats-grid,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important;} .form-grid>.full,.form-grid>.span-2{grid-column:1/-1;} .card{padding:20px!important;} .actions>.btn,.toolbar>.btn{flex:0 1 auto;} .header-search{display:none!important;} } /* Laptop: full working layout and complete tables. */ @media (min-width:1181px) and (max-width:1499px){ .main-content{padding:24px var(--v88-desktop-gutter)!important;} .stats-grid,.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .manager-grid{align-items:start;} .card{padding:22px!important;} .responsive-card-table thead{display:table-header-group;} .responsive-card-table tbody{display:table-row-group;} .responsive-card-table tr{display:table-row;} .responsive-card-table th,.responsive-card-table td{display:table-cell;} .responsive-card-table td::before{display:none!important;} } /* Desktop: wider operational dashboards, controlled line lengths. */ @media (min-width:1500px) and (max-width:1919px){ .main-content{padding:28px clamp(30px,2.2vw,44px)!important;} .stats-grid,.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));} .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px!important;} .card{padding:24px!important;} .form-grid{gap:18px!important;} } /* Projector / large monitor: readable, centered, not stretched. */ @media (min-width:1920px){ .main-content{max-width:1760px!important;padding:34px 48px!important;} .stats-grid,.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px!important;} .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px!important;} .card{padding:28px!important;} .card h2{font-size:clamp(23px,1.35vw,28px);} .table{font-size:16px;} .table th,.table td{padding:13px 15px;} .chart-card canvas,canvas{max-height:520px;} } /* Phones: every page becomes a clear one-column workflow. */ @media (max-width:767px){ :root{--v88-touch:46px;} .main-content{padding:12px var(--v88-phone-gutter) 28px!important;} .app-header{min-height:68px!important;padding:8px 12px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important;gap:8px!important;align-items:center!important;} .header-menu-btn{grid-column:1;width:46px!important;height:46px!important;justify-self:start;} .page-heading{grid-column:2;min-width:0;text-align:center!important;} .page-heading .breadcrumb,.page-heading p{display:none!important;} .page-heading h1{font-size:clamp(17px,5.2vw,24px)!important;line-height:1.15!important;margin:0!important;text-align:center!important;} .header-actions{grid-column:3;min-width:0;justify-self:end!important;} .header-actions>*:not(.profile-menu){display:none!important;} .profile-chip{padding:3px!important;border-radius:16px!important;} .profile-name{display:none!important;} .profile-avatar{width:46px!important;height:46px!important;min-width:46px!important;font-size:17px!important;} .card,.panel,.widget,.stat-card,.summary-card{padding:16px!important;border-radius:20px!important;} .grid,.dashboard-grid,.stats-grid,.summary-grid,.manager-grid,.form-grid,.two-column,.three-column{ display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important; } .half,.third,.two-thirds,.full{width:100%!important;max-width:none!important;grid-column:1!important;} .section-title,.toolbar,.filters,.filter-row,.actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;} .section-title>*{width:100%;} .actions .btn,.toolbar .btn,.filters .btn,.filter-row .btn,.card>.btn,form>.btn{width:100%!important;justify-content:center!important;} .btn-group{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;} label{min-width:0;} input,select,textarea,.input{width:100%!important;min-height:46px;font-size:16px!important;} textarea{min-height:110px;} input[type="file"]{padding:9px!important;height:auto!important;} /* Universal mobile records: tables become readable stacked cards. */ table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list){border:0!important;background:transparent!important;min-width:0!important;width:100%!important;} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) thead, table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list)>tbody>tr:first-child:has(th){display:none!important;} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) tbody{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) tbody tr{ display:block!important;background:#fff!important;border:1px solid var(--border,#dce5ee)!important;border-radius:18px!important;padding:12px 14px!important;box-shadow:0 8px 24px rgba(15,23,42,.055)!important;min-width:0!important; } table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) tbody tr[hidden]{display:none!important;} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) td{ display:grid!important;grid-template-columns:minmax(105px,39%) minmax(0,1fr)!important;gap:10px!important;align-items:start!important;width:100%!important;min-width:0!important;padding:9px 0!important;border:0!important;border-bottom:1px dashed #e4eaf0!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere!important; } table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) td:last-child{border-bottom:0!important;padding-bottom:0!important;} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list) td::before{ content:attr(data-label);display:block!important;color:#64748b;font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;text-align:left!important;line-height:1.3; } table.responsive-card-table td[colspan]{grid-template-columns:1fr!important;text-align:center!important;} table.responsive-card-table td[colspan]::before{display:none!important;} table.responsive-card-table td .btn{width:100%!important;margin:3px 0!important;} table.responsive-card-table td img{margin-left:auto;} .desktop-table{display:none!important;} .mobile-card-list{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;} /* Profile identity: picture, name, status, description, and upload controls centered. */ .vp-profile-head,.profile-hero,.violator-profile-hero,.profile-summary,.identity-block{ display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:14px!important; } .vp-profile-head img,.profile-hero img,.violator-profile-hero img,.profile-photo,.violator-photo{ margin-inline:auto!important;display:block!important;object-fit:cover!important; } .vp-profile-head .actions,.profile-hero .actions,.identity-block .actions{width:100%!important;} .vp-profile-head form,.profile-hero form,.identity-block form{width:100%!important;max-width:640px!important;margin-inline:auto!important;} /* Charts/reports remain visible and usable, never clipped. */ .chart-card,.report-card{overflow:hidden!important;} .chart-card canvas,canvas{min-height:230px!important;max-height:320px!important;} .report-register-wrap,.table-wrap,.vp-scroll{overflow:visible!important;} /* Prevent hidden record sections due to fixed heights or overflow. */ .card,.manager-grid,.list-panel,.records-panel,.violator-list-panel{max-height:none!important;height:auto!important;overflow:visible!important;} .print-table-wrap{max-height:none!important;overflow:visible!important;} } /* Extra-small phones: protect controls at 320–380px. */ @media (max-width:380px){ .main-content{padding-inline:10px!important;} .app-header{padding-inline:8px!important;grid-template-columns:44px minmax(0,1fr) 44px!important;} .header-menu-btn,.profile-avatar{width:42px!important;height:42px!important;min-width:42px!important;} .page-heading h1{font-size:16px!important;} .card{padding:13px!important;border-radius:16px!important;} table.responsive-card-table tbody tr{padding:10px 12px!important;} table.responsive-card-table tbody td{grid-template-columns:1fr!important;text-align:left!important;gap:4px!important;} } /* Landscape phones: retain one-column records but use horizontal action groups where safe. */ @media (max-width:900px) and (orientation:landscape) and (min-height:360px){ .main-content{padding-top:10px!important;} .actions.compact-landscape,.toolbar.compact-landscape{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;} } /* Accessibility and keyboard visibility on all devices. */ :focus-visible{outline:3px solid rgba(37,99,235,.38)!important;outline-offset:2px!important;} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}} /* ========================================================= V90 MOBILE SPACE-EFFICIENT LAYOUT Fill available phone/tablet width without making forms cramped. ========================================================= */ @media (max-width:767px){ /* KPI and summary cards should use the phone width efficiently. */ .vp-summary-grid, .profile-summary, .summary-grid, .stats-grid, .kpi-grid, .dashboard-kpis, .compact-kpis, .directory-mini-stats, .pnp-profile-summary-clean, .pnp-dashboard-clean .result-stats, .omm-mini-stat-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; align-items:stretch!important; } .vp-summary-card{align-content:start!important;width:100%!important;} .vp-summary-card>h2{text-align:left!important;width:100%!important;} .vp-summary-box, .profile-summary .summary-tile, .summary-grid>* , .stats-grid>* , .kpi-grid>* , .dashboard-kpis>* , .compact-kpis>*{ width:100%!important; min-width:0!important; height:100%!important; padding:13px 12px!important; border-radius:16px!important; text-align:center!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; overflow:hidden!important; } .vp-summary-box small, .profile-summary .summary-tile small{ font-size:10px!important; line-height:1.25!important; letter-spacing:.065em!important; text-align:center!important; } .vp-summary-box strong, .profile-summary .summary-tile strong{ font-size:clamp(18px,5.7vw,24px)!important; line-height:1.15!important; white-space:normal!important; overflow-wrap:anywhere!important; text-align:center!important; } /* Profile information also uses two columns where content is short. */ .vp-details{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } .vp-info{padding:12px!important;border-radius:15px!important;} .vp-info.wide{grid-column:1/-1!important;} /* Compact short action groups into two columns. */ .vp-top-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; padding:10px!important; } .vp-top-actions .btn{ width:100%!important; min-width:0!important; white-space:normal!important; line-height:1.2!important; padding:10px 8px!important; } /* Keep full forms and long data records readable. */ .form-grid,.manager-grid,.two-column,.three-column, .mobile-card-list,.chart-grid,.reports-grid{ grid-template-columns:minmax(0,1fr)!important; } /* Reduce wasteful blank space inside mobile sections. */ .vp-page{gap:12px!important;} .vp-card{padding:14px!important;} .vp-main-grid{gap:12px!important;} .vp-person-card{gap:14px!important;} .section-gap{margin-top:12px!important;} } /* Very small phones still keep two compact statistic columns. */ @media (max-width:380px){ .vp-summary-grid, .profile-summary, .summary-grid, .stats-grid, .kpi-grid, .dashboard-kpis, .compact-kpis, .directory-mini-stats, .pnp-profile-summary-clean, .pnp-dashboard-clean .result-stats, .omm-mini-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .vp-summary-box, .profile-summary .summary-tile{padding:11px 8px!important;min-height:86px!important;} .vp-summary-box strong,.profile-summary .summary-tile strong{font-size:18px!important;} .vp-top-actions{grid-template-columns:1fr!important;} .vp-details{grid-template-columns:1fr!important;} .vp-info.wide{grid-column:1!important;} } /* Landscape phones can show three compact summaries when width permits. */ @media (min-width:600px) and (max-width:900px) and (orientation:landscape){ .vp-summary-grid, .profile-summary, .summary-grid, .stats-grid, .kpi-grid, .dashboard-kpis, .compact-kpis, .directory-mini-stats, .pnp-profile-summary-clean, .pnp-dashboard-clean .result-stats, .omm-mini-stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .vp-details{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .vp-top-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important;} } /* Shared YouTube-proportion navigation sizing. */ :root{ --mg-sidebar-open:248px; --mg-sidebar-collapsed:72px; --mg-menu-row:48px; --mg-menu-font:16px; --mg-menu-icon-box:24px; --mg-menu-gap:16px; } .sidebar .role-nav{ gap:4px!important; padding:8px 0 16px!important; } .sidebar .nav-section-label{ margin:14px 12px 6px!important; font-size:12px!important; line-height:1.2!important; letter-spacing:.08em!important; font-weight:800!important; } .sidebar .role-nav a, .sidebar .nav-bottom a{ width:100%!important; min-height:var(--mg-menu-row)!important; padding:0 12px!important; border-radius:12px!important; gap:var(--mg-menu-gap)!important; font-size:var(--mg-menu-font)!important; line-height:1.25!important; font-weight:600!important; } .sidebar .nav-icon{ width:var(--mg-menu-icon-box)!important; min-width:var(--mg-menu-icon-box)!important; height:var(--mg-menu-icon-box)!important; display:inline-grid!important; place-items:center!important; font-size:22px!important; line-height:1!important; font-family:Arial,"Segoe UI Symbol","Noto Sans Symbols",sans-serif!important; } .sidebar .nav-text{ flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .sidebar .nav-badge{ min-width:22px!important; height:22px!important; padding:0 6px!important; font-size:11px!important; } .sidebar .role-nav a.active:before{ top:8px!important; bottom:8px!important; width:3px!important; } .sidebar .nav-bottom{ padding-top:8px!important; } @media (min-width:901px){ .sidebar{ width:var(--mg-sidebar-open)!important; max-width:var(--mg-sidebar-open)!important; padding:14px 12px!important; } .workspace{margin-left:var(--mg-sidebar-open)!important;} .sidebar .brand{ min-height:64px!important; padding:6px 6px 14px!important; gap:10px!important; } .sidebar .brand img{width:44px!important;height:44px!important;} .sidebar .brand-copy strong{font-size:15px!important;line-height:1.15!important;} .sidebar .brand-copy small{font-size:12px!important;line-height:1.2!important;} body.sidebar-collapsed .sidebar{ width:var(--mg-sidebar-collapsed)!important; max-width:var(--mg-sidebar-collapsed)!important; } body.sidebar-collapsed .workspace{margin-left:var(--mg-sidebar-collapsed)!important;} } @media (max-width:900px){ :root{ --mg-menu-row:52px; --mg-menu-font:16px; --mg-menu-icon-box:26px; --mg-menu-gap:16px; } .sidebar{ width:min(360px,88vw)!important; max-width:min(360px,88vw)!important; padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important; border-radius:0 18px 18px 0!important; } .sidebar .brand{ min-height:64px!important; padding:6px 10px 12px!important; gap:10px!important; } .sidebar .brand img{width:44px!important;height:44px!important;} .sidebar .brand-copy strong{font-size:16px!important;line-height:1.1!important;} .sidebar .brand-copy small{font-size:12px!important;line-height:1.2!important;} .sidebar-close-btn{ width:40px!important; height:40px!important; border-radius:50%!important; font-size:24px!important; } .sidebar .role-nav{gap:4px!important;padding:8px 0 14px!important;} .sidebar .role-nav a, .sidebar .nav-bottom a{ min-height:52px!important; padding:0 12px!important; border-radius:12px!important; font-size:16px!important; font-weight:600!important; } .sidebar .nav-icon{font-size:23px!important;} .sidebar .nav-section-label{ margin:14px 12px 6px!important; font-size:12px!important; } } @media (max-width:380px){ :root{ --mg-menu-row:50px; --mg-menu-font:15px; --mg-menu-icon-box:24px; --mg-menu-gap:14px; } .sidebar{ width:90vw!important; max-width:90vw!important; padding-left:8px!important; padding-right:8px!important; } .sidebar .role-nav a, .sidebar .nav-bottom a{min-height:50px!important;padding:0 11px!important;} .sidebar .nav-icon{font-size:21px!important;} } @media (max-width:900px) and (orientation:landscape){ .sidebar{ width:min(360px,48vw)!important; max-width:min(360px,48vw)!important; } .sidebar .brand{min-height:56px!important;padding-bottom:8px!important;} .sidebar .brand img{width:40px!important;height:40px!important;} .sidebar .role-nav a, .sidebar .nav-bottom a{min-height:48px!important;} } /* V93: exact compact YouTube-style sidebar and header sizing. */ :root{ --yt-sidebar-width:240px; --yt-sidebar-collapsed:72px; --yt-header-height:64px; --yt-nav-row:48px; --yt-nav-font:16px; --yt-icon-box:24px; } /* Sidebar shell */ .sidebar{ width:var(--yt-sidebar-width)!important; max-width:var(--yt-sidebar-width)!important; padding:10px 12px 12px!important; gap:8px!important; box-shadow:none!important; border-right:1px solid rgba(255,255,255,.08)!important; } .workspace{margin-left:var(--yt-sidebar-width)!important;} .sidebar .brand{ min-height:56px!important; padding:4px 4px 8px!important; gap:10px!important; } .sidebar .brand img{width:40px!important;height:40px!important;border-radius:50%!important;} .sidebar .brand-copy strong{font-size:16px!important;line-height:1.1!important;} .sidebar .brand-copy small{font-size:12px!important;line-height:1.2!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;} .sidebar .sidebar-collapse-btn{width:40px!important;height:40px!important;border-radius:50%!important;} .sidebar .nav-section-label{display:none!important;} .sidebar .role-nav{display:flex!important;flex-direction:column!important;gap:2px!important;padding:8px 0 10px!important;} .sidebar .role-nav a,.sidebar .nav-bottom a{ min-height:var(--yt-nav-row)!important; height:var(--yt-nav-row)!important; padding:0 12px!important; gap:16px!important; border:0!important; border-radius:10px!important; background:transparent!important; box-shadow:none!important; font-size:var(--yt-nav-font)!important; line-height:1!important; font-weight:500!important; color:#f1f5f9!important; } .sidebar .role-nav a:hover,.sidebar .nav-bottom a:hover{ background:rgba(255,255,255,.10)!important; box-shadow:none!important; } .sidebar .role-nav a.active{ background:rgba(255,255,255,.14)!important; color:#fff!important; box-shadow:none!important; font-weight:600!important; } .sidebar .role-nav a.active:before{display:none!important;} .sidebar .nav-icon{ width:var(--yt-icon-box)!important; min-width:var(--yt-icon-box)!important; height:var(--yt-icon-box)!important; font-size:22px!important; line-height:1!important; } .sidebar .nav-text{font-size:inherit!important;} .sidebar .nav-bottom{padding-top:8px!important;margin-top:auto!important;border-top:1px solid rgba(255,255,255,.10)!important;} .sidebar .nav-scroll{padding-right:2px!important;} /* Compact header matching YouTube proportions. */ .app-header{ min-height:var(--yt-header-height)!important; height:var(--yt-header-height)!important; padding:8px 20px!important; gap:16px!important; align-items:center!important; display:flex!important; flex-wrap:nowrap!important; } .app-header .page-heading{flex:0 1 auto!important;min-width:220px!important;} .app-header .breadcrumb{display:none!important;} .app-header .page-heading h1{ font-size:26px!important; line-height:1.1!important; margin:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .app-header .page-heading p{display:none!important;} .app-header .header-actions{flex:1 1 auto!important;min-width:0!important;gap:10px!important;justify-content:flex-end!important;} .app-header .header-search{ width:min(620px,46vw)!important; height:40px!important; min-width:220px!important; padding:0 14px!important; } .app-header .header-search input{height:38px!important;font-size:15px!important;} .app-header .header-back{height:40px!important;min-height:40px!important;padding:0 15px!important;border-radius:20px!important;font-size:14px!important;} .app-header .profile-chip{height:44px!important;padding:2px!important;border-radius:50%!important;} .app-header .profile-chip .profile-avatar{width:40px!important;height:40px!important;} .app-header .profile-name{display:none!important;} .main-content{padding:24px!important;} @media (min-width:901px){ body.sidebar-collapsed .sidebar{width:var(--yt-sidebar-collapsed)!important;max-width:var(--yt-sidebar-collapsed)!important;} body.sidebar-collapsed .workspace{margin-left:var(--yt-sidebar-collapsed)!important;} } /* Tablet and phone drawer: YouTube-like 240px, but safe on tiny screens. */ @media (max-width:900px){ .sidebar{ width:min(240px,86vw)!important; max-width:min(240px,86vw)!important; padding:8px 10px 12px!important; border-radius:0!important; } .workspace{margin-left:0!important;} .sidebar .brand{min-height:56px!important;} .sidebar .role-nav a,.sidebar .nav-bottom a{ min-height:48px!important; height:48px!important; padding:0 12px!important; font-size:16px!important; border-radius:10px!important; } .app-header{ min-height:64px!important; height:auto!important; padding:8px 12px!important; display:grid!important; grid-template-columns:44px minmax(0,1fr) 44px!important; gap:8px!important; } .header-menu-btn{display:flex!important;grid-column:1!important;grid-row:1!important;width:44px!important;height:44px!important;border-radius:50%!important;} .app-header .page-heading{grid-column:2!important;grid-row:1!important;min-width:0!important;text-align:center!important;} .app-header .page-heading h1{font-size:22px!important;text-align:center!important;} .app-header .header-actions{display:contents!important;} .app-header .profile-menu{grid-column:3!important;grid-row:1!important;justify-self:end!important;} .app-header .header-back,.app-header .header-search{display:none!important;} .app-header .profile-chip{width:44px!important;height:44px!important;} .app-header .profile-chip .profile-avatar{width:40px!important;height:40px!important;} .main-content{padding:14px!important;} } @media (max-width:380px){ .sidebar{width:min(232px,88vw)!important;max-width:min(232px,88vw)!important;} .sidebar .role-nav a,.sidebar .nav-bottom a{font-size:15px!important;gap:14px!important;} .app-header .page-heading h1{font-size:20px!important;} } /* V94 — YouTube-inspired clean shell, true collapsible sidebar, account dropdown */ :root{--v94-sidebar:240px;--v94-header:64px} @media(min-width:901px){ .sidebar{width:var(--v94-sidebar)!important;max-width:var(--v94-sidebar)!important;padding:12px 12px 14px!important;gap:8px!important;transition:transform .22s ease!important} .workspace{margin-left:var(--v94-sidebar)!important;transition:margin-left .22s ease!important} body.sidebar-collapsed .sidebar{transform:translateX(-100%)!important;width:var(--v94-sidebar)!important;max-width:var(--v94-sidebar)!important} body.sidebar-collapsed .workspace{margin-left:0!important} body.sidebar-collapsed .app-header{padding-left:20px!important} body.sidebar-collapsed .header-menu-btn{display:flex!important} .sidebar-collapse-btn{position:absolute!important;right:12px!important;top:14px!important} } .app-header{min-height:var(--v94-header)!important;height:var(--v94-header)!important;padding:8px 20px!important;gap:14px!important} .page-heading h1{font-size:24px!important;line-height:1.15!important}.page-heading p,.breadcrumb{display:none!important} .header-menu-btn{width:40px!important;height:40px!important;border-radius:50%!important;box-shadow:none!important} .header-search{height:40px!important;max-width:560px!important;width:min(560px,42vw)!important} .profile-chip{width:40px!important;height:40px!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:50%!important;background:transparent!important;justify-content:center!important} .profile-chip .profile-avatar{width:36px!important;height:36px!important;border-radius:50%!important;overflow:hidden!important}.profile-avatar img,.account-avatar-large img{width:100%;height:100%;object-fit:cover;display:block} .profile-menu{position:relative}.account-dropdown{position:absolute;right:0;top:48px;width:min(360px,calc(100vw - 24px));background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.22);overflow:hidden;z-index:100}.account-dropdown[hidden]{display:none!important} .account-dropdown-head{display:flex;gap:14px;align-items:flex-start;padding:18px}.account-avatar-large{width:48px;height:48px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#176c3a,#4f46e5);color:#fff;display:grid;place-items:center;font-weight:900;flex:0 0 auto}.account-dropdown-head strong,.account-dropdown-head span,.account-dropdown-head small{display:block}.account-dropdown-head strong{font-size:16px}.account-dropdown-head span{color:#475569;margin-top:2px}.account-dropdown-head small{color:#64748b;margin-top:5px}.account-dropdown-section{border-top:1px solid #e5e7eb;padding:8px}.account-dropdown-section a{min-height:48px;display:flex;align-items:center;gap:16px;padding:0 12px;border-radius:12px;color:#172033}.account-dropdown-section a:hover{background:#f3f4f6}.account-dropdown-section a span{width:24px;text-align:center;font-size:20px}.account-dropdown-section a b{font-size:14px} .nav-bottom{display:none!important}.footer-spacer{margin-top:auto} .account-page-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:20px}.account-hero-card{text-align:center;align-self:start}.account-photo{width:132px;height:132px;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#176c3a,#4f46e5);display:grid;place-items:center;color:#fff;font-size:44px;font-weight:900;border:5px solid #fff;box-shadow:0 12px 32px rgba(15,23,42,.16)}.account-photo img{width:100%;height:100%;object-fit:cover}.account-photo.small{width:96px;height:96px;margin:0}.account-hero-card h2{font-size:24px;margin:0}.account-hero-card p{color:#64748b}.account-hero-actions{display:grid;gap:10px;margin-top:18px}.account-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.account-info-grid>div{border:1px solid #e8edf4;border-radius:16px;padding:15px;background:#fafbfc}.account-info-grid span{display:block;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.account-info-grid strong{display:block;overflow-wrap:anywhere}.account-form-card{max-width:900px;margin:0 auto}.profile-upload-row{display:flex;align-items:center;gap:20px;padding:16px;border:1px dashed #cbd5e1;border-radius:18px}.profile-file-field{flex:1}.profile-file-field small,label small{display:block;color:#64748b;margin-top:6px} @media(max-width:900px){.app-header{height:64px!important;min-height:64px!important}.account-page-grid{grid-template-columns:1fr}.account-details-card{min-width:0}.account-dropdown{position:fixed;right:12px;top:70px}.profile-upload-row{align-items:flex-start}.page-heading{position:absolute;left:64px;right:64px;text-align:center}.page-heading h1{font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{margin-left:auto}.header-back{display:none!important}} @media(max-width:560px){.main-content{padding:12px!important}.account-info-grid{grid-template-columns:1fr}.profile-upload-row{flex-direction:column;align-items:center}.profile-file-field{width:100%}.account-photo.small{margin:auto}.account-dropdown{left:12px;right:12px;width:auto}.account-hero-card,.account-details-card{padding:16px!important}} /* V95 — YouTube-style fixed header + overlay sidebar. Content never shifts. */ :root{ --v95-sidebar-width:240px; --v95-header-height:64px; --v95-content-gutter:clamp(16px,2.2vw,36px); } /* Always reserve the full viewport for the page. */ .app-shell{display:block!important;min-height:100vh!important;} .workspace, body.sidebar-collapsed .workspace{ margin-left:0!important; width:100%!important; max-width:none!important; min-height:100vh!important; transition:none!important; } /* Sidebar is always an overlay drawer on desktop, tablet, and phone. */ .sidebar, body.sidebar-collapsed .sidebar{ position:fixed!important; inset:0 auto 0 0!important; width:var(--v95-sidebar-width)!important; max-width:min(var(--v95-sidebar-width),88vw)!important; height:100dvh!important; transform:translateX(-102%)!important; transition:transform .20s cubic-bezier(.2,0,0,1)!important; z-index:120!important; border-radius:0!important; box-shadow:8px 0 28px rgba(15,23,42,.20)!important; overflow:hidden!important; } .sidebar.is-open, body.sidebar-collapsed .sidebar.is-open{transform:translateX(0)!important;} .sidebar-collapse-btn{display:none!important;} .sidebar-close-btn{display:flex!important;} .sidebar .nav-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;} /* Dim the page without moving it. */ .mobile-backdrop{ display:block!important; position:fixed!important; inset:0!important; z-index:110!important; background:rgba(15,23,42,.52)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .18s ease,visibility .18s ease!important; } .mobile-backdrop.is-open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body.body-lock{overflow:hidden!important;} /* Fixed full-width header, following YouTube's horizontal shell. */ .app-header{ position:sticky!important; top:0!important; z-index:90!important; width:100%!important; height:var(--v95-header-height)!important; min-height:var(--v95-header-height)!important; padding:8px var(--v95-content-gutter)!important; display:grid!important; grid-template-columns:44px minmax(150px,280px) minmax(220px,680px) 44px!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; background:rgba(255,255,255,.96)!important; border-bottom:1px solid #e5e7eb!important; box-shadow:none!important; backdrop-filter:blur(16px)!important; } .header-menu-btn{ display:flex!important; grid-column:1!important; width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; } .header-menu-btn:hover,.header-menu-btn:focus-visible{background:#f1f5f9!important;} .app-header .page-heading{ grid-column:2!important; position:static!important; min-width:0!important; width:auto!important; text-align:left!important; } .app-header .page-heading h1{ font-size:clamp(20px,1.55vw,26px)!important; line-height:1.15!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; text-align:left!important; } .app-header .header-actions{ display:contents!important; } .app-header .header-search{ grid-column:3!important; justify-self:center!important; width:min(100%,680px)!important; max-width:680px!important; min-width:0!important; height:40px!important; margin:0!important; } .app-header .profile-menu{ grid-column:4!important; justify-self:end!important; position:relative!important; } .header-back{display:none!important;} /* Full-width page content with controlled readable gutters, not a narrow centered strip. */ .main-content{ width:100%!important; max-width:none!important; margin:0!important; padding:clamp(18px,2.2vw,36px) var(--v95-content-gutter)!important; overflow-x:hidden!important; } /* Cleaner desktop use of available width. */ @media(min-width:1181px){ .dashboard-kpis,.kpi-grid,.stats-grid,.summary-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important; } .dashboard-grid,.chart-grid,.reports-grid{ width:100%!important; } } /* Account popup stays above content but below no other menus. */ .account-dropdown{z-index:130!important;top:48px!important;} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ :root{--v95-content-gutter:14px;} .app-header{ grid-template-columns:44px minmax(0,1fr) 44px!important; gap:8px!important; padding:8px 12px!important; } .app-header .page-heading{grid-column:2!important;text-align:center!important;} .app-header .page-heading h1{text-align:center!important;font-size:20px!important;} .app-header .header-search{display:none!important;} .app-header .profile-menu{grid-column:3!important;} .sidebar, body.sidebar-collapsed .sidebar{ width:min(240px,86vw)!important; max-width:min(240px,86vw)!important; } .main-content{padding:14px!important;} } @media(max-width:430px){ .app-header{grid-template-columns:42px minmax(0,1fr) 42px!important;padding-inline:8px!important;} .header-menu-btn,.app-header .profile-chip{width:40px!important;height:40px!important;} .app-header .page-heading h1{font-size:18px!important;} .main-content{padding:10px!important;} } /* V96 — YouTube-style header brand and search. */ :root{ --v96-header-logo:40px; --v96-search-height:40px; } /* Header columns: menu, compact brand, centered search, account. */ .app-header{ grid-template-columns:44px minmax(170px,240px) minmax(260px,720px) 44px!important; column-gap:14px!important; } /* Replace the page title with the system identity, like YouTube. */ .app-header .page-heading{display:none!important;} .header-brand{ grid-column:2!important; display:flex!important; align-items:center!important; min-width:0!important; width:max-content!important; max-width:240px!important; gap:9px!important; color:#0f172a!important; text-decoration:none!important; border-radius:8px!important; outline-offset:3px!important; } .header-brand img{ width:var(--v96-header-logo)!important; height:var(--v96-header-logo)!important; min-width:var(--v96-header-logo)!important; object-fit:contain!important; border-radius:50%!important; display:block!important; } .header-brand strong{ display:block!important; min-width:0!important; max-width:185px!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:18px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.02em!important; } /* YouTube-like search: bordered pill input plus separate search button. */ .app-header .header-search{ display:grid!important; grid-template-columns:minmax(0,1fr) 58px!important; align-items:stretch!important; gap:0!important; height:var(--v96-search-height)!important; width:min(100%,720px)!important; max-width:720px!important; background:transparent!important; border:0!important; border-radius:0!important; padding:0!important; box-shadow:none!important; overflow:visible!important; } .header-search-field{ display:flex!important; align-items:center!important; min-width:0!important; height:var(--v96-search-height)!important; padding:0 14px!important; background:#fff!important; border:1px solid #cbd5e1!important; border-radius:22px 0 0 22px!important; box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important; } .header-search-leading{ display:none!important; flex:0 0 auto!important; margin-right:8px!important; color:#475569!important; font-size:18px!important; } .header-search-field input{ width:100%!important; min-width:0!important; height:38px!important; padding:0!important; margin:0!important; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; color:#0f172a!important; font-size:16px!important; line-height:1!important; } .header-search-field input::placeholder{color:#64748b!important;opacity:1!important;} .header-search-field:focus-within{ border-color:#3b82c4!important; box-shadow:inset 1px 0 #3b82c4,0 0 0 1px #3b82c4!important; } .header-search-field:focus-within .header-search-leading{display:inline-flex!important;} .header-search-submit{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:58px!important; height:var(--v96-search-height)!important; margin:0!important; padding:0!important; border:1px solid #cbd5e1!important; border-left:0!important; border-radius:0 22px 22px 0!important; background:#f8fafc!important; color:#0f172a!important; font-size:21px!important; cursor:pointer!important; box-shadow:none!important; } .header-search-submit:hover{background:#f1f5f9!important;} .header-search-submit:focus-visible{outline:2px solid #3b82c4!important;outline-offset:2px!important;} /* Keep the account control at the far right. */ .app-header .profile-menu{grid-column:4!important;} /* Medium widths: make the brand and search share space without collision. */ @media (max-width:1180px) and (min-width:901px){ .app-header{ grid-template-columns:44px minmax(145px,200px) minmax(220px,1fr) 44px!important; padding-inline:18px!important; gap:10px!important; } .header-brand{max-width:200px!important;gap:8px!important;} .header-brand strong{max-width:145px!important;font-size:16px!important;} .header-brand img{width:36px!important;height:36px!important;min-width:36px!important;} .app-header .header-search{width:100%!important;} } /* Tablet/mobile: keep a compact logo identity and never overlap the account icon. */ @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .app-header{ grid-template-columns:44px minmax(0,1fr) 44px!important; gap:8px!important; } .header-brand{ grid-column:2!important; justify-self:center!important; max-width:calc(100vw - 120px)!important; gap:7px!important; } .header-brand img{width:36px!important;height:36px!important;min-width:36px!important;} .header-brand strong{max-width:180px!important;font-size:17px!important;} .app-header .header-search{display:none!important;} } @media(max-width:480px){ .header-brand img{width:34px!important;height:34px!important;min-width:34px!important;} .header-brand strong{max-width:145px!important;font-size:15px!important;} } @media(max-width:360px){ .header-brand strong{max-width:105px!important;font-size:14px!important;} } /* V97 — clean, single-outline YouTube-style global search. */ .app-header .header-search, .app-header .header-search:focus, .app-header .header-search:focus-within{ outline:0!important; outline-offset:0!important; box-shadow:none!important; border:0!important; } .app-header .header-search-field{ position:relative!important; overflow:hidden!important; border:1px solid #cbd5e1!important; border-right-color:#cbd5e1!important; border-radius:999px 0 0 999px!important; background:#fff!important; box-shadow:inset 0 1px 2px rgba(15,23,42,.035)!important; transition:border-color .15s ease,box-shadow .15s ease!important; } .app-header .header-search-field:focus-within{ border-color:#3b82c4!important; box-shadow:inset 0 0 0 1px #3b82c4!important; outline:0!important; } .app-header .header-search-leading{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:20px!important; height:20px!important; margin-right:8px!important; color:#475569!important; opacity:0!important; transform:translateX(-4px)!important; transition:opacity .15s ease,transform .15s ease!important; } .app-header .header-search-field:focus-within .header-search-leading{ opacity:1!important; transform:translateX(0)!important; } .app-header .header-search-leading svg, .app-header .header-search-submit svg{ width:20px!important; height:20px!important; fill:none!important; stroke:currentColor!important; stroke-width:2!important; stroke-linecap:round!important; stroke-linejoin:round!important; pointer-events:none!important; } .app-header .header-search-field input, .app-header .header-search-field input:focus, .app-header .header-search-field input:focus-visible{ border:0!important; outline:0!important; outline-offset:0!important; box-shadow:none!important; background:transparent!important; } .app-header .header-search-submit{ flex:0 0 64px!important; width:64px!important; border:1px solid #cbd5e1!important; border-left:0!important; border-radius:0 999px 999px 0!important; background:#f8fafc!important; transition:background .15s ease,border-color .15s ease!important; } .app-header .header-search-submit:hover{background:#eef2f7!important;} .app-header .header-search-submit:active{background:#e2e8f0!important;} .app-header .header-search-submit:focus-visible{ outline:2px solid #3b82c4!important; outline-offset:2px!important; } /* Prevent the generic accessibility ring from wrapping the whole search form. */ .app-header .header-search:focus-visible, .app-header .header-search:focus-within{ outline:none!important; } @media(max-width:1180px) and (min-width:901px){ .app-header .header-search-submit{flex-basis:56px!important;width:56px!important;} } /* V98 — fixed YouTube-style top header and search containment across every page. */ :root{ --v98-header-height:64px; --v98-search-height:40px; } html,body{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; } .app-shell,.workspace{ width:100%!important; max-width:100%!important; min-width:0!important; } .workspace{ margin-left:0!important; padding-top:var(--v98-header-height)!important; } .app-header{ position:fixed!important; inset:0 0 auto 0!important; z-index:1000!important; width:100%!important; max-width:none!important; min-width:0!important; height:var(--v98-header-height)!important; min-height:var(--v98-header-height)!important; max-height:var(--v98-header-height)!important; box-sizing:border-box!important; margin:0!important; padding:8px 28px!important; display:grid!important; grid-template-columns:44px minmax(170px,240px) minmax(0,1fr)!important; align-items:center!important; column-gap:14px!important; overflow:visible!important; background:rgba(255,255,255,.97)!important; -webkit-backdrop-filter:blur(16px)!important; backdrop-filter:blur(16px)!important; border-bottom:1px solid #e5e7eb!important; box-shadow:0 2px 12px rgba(15,23,42,.05)!important; } .app-header .header-menu-btn{ grid-column:1!important; width:40px!important; height:40px!important; min-height:40px!important; border:0!important; border-radius:50%!important; box-shadow:none!important; background:transparent!important; } .app-header .header-menu-btn:hover{background:#f1f5f9!important;} .header-brand{ grid-column:2!important; width:auto!important; max-width:240px!important; min-width:0!important; height:44px!important; display:flex!important; align-items:center!important; gap:9px!important; overflow:hidden!important; } .header-brand img{ width:40px!important; height:40px!important; min-width:40px!important; max-width:40px!important; object-fit:contain!important; } .header-brand strong{ max-width:185px!important; min-width:0!important; font-size:18px!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .app-header .header-actions{ grid-column:3!important; width:100%!important; min-width:0!important; max-width:none!important; display:grid!important; grid-template-columns:minmax(220px,720px) 44px!important; justify-content:end!important; align-items:center!important; gap:16px!important; margin:0!important; } .app-header .header-search{ grid-column:1!important; justify-self:center!important; width:100%!important; max-width:720px!important; min-width:0!important; height:var(--v98-search-height)!important; min-height:var(--v98-search-height)!important; max-height:var(--v98-search-height)!important; padding:0!important; margin:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) 64px!important; align-items:stretch!important; gap:0!important; border:0!important; outline:0!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; box-sizing:border-box!important; transform:none!important; } .app-header .header-search-field{ min-width:0!important; width:100%!important; height:var(--v98-search-height)!important; min-height:var(--v98-search-height)!important; max-height:var(--v98-search-height)!important; padding:0 16px!important; margin:0!important; display:flex!important; align-items:center!important; border:1px solid #cbd5e1!important; border-right-color:#cbd5e1!important; border-radius:999px 0 0 999px!important; background:#fff!important; box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important; box-sizing:border-box!important; overflow:hidden!important; } .app-header .header-search-field:focus-within{ border-color:#3b82c4!important; box-shadow:inset 0 0 0 1px #3b82c4!important; } .app-header .header-search-leading{ display:inline-flex!important; flex:0 0 20px!important; width:20px!important; height:20px!important; margin:0 8px 0 0!important; opacity:0!important; } .app-header .header-search-field:focus-within .header-search-leading{opacity:1!important;} .app-header .header-search-field input, .app-header .header-search-field input[type="search"], .app-header .header-search-field input:focus, .app-header .header-search-field input:focus-visible{ display:block!important; width:100%!important; min-width:0!important; height:38px!important; min-height:38px!important; max-height:38px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; color:#0f172a!important; font-size:16px!important; line-height:38px!important; font-weight:400!important; box-sizing:border-box!important; transform:none!important; } .app-header .header-search-submit{ grid-column:2!important; width:64px!important; min-width:64px!important; max-width:64px!important; height:var(--v98-search-height)!important; min-height:var(--v98-search-height)!important; max-height:var(--v98-search-height)!important; padding:0!important; margin:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border:1px solid #cbd5e1!important; border-left:0!important; border-radius:0 999px 999px 0!important; background:#f8fafc!important; color:#0f172a!important; box-shadow:none!important; box-sizing:border-box!important; transform:none!important; } .app-header .header-search-submit:hover{background:#f1f5f9!important;} .app-header .profile-menu{ grid-column:2!important; justify-self:end!important; width:44px!important; min-width:44px!important; max-width:44px!important; } .app-header .profile-chip{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; max-width:44px!important; max-height:44px!important; padding:4px!important; border-radius:50%!important; box-sizing:border-box!important; } .main-content{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; overflow-x:hidden!important; box-sizing:border-box!important; } .workspace-panel,.ordinance-reference-page,.card,.filter-strip,.table-wrap,.report-table-wrap{ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } @media(max-width:1180px) and (min-width:901px){ .app-header{ padding-inline:18px!important; grid-template-columns:44px minmax(145px,200px) minmax(0,1fr)!important; column-gap:10px!important; } .header-brand{max-width:200px!important;} .header-brand img{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;} .header-brand strong{max-width:145px!important;font-size:16px!important;} .app-header .header-actions{grid-template-columns:minmax(180px,1fr) 44px!important;gap:10px!important;} .app-header .header-search{max-width:620px!important;grid-template-columns:minmax(0,1fr) 56px!important;} .app-header .header-search-submit{width:56px!important;min-width:56px!important;max-width:56px!important;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ :root{--v98-header-height:60px;} .workspace{padding-top:var(--v98-header-height)!important;} .app-header{ height:var(--v98-header-height)!important; min-height:var(--v98-header-height)!important; max-height:var(--v98-header-height)!important; padding:8px 12px!important; grid-template-columns:44px minmax(0,1fr) 44px!important; gap:8px!important; } .header-brand{grid-column:2!important;justify-self:center!important;max-width:calc(100vw - 120px)!important;height:44px!important;} .header-brand img{width:34px!important;height:34px!important;min-width:34px!important;max-width:34px!important;} .header-brand strong{max-width:160px!important;font-size:16px!important;} .app-header .header-actions{grid-column:3!important;display:block!important;width:44px!important;} .app-header .header-search{display:none!important;} .app-header .profile-menu{width:44px!important;} } @media(max-width:480px){ .header-brand strong{max-width:125px!important;font-size:15px!important;} } @media print{ .workspace{padding-top:0!important;} .app-header{display:none!important;} } /* V99: polished YouTube-inspired responsive header and role-aware search. */ :root{ --v99-header-h:64px; --v99-header-pad:24px; --v99-brand-max:390px; --v99-search-max:760px; } .app-header{ height:var(--v99-header-h)!important; min-height:var(--v99-header-h)!important; padding:0 var(--v99-header-pad)!important; display:grid!important; grid-template-columns:auto minmax(280px,var(--v99-search-max)) auto!important; align-items:center!important; gap:24px!important; position:fixed!important; inset:0 0 auto 0!important; z-index:1200!important; background:rgba(255,255,255,.97)!important; border-bottom:1px solid #e5e7eb!important; box-shadow:none!important; backdrop-filter:blur(14px)!important; overflow:visible!important; } .workspace{padding-top:var(--v99-header-h)!important;} .header-menu-btn{ width:40px!important;height:40px!important;min-width:40px!important; padding:8px!important;border:0!important;border-radius:999px!important;background:transparent!important; } .header-menu-btn:hover{background:#f2f4f7!important;} .header-brand{ display:flex!important;align-items:center!important;gap:10px!important; min-width:0!important;max-width:var(--v99-brand-max)!important; text-decoration:none!important;color:#111827!important;white-space:nowrap!important; } .header-brand img{ width:40px!important;height:40px!important;min-width:40px!important; object-fit:contain!important;border-radius:50%!important;background:#fff!important; } .header-brand-copy{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;overflow:hidden!important;} .header-system-name,.header-page-name{ display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; font-size:18px!important;line-height:1.2!important;font-weight:800!important;letter-spacing:-.02em!important;color:#111827!important; } .header-system-name{flex:0 1 auto!important;} .header-page-name{flex:1 1 auto!important;color:#334155!important;font-weight:700!important;} .header-brand-separator{color:#94a3b8!important;font-size:17px!important;flex:0 0 auto!important;} .header-actions{ display:contents!important; } .header-search{ justify-self:center!important;width:100%!important;max-width:var(--v99-search-max)!important; height:40px!important;min-height:40px!important;margin:0!important;padding:0!important; display:flex!important;align-items:stretch!important;gap:0!important; border:0!important;background:transparent!important;box-shadow:none!important; } .header-search-field{ position:relative!important;display:flex!important;align-items:center!important;flex:1 1 auto!important;min-width:0!important; height:40px!important;min-height:40px!important;border:1px solid #cbd5e1!important;border-right:0!important; border-radius:20px 0 0 20px!important;background:#fff!important;overflow:hidden!important; transition:border-color .15s ease,box-shadow .15s ease!important; } .header-search-field:focus-within{ border-color:#3b82c4!important;box-shadow:inset 1px 0 0 #3b82c4!important; } .header-search-leading{ display:none!important;width:38px!important;height:38px!important;align-items:center!important;justify-content:center!important;flex:0 0 38px!important; } .header-search-field:focus-within .header-search-leading{display:flex!important;} .header-search-leading svg,.header-search-submit svg,.header-mobile-search-toggle svg,.header-search-back svg,.header-search-clear svg{ width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important; } .header-search input[type="search"]{ appearance:none!important;-webkit-appearance:none!important;width:100%!important;height:38px!important;min-height:38px!important; border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important; padding:0 16px!important;margin:0!important;font:400 16px/1.2 inherit!important;color:#111827!important;border-radius:0!important; } .header-search-field:focus-within input[type="search"]{padding-left:0!important;} .header-search input[type="search"]::-webkit-search-cancel-button{display:none!important;} .header-search-submit{ width:64px!important;height:40px!important;min-width:64px!important;padding:0!important;margin:0!important; display:flex!important;align-items:center!important;justify-content:center!important; border:1px solid #cbd5e1!important;border-radius:0 20px 20px 0!important;background:#f8fafc!important;color:#0f172a!important; } .header-search-submit:hover{background:#f1f5f9!important;} .header-search-back,.header-search-clear,.header-mobile-search-toggle{display:none!important;} .header-search-clear{ width:38px!important;height:38px!important;min-width:38px!important;border:0!important;background:transparent!important;color:#475569!important; align-items:center!important;justify-content:center!important;border-radius:999px!important;margin-right:2px!important; } .header-search-clear:hover{background:#f1f5f9!important;} .profile-menu{justify-self:end!important;position:relative!important;} .profile-chip{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:0!important;background:transparent!important;} .profile-avatar{width:36px!important;height:36px!important;min-width:36px!important;} @media (max-width:1199px){ :root{--v99-header-pad:16px;--v99-brand-max:310px;--v99-search-max:620px;} .app-header{gap:16px!important;grid-template-columns:auto minmax(240px,1fr) auto!important;} .header-system-name,.header-page-name{font-size:16px!important;} } @media (max-width:900px){ .app-header{grid-template-columns:auto minmax(0,1fr) auto!important;gap:10px!important;} .header-brand{max-width:100%!important;} .header-system-name{display:none!important;} .header-brand-separator{display:none!important;} .header-page-name{font-size:17px!important;color:#111827!important;} .header-search{display:none!important;} .header-mobile-search-toggle{ display:flex!important;align-items:center!important;justify-content:center!important; width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:0!important;border-radius:999px!important; background:transparent!important;color:#0f172a!important;justify-self:end!important; } .header-mobile-search-toggle:hover{background:#f2f4f7!important;} .profile-menu{margin-left:0!important;} .header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;min-width:0!important;} body.header-search-open .app-header{grid-template-columns:1fr!important;padding:0 10px!important;} body.header-search-open .header-menu-btn, body.header-search-open .header-brand, body.header-search-open .header-mobile-search-toggle, body.header-search-open .profile-menu{display:none!important;} body.header-search-open .header-actions{display:block!important;width:100%!important;} body.header-search-open .header-search{ display:grid!important;grid-template-columns:40px minmax(0,1fr) 56px!important;gap:8px!important; width:100%!important;max-width:none!important;height:44px!important;align-items:center!important; } body.header-search-open .header-search-back{ display:flex!important;align-items:center!important;justify-content:center!important; width:40px!important;height:40px!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#0f172a!important; } body.header-search-open .header-search-field{ height:40px!important;min-height:40px!important;border:1px solid #94a3b8!important;border-radius:20px 0 0 20px!important; } body.header-search-open .header-search-submit{width:56px!important;min-width:56px!important;} body.header-search-open .header-search-leading{display:flex!important;} body.header-search-open .header-search input[type="search"]{padding-left:0!important;font-size:16px!important;} } @media (max-width:480px){ :root{--v99-header-pad:10px;} .app-header{gap:6px!important;} .header-menu-btn{width:38px!important;height:38px!important;min-width:38px!important;} .header-brand{gap:7px!important;} .header-brand img{width:34px!important;height:34px!important;min-width:34px!important;} .header-page-name{font-size:15px!important;max-width:44vw!important;} .header-mobile-search-toggle,.profile-chip{width:38px!important;height:38px!important;min-width:38px!important;} .profile-avatar{width:34px!important;height:34px!important;min-width:34px!important;} } @media print{ .app-header{display:none!important;} .workspace{padding-top:0!important;} } /* V100: final device-aware header geometry and expandable YouTube-style search. */ :root{ --v100-header-height:64px; --v100-header-x:24px; } /* Desktop/laptop: burger | brand+page | expanding search | profile */ .app-header{ height:var(--v100-header-height)!important; min-height:var(--v100-header-height)!important; max-height:var(--v100-header-height)!important; padding:0 var(--v100-header-x)!important; display:grid!important; grid-template-columns:40px minmax(220px,max-content) minmax(320px,1fr) 40px!important; align-items:center!important; column-gap:18px!important; overflow:visible!important; } .app-header > .header-menu-btn{grid-column:1!important;justify-self:start!important;} .app-header > .header-brand{grid-column:2!important;justify-self:start!important;width:auto!important;max-width:min(430px,30vw)!important;} .app-header > .header-actions{display:contents!important;} .app-header .header-search{ grid-column:3!important; justify-self:stretch!important; width:100%!important; max-width:none!important; min-width:0!important; } .app-header .profile-menu{grid-column:4!important;justify-self:end!important;} .app-header .header-mobile-search-toggle{display:none!important;} .header-brand-copy{max-width:100%!important;} .header-system-name{flex:0 1 auto!important;} .header-page-name{flex:1 1 auto!important;} /* Use the full remaining desktop header width rather than a short centered field. */ .header-search-field{min-width:0!important;} .header-search input[type="search"]{min-width:0!important;} @media (min-width:1600px){ :root{--v100-header-x:32px;} .app-header{grid-template-columns:40px minmax(260px,max-content) minmax(520px,1fr) 40px!important;column-gap:24px!important;} .app-header > .header-brand{max-width:520px!important;} } @media (max-width:1100px) and (min-width:701px){ :root{--v100-header-x:16px;} .app-header{ grid-template-columns:40px minmax(190px,280px) minmax(240px,1fr) 40px!important; column-gap:12px!important; } .app-header > .header-brand{max-width:280px!important;} .header-system-name,.header-page-name{font-size:15px!important;} .header-search-submit{width:56px!important;min-width:56px!important;} } /* Phone/small tablet: burger | logo | page | search icon | profile */ @media (max-width:700px){ :root{--v100-header-height:60px;--v100-header-x:10px;} .app-header{ grid-template-columns:40px 36px minmax(0,1fr) 40px 40px!important; column-gap:7px!important; padding:0 var(--v100-header-x)!important; } .app-header > .header-menu-btn{grid-column:1!important;} /* Split the linked brand into independent grid items without changing markup. */ .app-header > .header-brand{ display:contents!important; max-width:none!important; width:auto!important; } .app-header > .header-brand > img{ grid-column:2!important; width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important; justify-self:center!important; } .app-header > .header-brand > .header-brand-copy{ grid-column:3!important; display:block!important; min-width:0!important; overflow:hidden!important; } .app-header .header-system-name, .app-header .header-brand-separator{display:none!important;} .app-header .header-page-name{ display:block!important; width:100%!important; max-width:none!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:16px!important; line-height:1.2!important; font-weight:800!important; color:#111827!important; } .app-header > .header-actions{display:contents!important;} .app-header .header-search{display:none!important;} .app-header .header-mobile-search-toggle{ grid-column:4!important; display:flex!important; width:40px!important;height:40px!important;min-width:40px!important; justify-self:center!important; } .app-header .profile-menu{ grid-column:5!important; width:40px!important; justify-self:end!important; } .app-header .profile-chip{width:40px!important;height:40px!important;min-width:40px!important;} .app-header .profile-avatar{width:36px!important;height:36px!important;min-width:36px!important;} /* Dedicated search mode, matching YouTube mobile behavior. */ body.header-search-open .app-header{ grid-template-columns:40px minmax(0,1fr)!important; column-gap:8px!important; padding:0 10px!important; } body.header-search-open .app-header > .header-menu-btn, body.header-search-open .app-header > .header-brand, body.header-search-open .app-header .header-mobile-search-toggle, body.header-search-open .app-header .profile-menu{display:none!important;} body.header-search-open .app-header > .header-actions{display:contents!important;} body.header-search-open .app-header .header-search{ grid-column:1 / -1!important; display:grid!important; grid-template-columns:40px minmax(0,1fr) 56px!important; width:100%!important; max-width:none!important; height:44px!important; gap:8px!important; align-items:center!important; } body.header-search-open .header-search-back{ display:flex!important; width:40px!important;height:40px!important;min-width:40px!important; align-items:center!important;justify-content:center!important; } body.header-search-open .header-search-field{ height:40px!important; min-height:40px!important; border-right:0!important; border-radius:20px 0 0 20px!important; } body.header-search-open .header-search-submit{ display:flex!important; width:56px!important;min-width:56px!important;height:40px!important; border-radius:0 20px 20px 0!important; } body.header-search-open .header-search-leading{display:flex!important;} body.header-search-open .header-search-clear:not([hidden]){display:flex!important;} } @media (max-width:380px){ .app-header{ grid-template-columns:38px 32px minmax(0,1fr) 38px 38px!important; column-gap:5px!important; padding:0 7px!important; } .app-header > .header-brand > img{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;} .app-header .header-page-name{font-size:14px!important;} .app-header .header-mobile-search-toggle, .app-header .profile-menu, .app-header .profile-chip{width:38px!important;height:38px!important;min-width:38px!important;} .app-header .profile-avatar{width:34px!important;height:34px!important;min-width:34px!important;} } /* V101: system-wide full-width workspace for every role and page. */ :root{ --v101-page-gutter:clamp(18px,2.2vw,40px); } /* The application shell and every page wrapper must use the available viewport. */ .workspace, .main-content{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } .main-content{ padding:24px var(--v101-page-gutter) 36px!important; } .main-content > *{ width:100%!important; max-width:none!important; min-width:0!important; margin-left:0!important; margin-right:0!important; } /* Remove legacy page width caps across Developer, PNP, Treasurer, OMM and shared pages. */ .setup-page, .law-page, .violation-detail-page, .account-form-card, .account-page-grid, .workspace-panel, .executive-dashboard, .case-dashboard, .role-report-workspace, .report-page-v34, .report-workspace-v35, .pnp-report-v55, .pnp-dashboard-clean, .pnp-dashboard-final, .pnp-profile-clean, .pnp-violator-list-page, .pnp-important-page, .ordinance-reference-page, .drilldown-page, .vp-page, .manager-grid, .add-violation-page, .grid{ width:100%!important; max-width:none!important; min-width:0!important; margin-inline:0!important; } /* Developer violation type management: use the whole page and stack major work areas. */ .setup-layout{ width:100%!important; max-width:none!important; grid-template-columns:minmax(0,1fr)!important; gap:20px!important; } .setup-toolbar, .setup-form-card, .data-panel-card{ width:100%!important; max-width:none!important; min-width:0!important; } .setup-form-card .clean-form{ width:100%!important; max-width:none!important; } /* Full-width account/user creation and profile forms. */ .account-form-card{ margin:0!important; } .account-page-grid{ grid-template-columns:minmax(260px,340px) minmax(0,1fr)!important; } /* Ensure cards, grids, tables, charts and filters expand safely. */ .card, .compact-card, .table-wrap, .report-table-wrap, .chart-card, .report-panel, .filter-strip, .filters, .search-panel, .report-filters, .form-grid{ max-width:none!important; min-width:0!important; } .table-wrap, .report-table-wrap{ width:100%!important; } /* Large desktop/projector: use the full screen while retaining readable gutters. */ @media (min-width:1500px){ :root{--v101-page-gutter:clamp(28px,2.4vw,52px);} .main-content{padding-top:28px!important;padding-bottom:44px!important;} } /* Tablet: preserve full width with compact spacing. */ @media (max-width:1180px){ :root{--v101-page-gutter:18px;} .main-content{padding:20px var(--v101-page-gutter) 32px!important;} .account-page-grid{grid-template-columns:1fr!important;} } /* Mobile: use nearly all available width without touching screen edges. */ @media (max-width:700px){ :root{--v101-page-gutter:12px;} .main-content{padding:14px var(--v101-page-gutter) 28px!important;} .main-content > *{width:100%!important;} .setup-layout{gap:14px!important;} } @media (max-width:380px){ :root{--v101-page-gutter:9px;} .main-content{padding-left:var(--v101-page-gutter)!important;padding-right:var(--v101-page-gutter)!important;} } @media print{ .main-content{padding:0!important;} } /* V102: Developer-side full-width and mobile layout completion. Removes remaining legacy two-column/fixed-width behavior from every Developer page. */ body.role-developer .main-content, body.role-developer .main-content > *, body.role-developer .setup-page, body.role-developer .law-page, body.role-developer .grid, body.role-developer .card, body.role-developer .compact-card, body.role-developer .workspace-panel, body.role-developer .table-wrap, body.role-developer .form-grid, body.role-developer form{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; } /* Ordinance Management: major sections always occupy the whole workspace. */ body.role-developer .law-page{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:22px!important; } body.role-developer .law-hero, body.role-developer .law-workspace, body.role-developer .law-form-card, body.role-developer .law-list-card{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } body.role-developer .law-workspace{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:22px!important; } body.role-developer .law-form-card, body.role-developer .law-list-card{ flex:0 0 auto!important; overflow:visible!important; } body.role-developer .ordinance-form{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; } body.role-developer .ordinance-form > *, body.role-developer .clean-form > *, body.role-developer .form-grid > *{ min-width:0!important; max-width:100%!important; } body.role-developer .ordinance-form .full{grid-column:1/-1!important;} body.role-developer .ordinance-list{width:100%!important;max-width:none!important;} /* Violation types/rules and other developer setup workspaces. */ body.role-developer .setup-layout{ display:flex!important; flex-direction:column!important; align-items:stretch!important; width:100%!important; max-width:none!important; gap:22px!important; } body.role-developer .setup-toolbar, body.role-developer .setup-form-card, body.role-developer .data-panel-card{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; flex:0 0 auto!important; } /* All generic Developer grids should fill their row instead of preserving narrow columns. */ body.role-developer .grid{ grid-template-columns:repeat(12,minmax(0,1fr))!important; align-items:start!important; } body.role-developer .grid > .card:not(.half):not(.third){grid-column:1/-1!important;} body.role-developer .branding-grid, body.role-developer .chart-grid, body.role-developer .manager-grid, body.role-developer .account-page-grid{ width:100%!important; max-width:none!important; min-width:0!important; } /* Tables and filters use the full card width. */ body.role-developer .table, body.role-developer .modern-table{ width:100%!important; max-width:none!important; } body.role-developer .filter-strip, body.role-developer .compact-filter, body.role-developer .topbar, body.role-developer .actions{ width:100%!important; max-width:none!important; min-width:0!important; } /* Developer forms: balanced wide desktop layout. */ @media (min-width:901px){ body.role-developer .main-content{ padding-left:clamp(24px,2.2vw,42px)!important; padding-right:clamp(24px,2.2vw,42px)!important; } body.role-developer .form-grid, body.role-developer .clean-form, body.role-developer .ordinance-form{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body.role-developer .form-grid .full, body.role-developer .clean-form .full, body.role-developer .ordinance-form .full{ grid-column:1/-1!important; } body.role-developer .card.half{grid-column:span 6!important;} body.role-developer .card.third{grid-column:span 4!important;} } /* Mobile Developer pages: no half-width cards, clipped forms, or off-screen panels. */ @media (max-width:900px){ body.role-developer .main-content{ width:100%!important; max-width:100%!important; padding:14px 12px 28px!important; overflow-x:hidden!important; } body.role-developer .main-content > *, body.role-developer .law-page, body.role-developer .law-workspace, body.role-developer .law-hero, body.role-developer .law-form-card, body.role-developer .law-list-card, body.role-developer .setup-page, body.role-developer .setup-layout, body.role-developer .setup-toolbar, body.role-developer .setup-form-card, body.role-developer .data-panel-card, body.role-developer .card{ width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } body.role-developer .law-workspace, body.role-developer .setup-layout{ display:flex!important; flex-direction:column!important; } body.role-developer .form-grid, body.role-developer .clean-form, body.role-developer .ordinance-form, body.role-developer .branding-grid, body.role-developer .chart-grid, body.role-developer .account-page-grid, body.role-developer .filter-strip, body.role-developer .compact-filter{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; } body.role-developer .form-grid > *, body.role-developer .clean-form > *, body.role-developer .ordinance-form > *, body.role-developer label, body.role-developer input, body.role-developer select, body.role-developer textarea, body.role-developer .input{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } body.role-developer .law-hero-stats{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; min-width:0!important; } body.role-developer .law-filter-bar{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; } body.role-developer .law-filter-bar .btn, body.role-developer .sticky-form-actions .btn, body.role-developer .actions .btn{ width:100%!important; } body.role-developer .grid{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; } body.role-developer .grid > *, body.role-developer .card.half, body.role-developer .card.third{ grid-column:1/-1!important; width:100%!important; } } @media (max-width:520px){ body.role-developer .main-content{padding-left:10px!important;padding-right:10px!important;} body.role-developer .card, body.role-developer .law-hero, body.role-developer .law-form-card, body.role-developer .law-list-card, body.role-developer .setup-toolbar, body.role-developer .setup-form-card, body.role-developer .data-panel-card{ padding:16px!important; border-radius:20px!important; } body.role-developer .law-hero-stats{grid-template-columns:1fr 1fr!important;gap:10px!important;} body.role-developer .law-hero-stats > div{min-width:0!important;padding:12px!important;} body.role-developer .split-title{width:100%!important;} } /* V103: Uniform Developer management workspaces. Every major form/list panel uses the same full workspace width as its page toolbar. */ body.role-developer .setup-page, body.role-developer .setup-layout, body.role-developer .setup-toolbar, body.role-developer .setup-layout > .card, body.role-developer .setup-form-card, body.role-developer .data-panel-card, body.role-developer .law-page, body.role-developer .law-workspace, body.role-developer .law-workspace > .card, body.role-developer .account-form-card{ inline-size:100%!important; width:100%!important; max-inline-size:none!important; max-width:none!important; min-inline-size:0!important; min-width:0!important; margin-inline:0!important; box-sizing:border-box!important; justify-self:stretch!important; align-self:stretch!important; } /* Force the violation-type form and list to stack as equal-width rows. */ body.role-developer .setup-page{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-items:stretch!important; gap:22px!important; } body.role-developer .setup-layout{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; align-items:stretch!important; gap:22px!important; } body.role-developer .setup-layout > .setup-form-card, body.role-developer .setup-layout > .data-panel-card{ grid-column:1/-1!important; } /* Keep headings and form content aligned to the same inner width. */ body.role-developer .setup-toolbar, body.role-developer .setup-form-card, body.role-developer .data-panel-card{ padding-inline:clamp(20px,2.2vw,30px)!important; } body.role-developer .setup-form-card .form-section-title, body.role-developer .setup-form-card .clean-form, body.role-developer .data-panel-card > *{ inline-size:100%!important; max-inline-size:none!important; min-inline-size:0!important; box-sizing:border-box!important; } body.role-developer .setup-form-card .clean-form{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } body.role-developer .setup-form-card .clean-form > .full{ grid-column:1/-1!important; } /* Standardize other Developer management pages with equal-width stacked panels. */ body.role-developer .law-workspace{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px!important; } body.role-developer .law-workspace > .law-form-card, body.role-developer .law-workspace > .law-list-card{ grid-column:1/-1!important; } body.role-developer .account-form-card, body.role-developer .law-form-card, body.role-developer .law-list-card{ inline-size:100%!important; max-inline-size:none!important; } /* Category management is also a form + records workspace, so both sections use one full row. */ body.role-developer .main-content > .grid:has(.card.half){ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px!important; } body.role-developer .main-content > .grid:has(.card.half) > .card.half{ grid-column:1/-1!important; width:100%!important; max-width:none!important; } /* Mobile: retain the same full-width hierarchy and stack every form field safely. */ @media (max-width:900px){ body.role-developer .setup-page, body.role-developer .setup-layout, body.role-developer .law-workspace{ gap:14px!important; } body.role-developer .setup-toolbar, body.role-developer .setup-form-card, body.role-developer .data-panel-card, body.role-developer .law-form-card, body.role-developer .law-list-card, body.role-developer .account-form-card{ width:100%!important; max-width:100%!important; padding-inline:16px!important; } body.role-developer .setup-form-card .clean-form{ grid-template-columns:minmax(0,1fr)!important; } body.role-developer .setup-form-card .clean-form > *{ grid-column:1/-1!important; } } /* V104 Developer navigation and audit logs */ .developer-nav-clean{padding-bottom:20px} .developer-nav-clean a{flex:0 0 auto} .logs-filter-grid{display:grid;grid-template-columns:minmax(240px,2fr) repeat(5,minmax(150px,1fr));gap:14px;align-items:end;width:100%} .logs-filter-grid label{min-width:0} .logs-filter-grid .filter-actions{display:flex;gap:10px;grid-column:1/-1} .stats-inline{display:flex;gap:12px;flex-wrap:wrap} .mini-stat{min-width:145px;padding:14px 18px;border:1px solid var(--line,#dde4ed);border-radius:18px;background:#fff} .mini-stat strong,.mini-stat span{display:block}.mini-stat strong{font-size:28px}.mini-stat span{font-size:13px;color:var(--muted,#64748b)} .logs-table td small{display:block;margin-top:4px;color:var(--muted,#64748b)} .logs-table code{font-size:12px;white-space:nowrap} @media(max-width:1180px){.logs-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.logs-filter-grid{grid-template-columns:1fr}.logs-filter-grid .filter-actions{grid-column:auto}.stats-inline{width:100%}.mini-stat{flex:1 1 130px}.logs-table code{white-space:normal}} /* V105: uniform full-width Developer workspaces and rebuilt Branding page. */ body.role-developer .setup-page{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px!important; width:100%!important; } /* Remove the legacy layout wrapper as a sizing boundary so both cards inherit the exact toolbar width. */ body.role-developer .setup-page > .setup-layout{ display:contents!important; } body.role-developer .setup-page > .setup-toolbar, body.role-developer .setup-page > .setup-layout > .setup-form-card, body.role-developer .setup-page > .setup-layout > .data-panel-card{ grid-column:1/-1!important; width:100%!important; inline-size:100%!important; max-width:none!important; max-inline-size:none!important; min-width:0!important; margin:0!important; justify-self:stretch!important; box-sizing:border-box!important; } body.role-developer .setup-form-card .clean-form, body.role-developer .setup-form-card .form-section-title, body.role-developer .data-panel-card > *{ width:100%!important; max-width:none!important; min-width:0!important; } body.role-developer .branding-workspace{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:22px!important; width:100%!important; max-width:none!important; margin:0!important; } body.role-developer .branding-workspace > .branding-section{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; grid-column:1/-1!important; box-sizing:border-box!important; } .branding-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px} .branding-section-head h2{margin:0 0 6px;font-size:24px} .branding-section-head p{margin:0} .branding-current-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%} .branding-current-card{display:flex;align-items:center;gap:20px;min-width:0;padding:20px;border:1px solid #e6ebf2;border-radius:22px;background:#f8fafc} .branding-main-logo{width:92px;height:92px;border-radius:24px;object-fit:cover;flex:0 0 auto;border:1px solid #dfe5ed;background:#fff} .branding-favicon{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:0 0 auto;border:1px solid #dfe5ed;background:#fff} .branding-current-copy{min-width:0} .branding-current-copy strong{display:block;font-size:22px;color:#111827;overflow-wrap:anywhere} .branding-current-copy p{margin:7px 0 0;color:#64748b;line-height:1.5} .branding-eyebrow{display:block;margin-bottom:7px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#64748b} .branding-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%} .branding-upload-card{display:flex!important;flex-direction:column;gap:8px;min-width:0;margin:0!important;padding:18px;border:1px solid #e2e8f0;border-radius:20px;background:#fff} .branding-upload-card small{display:block;min-height:38px;color:#64748b;line-height:1.45} .branding-upload-title{margin:0!important;font-size:16px;font-weight:900;color:#111827} .branding-upload-card input[type=file]{margin-top:auto;width:100%!important;max-width:100%!important;box-sizing:border-box} .branding-rule-note{margin:18px 0 0!important;width:100%;box-sizing:border-box;line-height:1.55} .branding-text-grid{width:100%!important;max-width:none!important} .branding-save-row{display:flex;justify-content:flex-end} .branding-save-row .btn{min-width:240px} @media(max-width:1100px){ .branding-upload-grid{grid-template-columns:1fr 1fr} .branding-upload-card:last-child{grid-column:1/-1} } @media(max-width:760px){ body.role-developer .setup-page{gap:14px!important} .branding-current-grid,.branding-upload-grid{grid-template-columns:1fr} .branding-upload-card:last-child{grid-column:auto} .branding-current-card{padding:16px;gap:14px} .branding-main-logo{width:76px;height:76px;border-radius:20px} .branding-favicon{width:54px;height:54px} .branding-section-head h2{font-size:21px} .branding-save-row{display:block} .branding-save-row .btn{width:100%;min-width:0} } /* V106: full-height sidebar navigation. The menu owns all remaining height below the brand and scrolls to the bottom edge. */ .sidebar{ height:100vh!important; height:100dvh!important; min-height:100dvh!important; padding-bottom:0!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; } .sidebar > .brand{ flex:0 0 auto!important; margin:0!important; } .sidebar > .nav-scroll, .sidebar > nav.nav-scroll{ flex:1 1 0!important; min-height:0!important; max-height:none!important; height:auto!important; overflow-y:auto!important; overflow-x:hidden!important; margin:0!important; padding-bottom:10px!important; overscroll-behavior:contain!important; scrollbar-gutter:stable!important; } .sidebar .footer-spacer{ display:none!important; height:0!important; min-height:0!important; margin:0!important; padding:0!important; } .developer-nav-clean{ padding-bottom:10px!important; } .sidebar > .nav-scroll::-webkit-scrollbar{ width:6px!important; } .sidebar > .nav-scroll::-webkit-scrollbar-track{ background:transparent!important; } .sidebar > .nav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.24)!important; border-radius:999px!important; } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{ inset:0 auto 0 0!important; padding-bottom:0!important; } .sidebar > .nav-scroll, .sidebar > nav.nav-scroll{ max-height:none!important; padding-bottom:max(12px,env(safe-area-inset-bottom))!important; } } /* V107 Developer user profile pictures */ .developer-user-form{width:100%!important;max-width:none!important;margin:0!important} .user-admin-photo-row{min-height:132px;background:#fbfcfe} .user-admin-photo{flex:0 0 96px} .remove-avatar-option{display:flex!important;align-items:center;gap:9px;margin-top:10px;font-size:14px;font-weight:700;color:#475569;text-transform:none;letter-spacing:0} .remove-avatar-option input{width:18px;height:18px;margin:0} .developer-user-cell{display:flex;align-items:center;gap:12px;min-width:220px} .developer-user-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#176c3a,#4f46e5);color:#fff;font-weight:900;font-size:18px;box-shadow:0 4px 14px rgba(15,23,42,.12)} .developer-user-avatar img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:700px){.user-admin-photo-row{min-height:0}.developer-user-cell{min-width:0}.developer-users-table .developer-user-avatar{width:44px;height:44px;flex-basis:44px}} /* V108: balanced Developer and Mayor/OMM dashboards */ .developer-dashboard-v108{ display:grid; gap:18px; width:100%; min-width:0; } .developer-kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .developer-kpi-card{ min-width:0; min-height:138px; display:flex; flex-direction:column; justify-content:center; padding:18px 20px; border:1px solid #e7edf6; border-radius:22px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 14px 34px rgba(15,23,42,.055); color:inherit; overflow:hidden; position:relative; } .developer-kpi-card:after{ content:""; position:absolute; width:82px; height:82px; border-radius:999px; right:-24px; top:-26px; background:linear-gradient(135deg,rgba(22,101,52,.10),rgba(67,56,202,.10)); } .developer-kpi-card span{ color:#64748b; font-size:11px; font-weight:1000; letter-spacing:.09em; text-transform:uppercase; } .developer-kpi-card strong{ margin-top:7px; color:#1f6b45; font-size:clamp(28px,2.4vw,38px); line-height:1; letter-spacing:-.045em; } .developer-kpi-card small{ margin-top:9px; color:#64748b; font-size:12px; font-weight:750; } .developer-dashboard-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:18px; align-items:stretch; min-width:0; } .developer-dashboard-card{ min-width:0; padding:20px; border:1px solid #e7edf6; border-radius:24px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:0 16px 40px rgba(15,23,42,.055); overflow:hidden; } .developer-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; } .developer-card-head h2{ margin:0; font-size:clamp(20px,1.6vw,25px); line-height:1.15; color:#0f172a; letter-spacing:-.035em; } .developer-card-head p{ margin:5px 0 0; color:#64748b; font-size:13px; line-height:1.4; } .developer-role-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; } .developer-role-tile{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:3px 10px; align-items:center; min-width:0; padding:14px; border:1px solid #e9eef6; border-radius:18px; background:#fbfdff; color:inherit; } .developer-role-tile span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0f172a; font-size:14px; font-weight:900; } .developer-role-tile strong{ grid-row:1/3; grid-column:2; color:#1f6b45; font-size:28px; line-height:1; } .developer-role-tile small{ color:#64748b; font-size:12px; font-weight:750; } .developer-health-list{ display:grid; gap:10px; } .developer-health-list>div{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px 13px; border:1px solid #e9eef6; border-radius:16px; background:#fbfdff; } .developer-health-list span{ min-width:0; color:#475569; font-size:13px; font-weight:800; } .developer-health-list b{ white-space:nowrap; color:#0f172a; font-size:13px; } .developer-health-list b.ok{color:#15803d;} .developer-shortcut-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .developer-shortcut-card{ min-width:0; min-height:118px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:15px; border:1px solid #e9eef6; border-radius:18px; background:#fbfdff; color:inherit; } .developer-shortcut-card strong{ display:block; color:#0f172a; font-size:15px; line-height:1.25; } .developer-shortcut-card p{ margin:5px 0 0; color:#64748b; font-size:12px; line-height:1.4; } .developer-shortcut-card>span{ color:#1f6b45; font-size:12px; font-weight:950; } /* Mayor/OMM: use the whole width without oversized charts or cards */ .omm-dashboard-v2{ gap:16px!important; width:100%!important; min-width:0!important; } .omm-dashboard-v2 .omm-kpis{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:12px!important; } .omm-dashboard-v2 .dash-kpi{ min-height:126px!important; padding:16px 17px!important; border-radius:21px!important; } .omm-dashboard-v2 .dash-kpi strong{ font-size:clamp(25px,2.15vw,34px)!important; white-space:normal!important; } .omm-dashboard-v2 .dash-kpi small{ margin-top:6px!important; font-size:11.5px!important; } .omm-analytics-grid{ gap:16px!important; align-items:start!important; } .omm-top-grid{ grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)!important; } .omm-monitor-grid{ grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)!important; } .omm-card{ padding:18px!important; border-radius:22px!important; box-shadow:0 15px 38px rgba(15,23,42,.055)!important; } .omm-card-head{ margin-bottom:13px!important; } .omm-card-head h2{ font-size:clamp(19px,1.45vw,23px)!important; } .omm-card-head p{ font-size:12.5px!important; } .omm-month-chart{ height:238px!important; min-height:0!important; padding:14px!important; gap:10px!important; border-radius:18px!important; } .omm-month-item{ height:202px!important; min-width:60px!important; } .omm-month-item span{ height:142px!important; width:min(38px,66%)!important; } .omm-month-item small{ font-size:11px!important; } .omm-donut-layout{ min-height:238px!important; gap:13px!important; } .omm-donut{ width:156px!important; height:156px!important; box-shadow:0 14px 34px rgba(15,23,42,.10)!important; } .omm-donut:after{inset:23px!important;} .omm-donut b{font-size:31px!important;} .omm-donut span{margin-top:29px!important;font-size:10px!important;} .omm-legend{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } .omm-legend a{ grid-template-columns:auto minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:3px 7px!important; padding:9px!important; } .omm-legend a span{ grid-column:2!important; white-space:normal!important; font-size:10.5px!important; } .omm-mini-stat-grid{ gap:10px!important; } .omm-mini-stat{ min-height:96px!important; padding:13px!important; border-radius:17px!important; } .omm-mini-stat strong{ font-size:clamp(23px,2vw,30px)!important; } .omm-bars{gap:9px!important;} .omm-bar{ padding:11px 12px!important; border-radius:15px!important; } .omm-bar em{height:9px!important;} .omm-category-grid{gap:10px!important;} .omm-category{ padding:12px!important; border-radius:17px!important; } .omm-category>span{ width:48px!important; height:48px!important; flex-basis:48px!important; } .omm-timeline{ gap:9px!important; } .omm-timeline-row{ padding:11px 12px!important; border-radius:15px!important; } @media(max-width:1300px){ .developer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .developer-dashboard-grid{grid-template-columns:1fr;} .developer-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .omm-dashboard-v2 .omm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .omm-top-grid,.omm-monitor-grid,.omm-analytics-grid{grid-template-columns:1fr!important;} .omm-legend{grid-template-columns:repeat(3,minmax(0,1fr))!important;} } @media(max-width:760px){ .developer-dashboard-v108{gap:13px;} .developer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .developer-kpi-card{min-height:112px;padding:14px;border-radius:18px;} .developer-kpi-card strong{font-size:27px;} .developer-dashboard-card{padding:15px;border-radius:20px;} .developer-card-head{display:grid;gap:9px;} .developer-card-head .mini-link{width:100%;} .developer-role-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;} .developer-role-tile{padding:12px;grid-template-columns:1fr auto;} .developer-shortcut-grid{grid-template-columns:1fr;} .developer-shortcut-card{min-height:96px;} .omm-dashboard-v2 .omm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;} .omm-dashboard-v2 .dash-kpi{min-height:108px!important;padding:13px!important;} .omm-dashboard-v2 .dash-kpi span{font-size:10px!important;} .omm-dashboard-v2 .dash-kpi strong{font-size:24px!important;} .omm-card{padding:14px!important;border-radius:19px!important;} .omm-month-chart{height:220px!important;grid-template-columns:repeat(6,62px)!important;} .omm-month-item{height:184px!important;min-width:62px!important;} .omm-month-item span{height:126px!important;width:34px!important;} .omm-donut-layout{min-height:0!important;} .omm-legend{grid-template-columns:1fr!important;} .omm-mini-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;} .omm-category-grid{grid-template-columns:1fr!important;} .omm-timeline{grid-template-columns:1fr!important;} } @media(max-width:430px){ .developer-kpi-grid,.developer-role-grid{grid-template-columns:1fr 1fr;} .developer-kpi-card{padding:12px;} .developer-kpi-card small{font-size:10.5px;} .omm-dashboard-v2 .omm-kpis{grid-template-columns:1fr 1fr!important;} .omm-mini-stat-grid{grid-template-columns:1fr!important;} } /* V109 — preserve the complete role/page title before allocating space to search. */ @media (min-width:1200px){ .app-header{ grid-template-columns:40px max-content minmax(220px,1fr) 40px!important; column-gap:18px!important; } .app-header > .header-brand{ width:max-content!important; max-width:none!important; min-width:0!important; overflow:visible!important; } .app-header > .header-brand .header-brand-copy{ width:max-content!important; max-width:none!important; min-width:0!important; overflow:visible!important; flex-wrap:nowrap!important; } .app-header .header-system-name, .app-header .header-page-name{ flex:0 0 auto!important; width:auto!important; max-width:none!important; overflow:visible!important; text-overflow:clip!important; white-space:nowrap!important; } .app-header .header-search{ min-width:220px!important; max-width:none!important; width:100%!important; } } /* Laptop widths: keep the page title readable and let search compress first. */ @media (min-width:901px) and (max-width:1199px){ .app-header{ grid-template-columns:40px minmax(280px,max-content) minmax(180px,1fr) 40px!important; column-gap:10px!important; padding-inline:14px!important; } .app-header > .header-brand{ width:max-content!important; max-width:46vw!important; overflow:hidden!important; } .app-header .header-brand-copy{max-width:100%!important;} .app-header .header-system-name{flex:0 0 auto!important;} .app-header .header-page-name{ flex:0 1 auto!important; max-width:28vw!important; } .app-header .header-search{min-width:180px!important;} } /* Mobile remains: burger | logo | current page | search | profile. */ @media (max-width:700px){ .app-header .header-page-name{ min-width:0!important; max-width:none!important; } } /* V110 — system-wide 3D logo loading screen */ .system-loader { position: fixed; inset: 0; z-index: 100000; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: rgba(248, 250, 252, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 1; visibility: visible; transition: opacity .28s ease, visibility .28s ease; } .system-loader[hidden], body:not(.is-page-loading) .system-loader { opacity: 0; visibility: hidden; pointer-events: none; } .system-loader-stage { position: relative; width: 104px; height: 122px; display: grid; place-items: center; perspective: 700px; } .system-loader-logo { position: relative; width: 88px; height: 88px; transform-style: preserve-3d; animation: mgtrackLogoFlip 1.45s cubic-bezier(.55,.08,.32,1) infinite; } .system-loader-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; border: 1px solid rgba(15, 23, 42, .10); box-shadow: 0 15px 35px rgba(15, 23, 42, .20), inset 0 0 0 5px rgba(255,255,255,.72); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .system-loader-face img { width: 100%; height: 100%; object-fit: contain; display: block; } .system-loader-back { transform: rotateY(180deg); } .system-loader-shadow { position: absolute; left: 50%; bottom: 2px; width: 70px; height: 12px; border-radius: 50%; background: rgba(15, 23, 42, .18); filter: blur(5px); transform: translateX(-50%); animation: mgtrackLoaderShadow 1.45s ease-in-out infinite; } .system-loader-copy { display: grid; justify-items: center; gap: 4px; text-align: center; } .system-loader-copy strong { color: #0f172a; font-size: 18px; line-height: 1.2; letter-spacing: .015em; } .system-loader-copy span { color: #64748b; font-size: 14px; line-height: 1.4; } @keyframes mgtrackLogoFlip { 0% { transform: rotateY(0deg) rotateX(0deg) translateY(0); } 22% { transform: rotateY(90deg) rotateX(4deg) translateY(-7px); } 50% { transform: rotateY(180deg) rotateX(0deg) translateY(0); } 72% { transform: rotateY(270deg) rotateX(-4deg) translateY(-7px); } 100% { transform: rotateY(360deg) rotateX(0deg) translateY(0); } } @keyframes mgtrackLoaderShadow { 0%, 50%, 100% { transform: translateX(-50%) scaleX(1); opacity: .20; } 22%, 72% { transform: translateX(-50%) scaleX(.58); opacity: .10; } } @media (max-width: 480px) { .system-loader-stage { width: 88px; height: 104px; } .system-loader-logo { width: 74px; height: 74px; } .system-loader-copy strong { font-size: 16px; } .system-loader-copy span { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .system-loader-logo { animation: mgtrackLogoPulse 1.2s ease-in-out infinite; } .system-loader-shadow { animation: none; } @keyframes mgtrackLogoPulse { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.04); } } } /* V111: clearly indicate that the header profile control is clickable */ .app-header .profile-chip, .app-header [data-profile-toggle], .app-header .profile-avatar, .profile-menu [data-profile-toggle] { cursor: pointer !important; } .app-header .profile-chip:hover, .app-header [data-profile-toggle]:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .10) !important; } .app-header .profile-chip:active, .app-header [data-profile-toggle]:active { transform: scale(.97); } .app-header .profile-chip:focus-visible, .app-header [data-profile-toggle]:focus-visible { outline: 3px solid rgba(37, 99, 235, .28) !important; outline-offset: 3px !important; } /* V114 — coordinated five-color visual system Forest #1F6B45 | Navy #17324D | Gold #D6A63C | Coral #D95D4F | Sky #3B82C4 */ :root{ --color-primary:var(--forest); --color-structure:var(--navy); --color-highlight:var(--gold); --color-danger:var(--coral); --color-info:var(--sky); --forest-soft:#eaf4ef; --navy-soft:#edf2f6; --gold-soft:#fff8e7; --coral-soft:#fff0ee; --sky-soft:#edf6fd; } body{accent-color:var(--forest)} .app-shell{background:linear-gradient(135deg,#f6f8fb 0%,#fbfcfe 48%,#f1f7f4 100%)} .sidebar{background:linear-gradient(180deg,var(--navy) 0%,#10263b 58%,#0b1d2d 100%);box-shadow:14px 0 42px rgba(23,50,77,.22)} .brand img{box-shadow:0 10px 24px rgba(214,166,60,.20)} .nav a:hover{background:rgba(59,130,196,.17);box-shadow:none} .nav a.active{background:linear-gradient(135deg,var(--forest),#285f4a);color:#fff;box-shadow:0 10px 26px rgba(31,107,69,.28)} .nav a.active .nav-icon{color:#fff} .nav-badge{background:var(--gold);color:#2f250b} .app-header{border-bottom-color:#e3eaf0;box-shadow:0 10px 28px rgba(23,50,77,.055)} .header-brand:focus-visible,.profile-chip:focus-visible,.burger:focus-visible{outline:3px solid rgba(59,130,196,.28);outline-offset:3px} .header-search:focus-within{border-color:var(--sky);box-shadow:0 0 0 5px rgba(59,130,196,.12)} .profile-chip .profile-avatar,.account-avatar-large{background:linear-gradient(135deg,var(--forest),var(--sky))} .btn-primary{background:linear-gradient(135deg,var(--forest),#285f4a);box-shadow:0 14px 30px rgba(31,107,69,.22)} .btn-primary:hover{filter:brightness(1.04)} .btn-outline:hover{border-color:var(--sky);background:var(--sky-soft);color:var(--navy)} .btn-danger,.danger-button{background:var(--coral);color:#fff} .card,.chart-card,.dash-kpi{border-color:#e6edf2;box-shadow:0 16px 42px rgba(23,50,77,.075)} .card h2,.card-head h2,.page-heading h1{color:var(--navy)} .stat,.dash-kpi.success strong{color:var(--forest)} .dash-kpi.warn strong{color:#9b6a00}.dash-kpi.danger strong{color:var(--coral)} .input:focus,select:focus,textarea:focus,.field:focus{border-color:var(--sky);box-shadow:0 0 0 5px rgba(59,130,196,.11)} .table thead th{color:var(--navy);background:#f4f7fa} .table tbody tr:hover{background:#f7fafc} .badge,.status-chip.paid{background:var(--forest-soft);color:var(--forest)} .status-chip,.badge-info{background:var(--sky-soft);color:#245d8d} .status-chip.unpaid,.status-chip.partial,.badge-warning{background:var(--gold-soft);color:#8b6300} .badge-danger,.flash-error{background:var(--coral-soft);color:#a4372f;border-color:#f2c5bf} .flash-success{background:var(--forest-soft);color:var(--forest);border-color:#bcdcca} .flash-info{background:var(--sky-soft);color:#245d8d;border-color:#c8e1f4} .alert-warning,.warning-banner{background:var(--gold-soft);border-color:#ead18c;color:#795500} .mini-link:hover{border-color:var(--sky);background:var(--sky-soft);color:var(--navy)} .vbar-value,.bar-meta span,.ring-mini span{color:var(--forest)} .vbar-track span{background:linear-gradient(180deg,var(--sky),var(--forest))} .bar-line span{background:linear-gradient(90deg,var(--forest),#2e8a60)} .bar-line.purple span{background:linear-gradient(90deg,var(--sky),var(--navy))} .timeline-row .dot{background:var(--sky);box-shadow:0 0 0 4px var(--sky-soft)} .donut-chart{background:conic-gradient(var(--forest) 0 var(--paid),var(--gold) var(--paid) calc(var(--paid) + var(--unpaid)),var(--sky) calc(var(--paid) + var(--unpaid)) var(--overdue-start),var(--coral) var(--overdue-start) 100%)} .lg.paid{background:var(--forest)}.lg.unpaid{background:var(--gold)}.lg.cases{background:var(--sky)}.lg.overdue{background:var(--coral)} .ring-mini{background:conic-gradient(var(--forest) 0 var(--p),#e9eef3 var(--p) 100%)} .account-dropdown a:hover{background:var(--sky-soft);color:var(--navy)} .auth-page{background:radial-gradient(circle at 18% 14%,rgba(59,130,196,.16),transparent 30%),radial-gradient(circle at 82% 78%,rgba(214,166,60,.14),transparent 32%),linear-gradient(135deg,#f4f8fb 0%,#f8fbf9 56%,#fffaf0 100%)} .auth-bg-ring{background:radial-gradient(circle,rgba(31,107,69,.12),rgba(59,130,196,.10) 48%,transparent 69%)} .auth-logo{box-shadow:0 9px 26px rgba(23,50,77,.18)} .kicker,.forgot,.show-btn{color:var(--forest)} .auth-card h1{color:var(--navy)} .auth-card{border-color:rgba(226,232,240,.96);box-shadow:0 26px 90px rgba(23,50,77,.16)} ::selection{background:rgba(214,166,60,.36);color:var(--navy)} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .nav a:hover{background:rgba(255,255,255,.06)} .nav a.active{background:linear-gradient(135deg,var(--forest),#285f4a)} } /* V115 modern ApexCharts dashboard system */ .chart-card,.omm-card,.developer-dashboard-card{background:#fff;border:1px solid #e8edf3;border-radius:18px;box-shadow:0 8px 30px rgba(15,23,42,.06);min-width:0;overflow:hidden} .chart-card,.omm-card{padding:20px}.chart-card .card-head,.omm-card-head,.developer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.chart-card h2,.omm-card h2,.developer-dashboard-card h2{margin:0;color:#172033;font-size:18px;font-weight:800}.chart-card p,.omm-card p,.developer-dashboard-card p{margin:4px 0 0;color:#7a8495;font-size:12px}.apex-chart-shell{position:relative;width:100%;min-height:290px}.apex-chart-shell.compact{min-height:250px}.chart-empty{min-height:250px;display:grid;place-content:center;text-align:center;gap:5px;color:#8490a3}.chart-empty span{font-size:28px}.chart-empty strong{color:#475467}.chart-empty small{font-size:12px}.chart-filter{border:1px solid #dfe5ec;border-radius:10px;padding:8px 12px;background:#fff;color:#344054;font-size:13px;cursor:pointer;outline:none}.chart-filter:focus{border-color:#3B82C4;box-shadow:0 0 0 3px rgba(59,130,196,.12)}.apexcharts-tooltip{border:1px solid #e8edf3!important;box-shadow:0 10px 28px rgba(15,23,42,.12)!important}.apexcharts-menu{border:1px solid #e8edf3!important;border-radius:12px!important;box-shadow:0 14px 32px rgba(15,23,42,.12)!important;overflow:hidden}.chart-legend-note{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.chart-legend-note span{font-size:11px;color:#667085;background:#f8fafc;border:1px solid #edf1f5;border-radius:999px;padding:5px 9px} @media(max-width:768px){.chart-card,.omm-card{padding:15px;border-radius:14px}.apex-chart-shell{min-height:240px}.chart-card .card-head,.omm-card-head{flex-direction:column}.apexcharts-canvas,.apexcharts-svg{max-width:100%!important}} @media(min-width:1600px){.apex-chart-shell{min-height:340px}.chart-card h2,.omm-card h2{font-size:20px}} .fallback-donut{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:18px;align-items:center}.fallback-donut svg{width:100%;max-height:250px}.fd-value{font-size:24px;font-weight:800;fill:#172033}.fd-label{font-size:11px;fill:#7a8495;text-transform:uppercase;letter-spacing:.08em}.fallback-legend{display:grid;gap:9px}.fallback-legend span{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;font-size:12px;color:#667085}.fallback-legend i{width:10px;height:10px;border-radius:50%}.fallback-legend b{color:#172033}.fallback-bars{display:grid;gap:14px;padding:8px 2px}.fallback-bar-row>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}.fallback-bar-row strong{font-size:12px;color:#172033}.fallback-bar-row span{font-size:12px;color:#667085}.fallback-bar-row em{display:block;height:10px;border-radius:999px;background:#edf1f5;overflow:hidden}.fallback-bar-row i{display:block;height:100%;border-radius:inherit}.fallback-area svg{width:100%;height:250px}.fallback-axis{display:grid;grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:4px}.fallback-axis span{text-align:center;font-size:10px;color:#8490a3}.chart-library-missing{min-height:240px} @media(max-width:640px){.fallback-donut{grid-template-columns:1fr}.fallback-donut svg{max-height:220px}.fallback-area svg{height:220px}.fallback-axis span:nth-child(even){display:none}} /* V116 — compact executive Mayor/OMM dashboard inspired by modern LGU analytics layouts */ .role-mayor .sidebar{width:216px!important;} .role-mayor .sidebar .brand{padding:22px 18px 18px!important;gap:10px!important;} .role-mayor .sidebar .brand img{width:38px!important;height:38px!important;} .role-mayor .sidebar .brand strong{font-size:16px!important;} .role-mayor .sidebar .brand small{font-size:11px!important;line-height:1.25!important;} .role-mayor .sidebar .nav{padding:10px 12px 14px!important;gap:5px!important;} .role-mayor .sidebar .nav a{min-height:40px!important;padding:9px 12px!important;border-radius:9px!important;font-size:13px!important;gap:10px!important;} .role-mayor .sidebar .nav a .nav-icon{width:18px!important;height:18px!important;} .role-mayor .sidebar-footer{padding:12px!important;} .role-mayor .sidebar-footer a{min-height:40px!important;font-size:13px!important;border-radius:9px!important;} .mayor-modern-dashboard{display:grid;gap:14px;padding:2px;min-width:0;} .mayor-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;} .mayor-kpi-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:17px 18px;background:#fff;border:1px solid #e7edf5;border-radius:13px;box-shadow:0 5px 18px rgba(15,23,42,.045);text-decoration:none;color:#172033;transition:.18s ease;} .mayor-kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:#d7e1ee;} .mayor-kpi-card div{min-width:0;display:grid;gap:5px;} .mayor-kpi-card span{font-size:12px;color:#40506a;font-weight:600;} .mayor-kpi-card strong{font-size:clamp(22px,1.75vw,30px);line-height:1;color:#101a33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mayor-kpi-card small{font-size:10px;color:#718096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mayor-kpi-card i{flex:0 0 44px;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-size:19px;font-weight:900;} .mayor-kpi-card.blue i{color:#2563eb;background:#eaf1ff}.mayor-kpi-card.green i{color:#16a34a;background:#e8f7ed}.mayor-kpi-card.violet i{color:#7c3aed;background:#f0eafe}.mayor-kpi-card.amber i{color:#d97706;background:#fff2df}.mayor-kpi-card.coral i{color:#e11d48;background:#fde9ef} .mayor-primary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .mayor-secondary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} .mayor-chart-card{min-width:0;background:#fff;border:1px solid #e7edf5;border-radius:14px;padding:16px 18px 12px;box-shadow:0 5px 18px rgba(15,23,42,.045);overflow:hidden;} .mayor-chart-card.compact-card{padding-bottom:8px;} .mayor-chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:2px;} .mayor-chart-head h2{margin:0;color:#111b34;font-size:14px;font-weight:800;line-height:1.3;} .mayor-chart-head p{margin:3px 0 0;color:#718096;font-size:10.5px;line-height:1.4;} .mayor-chart-action{flex:0 0 auto;padding:7px 10px;border:1px solid #dfe6ef;border-radius:8px;background:#fbfdff;color:#1f4f8f;text-decoration:none;font-size:10.5px;font-weight:700;} .mayor-chart-action:hover{background:#f2f7ff;border-color:#c9d8ee;} .mayor-chart-large{min-height:280px!important;}.mayor-chart-medium{min-height:250px!important;} .mayor-modern-dashboard .apexcharts-toolbar{top:-2px!important;right:0!important;} .mayor-modern-dashboard .apexcharts-legend-text,.mayor-modern-dashboard .apexcharts-text{font-size:10px!important;} .mayor-modern-dashboard .apexcharts-tooltip{font-size:11px!important;} @media(min-width:1700px){ .role-mayor .sidebar{width:230px!important}.mayor-modern-dashboard{gap:16px}.mayor-kpi-grid,.mayor-primary-grid,.mayor-secondary-grid{gap:16px}.mayor-kpi-card{padding:20px}.mayor-chart-card{padding:19px 21px 14px}.mayor-chart-head h2{font-size:16px}.mayor-chart-head p{font-size:12px}.mayor-chart-large{min-height:310px!important}.mayor-chart-medium{min-height:280px!important} } @media(max-width:1280px){ .mayor-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.mayor-primary-grid{grid-template-columns:1fr;}.mayor-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .mayor-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.mayor-secondary-grid{grid-template-columns:1fr 1fr;} } @media(max-width:700px){ .mayor-modern-dashboard{gap:10px}.mayor-kpi-grid{grid-template-columns:1fr 1fr;gap:9px}.mayor-kpi-card{padding:13px;border-radius:11px}.mayor-kpi-card i{width:38px;height:38px;flex-basis:38px}.mayor-kpi-card strong{font-size:20px}.mayor-kpi-card small{display:none}.mayor-primary-grid,.mayor-secondary-grid{grid-template-columns:1fr;gap:10px}.mayor-chart-card{padding:14px 13px 8px;border-radius:12px}.mayor-chart-head{align-items:center}.mayor-chart-head h2{font-size:13px}.mayor-chart-head p{font-size:10px}.mayor-chart-large,.mayor-chart-medium{min-height:235px!important} } @media(max-width:420px){ .mayor-kpi-grid{grid-template-columns:1fr}.mayor-kpi-card small{display:block}.mayor-chart-action{display:none} } /* V117 — unified compact executive dashboard system inspired by modern LGU analytics UI */ :root{ --exec-sidebar:216px; --exec-bg:#f5f8fc; --exec-card:#ffffff; --exec-border:#e4eaf2; --exec-text:#101a33; --exec-muted:#6f7d91; --exec-blue:#2563eb; --exec-green:#16a34a; --exec-violet:#7c3aed; --exec-amber:#f59e0b; --exec-coral:#e11d48; --exec-radius:14px; --exec-shadow:0 5px 18px rgba(15,23,42,.045); } html,body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;} .app-shell{background:var(--exec-bg)!important;} .sidebar{width:var(--exec-sidebar)!important;padding:18px 12px 12px!important;background:#fff!important;color:var(--exec-text)!important;border-right:1px solid var(--exec-border)!important;box-shadow:none!important;gap:10px!important;} .workspace{margin-left:var(--exec-sidebar)!important;background:var(--exec-bg)!important;} .sidebar .brand{padding:6px 8px 18px!important;gap:10px!important;} .sidebar .brand img{width:38px!important;height:38px!important;border-radius:10px!important;box-shadow:none!important;} .sidebar .brand strong{font-size:17px!important;color:var(--exec-text)!important;letter-spacing:-.02em!important;} .sidebar .brand small{font-size:10.5px!important;color:var(--exec-muted)!important;line-height:1.25!important;} .sidebar .nav{padding:4px 2px!important;gap:4px!important;} .sidebar .nav a{min-height:39px!important;padding:9px 11px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:600!important;color:#33445f!important;gap:10px!important;background:transparent!important;box-shadow:none!important;} .sidebar .nav a:hover{background:#f2f6fb!important;color:#1e4fa3!important;transform:none!important;} .sidebar .nav a.active{background:#eaf1ff!important;color:#1454d9!important;box-shadow:none!important;} .sidebar .nav-icon{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;font-size:14px!important;} .sidebar-footer,.nav-bottom{padding:10px 2px 0!important;border-top:1px solid var(--exec-border)!important;} .sidebar-footer a,.nav-bottom a{min-height:39px!important;border-radius:9px!important;color:#33445f!important;background:transparent!important;} .sidebar-footer a:hover,.nav-bottom a:hover{background:#f2f6fb!important;color:#c73535!important;} .app-header{min-height:72px!important;padding:12px 24px!important;background:rgba(255,255,255,.95)!important;border-bottom:1px solid var(--exec-border)!important;box-shadow:none!important;} .header-brand img{width:36px!important;height:36px!important;border-radius:10px!important;} .header-system-name,.header-page-name{font-size:15px!important;color:var(--exec-text)!important;} .header-search{height:42px!important;border-radius:10px!important;background:#fff!important;border-color:#dfe6ef!important;box-shadow:0 2px 8px rgba(15,23,42,.025)!important;} .profile-chip{height:42px!important;border-radius:10px!important;box-shadow:0 2px 8px rgba(15,23,42,.035)!important;} .profile-chip .profile-avatar{width:34px!important;height:34px!important;border-radius:9px!important;} .main-content{max-width:1680px!important;padding:18px 24px 26px!important;} .workspace-panel,.role-dashboard,.executive-dashboard{gap:14px!important;} .card,.chart-card,.report-card,.report-panel,.report-filter-card,.dash-kpi,.report-kpi,.role-action-card,.profile-head-card,.pnp-clean-results,.field-lookup-card,.data-panel-card,.billing-center,.mayor-chart-card{background:var(--exec-card)!important;border:1px solid var(--exec-border)!important;border-radius:var(--exec-radius)!important;box-shadow:var(--exec-shadow)!important;} .dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:12px!important;} .dash-kpi,.report-kpi{min-height:116px!important;padding:15px 16px!important;border-radius:13px!important;} .dash-kpi span,.report-kpi span{font-size:11px!important;letter-spacing:0!important;text-transform:none!important;color:#40506a!important;font-weight:600!important;} .dash-kpi strong,.report-kpi strong{font-size:clamp(24px,1.8vw,31px)!important;letter-spacing:-.04em!important;margin-top:8px!important;color:var(--exec-text)!important;} .dash-kpi small,.report-kpi small{font-size:10.5px!important;color:var(--exec-muted)!important;margin-top:8px!important;font-weight:500!important;} .chart-card,.mayor-chart-card{padding:16px 18px 12px!important;} .chart-card h2,.chart-title,.mayor-chart-head h2{font-size:14px!important;color:var(--exec-text)!important;font-weight:700!important;} .chart-card p,.chart-subtitle,.mayor-chart-head p{font-size:10.5px!important;color:var(--exec-muted)!important;} .apex-chart-shell,.chart-wrapper{min-height:250px!important;} .table-wrap,.report-table-wrap,.print-table-wrap{border:1px solid var(--exec-border)!important;border-radius:12px!important;background:#fff!important;} .table th,.report-table th{font-size:10.5px!important;letter-spacing:.07em!important;color:#5a6880!important;background:#f8fafc!important;padding:11px 12px!important;} .table td,.report-table td{font-size:12px!important;color:#26364f!important;padding:11px 12px!important;} .btn{min-height:38px!important;padding:9px 13px!important;border-radius:9px!important;font-size:12px!important;font-weight:650!important;box-shadow:none!important;} .input,select,textarea{border-radius:9px!important;padding:10px 12px!important;font-size:12.5px!important;} .badge,.status-chip{font-size:10.5px!important;padding:5px 8px!important;} .chart-skeleton{position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg,#f3f6fa 25%,#e8edf4 37%,#f3f6fa 63%);background-size:400% 100%;animation:mgSkeleton 1.2s ease infinite;z-index:1;} @keyframes mgSkeleton{0%{background-position:100% 0}100%{background-position:0 0}} [data-chart]{position:relative;} [data-chart].chart-ready .chart-skeleton{display:none;} [data-aos]{will-change:transform,opacity;} @media(min-width:1600px){ :root{--exec-sidebar:228px}.main-content{padding:22px 28px 32px!important}.apex-chart-shell,.chart-wrapper{min-height:285px!important}.dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{gap:14px!important}.dash-kpi,.report-kpi{min-height:124px!important;} } @media(max-width:1180px){ :root{--exec-sidebar:208px}.main-content{padding:16px 18px 24px!important}.dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .sidebar{width:min(278px,86vw)!important;transform:translateX(-105%);}.sidebar.is-open{transform:translateX(0)}.workspace{margin-left:0!important}.app-header{min-height:62px!important;padding:10px 14px!important}.main-content{padding:14px!important}.header-system-name{display:none!important}.dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.apex-chart-shell,.chart-wrapper{min-height:235px!important;} } @media(max-width:560px){ .main-content{padding:10px!important}.dashboard-kpis,.dashboard-kpis.compact-kpis,.report-kpi-grid{grid-template-columns:1fr!important;gap:9px!important}.dash-kpi,.report-kpi{min-height:auto!important;padding:13px!important}.card,.chart-card,.report-card,.report-panel,.report-filter-card,.data-panel-card,.mayor-chart-card{border-radius:11px!important;padding:13px!important}.app-header{padding:9px 10px!important}.header-page-name{font-size:13px!important}.apex-chart-shell,.chart-wrapper{min-height:220px!important;} } /* V119 — Official government dashboard identity + corrected small-device shell */ :root{ --primary-900:#0B1F3A; --primary-800:#102A4C; --primary-700:#164E87; --primary-600:#1D64B4; --primary-500:#2F80ED; --primary-400:#60A5FA; --primary-100:#DBEAFE; --primary-50:#EFF6FF; --green-800:#166534; --green-700:#15803D; --green-600:#16A34A; --green-500:#22C55E; --green-100:#DCFCE7; --green-50:#F0FDF4; --warning:#F59E0B; --warning-bg:#FEF3C7; --danger:#DC2626; --danger-bg:#FEE2E2; --info:#2563EB; --info-bg:#DBEAFE; --violet:#7C3AED; --violet-bg:#EDE9FE; --page-bg:#F4F7FB; --surface:#FFFFFF; --surface-soft:#F8FAFC; --surface-disabled:#F1F5F9; --border:#E2E8F0; --border-strong:#CBD5E1; --divider:#EEF2F7; --text-primary:#172033; --text-secondary:#475569; --text-muted:#64748B; --text-placeholder:#94A3B8; --text-disabled:#CBD5E1; --sidebar-bg:#102A4C; --sidebar-text:#CBD5E1; --sidebar-hover:rgba(255,255,255,.08); --sidebar-active-bg:#FFFFFF; --sidebar-active-text:#164E87; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:16px; --radius-modal:18px; --radius-pill:999px; --shadow-sm:0 2px 8px rgba(15,23,42,.04); --shadow-md:0 8px 24px rgba(15,23,42,.07); --shadow-lg:0 20px 50px rgba(15,23,42,.14); --font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } html,body{font-family:var(--font-family)!important;background:var(--page-bg)!important;color:var(--text-primary)!important;} .app-shell,.workspace,.main-content{background:var(--page-bg)!important;} /* Desktop sidebar: calm official government navy */ .sidebar{ width:250px!important; height:100dvh!important; max-height:100dvh!important; position:fixed!important; inset:0 auto 0 0!important; display:flex!important; flex-direction:column!important; gap:0!important; padding:0 12px 12px!important; overflow:hidden!important; background:var(--sidebar-bg)!important; color:var(--sidebar-text)!important; border-right:1px solid rgba(255,255,255,.10)!important; box-shadow:12px 0 34px rgba(11,31,58,.20)!important; z-index:1100!important; } .sidebar .brand{ flex:0 0 72px!important; min-height:72px!important; padding:10px 4px!important; display:flex!important; align-items:center!important; gap:10px!important; border-bottom:1px solid rgba(255,255,255,.10)!important; } .sidebar .brand-logo{flex:0 0 auto!important;display:grid!important;place-items:center!important;} .sidebar .brand img{ width:44px!important; height:44px!important; border-radius:50%!important; object-fit:cover!important; box-shadow:0 4px 14px rgba(0,0,0,.16)!important; } .sidebar .brand-copy{min-width:0!important;flex:1 1 auto!important;} .sidebar .brand strong{ display:block!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; color:#fff!important; font-size:16px!important; font-weight:700!important; letter-spacing:-.01em!important; } .sidebar .brand small{ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; color:var(--sidebar-muted,#94A3B8)!important; font-size:10.5px!important; line-height:1.25!important; } .sidebar-close-btn{ flex:0 0 40px!important; width:40px!important; height:40px!important; display:grid!important; place-items:center!important; border:0!important; border-radius:50%!important; background:transparent!important; color:#fff!important; font-size:28px!important; line-height:1!important; cursor:pointer!important; } .sidebar-close-btn:hover{background:rgba(255,255,255,.10)!important;} .sidebar .nav, .sidebar .nav-scroll, .sidebar .role-nav{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; height:auto!important; overflow-y:auto!important; overflow-x:hidden!important; padding:12px 0 max(12px,env(safe-area-inset-bottom))!important; margin:0!important; display:flex!important; flex-direction:column!important; gap:4px!important; scrollbar-width:thin!important; scrollbar-color:rgba(255,255,255,.28) transparent!important; overscroll-behavior:contain!important; } .sidebar .nav::-webkit-scrollbar{width:6px!important;} .sidebar .nav::-webkit-scrollbar-track{background:transparent!important;} .sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)!important;border-radius:999px!important;} .sidebar .nav a{ flex:0 0 44px!important; min-height:44px!important; height:44px!important; width:100%!important; padding:0 12px!important; display:flex!important; align-items:center!important; gap:12px!important; border-radius:10px!important; background:transparent!important; color:var(--sidebar-text)!important; font-size:14px!important; font-weight:500!important; line-height:1!important; text-decoration:none!important; box-shadow:none!important; transform:none!important; transition:background-color .16s ease,color .16s ease!important; } .sidebar .nav a:hover{background:var(--sidebar-hover)!important;color:#fff!important;} .sidebar .nav a.active{ background:var(--sidebar-active-bg)!important; color:var(--sidebar-active-text)!important; font-weight:600!important; box-shadow:0 4px 14px rgba(4,20,40,.18)!important; } .sidebar .nav-icon{ flex:0 0 19px!important; width:19px!important; height:19px!important; display:grid!important; place-items:center!important; color:currentColor!important; font-size:18px!important; line-height:1!important; } .sidebar .nav-text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} .sidebar .nav-badge{margin-left:auto!important;} /* Main fixed header */ .workspace{margin-left:250px!important;min-width:0!important;width:calc(100% - 250px)!important;} .app-header{ height:68px!important; min-height:68px!important; padding:10px 24px!important; position:fixed!important; top:0!important; right:0!important; left:250px!important; width:auto!important; z-index:900!important; display:flex!important; align-items:center!important; gap:14px!important; background:rgba(255,255,255,.96)!important; border-bottom:1px solid var(--border)!important; box-shadow:0 2px 12px rgba(15,23,42,.04)!important; backdrop-filter:blur(12px)!important; } .main-content{ width:100%!important; max-width:none!important; min-width:0!important; padding:calc(68px + 24px) 24px 28px!important; margin:0!important; } .header-brand{min-width:0!important;max-width:min(470px,34vw)!important;} .header-brand img{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover!important;} .header-brand-copy{min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;} .header-system-name,.header-page-name{font-size:15px!important;font-weight:700!important;color:var(--text-primary)!important;} .header-system-name{flex:0 0 auto!important;} .header-page-name{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} .header-brand-separator{color:var(--text-muted)!important;} .header-actions{min-width:0!important;flex:1 1 auto!important;display:flex!important;align-items:center!important;gap:12px!important;} .header-search{ flex:1 1 420px!important; min-width:180px!important; max-width:none!important; height:42px!important; border:1px solid var(--border-strong)!important; border-radius:10px!important; background:#fff!important; box-shadow:none!important; overflow:hidden!important; } .header-search:focus-within{border-color:var(--primary-500)!important;box-shadow:0 0 0 3px rgba(47,128,237,.14)!important;} .header-search input{font:500 14px/1 var(--font-family)!important;color:var(--text-primary)!important;} .header-search input::placeholder{color:var(--text-placeholder)!important;} .header-search-submit{width:48px!important;min-width:48px!important;height:100%!important;border-left:1px solid var(--border)!important;background:var(--surface-soft)!important;color:var(--text-primary)!important;cursor:pointer!important;} .header-search-submit:hover{background:var(--primary-50)!important;color:var(--primary-600)!important;} .profile-chip{width:42px!important;height:42px!important;min-width:42px!important;border:1px solid var(--border)!important;border-radius:50%!important;background:#fff!important;box-shadow:var(--shadow-sm)!important;} .profile-chip .profile-avatar{width:36px!important;height:36px!important;border-radius:50%!important;} /* Unified cards/forms/tables/status colors */ .card,.chart-card,.report-card,.report-panel,.report-filter-card,.dash-kpi,.report-kpi,.role-action-card,.profile-head-card,.pnp-clean-results,.field-lookup-card,.data-panel-card,.billing-center,.mayor-chart-card,.workspace-panel{ background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:16px!important; box-shadow:var(--shadow-sm)!important; } .btn-primary{background:var(--primary-600)!important;border-color:var(--primary-600)!important;color:#fff!important;} .btn-primary:hover{background:var(--primary-700)!important;border-color:var(--primary-700)!important;} .btn-success{background:var(--green-600)!important;color:#fff!important;} .btn-success:hover{background:var(--green-700)!important;} .btn-danger{background:var(--danger)!important;color:#fff!important;} .btn-secondary,.btn-outline{background:#fff!important;color:#334155!important;border:1px solid var(--border-strong)!important;} .btn-secondary:hover,.btn-outline:hover{background:var(--surface-soft)!important;border-color:#94A3B8!important;} .input,.form-control,.form-select,select,textarea,input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="date"],input[type="number"]{ min-height:42px; background:#fff; color:var(--text-primary); border:1px solid var(--border-strong); border-radius:10px; font-size:14px; } .input:focus,.form-control:focus,.form-select:focus,select:focus,textarea:focus,input:focus{ outline:none!important; border-color:var(--primary-500)!important; box-shadow:0 0 0 3px rgba(47,128,237,.14)!important; } .table-wrap,.table-container,.report-table-wrap{background:#fff!important;border:1px solid var(--border)!important;border-radius:16px!important;overflow:hidden!important;} .table thead,.report-table thead{background:var(--surface-soft)!important;} .table th,.report-table th{color:var(--text-secondary)!important;font-size:12px!important;font-weight:700!important;padding:13px 16px!important;border-bottom:1px solid var(--border)!important;} .table td,.report-table td{color:#334155!important;font-size:13px!important;padding:13px 16px!important;border-bottom:1px solid var(--divider)!important;} .table tbody tr:hover,.report-table tbody tr:hover{background:var(--surface-soft)!important;} .status-chip.paid,.badge-paid,.badge-success{color:#166534!important;background:#DCFCE7!important;border-color:#BBF7D0!important;} .status-chip.unpaid,.badge-unpaid,.badge-danger{color:#B91C1C!important;background:#FEE2E2!important;border-color:#FECACA!important;} .status-chip.pending,.badge-pending,.badge-warning{color:#92400E!important;background:#FEF3C7!important;border-color:#FDE68A!important;} .badge-info{color:#1D4ED8!important;background:#DBEAFE!important;border-color:#BFDBFE!important;} .badge-contested{color:#6D28D9!important;background:#EDE9FE!important;border-color:#DDD6FE!important;} /* Overlay backdrop */ .mobile-backdrop{ position:fixed!important; inset:0!important; z-index:1050!important; background:rgba(11,31,58,.52)!important; backdrop-filter:blur(1.5px)!important; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility .2s ease!important; } .mobile-backdrop.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;} body.body-lock{overflow:hidden!important;touch-action:none!important;} /* Tablet and phone: full-height navy drawer over a full-width page */ @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .workspace{margin-left:0!important;width:100%!important;} .app-header{ left:0!important; right:0!important; width:100%!important; height:64px!important; min-height:64px!important; padding:8px 12px!important; gap:8px!important; } .main-content{padding:calc(64px + 12px) 12px 18px!important;width:100%!important;max-width:none!important;} .sidebar{ width:min(250px,86vw)!important; height:100dvh!important; max-height:100dvh!important; padding:0 12px 0!important; transform:translate3d(-105%,0,0)!important; transition:transform .22s ease!important; box-shadow:18px 0 42px rgba(11,31,58,.30)!important; } .sidebar.is-open{transform:translate3d(0,0,0)!important;} .sidebar .brand{flex-basis:68px!important;min-height:68px!important;padding:8px 2px!important;} .sidebar .brand img{width:42px!important;height:42px!important;} .sidebar .brand strong{font-size:15px!important;} .sidebar .nav,.sidebar .nav-scroll,.sidebar .role-nav{ padding:10px 0 max(16px,env(safe-area-inset-bottom))!important; } .sidebar .nav a{min-height:44px!important;height:44px!important;font-size:14px!important;} .header-brand{flex:1 1 auto!important;max-width:none!important;min-width:0!important;} .header-brand img{width:38px!important;height:38px!important;} .header-system-name,.header-brand-separator{display:none!important;} .header-page-name{font-size:15px!important;max-width:none!important;} .header-actions{flex:0 0 auto!important;gap:6px!important;} .header-mobile-search-toggle{display:grid!important;width:42px!important;height:42px!important;place-items:center!important;cursor:pointer!important;} .header-search{display:none!important;} .profile-chip{width:42px!important;height:42px!important;} .profile-chip .profile-avatar{width:36px!important;height:36px!important;} body.header-search-open .app-header{gap:6px!important;} body.header-search-open .header-brand, body.header-search-open .header-menu-btn, body.header-search-open .profile-menu, body.header-search-open .header-mobile-search-toggle{display:none!important;} body.header-search-open .header-actions{display:flex!important;flex:1 1 auto!important;width:100%!important;} body.header-search-open .header-search{display:flex!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;height:44px!important;border-radius:10px!important;} body.header-search-open .header-search-back{display:grid!important;flex:0 0 42px!important;place-items:center!important;} .card,.chart-card,.report-card,.report-panel,.report-filter-card,.data-panel-card,.mayor-chart-card{border-radius:14px!important;} } @media(max-width:560px){ .app-header{padding:8px 10px!important;} .main-content{padding:calc(64px + 10px) 10px 16px!important;} .burger,.header-menu-btn{width:42px!important;height:42px!important;min-width:42px!important;} .header-brand img{width:36px!important;height:36px!important;} .header-page-name{font-size:14px!important;} .header-mobile-search-toggle,.profile-chip{width:40px!important;height:40px!important;min-width:40px!important;} .profile-chip .profile-avatar{width:34px!important;height:34px!important;} .sidebar{width:min(250px,88vw)!important;} .sidebar .nav a{font-size:14px!important;} } @media(max-width:360px){ .app-header{padding-inline:6px!important;gap:4px!important;} .main-content{padding-inline:8px!important;} .header-brand{gap:5px!important;} .header-brand img{width:34px!important;height:34px!important;} .header-page-name{font-size:13px!important;} .burger,.header-menu-btn,.header-mobile-search-toggle,.profile-chip{width:38px!important;height:38px!important;min-width:38px!important;} .profile-chip .profile-avatar{width:32px!important;height:32px!important;} } @media print{ .sidebar,.app-header,.mobile-backdrop{display:none!important;} .workspace{margin:0!important;width:100%!important;} .main-content{padding:0!important;} } /* V120: authoritative true full-width workspace. The sidebar is always an overlay and must never reserve page width. */ html,body{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; } .app-shell{ display:block!important; width:100%!important; max-width:100vw!important; min-width:0!important; margin:0!important; overflow-x:hidden!important; } .workspace{ margin-left:0!important; margin-right:0!important; width:100%!important; max-width:100vw!important; min-width:0!important; overflow-x:hidden!important; } .app-header{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; max-width:100vw!important; margin:0!important; padding-left:clamp(14px,2.2vw,32px)!important; padding-right:clamp(14px,2.2vw,32px)!important; z-index:900!important; } .main-content{ width:100%!important; max-width:100vw!important; min-width:0!important; margin:0!important; padding:calc(68px + 20px) clamp(12px,2.2vw,32px) 32px!important; overflow-x:hidden!important; } .main-content > *, .workspace-panel, .role-dashboard, .pnp-dashboard-clean, .pnp-dashboard-final, .card, .grid{ width:100%!important; max-width:none!important; min-width:0!important; margin-left:0!important; margin-right:0!important; } /* Sidebar: overlay only on desktop, tablet, and phone. */ .sidebar{ position:fixed!important; inset:0 auto 0 0!important; width:250px!important; max-width:min(250px,88vw)!important; height:100dvh!important; z-index:1000!important; transform:translateX(-105%)!important; transition:transform .22s ease!important; } .sidebar.is-open{ transform:translateX(0)!important; } .mobile-backdrop{ z-index:950!important; } /* PNP dashboard must fill the complete page rather than a centered narrow column. */ .pnp-dashboard-final, .pnp-dashboard-final .pnp-main-lookup, .pnp-dashboard-final .pnp-result-area{ width:100%!important; max-width:none!important; } .pnp-dashboard-final .pnp-main-lookup{ margin:0!important; } .pnp-dashboard-final .pnp-lookup-form{ width:100%!important; max-width:none!important; grid-template-columns:minmax(260px,1.7fr) minmax(190px,.9fr) minmax(130px,.48fr) minmax(140px,.52fr)!important; } .pnp-dashboard-final .pnp-lookup-actions{ width:100%!important; max-width:none!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; } @media (max-width:1180px){ .pnp-dashboard-final .pnp-lookup-form{ grid-template-columns:minmax(0,1fr) minmax(190px,.75fr) minmax(120px,.42fr)!important; } .pnp-dashboard-final .pnp-lookup-form .btn[href*="violators"]{ grid-column:1/-1!important; } } @media (max-width:900px){ .workspace{margin-left:0!important;width:100%!important;} .app-header{left:0!important;width:100%!important;} .main-content{padding:calc(68px + 14px) 14px 24px!important;} .sidebar{width:min(250px,88vw)!important;max-width:min(250px,88vw)!important;} .pnp-dashboard-final .pnp-lookup-form, .pnp-dashboard-final .pnp-lookup-actions{ grid-template-columns:1fr!important; } .pnp-dashboard-final .pnp-lookup-form .btn[href*="violators"]{ grid-column:auto!important; } } @media (max-width:480px){ .main-content{padding:calc(68px + 10px) 10px 20px!important;} .card,.field-lookup-card{padding:16px!important;} } /* V121: compact header-to-content spacing across the whole system. Keep only a small clean gutter below the fixed header. */ :root{ --mg-fixed-header-height:68px; --mg-header-content-gap:12px; } .main-content{ padding-top:calc(var(--mg-fixed-header-height) + var(--mg-header-content-gap))!important; } /* Prevent old page wrappers from adding another top offset. */ .main-content > :first-child, .main-content > .workspace-panel:first-child, .main-content > .role-dashboard:first-child, .main-content > .executive-dashboard:first-child, .main-content > .grid:first-child, .main-content > .card:first-child, .main-content > .setup-page:first-child, .main-content > .law-page:first-child, .main-content > .ordinance-reference-page:first-child{ margin-top:0!important; } .workspace-panel, .role-dashboard, .executive-dashboard{ padding-top:0!important; } /* Dashboards should begin close to the header, without a large empty band. */ .role-dashboard-treasurer, .role-dashboard-pnp, .role-dashboard-mayor, .developer-dashboard-v108, .omm-dashboard-v2, .mayor-modern-dashboard{ margin-top:0!important; } @media (min-width:1600px){ :root{--mg-header-content-gap:14px;} } @media (max-width:900px){ :root{ --mg-fixed-header-height:64px; --mg-header-content-gap:10px; } } @media (max-width:560px){ :root{--mg-header-content-gap:8px;} } /* V122: equal page gutters and full-width content alignment. All role pages now use the same left/right spacing on every screen size. */ :root{ --mg-page-gutter:clamp(18px,2.25vw,36px); } *,*::before,*::after{box-sizing:border-box;} .app-header{ padding-left:var(--mg-page-gutter)!important; padding-right:var(--mg-page-gutter)!important; } .main-content{ width:100%!important; max-width:none!important; margin:0!important; padding-left:var(--mg-page-gutter)!important; padding-right:var(--mg-page-gutter)!important; } .main-content > *, .main-content > .workspace-panel, .main-content > .role-dashboard, .main-content > .executive-dashboard, .main-content > .grid, .main-content > .card, .workspace-panel, .role-dashboard, .executive-dashboard, .role-hero, .billing-layout, .manager-grid, .report-grid, .dashboard-grid, .dashboard-kpis, .chart-grid, .filter-strip, .data-panel-card, .table-wrap{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; min-width:0!important; } /* Make page cards and result sections reach the same visual edges. */ .main-content .card, .main-content .chart-card, .main-content .report-card, .main-content .report-panel, .main-content .data-panel-card, .main-content .filter-strip{ justify-self:stretch!important; } @media (max-width:900px){ :root{--mg-page-gutter:14px;} } @media (max-width:560px){ :root{--mg-page-gutter:10px;} } @media print{ .main-content{padding-left:0!important;padding-right:0!important;} } /* ====================================================================== V123 — GLOBAL EQUAL-SIDE LAYOUT NORMALIZATION Keeps every page, header, panel, card and grid aligned to the same responsive left/right edge across all roles and device sizes. ====================================================================== */ :root{ --v123-edge:clamp(18px,2.1vw,36px); --v123-inner:clamp(16px,1.6vw,24px); --v123-gap:clamp(12px,1.15vw,18px); } *,*::before,*::after{box-sizing:border-box} .workspace{width:auto;min-width:0;overflow-x:clip} .app-header{ width:100%; padding-left:var(--v123-edge)!important; padding-right:var(--v123-edge)!important; } .main-content{ width:100%!important; max-width:none!important; margin:0!important; padding-left:var(--v123-edge)!important; padding-right:var(--v123-edge)!important; overflow-x:clip!important; } .main-content > *, .workspace-panel, .workspace-panel > *, .page-section, .content-section, .dashboard-shell, .dashboard-grid, .report-workspace-v35, .report-page-v34{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; min-width:0!important; } .card,.chart-card,.report-panel,.table-wrap,.report-table-wrap,.filter-strip{ width:100%; min-width:0; } .grid,.dashboard-kpis,.compact-kpis,.stats-grid,.summary-grid, .manager-grid,.report-grid,.analytics-grid,.report-chart-grid{ width:100%; gap:var(--v123-gap)!important; } .card,.chart-card,.report-panel,.filter-strip{ padding-left:var(--v123-inner)!important; padding-right:var(--v123-inner)!important; } .section-title,.chart-header,.cashier-billing-head,.topbar{ width:100%; min-width:0; } .table-wrap,.report-table-wrap{margin-inline:0!important} /* Cashier and search/filter pages: equal columns and equal card widths. */ .cashier-search-card{width:100%!important;margin-inline:0!important} .cashier-filter-grid{ width:100%!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:var(--v123-gap)!important; } .cashier-filter-grid > *{min-width:0;width:100%} .cashier-filter-grid input,.cashier-filter-grid select{width:100%!important} .cashier-actions{width:100%;margin:0!important} .cashier-results{ width:100%!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:var(--v123-gap)!important; margin-left:0!important; margin-right:0!important; } .violator-pick-card{width:100%;height:100%;min-width:0;margin:0!important} .billing-layout{width:100%!important;max-width:none!important;margin-inline:0!important;gap:var(--v123-gap)!important} /* Generic form/filter groups stay balanced instead of leaving a wide blank side. */ .form-grid,.filter-grid,.report-filter-grid,.search-grid{ width:100%; gap:var(--v123-gap)!important; } .form-grid > *, .filter-grid > *, .report-filter-grid > *, .search-grid > *{min-width:0} @media (max-width:1280px){ :root{--v123-edge:24px;--v123-inner:20px} .cashier-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} .cashier-results{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media (max-width:980px){ :root{--v123-edge:18px;--v123-inner:18px} .app-header,.main-content{padding-left:var(--v123-edge)!important;padding-right:var(--v123-edge)!important} .cashier-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .cashier-results{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media (max-width:640px){ :root{--v123-edge:14px;--v123-inner:15px;--v123-gap:12px} .app-header,.main-content{padding-left:var(--v123-edge)!important;padding-right:var(--v123-edge)!important} .cashier-filter-grid,.cashier-results{grid-template-columns:1fr!important} .section-title{align-items:stretch!important} .section-title > .btn,.section-title > a.btn{width:100%!important} } @media (max-width:390px){ :root{--v123-edge:10px;--v123-inner:13px} } @media print{ .main-content,.app-header{padding-left:0!important;padding-right:0!important} } /* V126 — global true top alignment on all pages. Ensure every workspace starts directly below the fixed header, with only a small, consistent top gap and equal side gutters. */ :root{ --v126-top-gap-desktop:12px; --v126-top-gap-tablet:10px; --v126-top-gap-mobile:8px; } /* Keep the fixed header offset only once. */ .workspace{ padding-top:var(--v98-header-height,64px)!important; } /* Global content spacing: small top gap, equal side gutters, clean bottom breathing room. */ .main-content{ padding-top:var(--v126-top-gap-desktop)!important; padding-right:var(--v95-content-gutter, clamp(16px,2.2vw,36px))!important; padding-bottom:24px!important; padding-left:var(--v95-content-gutter, clamp(16px,2.2vw,36px))!important; } /* Remove extra top push from common first wrappers across pages. */ .main-content > :first-child, .main-content > .grid:first-child, .main-content > .card:first-child, .main-content > .workspace-panel:first-child, .main-content > .filter-strip:first-child, .main-content > .table-wrap:first-child, .main-content > .report-table-wrap:first-child, .main-content > .ordinance-reference-page:first-child, .main-content > .topbar:first-child, .main-content > form:first-child, .main-content > section:first-child, .main-content > article:first-child, .main-content > .dashboard-grid:first-child, .main-content > .chart-grid:first-child, .main-content > .reports-grid:first-child{ margin-top:0!important; } /* Also neutralize first-card top margins inside common page grids. */ .main-content .grid:first-child > :first-child, .main-content .dashboard-grid:first-child > :first-child, .main-content .chart-grid:first-child > :first-child, .main-content .reports-grid:first-child > :first-child, .main-content .stats-grid:first-child > :first-child, .main-content .summary-grid:first-child > :first-child, .main-content .kpi-grid:first-child > :first-child{ margin-top:0!important; } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .main-content{ padding-top:var(--v126-top-gap-tablet)!important; padding-right:14px!important; padding-bottom:18px!important; padding-left:14px!important; } } @media(max-width:480px){ .main-content{ padding-top:var(--v126-top-gap-mobile)!important; padding-right:10px!important; padding-bottom:16px!important; padding-left:10px!important; } } /* V127 — compact mobile / tablet density. Reduce long vertical stacks and prefer balanced 2-column layouts whenever the screen still has enough width. */ /* Tablet compact behavior: keep more content side-by-side. */ @media (max-width:900px) and (min-width:681px){ .dashboard-kpis, .compact-kpis, .report-kpi-grid, .stats-grid, .summary-grid, .category-grid, .profile-summary{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .analytics-grid, .role-chart-grid, .manager-grid, .report-grid, .omm-analytics-grid, .omm-top-grid, .omm-monitor-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .hero-actions, .top-actions, .profile-top-menu, .action-row, .form-actions, .pnp-dashboard-final .pnp-lookup-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } .hero-actions .btn, .top-actions .btn, .profile-top-menu .btn, .action-row .btn, .form-actions .btn, .pnp-dashboard-final .pnp-lookup-actions .btn{ width:100%!important; min-width:0!important; } .pnp-dashboard-final .pnp-lookup-form{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .pnp-dashboard-final .pnp-lookup-form input, .pnp-dashboard-final .pnp-lookup-form select{ grid-column:span 1!important; } } /* Mobile phones: avoid excessive vertical stacking, but keep tap targets large. */ @media (max-width:680px) and (min-width:381px){ .dashboard-kpis, .compact-kpis, .report-kpi-grid, .stats-grid, .summary-grid, .directory-mini-stats{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .dashboard-kpis > *, .compact-kpis > *, .report-kpi-grid > *, .stats-grid > *, .summary-grid > *{ min-width:0!important; } .hero-actions, .top-actions, .profile-top-menu, .action-row, .form-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } .hero-actions .btn, .top-actions .btn, .profile-top-menu .btn, .action-row .btn, .form-actions .btn{ width:100%!important; min-width:0!important; } /* PNP mobile dashboard: compact form and quick actions */ .pnp-dashboard-final .pnp-main-lookup .card-head, .pnp-dashboard-final .section-title{ flex-wrap:wrap!important; } .pnp-dashboard-final .pnp-lookup-form{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .pnp-dashboard-final .pnp-lookup-form > input, .pnp-dashboard-final .pnp-lookup-form > select{ grid-column:1 / -1!important; } .pnp-dashboard-final .pnp-lookup-form > button, .pnp-dashboard-final .pnp-lookup-form > a.btn{ grid-column:auto!important; } .pnp-dashboard-final .pnp-lookup-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } .pnp-dashboard-final .pnp-lookup-actions > :last-child{ grid-column:1 / -1!important; } .pnp-dashboard-final .pnp-lookup-actions .btn, .pnp-dashboard-final .pnp-lookup-form .btn{ width:100%!important; min-width:0!important; } /* Cashier / action centers on phones should not become one long column. */ .treasurer-action-card .hero-actions, .role-action-card .hero-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } /* Search/filter strips use compact split layout when possible. */ .cashier-filter-grid, .filter-grid, .report-filter-panel{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .cashier-filter-grid > *:first-child, .filter-grid > *:first-child, .report-filter-panel > *:first-child{ grid-column:1 / -1!important; } .actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .actions .btn{width:100%!important;} } /* Very small phones can still fall back to single-column for readability. */ @media (max-width:380px){ .dashboard-kpis, .compact-kpis, .report-kpi-grid, .stats-grid, .summary-grid, .hero-actions, .top-actions, .profile-top-menu, .action-row, .form-actions, .pnp-dashboard-final .pnp-lookup-actions, .pnp-dashboard-final .pnp-lookup-form, .treasurer-action-card .hero-actions, .role-action-card .hero-actions, .cashier-filter-grid, .filter-grid, .report-filter-panel, .actions{ grid-template-columns:1fr!important; } } /* V128 — final mobile header-search fix. On phones, the search mode should be clean and compact: back button + one full-width rounded search field. Remove the awkward extra floating submit box. */ @media (max-width:700px){ body.header-search-open .app-header{ grid-template-columns:40px minmax(0,1fr)!important; align-items:center!important; column-gap:8px!important; row-gap:0!important; padding:0 10px!important; min-height:60px!important; height:60px!important; overflow:visible!important; } body.header-search-open .app-header > .header-actions, body.header-search-open .header-actions{ display:contents!important; } body.header-search-open .app-header .header-search{ grid-column:1 / -1!important; display:grid!important; grid-template-columns:40px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; width:100%!important; max-width:none!important; min-width:0!important; height:44px!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } body.header-search-open .header-search-back{ display:grid!important; place-items:center!important; width:40px!important; height:40px!important; min-width:40px!important; margin:0!important; padding:0!important; border:0!important; border-radius:999px!important; background:#ffffff!important; color:#0f172a!important; box-shadow:0 2px 10px rgba(15,23,42,.06)!important; } body.header-search-open .header-search-field{ position:relative!important; display:flex!important; align-items:center!important; min-width:0!important; width:100%!important; height:44px!important; min-height:44px!important; border:1px solid #cbd5e1!important; border-right:1px solid #cbd5e1!important; border-radius:999px!important; background:#ffffff!important; box-shadow:none!important; overflow:hidden!important; padding-right:10px!important; } body.header-search-open .header-search-leading{ display:flex!important; flex:0 0 38px!important; width:38px!important; height:38px!important; align-items:center!important; justify-content:center!important; color:#475569!important; } body.header-search-open .header-search input[type="search"]{ width:100%!important; min-width:0!important; height:42px!important; padding:0 8px 0 0!important; margin:0!important; font-size:16px!important; line-height:1.2!important; background:transparent!important; } body.header-search-open .header-search-clear{ margin-left:auto!important; } body.header-search-open .header-search-submit{ display:none!important; } } @media (max-width:380px){ body.header-search-open .app-header{ grid-template-columns:38px minmax(0,1fr)!important; column-gap:6px!important; padding:0 8px!important; } body.header-search-open .app-header .header-search{ grid-template-columns:38px minmax(0,1fr)!important; gap:6px!important; } body.header-search-open .header-search-back{ width:38px!important; height:38px!important; min-width:38px!important; } body.header-search-open .header-search-field{ height:42px!important; min-height:42px!important; } } /* V131 — barangay revenue sharing */ .barangay-share-section{border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border-radius:18px;padding:18px}.barangay-share-head strong{font-size:17px;color:#17324d}.barangay-share-head p{margin:5px 0 14px;color:#64748b}.income-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.income-summary-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px}.income-summary-card span{display:block;color:#64748b;font-weight:700}.income-summary-card strong{display:block;font-size:28px;margin-top:8px;color:#17324d}.barangay-income-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.barangay-income-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;display:grid;gap:10px}.barangay-income-card h3{margin:0}.barangay-income-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.barangay-income-metrics div{background:#f8fafc;border-radius:12px;padding:10px}.barangay-income-metrics span{display:block;font-size:11px;color:#64748b}.barangay-income-metrics b{display:block;margin-top:4px}.remittance-list{display:grid;gap:10px}.remittance-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff}.receipt-sheet{max-width:820px;margin:auto;background:#fff;border:1px solid #dbe3ec;border-radius:18px;padding:28px}.receipt-sheet h1,.receipt-sheet h2{text-align:center}.receipt-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.receipt-meta div{border-bottom:1px solid #e5e7eb;padding:8px 0}.receipt-total{font-size:30px;font-weight:900;text-align:right}.only-print{display:none}@media(max-width:700px){.income-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.income-summary-grid>:last-child{grid-column:1/-1}.barangay-income-metrics{grid-template-columns:1fr 1fr}.barangay-income-metrics>:last-child{grid-column:1/-1}.remittance-row{grid-template-columns:1fr}.receipt-meta{grid-template-columns:1fr}}@media print{.only-print{display:block}.receipt-sheet{border:0;box-shadow:none}.no-print{display:none!important}} /* V132 — non-redundant barangay share entry. */ .barangay-share-reuse-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 16px; } .barangay-share-reuse-summary>div{ min-width:0; padding:12px 14px; border:1px solid rgba(59,130,196,.18); border-radius:14px; background:rgba(255,255,255,.72); } .barangay-share-reuse-summary small{ display:block; margin-bottom:4px; color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } .barangay-share-reuse-summary strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#17324d; } .barangay-share-only-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .field-help{ display:block; margin-top:6px; color:#64748b; font-size:12px; line-height:1.4; } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .barangay-share-reuse-summary{grid-template-columns:1fr 1fr;} .barangay-share-reuse-summary>div:last-child{grid-column:1/-1;} .barangay-share-only-grid{grid-template-columns:1fr 1fr!important;} .barangay-share-only-grid>label:first-child{grid-column:1/-1;} } @media(max-width:560px){ .barangay-share-reuse-summary, .barangay-share-only-grid{grid-template-columns:1fr!important;} .barangay-share-reuse-summary>div:last-child, .barangay-share-only-grid>label:first-child{grid-column:auto;} } /* V134 — space-first responsive dashboards across every role. Phones and tablets should use compact 2-column dashboard cards whenever the available width can support readable, finger-friendly tiles. */ @media (max-width:900px){ /* All role dashboard KPI families */ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .omm-dashboard-v2 .omm-kpis, .stats-grid, .summary-grid, .directory-mini-stats, .profile-summary, .category-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; align-items:stretch!important; } .dashboard-kpis > *, .compact-kpis > *, .report-kpi-grid > *, .developer-kpi-grid > *, .omm-dashboard-v2 .omm-kpis > *, .stats-grid > *, .summary-grid > *{ min-width:0!important; width:100%!important; } /* Compact cards: readable but not tall. */ .dash-kpi, .report-kpi, .developer-kpi-card, .omm-dashboard-v2 .dash-kpi{ min-height:108px!important; height:auto!important; padding:13px 14px!important; border-radius:15px!important; justify-content:center!important; text-align:left!important; } .dash-kpi span, .report-kpi span, .developer-kpi-card span, .omm-dashboard-v2 .dash-kpi span{ font-size:10.5px!important; line-height:1.25!important; letter-spacing:.02em!important; white-space:normal!important; } .dash-kpi strong, .report-kpi strong, .developer-kpi-card strong, .omm-dashboard-v2 .dash-kpi strong{ font-size:clamp(21px,5.2vw,28px)!important; line-height:1.05!important; margin-top:6px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .dash-kpi small, .report-kpi small, .developer-kpi-card small, .omm-dashboard-v2 .dash-kpi small{ font-size:10px!important; line-height:1.25!important; margin-top:6px!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } /* Button/action collections also divide into compact columns. */ .hero-actions, .top-actions, .profile-top-menu, .action-row, .form-actions, .pnp-dashboard-final .pnp-lookup-actions, .account-hero-actions, .developer-shortcut-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } .hero-actions .btn, .top-actions .btn, .profile-top-menu .btn, .action-row .btn, .form-actions .btn, .pnp-dashboard-final .pnp-lookup-actions .btn, .account-hero-actions .btn{ width:100%!important; min-width:0!important; min-height:44px!important; padding:10px 12px!important; white-space:normal!important; text-align:center!important; } /* Dashboard chart groups: one main chart per row on phones/tablets, while compact summaries stay two-column. */ .analytics-grid, .role-chart-grid, .manager-grid, .report-grid, .omm-analytics-grid, .omm-top-grid, .omm-monitor-grid, .developer-dashboard-grid{ grid-template-columns:1fr!important; gap:12px!important; } .chart-card, .developer-dashboard-card, .omm-card{ padding:14px!important; border-radius:16px!important; } .apex-chart-shell, .chart-wrapper{ min-height:220px!important; } } /* Normal phones, including ~360–768 CSS-pixel widths: keep 2x2 dashboard tiles. */ @media (max-width:700px) and (min-width:341px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .omm-dashboard-v2 .omm-kpis, .stats-grid, .summary-grid, .directory-mini-stats, .profile-summary, .category-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } /* Treasurer dashboard specifically: prevent full-width vertical KPI cards. */ .role-dashboard-treasurer .dashboard-kpis, .treasurer-dashboard .dashboard-kpis{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .role-dashboard-treasurer .dash-kpi, .treasurer-dashboard .dash-kpi{ min-height:112px!important; padding:12px!important; } .role-dashboard-treasurer .dash-kpi strong, .treasurer-dashboard .dash-kpi strong{ font-size:clamp(21px,6vw,27px)!important; } /* If there is an odd final KPI, keep it half-width rather than stretching. */ .dashboard-kpis > :last-child:nth-child(odd), .compact-kpis > :last-child:nth-child(odd), .developer-kpi-grid > :last-child:nth-child(odd), .omm-dashboard-v2 .omm-kpis > :last-child:nth-child(odd){ grid-column:auto!important; } } /* Only extremely narrow phones fall back to one column. */ @media (max-width:340px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .omm-dashboard-v2 .omm-kpis, .stats-grid, .summary-grid, .directory-mini-stats, .profile-summary, .category-grid, .hero-actions, .top-actions, .profile-top-menu, .action-row, .form-actions, .pnp-dashboard-final .pnp-lookup-actions, .account-hero-actions, .developer-shortcut-grid{ grid-template-columns:1fr!important; } } /* V135 — unified dashboard column system across all roles. User-requested target: - tablet / medium: 3 columns - laptop: 4 columns - largest screens: 5 columns - phones: 2 columns when possible, 1 only on very narrow devices */ /* Base dashboard grids covered across roles/pages. */ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid, .income-summary-grid{ align-items:stretch!important; } /* Largest screens */ @media (min-width: 1600px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid{ grid-template-columns:repeat(5,minmax(0,1fr))!important; } } /* Laptop / desktop */ @media (min-width: 1200px) and (max-width: 1599px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } /* Tablet / medium devices */ @media (min-width: 768px) and (max-width: 1199px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid, .income-summary-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } /* Normal phones — compact 2-column dashboard */ @media (min-width: 381px) and (max-width: 767px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid, .income-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } } /* Very small phones */ @media (max-width: 380px){ .dashboard-kpis, .dashboard-kpis.compact-kpis, .compact-kpis, .report-kpi-grid, .developer-kpi-grid, .mayor-kpi-grid, .stats-grid, .summary-grid, .kpi-grid, .profile-summary, .category-grid, .income-summary-grid{ grid-template-columns:1fr!important; gap:9px!important; } } /* V136 — stable dashboard charts. Prevent charts and graph cards from continuously shifting, pulsing, reanimating, or moving when the user is not interacting with them. */ .chart-card, .mayor-chart-card, .omm-card, .developer-dashboard-card, .apex-chart-shell, .apexcharts-canvas, .apexcharts-svg, .apexcharts-inner, .apexcharts-graphical, .apexcharts-series, .apexcharts-area-series, .apexcharts-bar-series, .apexcharts-pie-series{ animation:none!important; } .chart-card, .mayor-chart-card, .omm-card, .developer-dashboard-card{ transform:none!important; transition:border-color .15s ease,box-shadow .15s ease!important; } .chart-card:hover, .mayor-chart-card:hover, .omm-card:hover, .developer-dashboard-card:hover{ transform:none!important; } /* Keep Apex elements visually stable. Only tooltips/data points react. */ .apexcharts-series path, .apexcharts-series line, .apexcharts-series rect, .apexcharts-series circle, .apexcharts-series polygon, .apexcharts-series polyline{ transition:none!important; animation:none!important; } .apexcharts-canvas{ transform:none!important; } /* Skeleton should show briefly once, never loop indefinitely. */ .chart-skeleton{ animation:none!important; background:#f1f5f9!important; opacity:.75!important; } .chart-ready .chart-skeleton, .chart-stable .chart-skeleton{ display:none!important; } /* Do not apply AOS transforms to chart surfaces. */ .chart-card[data-aos], .mayor-chart-card[data-aos], .omm-card[data-aos], .developer-dashboard-card[data-aos], .apex-chart-shell[data-aos]{ opacity:1!important; transform:none!important; transition:none!important; } @media (prefers-reduced-motion: reduce){ .apexcharts-canvas *, .chart-card *, .mayor-chart-card *, .omm-card *{ animation:none!important; transition:none!important; } } /* V137 — interactive chart drill-down affordance. */ .chart-clickable{cursor:pointer!important;} .chart-clickable .apexcharts-series path, .chart-clickable .apexcharts-series circle, .chart-clickable .apexcharts-bar-area, .chart-clickable .apexcharts-pie-area{cursor:pointer!important;} .chart-clickable:focus-visible{outline:3px solid rgba(59,130,196,.28)!important;outline-offset:4px!important;border-radius:14px!important;} .fallback-chart-link{color:inherit;text-decoration:none;cursor:pointer;} .fallback-chart-link:hover strong, .fallback-chart-link:hover b{color:#1f6b45;} /* V139 — chart/database integrity indicators */ .chart-integrity-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:11px 14px;border-radius:14px;border:1px solid #bbf7d0;background:#ecfdf5;color:#166534;font-size:13px}.chart-integrity-banner.danger-badge{border-color:#fecaca;background:#fef2f2;color:#991b1b}.chart-integrity-banner span{font-weight:700}.chart-empty{min-height:220px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:#64748b}.chart-empty span{font-size:28px}.chart-empty strong{color:#334155}.chart-empty small{max-width:420px} @media(max-width:700px){.chart-integrity-banner{align-items:flex-start;flex-direction:column}} /* V140 — unified professional icon system across the application. */ .nav-icon{ width:22px!important; min-width:22px!important; height:22px!important; display:inline-grid!important; place-items:center!important; color:currentColor!important; font-size:17px!important; line-height:1!important; } .nav-icon .bi{display:block!important;line-height:1!important;} .nav a.active .nav-icon,.nav a:hover .nav-icon{color:inherit!important;} .account-menu-icon{ width:24px!important; min-width:24px!important; height:24px!important; display:inline-grid!important; place-items:center!important; color:#475569!important; font-size:17px!important; } .account-dropdown-section a:hover .account-menu-icon{color:#1d4ed8!important;} .sidebar-close-btn{ display:grid!important; place-items:center!important; font-size:18px!important; line-height:1!important; } .sidebar-close-btn .bi{line-height:1!important;} .empty-icon{ display:grid!important; place-items:center!important; font-size:28px!important; line-height:1!important; } /* KPI icon boxes use centered, consistent vector icons. */ .mayor-kpi-card > i, .dash-kpi > i, .report-kpi > i, .stat-card > i, .metric-card > i{ display:grid!important; place-items:center!important; line-height:1!important; font-style:normal!important; } .mayor-kpi-card > i.bi, .dash-kpi > i.bi, .report-kpi > i.bi, .stat-card > i.bi, .metric-card > i.bi{ font-size:22px!important; } /* Buttons containing icons keep text and symbols visually aligned. */ .btn .bi,.mini-link .bi,.show-btn .bi{ display:inline-block!important; font-size:1em!important; line-height:1!important; vertical-align:-.08em!important; } .show-btn{ display:inline-flex!important; align-items:center!important; gap:6px!important; } /* Prevent icon shrinking or misalignment on compact devices. */ @media(max-width:700px){ .nav-icon{width:21px!important;min-width:21px!important;height:21px!important;font-size:16px!important;} .account-menu-icon{width:22px!important;min-width:22px!important;height:22px!important;font-size:16px!important;} .mayor-kpi-card > i.bi,.dash-kpi > i.bi,.report-kpi > i.bi{font-size:20px!important;} } /* V141 — final responsive table and record-layout polish. Tables size columns from their real content on wide screens, scroll safely on medium screens, and use dedicated record cards on phones/tablets. */ .table-wrap, .report-register-wrap, .filed-table-wrap, .vp-scroll, .records-scroll, .data-scroll{ width:100%!important; max-width:100%!important; min-width:0!important; } /* Let browsers calculate useful widths from actual data rather than forcing every column into the same narrow space. */ .table, .vp-table, .report-register, .report-table, .role-register-panel .report-register, .pnp-register-v55 .report-register{ width:100%!important; table-layout:auto!important; border-collapse:separate!important; border-spacing:0!important; } .table th, .table td, .vp-table th, .vp-table td, .report-register th, .report-register td, .report-table th, .report-table td{ min-width:0!important; max-width:none!important; overflow-wrap:break-word!important; word-break:normal!important; hyphens:none!important; } /* Column headings must remain readable words instead of breaking one letter per line (for example Penalty, Status, and Action). */ .table thead th, .vp-table thead th, .report-register thead th, .report-table thead th{ white-space:nowrap!important; overflow-wrap:normal!important; word-break:keep-all!important; line-height:1.25!important; } /* Common compact columns size to their contents. */ .table th:first-child, .table td:first-child, .report-register th:first-child, .report-register td:first-child{ width:1%!important; white-space:nowrap!important; } .table th:last-child, .table td:last-child, .report-register th:last-child, .report-register td:last-child{ width:1%!important; white-space:nowrap!important; text-align:center!important; } /* Dashboard drill-down violation table: give descriptive data the room and keep compact fields compact. */ .drilldown-page .table{ min-width:900px!important; } .drilldown-page .table th:nth-child(1), .drilldown-page .table td:nth-child(1){width:110px!important;white-space:normal!important;} .drilldown-page .table th:nth-child(2), .drilldown-page .table td:nth-child(2){width:150px!important;} .drilldown-page .table th:nth-child(3), .drilldown-page .table td:nth-child(3){width:auto!important;min-width:300px!important;} .drilldown-page .table th:nth-child(4), .drilldown-page .table td:nth-child(4){width:145px!important;white-space:normal!important;} .drilldown-page .table th:nth-child(5), .drilldown-page .table td:nth-child(5){width:115px!important;white-space:normal!important;} .drilldown-page .table th:nth-child(6), .drilldown-page .table td:nth-child(6){width:115px!important;white-space:normal!important;} .drilldown-page .table th:nth-child(7), .drilldown-page .table td:nth-child(7){width:90px!important;white-space:nowrap!important;} .drilldown-page .table td:nth-child(3), .drilldown-page .table td:nth-child(4), .drilldown-page .table td:nth-child(5), .drilldown-page .table td:nth-child(6){line-height:1.4!important;} .drilldown-page .table td:last-child .btn{min-width:68px!important;width:auto!important;} /* Large laptop and desktop: use the whole page with no unnecessary scrollbar. */ @media (min-width:1200px){ .table-wrap, .report-register-wrap, .filed-table-wrap, .vp-scroll, .records-scroll, .data-scroll{ overflow-x:auto!important; } .table th,.table td, .vp-table th,.vp-table td, .report-register th,.report-register td, .report-table th,.report-table td{ padding-left:clamp(10px,1vw,16px)!important; padding-right:clamp(10px,1vw,16px)!important; } } /* Medium/laptop widths: preserve readable columns and allow a controlled horizontal scroll instead of compressing labels into broken words. */ @media (min-width:901px) and (max-width:1199px){ .table-wrap, .report-register-wrap, .filed-table-wrap, .vp-scroll, .records-scroll, .data-scroll{ display:block!important; overflow-x:auto!important; overflow-y:visible!important; -webkit-overflow-scrolling:touch!important; } .table, .vp-table, .report-register, .report-table{ min-width:860px!important; } .drilldown-page .table{min-width:920px!important;} } /* Phones and tablets: use the existing purpose-built record cards rather than squeezing desktop tables. */ @media (max-width:900px){ .table-card > .table-wrap, .data-panel-card > .table-wrap, .drilldown-page .table-wrap{ display:none!important; } .table-card > .mobile-card-list, .data-panel-card > .mobile-card-list, .drilldown-page .mobile-card-list{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; width:100%!important; } .mobile-card-list .history-card, .mobile-card-list .record-card{ width:100%!important; min-width:0!important; overflow:hidden!important; } .mobile-card-list .history-card p, .mobile-card-list .record-card p, .mobile-card-list .history-card strong, .mobile-card-list .record-card strong{ overflow-wrap:anywhere!important; } } @media print{ .table-wrap,.report-register-wrap,.filed-table-wrap,.vp-scroll{ display:block!important; overflow:visible!important; } .mobile-card-list{display:none!important;} .table,.vp-table,.report-register,.report-table{ min-width:0!important; width:100%!important; table-layout:auto!important; font-size:10px!important; } } /* V142 — universal responsive data visibility fix. Never hide database tables on phone/tablet. Convert them into compact cards. */ @media (max-width: 900px){ .table-wrap, .report-table-wrap, .report-register-wrap, .filed-table-wrap, .vp-scroll, .records-scroll, .data-scroll, .print-table-wrap{ display:block!important; width:100%!important; max-width:100%!important; overflow:visible!important; border:0!important; background:transparent!important; box-shadow:none!important; } table.responsive-ready, table.responsive-card-table, .table.responsive-ready, .vp-table.responsive-ready, .report-register.responsive-ready{ display:block!important; width:100%!important; min-width:0!important; border:0!important; background:transparent!important; } table.responsive-ready thead, table.responsive-card-table thead, .table.responsive-ready thead, .vp-table.responsive-ready thead, .report-register.responsive-ready thead{ display:none!important; } table.responsive-ready tbody, table.responsive-ready tr, table.responsive-ready td, table.responsive-card-table tbody, table.responsive-card-table tr, table.responsive-card-table td, .table.responsive-ready tbody, .table.responsive-ready tr, .table.responsive-ready td, .vp-table.responsive-ready tbody, .vp-table.responsive-ready tr, .vp-table.responsive-ready td, .report-register.responsive-ready tbody, .report-register.responsive-ready tr, .report-register.responsive-ready td{ display:block!important; width:100%!important; min-width:0!important; } table.responsive-ready tr, table.responsive-card-table tr, .table.responsive-ready tr, .vp-table.responsive-ready tr, .report-register.responsive-ready tr{ position:relative!important; margin:0 0 12px!important; padding:14px!important; border:1px solid #e2e8f0!important; border-radius:18px!important; background:#fff!important; box-shadow:0 8px 24px rgba(15,23,42,.05)!important; } table.responsive-ready td, table.responsive-card-table td, .table.responsive-ready td, .vp-table.responsive-ready td, .report-register.responsive-ready td{ border:0!important; padding:7px 0!important; display:grid!important; grid-template-columns:minmax(104px,34%) minmax(0,1fr)!important; gap:10px!important; align-items:start!important; text-align:left!important; overflow-wrap:anywhere!important; word-break:normal!important; } table.responsive-ready td::before, table.responsive-card-table td::before, .table.responsive-ready td::before, .vp-table.responsive-ready td::before, .report-register.responsive-ready td::before{ content:attr(data-label)!important; color:#64748b!important; font-size:10px!important; line-height:1.3!important; font-weight:800!important; letter-spacing:.06em!important; text-transform:uppercase!important; } tr.mobile-data-collapsed td.mobile-secondary-field{ display:none!important; } .mobile-row-details-toggle{ display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; width:100%!important; min-height:40px!important; margin-top:8px!important; padding:8px 12px!important; border:1px solid #dbe3ec!important; border-radius:12px!important; background:#f8fafc!important; color:#17324d!important; font:700 13px/1.2 inherit!important; cursor:pointer!important; } .mobile-row-details-toggle:hover, .mobile-row-details-toggle:focus-visible{ background:#eef4fa!important; border-color:#bfdbfe!important; } table.responsive-ready td .btn, table.responsive-card-table td .btn, .table.responsive-ready td .btn, .vp-table.responsive-ready td .btn{ width:100%!important; min-width:0!important; } } @media (max-width: 520px){ table.responsive-ready td, table.responsive-card-table td, .table.responsive-ready td, .vp-table.responsive-ready td, .report-register.responsive-ready td{ grid-template-columns:1fr!important; gap:3px!important; padding:7px 0!important; } } /* V149 — compact and responsive Add Violation violator finder. */ @media (min-width:641px) and (max-width:1000px){ .violator-finder-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .violator-search-box{grid-column:1/-1!important;} .violator-search-results{ grid-template-columns:repeat(2,minmax(0,1fr))!important; max-height:460px!important; gap:10px!important; } .violator-match-card{ grid-template-columns:42px minmax(0,1fr)!important; align-items:center!important; padding:11px!important; } .violator-match-select{ grid-column:1/-1!important; justify-content:center!important; border-top:1px solid #eef2f7!important; padding-top:8px!important; } } @media (max-width:640px){ .violator-finder-card{gap:12px!important;} .violator-finder-head{gap:10px!important;} .violator-finder-head h2{font-size:21px!important;} .violator-finder-head p{font-size:13px!important;line-height:1.45!important;} .create-new-violator-btn{min-height:44px!important;} .violator-finder-controls{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .violator-search-box{grid-column:1/-1!important;height:46px!important;} .violator-search-box input{height:44px!important;font-size:14px!important;} .violator-finder-controls select{height:46px!important;font-size:13px!important;padding-inline:12px!important;} /* Avoid nested page + result scrolling on phones. */ .violator-search-results{ grid-template-columns:1fr!important; max-height:none!important; overflow:visible!important; padding-right:0!important; gap:10px!important; } .violator-match-card{ grid-template-columns:52px minmax(0,1fr) auto!important; gap:10px!important; padding:12px!important; border-radius:16px!important; min-height:86px!important; } .violator-match-avatar{ width:52px!important;height:52px!important;border-radius:15px!important; } .violator-match-info strong{font-size:15px!important;white-space:normal!important;} .violator-match-info small{font-size:12px!important;white-space:normal!important;line-height:1.35!important;} .violator-match-stats{margin-top:6px!important;gap:5px!important;} .violator-match-stats span{font-size:10px!important;padding:4px 7px!important;} .violator-match-select{ grid-column:auto!important; align-self:center!important; justify-content:center!important; border-top:0!important; padding:8px!important; width:40px!important; height:40px!important; border-radius:12px!important; background:#ecfdf5!important; color:#166534!important; font-size:0!important; } .violator-match-select i{font-size:18px!important;} .violator-search-status{font-size:12px!important;} } @media (max-width:430px){ .violator-finder-controls{grid-template-columns:1fr!important;} .violator-search-box{grid-column:auto!important;} .violator-match-card{ grid-template-columns:46px minmax(0,1fr) 38px!important; padding:10px!important; } .violator-match-avatar{width:46px!important;height:46px!important;} } /* V150 — unified paginated record-list standard. */ .records-directory{display:grid;gap:16px} .records-filter-bar{display:grid;grid-template-columns:minmax(260px,1.7fr) minmax(190px,.7fr) auto auto;gap:10px;align-items:end} .records-filter-bar .input,.records-filter-bar .btn{height:46px} .records-pagination-bar{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:14px;padding:12px 14px;border:1px solid #e5eaf1;border-radius:16px;background:#f8fafc} .records-range{white-space:nowrap}.rows-per-page-form label{display:flex;align-items:center;gap:9px;white-space:nowrap}.rows-per-page-form select{width:78px;height:42px} .pagination-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px}.pagination-controls .btn{min-height:42px;padding:0 14px}.pagination-controls .disabled{pointer-events:none;opacity:.45}.page-current{display:grid;place-items:center;min-width:44px;height:44px;border-radius:12px;background:#2563eb;color:#fff;font-weight:800}.page-total{white-space:nowrap} .records-scroll-shell{max-height:min(62vh,680px);overflow:auto;border:1px solid #e4eaf2;border-radius:16px;scrollbar-gutter:stable}.records-scroll-shell thead th{position:sticky;top:0;z-index:2;background:#f8fafc}.payment-records-table{width:100%;table-layout:auto}.payment-records-table th,.payment-records-table td{vertical-align:middle}.payment-records-table td:nth-child(1){min-width:220px}.payment-records-table td:nth-child(2){min-width:150px}.payment-records-table td:nth-child(3){min-width:160px}.payment-records-table td:nth-child(4),.payment-records-table td:nth-child(5),.payment-records-table td:nth-child(7){white-space:nowrap}.payment-records-table td:nth-child(6){min-width:180px;white-space:nowrap}.btn-sm{min-height:38px;padding:8px 12px} @media(max-width:1000px){.records-filter-bar{grid-template-columns:1fr 1fr}.records-filter-bar .btn{width:100%}.records-pagination-bar{grid-template-columns:1fr auto}.pagination-controls{grid-column:1/-1;justify-content:center}} @media(max-width:700px){.records-directory{gap:12px}.records-filter-bar{grid-template-columns:1fr 1fr}.records-filter-bar input[type=search]{grid-column:1/-1}.records-pagination-bar{grid-template-columns:1fr;gap:10px}.records-range{text-align:left;white-space:normal}.rows-per-page-form label{justify-content:space-between}.pagination-controls{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;width:100%;gap:6px}.pagination-controls .btn{width:100%;font-size:12px;padding:0 6px}.page-total{display:none}.records-scroll-shell{max-height:none;overflow:visible;border:0}.payment-records-table,.payment-records-table tbody{display:grid;gap:12px}.payment-records-table thead{display:none}.payment-records-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:15px;border:1px solid #e3e9f1;border-radius:16px;background:#fff}.payment-records-table td{display:grid;gap:4px;min-width:0!important;padding:0!important;border:0!important;white-space:normal!important}.payment-records-table td::before{content:attr(data-label);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.payment-records-table td:nth-child(1),.payment-records-table td:nth-child(2),.payment-records-table td:nth-child(3){grid-column:1/-1}.payment-records-table td:last-child{grid-column:1/-1}.payment-records-table td:last-child .btn{width:100%}} @media(max-width:420px){.records-filter-bar{grid-template-columns:1fr}.records-filter-bar input[type=search]{grid-column:auto}.pagination-controls{grid-template-columns:1fr auto 1fr}.pagination-controls a:first-child,.pagination-controls a:last-child{display:none}.payment-records-table tr{grid-template-columns:1fr}.payment-records-table td{grid-column:1!important}} /* V151 — full device-class responsiveness for all roles and modules. Targets phones, tablets, common 1366/1440 laptop screens, desktops, ultra-wide displays, and projector/large-screen presentation use. */ :root{ --v151-gutter-xs:10px; --v151-gutter-sm:14px; --v151-gutter-md:18px; --v151-gutter-lg:24px; --v151-gutter-xl:32px; --v151-content-max:1920px; } /* Prevent accidental clipping and make all module content shrink safely. */ .app-shell,.workspace,.main-content,.card,.chart-card,.report-card,.report-panel, .records-directory,.records-scroll-shell,.table-wrap,.report-table-wrap, .grid,.dashboard-grid,.analytics-grid,.role-chart-grid,.form-grid, .records-filter-bar,.report-filter-grid,.cashier-filter-grid{ min-width:0!important; } img,svg,canvas{max-width:100%} /* Common laptop class: optimize for 1366x768 and 1440x900 without oversized UI. */ @media (min-width:1024px) and (max-width:1499px){ :root{--v100-header-x:16px;--exec-sidebar:208px} .sidebar{width:208px!important} .workspace{margin-left:208px!important} .app-header{padding-inline:16px!important;column-gap:12px!important} .main-content{padding:12px var(--v151-gutter-md) 22px!important} .card,.chart-card,.report-card,.report-panel,.data-panel-card,.workspace-panel{ padding:16px!important;border-radius:16px!important } .dashboard-kpis,.compact-kpis,.report-kpi-grid,.developer-kpi-grid, .mayor-kpi-grid,.stats-grid,.summary-grid,.kpi-grid{ gap:12px!important } .dash-kpi,.report-kpi,.developer-kpi-card,.mayor-kpi-card{ min-height:112px!important;padding:15px!important } .chart-wrapper,.apex-chart-shell{min-height:255px!important} .report-filter-grid{gap:10px!important} .report-filter-grid .input,.report-actions .btn{height:44px!important} table th,table td{padding:11px 12px!important} } /* Wide desktop and ultra-wide: center the work area and use space without stretching text too far. */ @media (min-width:1500px){ .main-content{ width:100%!important; max-width:var(--v151-content-max)!important; margin-inline:auto!important; padding:16px var(--v151-gutter-xl) 32px!important } .card,.chart-card,.report-card,.report-panel,.data-panel-card{border-radius:18px!important} .chart-wrapper,.apex-chart-shell{min-height:300px!important} } /* Projector / very large screens: enlarge only readable content, not empty spacing. */ @media (min-width:1900px){ html{font-size:17px} .app-header{height:70px!important;min-height:70px!important} .workspace{padding-top:70px!important} .header-system-name,.header-page-name{font-size:18px!important} .sidebar .nav a{min-height:48px!important;font-size:15px!important} .dash-kpi strong,.report-kpi strong,.developer-kpi-card strong,.mayor-kpi-card strong{font-size:32px!important} .chart-title,.chart-card h2,.report-card h2{font-size:19px!important} .chart-wrapper,.apex-chart-shell{min-height:340px!important} } /* Tablet landscape and compact laptop window. */ @media (min-width:768px) and (max-width:1023px){ .workspace{margin-left:0!important} .sidebar{transform:translateX(-105%)!important;width:min(280px,82vw)!important} .sidebar.is-open{transform:translateX(0)!important} .main-content{padding:10px var(--v151-gutter-md) 20px!important} .app-header{padding-inline:14px!important} .dashboard-kpis,.compact-kpis,.report-kpi-grid,.developer-kpi-grid, .mayor-kpi-grid,.stats-grid,.summary-grid,.kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important } .analytics-grid,.role-chart-grid,.report-chart-grid,.manager-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important } .records-filter-bar,.report-filter-grid,.cashier-filter-grid,.filter-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important } .records-filter-bar input[type=search],.report-search,.filter-grid> :first-child{ grid-column:1/-1!important } .chart-wrapper,.apex-chart-shell{min-height:245px!important} table{font-size:13px!important} } /* Tablet portrait and large phones. */ @media (min-width:560px) and (max-width:767px){ .main-content{padding:8px var(--v151-gutter-sm) 18px!important} .dashboard-kpis,.compact-kpis,.report-kpi-grid,.developer-kpi-grid, .mayor-kpi-grid,.stats-grid,.summary-grid,.kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important } .analytics-grid,.role-chart-grid,.report-chart-grid,.manager-grid{grid-template-columns:1fr!important} .dash-kpi,.report-kpi,.developer-kpi-card,.mayor-kpi-card{min-height:104px!important;padding:13px!important} .chart-wrapper,.apex-chart-shell{min-height:235px!important} .records-filter-bar,.report-filter-grid,.cashier-filter-grid,.filter-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important } } /* Phones: all actions remain accessible and data becomes intentional cards. */ @media (max-width:559px){ html,body{overflow-x:hidden!important} .workspace{margin-left:0!important;width:100%!important} .main-content{padding:8px var(--v151-gutter-xs) 16px!important} .app-header{padding-inline:8px!important} .card,.chart-card,.report-card,.report-panel,.data-panel-card,.workspace-panel{ padding:13px!important;border-radius:14px!important } .dashboard-kpis,.compact-kpis,.report-kpi-grid,.developer-kpi-grid, .mayor-kpi-grid,.stats-grid,.summary-grid,.kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important } .dash-kpi,.report-kpi,.developer-kpi-card,.mayor-kpi-card{ min-height:96px!important;padding:12px!important } .dash-kpi strong,.report-kpi strong,.developer-kpi-card strong,.mayor-kpi-card strong{ font-size:clamp(20px,6vw,27px)!important;white-space:normal!important;overflow-wrap:anywhere!important } .dash-kpi small,.report-kpi small{font-size:11px!important;line-height:1.25!important} .analytics-grid,.role-chart-grid,.report-chart-grid,.manager-grid{grid-template-columns:1fr!important} .chart-wrapper,.apex-chart-shell{min-height:220px!important} .records-filter-bar,.report-filter-grid,.cashier-filter-grid,.filter-grid, .form-grid,.two-column,.three-column{grid-template-columns:1fr!important} .records-filter-bar input[type=search],.report-search,.filter-grid> :first-child{grid-column:auto!important} .actions,.hero-actions,.top-actions,.form-actions,.report-actions{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important } .actions .btn,.hero-actions .btn,.top-actions .btn,.form-actions .btn,.report-actions .btn{ width:100%!important;min-width:0!important } .records-scroll-shell,.table-wrap,.report-table-wrap{max-width:100%!important} table.responsive-ready,table.responsive-card-table,.table.responsive-ready,.vp-table.responsive-ready{ width:100%!important;min-width:0!important } table.responsive-ready tr,table.responsive-card-table tr,.table.responsive-ready tr,.vp-table.responsive-ready tr{ width:100%!important;max-width:100%!important } table.responsive-ready td,table.responsive-card-table td,.table.responsive-ready td,.vp-table.responsive-ready td{ overflow-wrap:anywhere!important;word-break:normal!important;min-width:0!important } } /* Very small phones: only here do KPI/action groups drop to one column. */ @media (max-width:360px){ .dashboard-kpis,.compact-kpis,.report-kpi-grid,.developer-kpi-grid, .mayor-kpi-grid,.stats-grid,.summary-grid,.kpi-grid, .actions,.hero-actions,.top-actions,.form-actions,.report-actions{ grid-template-columns:1fr!important } .header-page-name{font-size:13px!important} } /* Height-aware refinements for common laptop screens such as 1366x768. */ @media (min-width:1024px) and (max-height:820px){ .main-content{padding-top:10px!important} .dash-kpi,.report-kpi,.developer-kpi-card,.mayor-kpi-card{min-height:100px!important} .chart-wrapper,.apex-chart-shell{min-height:230px!important} .records-scroll-shell{max-height:min(56vh,560px)!important} .sidebar .nav a{min-height:42px!important;height:42px!important} } /* Keep charts, cards, and tables stable when browser zoom or DPI scaling changes. */ @media (resolution >= 1.25dppx){ .app-header,.sidebar,.card,.chart-card,.report-card{transform:translateZ(0)} canvas,svg{shape-rendering:geometricPrecision} } /* V152 — authoritative viewport-fit and right-edge overflow fix. Prevent any page, toolbar, filter row, chart, table, or action group from extending beyond the visible workspace at laptop, desktop, and large sizes. */ html,body{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; } .app-shell{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } .workspace{ min-width:0!important; max-width:calc(100vw - 208px)!important; width:calc(100vw - 208px)!important; overflow-x:hidden!important; } .app-header, .main-content{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } .main-content{ margin-inline:0!important; overflow-x:hidden!important; } .main-content > *, .report-workspace-v35, .report-toolbar, .report-filter-panel, .report-sheet-summary, .report-analytics-grid, .role-report-workspace, .role-report-filter, .role-report-filter-grid, .records-directory, .records-filter-bar, .records-pagination-bar, .card, .chart-card, .report-card, .report-panel, .workspace-panel{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* Report filters: use the actual content width instead of viewport width. Actions always move to their own row so buttons never get clipped. */ .report-filter-panel{ display:grid!important; grid-template-columns:minmax(190px,1.15fr) repeat(2,minmax(135px,.72fr)) minmax(170px,1fr) minmax(145px,.78fr) minmax(220px,1.2fr)!important; gap:10px!important; align-items:end!important; } .report-filter-panel > *{min-width:0!important;max-width:100%!important;} .report-filter-title{min-width:0!important;} .report-tool-actions{ grid-column:1 / -1!important; display:grid!important; grid-template-columns:repeat(4,minmax(120px,1fr))!important; gap:8px!important; width:100%!important; min-width:0!important; justify-content:stretch!important; } .report-tool-actions .btn{ width:100%!important; min-width:0!important; padding-inline:10px!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* Other filter/action rows across the system must wrap before clipping. */ .report-actions, .role-filter-actions, .actions, .hero-actions, .top-actions, .form-actions, .pagination-controls{ min-width:0!important; max-width:100%!important; } .report-actions .btn, .role-filter-actions .btn, .actions .btn, .hero-actions .btn, .top-actions .btn, .form-actions .btn, .pagination-controls .btn{ min-width:0!important; max-width:100%!important; } /* Charts and canvases must respect the parent width. */ .apexcharts-canvas, .apexcharts-svg, .chart-wrapper, .apex-chart-shell, canvas, svg{ max-width:100%!important; } /* Common laptop / desktop widths where the visible workspace is narrower than the browser viewport because the sidebar is present. */ @media (min-width:1024px) and (max-width:1799px){ .report-filter-panel{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .report-filter-title, .report-search, .report-tool-actions{ grid-column:1 / -1!important; } .report-filter-title{ display:grid!important; gap:4px!important; } .report-tool-actions{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } } @media (min-width:901px) and (max-width:1180px){ .workspace{ max-width:calc(100vw - 208px)!important; width:calc(100vw - 208px)!important; } .report-filter-panel{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .report-filter-title, .report-search, .report-tool-actions{ grid-column:1 / -1!important; } .report-tool-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-width:900px){ .workspace{ width:100vw!important; max-width:100vw!important; margin-left:0!important; } .report-filter-panel{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .report-filter-title, .report-search, .report-tool-actions{ grid-column:1 / -1!important; } .report-tool-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-width:560px){ .report-filter-panel, .report-tool-actions{ grid-template-columns:1fr!important; } } /* Very large screens: keep full usability without uncontrolled stretching. */ @media (min-width:1800px){ .workspace{ max-width:calc(100vw - 250px)!important; width:calc(100vw - 250px)!important; } .main-content{ max-width:1920px!important; margin-inline:auto!important; } } /* V153 — equal left/right content gutters. V152 subtracted the sidebar width from .workspace even though the layout already used margin-left, which created a large blank area on the right. Let the flex/block layout calculate the remaining width naturally. */ .workspace{ width:auto!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; } /* Desktop sidebar-open state: margin-left already reserves the sidebar space. */ @media (min-width:901px){ .workspace{ width:auto!important; max-width:none!important; margin-right:0!important; } body.sidebar-collapsed .workspace{ width:auto!important; max-width:none!important; } .main-content{ width:100%!important; max-width:none!important; margin:0!important; padding-left:clamp(18px,2vw,32px)!important; padding-right:clamp(18px,2vw,32px)!important; box-sizing:border-box!important; } } /* Header and all first-level page sections align to the same gutters. */ .app-header{ width:100%!important; max-width:none!important; box-sizing:border-box!important; } .main-content > *, .report-workspace-v35, .report-page-v34, .role-report-workspace, .records-directory, .workspace-panel{ margin-left:0!important; margin-right:0!important; width:100%!important; max-width:none!important; box-sizing:border-box!important; } /* Medium screens keep equal adaptive gutters. */ @media (min-width:901px) and (max-width:1366px){ .main-content{ padding-left:18px!important; padding-right:18px!important; } } /* Mobile/tablet: full viewport with symmetric side padding. */ @media (max-width:900px){ .workspace{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } .main-content{ width:100%!important; max-width:100%!important; margin:0!important; padding-left:14px!important; padding-right:14px!important; } } @media (max-width:480px){ .main-content{ padding-left:10px!important; padding-right:10px!important; } } /* Large/projector screens: keep equal gutters without forcing a narrow page. */ @media (min-width:1800px){ .workspace{ width:auto!important; max-width:none!important; } .main-content{ width:100%!important; max-width:none!important; margin:0!important; padding-left:36px!important; padding-right:36px!important; } } /* V154 — cross-device violator profile polish. Keep the PNP profile balanced on different laptop resolutions, tablets, phones, desktops, and projector/large screens. */ .pnp-profile-clean{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } .pnp-profile-clean > .card, .pnp-profile-clean .profile-head-card, .pnp-profile-clean #actual-history{ width:100%!important; max-width:none!important; min-width:0!important; } .profile-head-card{ display:grid!important; gap:14px!important; } .profile-head-main{ width:100%!important; min-width:0!important; align-items:center!important; } .pnp-profile-person > div:last-child{ min-width:0!important; } .pnp-profile-person h2, .pnp-profile-person p{ overflow-wrap:anywhere!important; } /* Use all available width rather than leaving a single tile stranded. */ .pnp-profile-summary-clean{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important; width:100%!important; min-width:0!important; } .pnp-profile-summary-clean .summary-tile{ display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0!important; min-height:92px!important; padding:13px 14px!important; } .pnp-profile-summary-clean .summary-tile small, .pnp-profile-summary-clean .summary-tile strong{ max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .profile-actions-clean{ display:grid!important; grid-template-columns:repeat(3,minmax(0,auto))!important; justify-content:start!important; align-items:center!important; gap:10px!important; width:100%!important; } .profile-actions-clean .btn{ width:auto!important; min-width:118px!important; white-space:nowrap!important; } .profile-record-search{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; gap:10px!important; align-items:end!important; width:100%!important; min-width:0!important; } .profile-record-search label{ min-width:0!important; } .profile-record-search .input{ width:100%!important; min-width:0!important; } .profile-record-search .btn{ min-width:150px!important; white-space:nowrap!important; } .pnp-timeline-clean, .pnp-timeline-clean .timeline-item, .pnp-timeline-clean .timeline-card{ width:100%!important; min-width:0!important; } .timeline-clean-head > div:first-child{ min-width:0!important; } .timeline-clean-head h3, .timeline-clean-head p, .timeline-note{ overflow-wrap:anywhere!important; } /* Large desktop / projector */ @media (min-width:1600px){ .pnp-profile-clean{gap:20px!important;} .profile-head-card,#actual-history{padding:26px!important;} .pnp-profile-summary-clean{gap:14px!important;} .pnp-profile-summary-clean .summary-tile{min-height:104px!important;padding:16px 18px!important;} } /* Typical laptop widths */ @media (min-width:1100px) and (max-width:1599px){ .pnp-profile-summary-clean{ grid-template-columns:repeat(5,minmax(130px,1fr))!important; } .profile-head-card,#actual-history{padding:18px!important;} } /* Smaller laptops and tablets */ @media (min-width:760px) and (max-width:1099px){ .pnp-profile-summary-clean{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .pnp-profile-summary-clean .summary-tile:last-child{ grid-column:auto!important; } .profile-record-search{ grid-template-columns:minmax(0,1fr) minmax(130px,.35fr)!important; } .profile-record-search > .btn:last-child{ grid-column:2!important; } .profile-actions-clean{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .profile-actions-clean .btn{ min-width:0!important; width:100%!important; } } /* Phones */ @media (max-width:759px){ .pnp-profile-clean{gap:10px!important;} .profile-head-card,#actual-history{ padding:14px!important; border-radius:18px!important; } .profile-head-main{ display:grid!important; grid-template-columns:1fr!important; justify-items:center!important; text-align:center!important; gap:10px!important; } .profile-head-main > .badge{ justify-self:center!important; } .pnp-profile-person{ flex-direction:column!important; align-items:center!important; text-align:center!important; } .pnp-profile-summary-clean{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .pnp-profile-summary-clean .summary-tile{ min-height:80px!important; padding:11px 10px!important; } .pnp-profile-summary-clean .summary-tile strong{ font-size:18px!important; } .profile-actions-clean{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .profile-actions-clean .btn{ width:100%!important; min-width:0!important; } .profile-actions-clean .btn:last-child{ grid-column:1 / -1!important; } .profile-record-search{ grid-template-columns:1fr 1fr!important; gap:8px!important; } .profile-record-search label{ grid-column:1 / -1!important; } .profile-record-search .btn{ width:100%!important; min-width:0!important; } .timeline-clean-head{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; } .timeline-amount-box{ text-align:left!important; min-width:0!important; white-space:normal!important; } .pnp-clear-statuses{ display:flex!important; flex-wrap:wrap!important; gap:6px!important; } } @media (max-width:390px){ .pnp-profile-summary-clean{ grid-template-columns:1fr!important; } .profile-actions-clean, .profile-record-search{ grid-template-columns:1fr!important; } .profile-actions-clean .btn:last-child, .profile-record-search label{ grid-column:auto!important; } } /* V155 — authoritative equal-gutter shell and PNP profile alignment. The current navigation behaves as an overlay opened by the burger button, so the workspace must not permanently reserve a hidden desktop sidebar. This removes the large left offset seen on some laptops and guarantees equal left/right gutters across all supported viewport sizes. */ .workspace{ margin-left:0!important; margin-right:0!important; width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } /* Sidebar remains an overlay on every device and never reduces page width. */ .sidebar{ position:fixed!important; z-index:1000!important; } /* Consistent, symmetric application gutters. */ .main-content{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding-left:clamp(18px,2vw,32px)!important; padding-right:clamp(18px,2vw,32px)!important; box-sizing:border-box!important; } /* PNP profile must fill the same centered content box as every other page. */ body.role-pnp .main-content > .pnp-profile-clean, body.role-pnp .pnp-profile-clean, body.role-pnp .pnp-profile-clean > .card, body.role-pnp .profile-head-card, body.role-pnp #actual-history{ width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; box-sizing:border-box!important; } /* Keep summary cards balanced without creating unused space. */ body.role-pnp .pnp-profile-summary-clean{ width:100%!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; } /* Smaller laptop and tablet layouts. */ @media (min-width:760px) and (max-width:1199px){ .main-content{ padding-left:18px!important; padding-right:18px!important; } body.role-pnp .pnp-profile-summary-clean{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } /* Phones and compact tablets. */ @media (max-width:759px){ .main-content{ padding-left:14px!important; padding-right:14px!important; } body.role-pnp .pnp-profile-summary-clean{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media (max-width:420px){ .main-content{ padding-left:10px!important; padding-right:10px!important; } body.role-pnp .pnp-profile-summary-clean{ grid-template-columns:1fr!important; } } /* Large desktop and projector screens retain equal gutters while using space. */ @media (min-width:1800px){ .main-content{ width:100%!important; max-width:1920px!important; margin-left:auto!important; margin-right:auto!important; padding-left:36px!important; padding-right:36px!important; } } /* V156 — smart PNP lookup and role-aware header autocomplete. */ .header-search{position:relative!important;} .header-live-results{position:absolute;top:calc(100% + 8px);left:42px;right:48px;z-index:1200;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.16);padding:6px;max-height:360px;overflow:auto;} .header-live-results a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:12px;} .header-live-results a:hover,.header-live-results a:focus{background:#f1f5f9;} .header-live-results strong,.header-live-results small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .header-live-results small{margin-top:3px;color:#64748b;font-size:12px;} .header-live-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eff6ff;color:#2563eb;} .pnp-smart-lookup{width:100%;} .pnp-smart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;} .pnp-smart-head h2{margin:0 0 4px;} .pnp-smart-filters{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(180px,.8fr) minmax(180px,.8fr);gap:12px;align-items:end;} .pnp-smart-filters label{display:grid;gap:7px;min-width:0;} .pnp-smart-filters label>span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;} .search-input-icon{position:relative;}.search-input-icon>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#64748b;z-index:1}.search-input-icon .input{padding-left:42px;} .pnp-live-summary{margin:14px 0 10px;color:#64748b;font-size:13px;} .pnp-live-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px;} .pnp-live-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;min-width:0;transition:border-color .15s,box-shadow .15s;} .pnp-live-card:hover{border-color:#93c5fd;box-shadow:0 10px 24px rgba(37,99,235,.08);} .pnp-live-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#1f6b45,#3b82c4);color:#fff;font-weight:800;} .pnp-live-main{min-width:0;}.pnp-live-main strong,.pnp-live-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.pnp-live-main small{margin-top:3px;color:#64748b;font-size:12px;} .pnp-live-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}.pnp-live-badges em{font-style:normal;font-size:11px;font-weight:800;padding:4px 7px;border-radius:999px;background:#eff6ff;color:#1d4ed8;}.pnp-live-badges em.warn{background:#fff7ed;color:#c2410c}.pnp-live-badges em.danger{background:#fef2f2;color:#b91c1c}.pnp-live-open{color:#2563eb;font-size:20px;} @media(max-width:900px){.pnp-smart-filters{grid-template-columns:1fr 1fr}.pnp-live-search{grid-column:1/-1}.pnp-live-results{grid-template-columns:1fr}.header-live-results{left:0;right:0;}} @media(max-width:560px){.pnp-smart-head{flex-direction:column}.pnp-smart-head .btn{width:100%}.pnp-smart-filters{grid-template-columns:1fr 1fr}.pnp-live-card{grid-template-columns:42px minmax(0,1fr) auto;padding:12px}.pnp-live-avatar{width:42px;height:42px}.header-live-results{position:fixed;left:10px;right:10px;top:68px;max-height:min(55vh,380px)}} @media(max-width:380px){.pnp-smart-filters{grid-template-columns:1fr}.pnp-live-search{grid-column:auto}.pnp-live-badges{gap:4px}.pnp-live-badges em{font-size:10px}} /* V157 — polished PNP live lookup: balanced layout + predictable responsive behavior. */ .pnp-smart-lookup{width:100%;max-width:none!important;margin:0!important;} .pnp-smart-lookup .pnp-main-lookup{width:100%;min-width:0;padding:22px!important;overflow:visible!important;} .pnp-smart-head{align-items:center!important;margin-bottom:18px!important;} .pnp-smart-head h2{font-size:clamp(22px,2vw,30px);line-height:1.1;} .pnp-smart-head p{margin:6px 0 0;max-width:760px;} .pnp-all-violators{flex:0 0 auto;white-space:nowrap;} .pnp-smart-filters{ display:grid!important; grid-template-columns:minmax(320px,1.7fr) minmax(190px,.8fr) minmax(210px,.9fr) auto!important; gap:12px!important; align-items:end!important; } .pnp-smart-filters label{min-width:0;} .pnp-smart-filters .input{height:48px;border-radius:14px;} .search-input-icon{position:relative;display:flex;align-items:center;min-width:0;} .search-input-icon>i{position:absolute;left:15px;z-index:1;color:#64748b;pointer-events:none;} .search-input-icon input{padding-left:42px!important;padding-right:42px!important;width:100%;} .pnp-query-clear{position:absolute;right:8px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:#64748b;cursor:pointer;} .pnp-query-clear:hover{background:#f1f5f9;color:#0f172a;} .pnp-filter-reset{height:48px;min-width:104px;padding-inline:16px;white-space:nowrap;} .pnp-live-summary{display:flex;align-items:center;min-height:22px;margin:14px 0 10px!important;font-weight:650;} .pnp-live-results{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch;} .pnp-live-results>.empty-state{grid-column:1/-1!important;width:100%;min-height:150px;} .pnp-search-empty{display:grid!important;place-items:center!important;align-content:center!important;gap:7px!important;text-align:center!important;} .pnp-search-empty i{font-size:24px;color:#64748b;} .pnp-search-empty small{display:block;color:#64748b;font-size:12px;font-weight:500;} .pnp-live-results.is-loading{opacity:.62;pointer-events:none;} .pnp-live-card{ min-height:112px; grid-template-columns:48px minmax(0,1fr) auto!important; padding:14px!important; text-decoration:none!important; color:inherit!important; } .pnp-live-main strong{font-size:15px;} .pnp-live-main small{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;} .pnp-live-main small b{color:#94a3b8;font-weight:600;} .pnp-live-badges em.money{background:#ecfdf5;color:#047857;} .pnp-live-open{display:flex;align-items:center;gap:6px;font-size:18px;white-space:nowrap;} .pnp-live-open span{font-size:11px;font-weight:800;color:#2563eb;} .pnp-smart-lookup .pnp-lookup-actions{ max-width:none!important; width:100%!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; margin-top:4px!important; } .pnp-smart-lookup .pnp-lookup-actions .btn{min-height:46px!important;} @media (min-width:1600px){ .pnp-live-results{grid-template-columns:repeat(4,minmax(0,1fr))!important;} } @media (max-width:1180px){ .pnp-smart-filters{grid-template-columns:minmax(0,1.5fr) minmax(180px,.8fr) minmax(190px,.9fr)!important;} .pnp-filter-reset{grid-column:1/-1;width:auto;justify-self:end;} .pnp-live-results{grid-template-columns:repeat(2,minmax(0,1fr))!important;} } @media (max-width:820px){ .pnp-smart-lookup .pnp-main-lookup{padding:18px!important;} .pnp-smart-head{align-items:flex-start!important;} .pnp-smart-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .pnp-live-search{grid-column:1/-1!important;} .pnp-filter-reset{grid-column:1/-1;width:100%;justify-content:center;} .pnp-live-results{grid-template-columns:1fr!important;} } @media (max-width:560px){ .pnp-smart-head{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;} .pnp-all-violators{width:100%!important;justify-content:center;} .pnp-smart-filters{grid-template-columns:1fr 1fr!important;} .pnp-live-search{grid-column:1/-1!important;} .pnp-filter-reset{grid-column:1/-1!important;} .pnp-live-card{grid-template-columns:42px minmax(0,1fr) auto!important;min-height:104px;padding:12px!important;} .pnp-live-open span{display:none;} .pnp-smart-lookup .pnp-lookup-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .pnp-smart-lookup .pnp-lookup-actions>:last-child{grid-column:1/-1!important;} } @media (max-width:390px){ .pnp-smart-filters{grid-template-columns:1fr!important;} .pnp-live-search,.pnp-filter-reset{grid-column:auto!important;} .pnp-live-card{grid-template-columns:40px minmax(0,1fr)!important;} .pnp-live-open{grid-column:1/-1;justify-content:flex-end;border-top:1px solid #eef2f7;padding-top:8px;margin-top:2px;} .pnp-live-open span{display:inline;} .pnp-smart-lookup .pnp-lookup-actions{grid-template-columns:1fr!important;} .pnp-smart-lookup .pnp-lookup-actions>:last-child{grid-column:auto!important;} } /* V160 — actual violator profile photos in every smart-search result. */ .pnp-live-avatar,.violator-match-avatar,.header-live-icon{overflow:hidden!important;} .pnp-live-avatar img,.violator-match-avatar img,.header-live-icon img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;object-position:center!important;} .header-live-icon img{border-radius:10px!important;} /* V161 — unified violator profile-photo presentation. */ .violator-avatar,.person-avatar,.case-person-avatar,.payment-person-avatar,.pick-avatar,.pnp-live-avatar,.directory-avatar{ width:44px;height:44px;min-width:44px;border-radius:14px;display:grid;place-items:center; overflow:hidden;background:linear-gradient(135deg,#2563eb,#15803d);color:#fff;font-weight:900; border:1px solid rgba(148,163,184,.28);box-sizing:border-box; } .violator-avatar img,.person-avatar img,.case-person-avatar img,.payment-person-avatar img,.pick-avatar img,.pnp-live-avatar img,.directory-avatar img{ width:100%;height:100%;object-fit:cover;object-position:center;display:block; } .violator-identity{display:flex;align-items:center;gap:10px;min-width:0}.violator-identity-copy{min-width:0}.violator-identity-copy strong{display:block;overflow:hidden;text-overflow:ellipsis}.violator-identity-copy small{display:block;color:#64748b;margin-top:3px} @media(max-width:680px){.violator-avatar,.person-avatar,.case-person-avatar,.payment-person-avatar,.pick-avatar,.pnp-live-avatar,.directory-avatar{width:48px;height:48px;min-width:48px;border-radius:15px}} /* V163 — global mobile layout guard. Prevent any page title, label, card, table field, action, or search area from collapsing into single-character columns on narrow screens. */ html, body{ width:100%; max-width:100%; overflow-x:hidden; } *, *::before, *::after{ box-sizing:border-box; } .workspace, .main-content, .card, .workspace-panel, .page-panel, .table-wrap, .report-table-wrap, .chart-card, .form-grid, .grid, .dashboard-grid, .stats-grid, .summary-grid, .kpi-grid, .filter-grid, .actions, .hero-actions, .top-actions, .profile-top-menu, .pnp-dashboard-final, .pnp-main-lookup, .pnp-lookup-form, .pnp-lookup-results, .smart-search-results, .global-search-results{ min-width:0!important; max-width:100%!important; } /* Never allow ordinary text to stack one letter per line. */ h1,h2,h3,h4,h5,h6, .page-title, .card-title, .chart-title, .section-title, .field-label, label, .btn, button, a, td, th, p, span, strong, small{ word-break:normal!important; overflow-wrap:break-word; hyphens:none; } .page-title, .card-title, .chart-title, .section-title, .field-label, label, .btn, button{ white-space:normal!important; } /* PNP Field Lookup mobile structure */ @media (max-width:700px){ body.role-pnp .pnp-dashboard-final, body.role-pnp .pnp-main-lookup, body.role-pnp .pnp-main-lookup > *, body.role-pnp .pnp-main-lookup .card-head, body.role-pnp .pnp-main-lookup .section-title{ width:100%!important; min-width:0!important; max-width:100%!important; } body.role-pnp .pnp-main-lookup .card-head{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:10px!important; align-items:start!important; } body.role-pnp .pnp-main-lookup .card-head > div, body.role-pnp .pnp-main-lookup .card-head > a, body.role-pnp .pnp-main-lookup .card-head > button{ width:100%!important; min-width:0!important; max-width:100%!important; } body.role-pnp .pnp-main-lookup .card-head h1, body.role-pnp .pnp-main-lookup .card-head h2, body.role-pnp .pnp-main-lookup .card-head h3, body.role-pnp .pnp-main-lookup .card-head p{ width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } body.role-pnp .pnp-lookup-form{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:10px!important; width:100%!important; } body.role-pnp .pnp-lookup-form > *{ width:100%!important; min-width:0!important; max-width:100%!important; grid-column:1!important; } body.role-pnp .pnp-lookup-form input, body.role-pnp .pnp-lookup-form select, body.role-pnp .pnp-lookup-form button, body.role-pnp .pnp-lookup-form .btn{ width:100%!important; min-width:0!important; } body.role-pnp .pnp-lookup-results, body.role-pnp .smart-search-results{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; min-width:0!important; } body.role-pnp .pnp-lookup-results > *, body.role-pnp .smart-search-results > *{ width:100%!important; min-width:0!important; max-width:100%!important; } body.role-pnp .pnp-lookup-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; } body.role-pnp .pnp-lookup-actions > *{ width:100%!important; min-width:0!important; } body.role-pnp .pnp-lookup-actions > :last-child:nth-child(odd){ grid-column:1 / -1!important; } } /* General mobile system protections */ @media (max-width:700px){ .main-content{ width:100%!important; padding-left:10px!important; padding-right:10px!important; } .card, .workspace-panel, .page-panel, .chart-card, .filter-strip, .report-filter-panel, .table-wrap, .report-table-wrap{ width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden; } .form-grid, .filter-grid, .cashier-filter-grid, .report-filter-panel, .actions, .hero-actions, .top-actions, .profile-top-menu{ grid-template-columns:minmax(0,1fr)!important; } input, select, textarea, button, .btn{ min-width:0!important; max-width:100%!important; } table{ width:100%!important; min-width:0!important; } .responsive-table-card, .mobile-record-card, [data-mobile-card]{ width:100%!important; min-width:0!important; max-width:100%!important; } } /* Slightly wider phones/tablets may use two columns safely. */ @media (min-width:481px) and (max-width:900px){ body.role-pnp .pnp-lookup-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } /* Ultra-small phones: always single-column and readable. */ @media (max-width:380px){ body.role-pnp .pnp-lookup-actions, .actions, .hero-actions, .top-actions, .profile-top-menu{ grid-template-columns:minmax(0,1fr)!important; } } /* V164 — authoritative PNP Field Lookup mobile/tablet header fix. Keep the title/description full width and place All Violators beneath it. This prevents the heading block from being squeezed into a narrow column. */ @media (max-width:900px){ .pnp-smart-lookup .pnp-smart-head{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; width:100%!important; min-width:0!important; max-width:100%!important; gap:12px!important; align-items:start!important; justify-items:stretch!important; margin-bottom:16px!important; } .pnp-smart-lookup .pnp-smart-head > div{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; } .pnp-smart-lookup .pnp-smart-head h2{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; font-size:clamp(24px,6vw,32px)!important; line-height:1.08!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; } .pnp-smart-lookup .pnp-smart-head p{ display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:8px 0 0!important; line-height:1.5!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } .pnp-smart-lookup .pnp-all-violators{ display:flex!important; width:100%!important; min-width:0!important; max-width:100%!important; justify-content:center!important; align-items:center!important; grid-column:1!important; margin:0!important; } } @media (max-width:480px){ .pnp-smart-lookup .pnp-main-lookup{ padding:16px!important; } .pnp-smart-lookup .pnp-smart-head h2{ font-size:26px!important; } .pnp-smart-lookup .pnp-smart-head p{ font-size:15px!important; } } /* V165 — Developer-controlled Stray Dog Ordinance revenue sharing */ .revenue-share-settings{display:grid;gap:22px;} .revenue-share-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;} .section-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:#64748b;margin-bottom:6px;} .revenue-share-heading h2{margin:0 0 8px;} .revenue-share-heading p{max-width:850px;margin:0;} .revenue-share-current{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .revenue-share-current article{border:1px solid #e2e8f0;border-radius:18px;padding:20px;background:#f8fafc;display:grid;gap:6px;} .revenue-share-current article span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;} .revenue-share-current article strong{font-size:34px;line-height:1;color:#0f5132;} .revenue-share-current article small{color:#64748b;} .revenue-share-form{display:grid;gap:18px;} .share-enable-toggle{display:flex;gap:12px;align-items:flex-start;border:1px solid #dbe6ef;border-radius:16px;padding:16px;background:#fff;} .share-enable-toggle input{margin-top:4px;width:20px;height:20px;} .share-enable-toggle span{display:grid;gap:4px;} .share-enable-toggle small{color:#64748b;} .share-percent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .percent-input{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;border:1px solid #cbd5e1;border-radius:14px;overflow:hidden;background:#fff;} .percent-input input{border:0!important;border-radius:0!important;box-shadow:none!important;} .percent-input b{display:grid;place-items:center;height:100%;border-left:1px solid #e2e8f0;background:#f8fafc;} .share-total-status{padding:12px 14px;border-radius:12px;font-weight:700;display:flex;align-items:center;gap:8px;} .share-total-status.is-valid{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0;} .share-total-status.is-invalid{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;} .share-example-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid #e2e8f0;border-radius:16px;padding:14px;background:#f8fafc;} .share-example-card>div{display:grid;gap:4px;} .share-example-card span{font-size:12px;color:#64748b;} .share-example-card strong{font-size:20px;} .share-rule-badge{white-space:nowrap;border-radius:999px;padding:8px 12px;background:#e8f7ee;color:#166534;font-size:12px;font-weight:800;} .barangay-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} @media(max-width:760px){ .revenue-share-heading,.barangay-share-head{display:grid;grid-template-columns:1fr;} .revenue-share-current,.share-percent-grid{grid-template-columns:1fr;} .share-example-card{grid-template-columns:1fr;} .share-rule-badge{justify-self:start;white-space:normal;} } /* V166 — automatically balanced revenue-sharing percentages */ .share-percent-grid label > span{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .share-percent-grid label > span small{ font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; } /* V167 — complete responsive polish for Developer Revenue Sharing. Balanced from very small phones through tablets, laptops, desktops, ultra-wide monitors, and projector displays. */ .revenue-share-settings{ width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:clamp(16px,2vw,28px)!important; gap:clamp(16px,2vw,24px)!important; overflow:hidden!important; } .revenue-share-heading, .revenue-share-current, .revenue-share-form, .share-percent-grid, .share-example-card, .share-enable-toggle{ width:100%!important; min-width:0!important; max-width:100%!important; } .revenue-share-heading{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:start!important; gap:16px!important; } .revenue-share-heading > div{ min-width:0!important; } .revenue-share-heading h2{ font-size:clamp(24px,2.1vw,34px)!important; line-height:1.15!important; word-break:normal!important; overflow-wrap:break-word!important; } .revenue-share-heading p{ max-width:900px!important; line-height:1.55!important; } .revenue-share-current{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .revenue-share-current article{ min-width:0!important; min-height:142px!important; padding:clamp(16px,1.7vw,22px)!important; } .revenue-share-current article strong{ font-size:clamp(30px,3vw,44px)!important; white-space:nowrap!important; } .share-enable-toggle{ display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; align-items:start!important; gap:12px!important; padding:16px!important; } .share-enable-toggle input[type="checkbox"]{ appearance:auto!important; -webkit-appearance:checkbox!important; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; max-width:20px!important; max-height:20px!important; margin:2px 0 0!important; padding:0!important; border-radius:4px!important; box-shadow:none!important; accent-color:#166534!important; } .share-enable-toggle span{ min-width:0!important; width:100%!important; } .share-enable-toggle b, .share-enable-toggle small{ display:block!important; word-break:normal!important; overflow-wrap:break-word!important; } .share-percent-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .share-percent-grid label{ min-width:0!important; display:grid!important; gap:8px!important; } .share-percent-grid label > span{ min-width:0!important; align-items:flex-start!important; } .percent-input{ width:100%!important; min-width:0!important; grid-template-columns:minmax(0,1fr) 50px!important; } .percent-input input{ width:100%!important; min-width:0!important; font-size:16px!important; height:54px!important; } .percent-input b{ width:50px!important; min-width:50px!important; } .share-total-status{ width:100%!important; min-width:0!important; flex-wrap:wrap!important; } .share-example-card{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; } .share-example-card > div{ min-width:0!important; padding:4px 0!important; } .share-example-card strong{ font-size:clamp(20px,2vw,28px)!important; white-space:nowrap!important; } .revenue-share-form .alert-note{ width:100%!important; min-width:0!important; line-height:1.55!important; } .revenue-share-form .form-actions{ display:flex!important; justify-content:center!important; width:100%!important; } .revenue-share-form .form-actions .btn{ min-width:min(100%,280px)!important; max-width:100%!important; } /* Tablet and compact laptop */ @media (max-width:1024px){ .revenue-share-settings{ padding:18px!important; } .revenue-share-heading{ grid-template-columns:minmax(0,1fr)!important; } .revenue-share-heading .badge, .revenue-share-heading > span{ justify-self:start!important; } .revenue-share-current{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* Phones and narrow tablets */ @media (max-width:700px){ .revenue-share-settings{ padding:14px!important; border-radius:18px!important; gap:14px!important; } .revenue-share-heading h2{ font-size:26px!important; } .revenue-share-current, .share-percent-grid{ grid-template-columns:minmax(0,1fr)!important; } .revenue-share-current article{ min-height:0!important; } .share-enable-toggle{ grid-template-columns:22px minmax(0,1fr)!important; padding:14px!important; } .share-enable-toggle input[type="checkbox"]{ width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; max-width:18px!important; max-height:18px!important; } .share-percent-grid label > span{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:4px!important; } .share-percent-grid label > span small{ justify-self:start!important; } .share-example-card{ grid-template-columns:minmax(0,1fr)!important; } .share-example-card > div{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; padding:8px 0!important; border-bottom:1px solid #e2e8f0!important; } .share-example-card > div:last-child{ border-bottom:0!important; } .revenue-share-form .form-actions{ display:grid!important; } .revenue-share-form .form-actions .btn{ width:100%!important; min-width:0!important; } } /* Very small phones */ @media (max-width:380px){ .revenue-share-settings{ padding:10px!important; } .revenue-share-heading h2{ font-size:23px!important; } .revenue-share-current article strong{ font-size:30px!important; } .percent-input{ grid-template-columns:minmax(0,1fr) 44px!important; } .percent-input b{ width:44px!important; min-width:44px!important; } } /* Large desktop and projector */ @media (min-width:1600px){ .revenue-share-settings{ max-width:1500px!important; margin-inline:auto!important; padding:30px!important; } .revenue-share-current{ gap:18px!important; } .share-percent-grid{ gap:18px!important; } } /* Universal implementation standards v1: semantic tokens, touch, focus, numbers, offline and long-content safety */ :root{--ui-bg:#f6f8fb;--ui-surface:#fff;--ui-text:#0f172a;--ui-muted:#64748b;--ui-border:#e2e8f0;--ui-success:#166534;--ui-warning:#a16207;--ui-danger:#b42318;--ui-focus:#2563eb;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;} :focus-visible{outline:3px solid color-mix(in srgb,var(--ui-focus) 40%,transparent);outline-offset:2px} button,.btn,a.btn,input[type="checkbox"],input[type="radio"],.nav a,.show-btn{min-height:44px} .show-btn{min-width:44px} .table td,.table th,.data-table td,.data-table th{font-variant-numeric:tabular-nums} .table td,.data-table td{overflow-wrap:anywhere} .table td[data-label*="Amount"],.table td[data-label*="Total"],.table td[data-label*="Balance"]{font-variant-numeric:tabular-nums} .offline-banner{position:sticky;top:0;z-index:2000;background:#fff7ed;color:#9a3412;border-bottom:1px solid #fed7aa;padding:10px 16px;text-align:center;font-weight:800} .is-offline form[method="post"] button[type="submit"]{opacity:.6} .file-proof{display:block;margin-top:7px;color:var(--ui-muted);overflow-wrap:anywhere} .saving-spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;vertical-align:-2px;animation:saveSpin .7s linear infinite;margin-right:7px}@keyframes saveSpin{to{transform:rotate(360deg)}} .records-pagination-bar,.pagination-controls,.pagination{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pagination a{min-width:44px;min-height:44px;display:inline-grid;place-items:center} .empty-state{padding:28px;text-align:center;border:1px dashed var(--ui-border);border-radius:var(--radius-md);background:#fbfdff;color:var(--ui-muted)} .flash{overflow-wrap:anywhere} label>span:first-child{display:block} @media (hover:none),(pointer:coarse){.btn,.nav a,.show-btn,.account-trigger,.pagination a{min-height:48px}.table tr:hover{background:inherit}} /* V400 Master Guide reliability/accessibility additions */ .num,.table td.num,.table th.num{font-variant-numeric:tabular-nums;text-align:right} .table-wrap{overflow:auto;max-width:100%}.table-wrap .table thead th{position:sticky;top:0;z-index:2;background:var(--surface,#fff)} .table td,.table th{overflow-wrap:anywhere}.table td code{word-break:break-all} .health-list{display:grid;grid-template-columns:minmax(120px,.7fr) 1.3fr;gap:10px 16px}.health-list dt{font-weight:800;color:#53627a}.health-list dd{margin:0;min-width:0;overflow-wrap:anywhere} [aria-disabled="true"],button:disabled,.btn:disabled{cursor:not-allowed;opacity:.58} .permission-denied-note{padding:12px 14px;border:1px solid #f1c7c7;background:#fff4f4;border-radius:12px;color:#8c2020} @media (pointer:coarse){button,.btn,a.btn,.nav a,.header-actions button,.account-btn{min-height:44px;min-width:44px}} @media (max-width:700px){.health-list{grid-template-columns:1fr}.table-wrap .table{min-width:680px}} /* ========================================================= V500 VISUAL HANDBOOK IMPLEMENTATION Semantic tokens, dark mode, fluid sizing, touch targets, responsive data tables, density modes and resilient content. ========================================================= */ :root{ --color-bg:var(--bg);--color-surface:#ffffff;--color-surface-2:#f8fafc; --color-text:var(--ink);--color-muted:var(--muted);--color-border:var(--line); --color-brand:var(--forest);--color-brand-2:var(--sky);--color-danger:#b42318; --color-warning:#9a6700;--color-success:#16794a; --radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px; --space-fluid:clamp(14px,1.5vw,24px);--sidebar-width:292px; --font-page:clamp(1.25rem,1rem + 1vw,1.8rem);--font-card:clamp(1rem,.92rem + .35vw,1.15rem); color-scheme:light dark; } html[data-theme="dark"]{ --bg:#0d1520;--ink:#e8eef7;--muted:#9badc2;--line:#26384e; --color-bg:#0d1520;--color-surface:#121d2b;--color-surface-2:#182638; --color-text:#e8eef7;--color-muted:#9badc2;--color-border:#2d4057; --shadow:0 18px 50px rgba(0,0,0,.28); } @media (prefers-color-scheme:dark){html:not([data-theme="light"]){color-scheme:dark}} html[data-theme="dark"] body,html[data-theme="dark"] .app-shell{background:var(--color-bg);color:var(--color-text)} html[data-theme="dark"] .card,html[data-theme="dark"] .app-header,html[data-theme="dark"] .profile-chip, html[data-theme="dark"] .input,html[data-theme="dark"] select,html[data-theme="dark"] textarea, html[data-theme="dark"] .header-search,html[data-theme="dark"] .account-dropdown, html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .settings-card{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)} html[data-theme="dark"] .header-search input,html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{color:var(--color-text)} html[data-theme="dark"] .muted,html[data-theme="dark"] .page-heading p{color:var(--color-muted)} .workspace{margin-left:var(--sidebar-width)} .sidebar{width:var(--sidebar-width)} .page-heading h1,.header-page-name{font-size:var(--font-page)} .card h2{font-size:var(--font-card)} .main-content{padding:var(--space-fluid)} /* Deterministic identity fallback color. */ .identity-avatar{background:hsl(var(--identity-hue,210) 62% 38%)!important;color:#fff} .identity-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} /* Desktop resizable sidebar: thin visual line, generous invisible target. */ .sidebar-resizer{position:absolute;right:-7px;top:0;width:14px;height:100%;padding:0;border:0;background:transparent;cursor:col-resize;z-index:60;touch-action:none} .sidebar-resizer::after{content:"";position:absolute;right:6px;top:0;width:2px;height:100%;background:transparent;transition:.15s} .sidebar-resizer:hover::after,.sidebar-resizer:focus-visible::after,body.is-resizing-sidebar .sidebar-resizer::after{background:rgba(255,255,255,.35)} body.is-resizing-sidebar{cursor:col-resize;user-select:none} body.is-resizing-sidebar::after{content:"";position:fixed;inset:0;z-index:9998;cursor:col-resize} /* Target size and capability-aware interaction. */ button,.btn,.nav a,.account-dropdown a,.header-mobile-search-toggle,.header-search-submit,.header-search-clear,.sidebar-close-btn{min-height:44px} button.icon-only,.icon-btn{min-width:44px;min-height:44px} @media (hover:none),(pointer:coarse){.nav a,.btn,button{min-height:48px}.actions{gap:10px}.table td,.table th{padding-block:14px}} /* Data density preferences. */ html[data-density="compact"] .table th,html[data-density="compact"] .table td{padding:8px 10px} html[data-density="compact"] .card{padding:16px} html[data-density="compact"] .nav a{padding-block:9px;min-height:40px} html[data-density="comfortable"] .table th,html[data-density="comfortable"] .table td{padding:13px 14px} /* Dense/responsive tables own their overflow and preserve identity/value/state. */ .table-wrap{width:100%;max-width:100%;overflow:auto;border-radius:var(--radius-lg);container-type:inline-size} .table{font-variant-numeric:tabular-nums lining-nums;min-width:100%} .table thead th{position:sticky;top:0;z-index:2;background:var(--color-surface,#fff);white-space:nowrap} .table .num,.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} .table td,.table th{overflow-wrap:break-word} .table td[data-label]::before{content:none} @container (max-width:680px){ .table.responsive-stack thead{display:none} .table.responsive-stack,.table.responsive-stack tbody,.table.responsive-stack tr,.table.responsive-stack td{display:block;width:100%} .table.responsive-stack tr{padding:10px 0;border-bottom:1px solid var(--color-border,#e2e8f0)} .table.responsive-stack td{border:0;padding:6px 10px;white-space:normal;display:grid;grid-template-columns:minmax(100px,36%) minmax(0,1fr);gap:10px} .table.responsive-stack td[data-label]::before{content:attr(data-label);display:block;font-weight:800;color:var(--color-muted,#64748b)} } /* Long real content resilience. */ .min-w-0{min-width:0}.wrap-anywhere{overflow-wrap:anywhere;word-break:break-word}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .code-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere} /* General settings architecture. */ .settings-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap} .settings-search{flex:1 1 300px;max-width:560px;position:relative} .settings-search input{padding-left:42px} .settings-search i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--color-muted)} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .settings-card{border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;background:var(--color-surface);box-shadow:var(--shadow)} .settings-card h2{margin:0 0 6px}.settings-card[hidden]{display:none!important} .setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--color-border)} .setting-row:first-of-type{border-top:0}.setting-copy{min-width:0}.setting-copy strong{display:block}.setting-copy small{color:var(--color-muted)} .segmented{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;background:var(--color-surface-2);gap:2px} .segmented button{border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-text);padding:8px 12px;font-weight:800;cursor:pointer;min-height:38px} .segmented button[aria-pressed="true"]{background:var(--color-surface);box-shadow:0 2px 8px rgba(15,23,42,.12);color:var(--color-brand)} .settings-danger{border-color:#fecaca;background:#fffafa}.settings-danger h2{color:var(--color-danger)} html[data-theme="dark"] .settings-danger{background:#281618;border-color:#5b2c31} /* Password UX. */ .password-meter{margin-top:10px}.password-meter-track{height:8px;border-radius:var(--radius-pill);background:var(--color-border);overflow:hidden}.password-meter-fill{height:100%;width:0;transition:width .18s ease,background .18s ease;background:#b42318}.password-meter[data-score="2"] .password-meter-fill{background:#b7791f}.password-meter[data-score="3"] .password-meter-fill,.password-meter[data-score="4"] .password-meter-fill{background:#16794a}.password-meter-label{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:12px;color:var(--color-muted)} .password-requirements{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:5px;font-size:13px}.password-requirements li::before{content:"○";margin-right:7px}.password-requirements li.is-met{color:var(--color-success)}.password-requirements li.is-met::before{content:"✓"}.password-match{font-size:13px;margin-top:7px}.password-match.good{color:var(--color-success)}.password-match.bad{color:var(--color-danger)} /* Live-search and request feedback. */ .live-search-status{padding:12px 14px;color:var(--color-muted);font-size:13px}.live-search-status.error{color:var(--color-danger)} .focus-ring:focus-visible,:focus-visible{outline:3px solid color-mix(in srgb,var(--color-brand) 35%,transparent);outline-offset:2px} @media(max-width:900px){.sidebar-resizer{display:none}.workspace{margin-left:0!important}.settings-grid{grid-template-columns:1fr}} @media(max-width:520px){.setting-row{align-items:flex-start;flex-direction:column}.segmented{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.segmented button{width:100%}} /* Dark-theme fallback for legacy/custom module cards that still use page-specific light colors. */ html[data-theme="dark"] .main-content [class*="-card"],html[data-theme="dark"] .main-content [class*="-box"],html[data-theme="dark"] .main-content [class*="-panel"]{background-color:var(--color-surface)!important;border-color:var(--color-border)!important;color:var(--color-text)!important} html[data-theme="dark"] .main-content [class*="-card"] h1,html[data-theme="dark"] .main-content [class*="-card"] h2,html[data-theme="dark"] .main-content [class*="-card"] h3,html[data-theme="dark"] .main-content [class*="-card"] strong{color:var(--color-text)!important} html[data-theme="dark"] .main-content [class*="-muted"],html[data-theme="dark"] .main-content small{color:var(--color-muted)!important} html[data-theme="dark"] .table th,html[data-theme="dark"] .table td{border-color:var(--color-border)} .file-proof{margin-top:8px;padding:9px 11px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:12px;color:var(--color-muted);overflow-wrap:anywhere}.file-proof strong{color:var(--color-text)} .file-input-dragover{outline:3px solid color-mix(in srgb,var(--color-brand) 32%,transparent);outline-offset:3px;background:color-mix(in srgb,var(--color-brand) 7%,var(--color-surface))!important} /* ========================================================= V501 COLOR RESTORE ONLY Restores the pre-V500 LGU-MDVMS color palette while keeping all V500 functionality, security, performance and layout upgrades. ========================================================= */ :root, html[data-theme="light"], html[data-theme="dark"]{ --forest:#1f6b45; --navy:#17324d; --gold:#d6a63c; --coral:#d95d4f; --sky:#3b82c4; --green:var(--forest); --green2:var(--forest); --ink:#172033; --muted:#64748b; --line:#e2e8f0; --bg:#f6f8fb; --nav:var(--navy); --nav2:#10263b; --violet:var(--sky); --shadow:0 18px 50px rgba(23,50,77,.10); --color-bg:#f6f8fb; --color-surface:#ffffff; --color-surface-2:#f8fafc; --color-text:#172033; --color-muted:#64748b; --color-border:#e2e8f0; --color-brand:#1f6b45; --color-brand-2:#3b82c4; --color-danger:#b63e34; --color-warning:#a66f00; --color-success:#1f6b45; color-scheme:light; } /* Keep the original light LGU-MDVMS appearance even if a previous browser preference stored "dark" before this color restoration. */ html[data-theme="dark"] body, html[data-theme="dark"] .app-shell{ background:linear-gradient(180deg,#f8fafc 0%,#f4f7fb 100%)!important; color:#172033!important; } html[data-theme="dark"] .card, html[data-theme="dark"] .app-header, html[data-theme="dark"] .profile-chip, html[data-theme="dark"] .input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .header-search, html[data-theme="dark"] .account-dropdown, html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .settings-card, html[data-theme="dark"] .main-content [class*="-card"], html[data-theme="dark"] .main-content [class*="-box"], html[data-theme="dark"] .main-content [class*="-panel"]{ background-color:#fff!important; color:#172033!important; border-color:#e2e8f0!important; } html[data-theme="dark"] .header-search input, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .main-content [class*="-card"] h1, html[data-theme="dark"] .main-content [class*="-card"] h2, html[data-theme="dark"] .main-content [class*="-card"] h3, html[data-theme="dark"] .main-content [class*="-card"] strong{ color:#172033!important; } html[data-theme="dark"] .muted, html[data-theme="dark"] .page-heading p, html[data-theme="dark"] .main-content [class*="-muted"], html[data-theme="dark"] .main-content small{ color:#64748b!important; } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td{border-color:#eef2f7!important} /* Original shell/sidebar/navigation colors. */ .app-shell{background:linear-gradient(135deg,#f8fafc 0%,#fbfcff 55%,#f4fbf6 100%)!important} .sidebar{background:linear-gradient(180deg,#17324d,#0b1222)!important;color:#dbeafe!important} .nav a{color:#cbd5e1!important} .nav a:hover,.nav a.active{background:linear-gradient(135deg,#17324d,#3b82c4)!important;color:#fff!important} .brand strong,.profile-meta strong{color:#fff!important} .brand small{color:#93a4c7!important} .profile-meta small{color:#a6b5d4!important} .nav-title{color:#7184aa!important} /* Original brand/action colors. */ .btn-primary{background:linear-gradient(135deg,#1f6b45,#3f7d34)!important;color:#fff!important;box-shadow:0 16px 32px rgba(47,105,53,.22)!important} .kicker,.forgot,.show-btn{color:#1f6b45!important} .auth-card h1{color:#204f2a!important} .stat{color:#1f4e2a!important} .badge{background:#ecfdf5!important;color:#1f6b45!important} .badge.warn{background:#fff7ed!important;color:#a66f00!important} .badge.danger-badge{background:#fef2f2!important;color:#b63e34!important} .badge.success-badge{background:#ecfdf5!important;color:#1f6b45!important} .profile-chip .profile-avatar{background:linear-gradient(135deg,#1f6b45,#3b82c4)!important} /* Original page/card/input neutrals. */ body{background:linear-gradient(180deg,#f8fafc 0%,#f4f7fb 100%)!important;color:#172033!important} .app-header{background:rgba(255,255,255,.88)!important;border-bottom-color:rgba(226,232,240,.9)!important} .card{background:#fff!important;border-color:#edf0f5!important} .header-search{background:#f8fafc!important;border-color:#e5e7eb!important;color:#64748b!important} .header-search:focus-within{background:#fff!important;border-color:#cbd5e1!important;box-shadow:0 0 0 5px rgba(47,105,53,.08)!important} .input,select,textarea,.field{background:#fff!important;color:#172033!important;border-color:#dfe3ea!important} .field{background:#fffdf8!important;border-color:#d9decf!important} .field:focus{border-color:#6aa06a!important;box-shadow:0 0 0 5px rgba(47,105,53,.10)!important;background:#eef5ff!important} .table thead th{background:#fff!important;color:#172033!important} .settings-danger{background:#fffafa!important;border-color:#fecaca!important} .settings-danger h2{color:#b63e34!important} /* Original dashboard chart palette. */ .dash-kpi.success strong{color:#1f6b45!important} .dash-kpi.warn strong{color:#a66f00!important} .dash-kpi.danger strong{color:#b63e34!important} .vbar-value,.bar-meta span,.ring-mini span{color:#1f6b45!important} .vbar-track span{background:linear-gradient(180deg,#3b82c4,#1f6b45)!important} .bar-line span{background:#1f6b45!important} .bar-line.purple span{background:#3b82c4!important} .lg.paid{background:#1f6b45!important}.lg.unpaid{background:#d6a63c!important}.lg.cases{background:#3b82c4!important}.lg.overdue{background:#d95d4f!important} .status-chip{background:#eef2ff!important;color:#17324d!important} .status-chip.paid{background:#dcfce7!important;color:#1f6b45!important} .status-chip.unpaid,.status-chip.partial{background:#fff7ed!important;color:#a66f00!important} /* V600 adaptive navigation/accessibility refinements. */ [id]{scroll-margin-top:96px} .btn.disabled,.btn[aria-disabled="true"],button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.58;filter:saturate(.65)} .pagination-controls .disabled{pointer-events:none} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ===================================================================== V630 UNIVERSAL ADAPTIVE RESPONSIVE HARDENING Applies the uploaded guide only where it fits LGU-MDVMS. Keeps the established LGU-MDVMS colors and business UI. ===================================================================== */ /* Universal real-content / viewport resilience */ html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(96px + env(safe-area-inset-top,0px))} body{max-width:100%;overflow-x:hidden;min-height:100dvh} img,svg,video,canvas{max-width:100%;height:auto} iframe{max-width:100%} .main-content,.workspace,.grid,.card,.section-title,.topbar,.header-actions,.page-heading,.profile-meta{min-width:0} .card,.panel,.modal,.dialog,.drawer,.table-wrap,.table-responsive{overflow-wrap:anywhere;word-break:normal} .long-text,.break-anywhere,[data-break-anywhere],td,th{overflow-wrap:anywhere} pre,code{max-width:100%;overflow:auto} /* Fluid sizing: grow smoothly but never become oversized. */ :root{ --mg-fluid-page-x:clamp(14px,2.2vw,34px); --mg-fluid-page-y:clamp(14px,2vw,30px); --mg-fluid-gap:clamp(12px,1.5vw,20px); --mg-fluid-card-pad:clamp(16px,1.8vw,24px); --mg-title-size:clamp(1.25rem,1rem + 1.1vw,1.8rem); --mg-section-size:clamp(1rem,.92rem + .45vw,1.22rem); } .main-content{padding:var(--mg-fluid-page-y) var(--mg-fluid-page-x)!important} .grid{gap:var(--mg-fluid-gap)!important} .card{padding:var(--mg-fluid-card-pad)!important} .page-heading h1{font-size:var(--mg-title-size)!important;line-height:1.12} .card h2,.section-title h2{font-size:var(--mg-section-size)} /* Desktop/ultrawide readability: avoid stretching data cards endlessly. */ @media (min-width:1700px){ .main-content{width:min(100%,1900px);margin-inline:auto} .app-header{padding-inline:max(var(--mg-fluid-page-x),calc((100vw - 1900px)/2 + 34px))!important} } /* Tablet landscape / compact desktop. */ @media (min-width:901px) and (max-width:1180px){ .main-content{padding:20px!important} .grid{gap:14px!important} .card{padding:18px!important} .filter-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important} .header-actions{min-width:0!important} .header-search{width:min(310px,32vw)!important} .actions,.topbar,.section-title{flex-wrap:wrap!important} } /* Tablet portrait and phones: touch-first shell. */ @media (max-width:900px){ :root{--mg-mobile-header:72px} .workspace{width:100%!important;max-width:100vw!important;margin-left:0!important} .app-header{ min-height:var(--mg-mobile-header)!important; padding:max(12px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 12px max(14px,env(safe-area-inset-left,0px))!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; } .burger{grid-column:1!important;display:flex!important;min-width:46px;min-height:46px} .page-heading{grid-column:2!important;min-width:0} .page-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .header-actions{grid-column:3!important;width:auto!important;min-width:0!important;margin:0!important} .profile-menu{min-width:0} .profile-chip{max-width:48px;overflow:hidden;padding:4px!important} .profile-name{display:none!important} .main-content{padding:clamp(12px,3vw,20px)!important;padding-left:max(clamp(12px,3vw,20px),env(safe-area-inset-left,0px))!important;padding-right:max(clamp(12px,3vw,20px),env(safe-area-inset-right,0px))!important;padding-bottom:max(18px,env(safe-area-inset-bottom,0px))!important} .card{border-radius:20px!important} .grid,.dashboard-grid,.kpi-grid,.stat-grid,.summary-grid{grid-template-columns:1fr!important} .filter-strip,.form-grid,.receipt-meta-grid,.receipt-total-box{grid-template-columns:1fr!important} .form-grid .full,.receipt-meta-wide{grid-column:1!important} .section-title,.topbar,.toolbar,.actions,.page-actions,.filter-actions{align-items:stretch!important;flex-wrap:wrap!important} .section-title>*:not(h1):not(h2),.topbar>.btn,.toolbar>.btn,.page-actions>.btn{max-width:100%} .header-search{display:none!important} } /* Small phones: transform dense UI into single-column touch cards. */ @media (max-width:700px){ .main-content{padding:12px!important;padding-left:max(12px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important} .card{padding:15px!important;border-radius:18px!important} .page-heading h1{font-size:clamp(18px,5vw,22px)!important} .btn,.button,button:not(.nav-group-toggle):not(.show-btn),input[type="submit"],input[type="button"],select,.input,input,textarea{max-width:100%} .actions .btn,.page-actions .btn,.mobile-full-actions .btn{flex:1 1 150px;justify-content:center} .filter-strip{display:grid!important;grid-template-columns:1fr!important} .pagination,.pager{display:flex!important;gap:7px!important;overflow-x:auto!important;max-width:100%;padding-bottom:4px;scrollbar-width:thin} .pagination a,.pagination span,.pager a,.pager span{flex:0 0 auto} .receipt-title-row{display:grid!important;grid-template-columns:1fr!important} } /* Very narrow phones / 200% zoom resilience. */ @media (max-width:420px){ .app-header{grid-template-columns:46px minmax(0,1fr) 42px!important;gap:8px!important} .profile-chip{width:42px!important;height:42px!important} .profile-chip .profile-avatar{width:34px!important;height:34px!important} .main-content{padding:10px!important} .card{padding:13px!important;border-radius:16px!important} .btn{white-space:normal!important;line-height:1.25;text-align:center} .table.responsive-card-table td,.table.responsive-stack td{grid-template-columns:1fr!important} .table.responsive-card-table td::before,.table.responsive-stack td::before{margin-bottom:2px} } /* Landscape phones: preserve vertical space but keep controls usable. */ @media (max-height:520px) and (max-width:900px) and (orientation:landscape){ .app-header{position:sticky!important;min-height:58px!important;padding-top:7px!important;padding-bottom:7px!important} .sidebar{padding-top:max(10px,env(safe-area-inset-top,0px))!important} .brand{padding-block:4px!important} .profile-card{padding:9px!important} .nav a{padding-block:9px!important} } /* Tables: horizontal fallback for complex tables, semantic mobile cards for normal tables. */ .table-wrap,.table-responsive,.data-scroll,.scroll-table,.records-scroll{width:100%;max-width:100%;overscroll-behavior-inline:contain;scrollbar-gutter:stable} table{max-width:100%} @media (max-width:760px){ table.keep-table-mobile,table.no-stack,.receipt-table,.print-case-list{min-width:680px!important} .table-wrap:has(table.keep-table-mobile),.table-responsive:has(table.keep-table-mobile),.table-wrap:has(.receipt-table){overflow-x:auto!important} table.responsive-card-table:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list), table.responsive-stack:not(.keep-table-mobile):not(.receipt-table):not(.print-case-list){min-width:0!important;width:100%!important} table.responsive-card-table tbody tr,table.responsive-stack tbody tr{scroll-margin-top:90px} table.responsive-card-table td .actions,table.responsive-stack td .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:100%} table.responsive-card-table td .actions .btn,table.responsive-stack td .actions .btn{width:100%!important;min-width:0!important} } @media (max-width:430px){ table.responsive-card-table td .actions,table.responsive-stack td .actions{grid-template-columns:1fr!important} } /* Dense data tables: consistent numeric scanning and sticky headers where table layout remains. */ .table th,.table td{font-variant-numeric:tabular-nums} .table td[data-type="number"],.table th[data-type="number"],.numeric,.amount,.money{text-align:right;font-variant-numeric:tabular-nums lining-nums} @media (min-width:761px){ .table-wrap>.table thead th,.table-responsive>.table thead th,.data-scroll>.table thead th{position:sticky;top:0;z-index:3;background:#fff} } /* Touch is not hover: enlarge targets and expose actions on coarse pointers. */ @media (hover:none),(pointer:coarse){ .btn,button,a.nav-link,.nav a,.profile-chip,.burger,.pagination a,.pagination span,.pager a,.pager span,.show-btn{min-height:44px} .btn,button,.pagination a,.pagination span,.pager a,.pager span{min-width:44px} .nav a{padding-top:12px!important;padding-bottom:12px!important} [data-hover-only],.hover-only-actions,.row-hover-actions{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important} .tooltip:hover .tooltip-content{display:none} } /* Hover styling only where a device genuinely supports hover. */ @media (hover:hover) and (pointer:fine){ .table tbody tr:hover{background:rgba(15,23,42,.022)} } /* Keyboard focus: visible on every device, not only mouse hover. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(59,130,196,.38)!important;outline-offset:2px!important} /* Disabled/loading controls should look disabled, not broken. */ :where(button,.btn,input,select,textarea)[disabled],.btn[aria-disabled="true"]{opacity:.58!important;cursor:not-allowed!important;filter:saturate(.65)} /* Dialog/drawer geometry for phones/tablets. */ .modal,.dialog,[role="dialog"]{max-width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px)} .drawer{max-width:min(420px,92vw);max-height:100dvh} /* Safe-area aware fixed/floating controls. */ .floating-actions,.toast-container,.floating-action{right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px))} /* Respect motion preferences. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* Print stays clean regardless of mobile/desktop responsive mode. */ @media print{ html,body{overflow:visible!important;background:#fff!important} .main-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important} .table,.table tbody,.table tr,.table td,.table th{display:table!important} .table tr{display:table-row!important} .table td,.table th{display:table-cell!important} .table td::before{display:none!important} .mobile-details-control,.mobile-row-details-toggle{display:none!important} } /* V640 AI Ordinance Extraction */ .law-title-actions{display:flex;gap:8px;flex-wrap:wrap}.ai-ordinance-page{display:grid;gap:18px}.ai-upload-card{max-width:980px}.ai-upload-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.ai-drop-zone{width:100%;min-height:190px;border:2px dashed #a8c7b5;border-radius:22px;background:#f8fcf9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px;cursor:pointer}.ai-drop-zone:hover{border-color:var(--green);background:#f2faf5}.ai-drop-zone input{max-width:100%;margin-top:8px}.ai-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--sky));color:#fff;font-weight:900}.ai-review-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.ai-usage{display:flex;gap:8px;flex-wrap:wrap}.ai-usage span,.ai-meta-grid span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:9px 12px}.ai-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.ai-violation-list{display:grid;gap:16px}.ai-violation-card{border:1px solid #e2e8f0;border-radius:20px;padding:16px;background:#fff}.ai-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.ai-penalty-table input,.ai-penalty-table select{min-width:110px}.ai-review-actions{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:12px;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid #e2e8f0;border-radius:18px;padding:12px;box-shadow:0 14px 35px rgba(15,23,42,.10)}.ai-reject-form{margin-top:10px}.ai-duplicate-choice{display:grid;gap:8px}.ai-history-card{margin-top:4px} @media(max-width:900px){.ai-meta-grid{grid-template-columns:1fr 1fr}.ai-review-header{display:block}.ai-usage{margin-top:12px}.ai-penalty-table{min-width:760px}} @media(max-width:620px){.ai-meta-grid{grid-template-columns:1fr}.ai-upload-form>.btn{width:100%}.ai-review-actions{bottom:6px}.ai-review-actions .btn{flex:1 1 100%}.ai-violation-card{padding:12px}.law-title-actions{width:100%}.law-title-actions .btn{flex:1 1 auto}} /* V650 Developer AI/API settings */ .ai-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-bottom:18px}.ai-key-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.ai-key-status>span,.ai-usage-kpis>div{padding:14px;border:1px solid var(--line,#e2e8f0);border-radius:14px;background:#f8fafc;min-width:0}.ai-key-status small,.ai-usage-kpis span{display:block;color:var(--muted);margin-bottom:5px}.ai-key-status code{overflow-wrap:anywhere}.ai-inline-form{display:inline-block;margin-right:8px;margin-top:10px}.ai-usage-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ai-usage-kpis strong{font-size:clamp(1.05rem,2vw,1.35rem);font-variant-numeric:tabular-nums}.ai-budget{margin-top:16px}.ai-budget>div:first-child{display:flex;justify-content:space-between;gap:12px}.ai-budget-track{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:8px 0}.ai-budget-track span{display:block;height:100%;background:linear-gradient(90deg,#1f6b45,#3b82c4);border-radius:inherit;max-width:100%}.switch{display:inline-flex;align-items:center;gap:8px}.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:900px){.ai-admin-grid{grid-template-columns:1fr}.ai-usage-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.ai-key-status,.ai-usage-kpis{grid-template-columns:1fr}.ai-inline-form{display:block;margin-right:0}.ai-inline-form .btn{width:100%}} /* ===================================================================== V651 — AI Ordinance Review UI polish Layout-only upgrade: clearer hierarchy, balanced desktop review, responsive tablet/phone flow, readable warnings, and safer actions. ===================================================================== */ .ai-ordinance-page{display:grid;gap:16px!important;align-content:start;padding-top:2px} .ai-ordinance-page>.ai-review-header{margin-top:0!important} .ai-review-header{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:22px!important; align-items:center!important; padding:20px 22px!important; } .ai-review-header h2{font-size:clamp(20px,2vw,27px)!important;margin:2px 0 6px!important;line-height:1.2!important} .ai-review-header p{max-width:760px;margin:0!important;line-height:1.55!important} .ai-usage{display:grid!important;grid-template-columns:repeat(3,minmax(118px,1fr))!important;gap:8px!important;min-width:min(100%,430px)!important} .ai-usage span{display:flex!important;flex-direction:column!important;gap:2px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:12px!important;padding:10px 12px!important;color:#64748b!important;font-size:12px!important;line-height:1.25!important} .ai-usage b{color:#172033!important;font-size:14px!important;overflow-wrap:anywhere!important;font-variant-numeric:tabular-nums!important} .ai-review-workspace{display:grid!important;grid-template-columns:minmax(280px,340px) minmax(0,1fr)!important;gap:18px!important;align-items:start!important;min-width:0!important} .ai-review-sidebar{display:grid!important;gap:14px!important;position:sticky!important;top:88px!important;min-width:0!important} .ai-review-main{min-width:0!important;display:grid!important;gap:16px!important} .ai-review-form{display:grid!important;gap:16px!important;min-width:0!important} .ai-review-form>.card{margin:0!important} .ai-review-form>.card:first-of-type{padding:22px!important} .ai-warning-card{padding:18px!important;border-color:#f3d19c!important;background:linear-gradient(180deg,#fffdf8,#fffaf0)!important;box-shadow:0 5px 18px rgba(146,64,14,.05)!important} .ai-warning-title{display:flex!important;gap:11px!important;align-items:flex-start!important;margin-bottom:12px!important} .ai-warning-title h2{font-size:17px!important;margin:1px 0 3px!important;color:#7c4a03!important} .ai-warning-title p{margin:0!important;color:#8a6a33!important;font-size:12px!important;line-height:1.4!important} .ai-warning-icon{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:9px!important;background:#f59e0b!important;color:#fff!important;font-weight:900!important} .ai-warning-scroll{max-height:360px!important;overflow:auto!important;padding-right:5px!important;scrollbar-width:thin!important} .ai-warning-scroll ul{margin:0!important;padding-left:21px!important;display:grid!important;gap:9px!important} .ai-warning-scroll li{font-size:13px!important;line-height:1.55!important;color:#5d4a27!important;overflow-wrap:anywhere!important} .ai-review-summary-card{padding:18px!important} .ai-review-summary-card h2{font-size:17px!important;margin:4px 0 12px!important} .ai-check-list{display:grid!important;gap:8px!important;margin-bottom:14px!important} .ai-check-list span{display:grid!important;grid-template-columns:25px minmax(0,1fr)!important;gap:8px!important;align-items:start!important;color:#475569!important;font-size:12.5px!important;line-height:1.42!important} .ai-check-list b{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:8px!important;background:#ecfdf5!important;color:#1f6b45!important;font-size:11px!important} .ai-draft-meta{display:grid!important;gap:7px!important;padding-top:12px!important;border-top:1px solid #e2e8f0!important} .ai-draft-meta span{display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;gap:6px!important;font-size:11.5px!important;color:#64748b!important} .ai-draft-meta b{color:#334155!important;overflow-wrap:anywhere!important;font-weight:700!important} .ai-review-summary-card .ai-reject-form{margin:14px 0 0!important;padding-top:12px!important;border-top:1px solid #fee2e2!important} .ai-review-summary-card .btn-danger{width:100%!important;justify-content:center!important} .ai-duplicate-alert{margin:0!important;border-radius:14px!important} .ai-duplicate-choice{margin:0!important;padding:16px 18px!important;background:#fffdf7!important;border-color:#f4d9a7!important} .ai-duplicate-choice label{display:flex!important;align-items:flex-start!important;gap:9px!important;font-weight:650!important;line-height:1.45!important} .ai-duplicate-choice input[type="checkbox"]{margin-top:3px!important;flex:0 0 auto!important} .ai-review-main .section-title{margin-bottom:14px!important} .ai-review-main .section-title h2{font-size:19px!important} .ai-review-main .form-grid{gap:14px 16px!important} .ai-review-main label>span{font-size:12.5px!important;color:#475569!important;margin-bottom:6px!important} .ai-review-main .input,.ai-review-main select,.ai-review-main textarea{border-radius:10px!important;background:#fff!important} .ai-review-main textarea{resize:vertical!important;min-height:90px!important;line-height:1.5!important} .ai-meta-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-top:14px!important} .ai-meta-grid span{padding:10px!important;display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;font-size:11.5px!important;color:#64748b!important} .ai-meta-grid b{font-size:13px!important;color:#334155!important;overflow-wrap:anywhere!important} .ai-violation-list{gap:14px!important} .ai-violation-card{border-radius:14px!important;padding:18px!important;background:#fff!important;box-shadow:none!important} .ai-card-head{padding-bottom:11px!important;margin-bottom:14px!important;border-bottom:1px solid #eef2f7!important} .ai-card-head>strong{font-size:15px!important;color:#172033!important} .ai-violation-card .mini{margin:12px 0 2px!important;padding:8px 10px!important;background:#f8fafc!important;border-radius:9px!important;overflow-wrap:anywhere!important} .ai-violation-card .table-wrap{margin-top:12px!important;border-radius:12px!important;overflow:auto!important} .ai-penalty-table{min-width:820px!important} .ai-penalty-table th{white-space:nowrap!important} .ai-penalty-table td{vertical-align:middle!important} .ai-penalty-table input,.ai-penalty-table select{min-width:120px!important} .ai-penalty-table td:nth-child(2){width:150px!important} .ai-penalty-table td:nth-child(3){min-width:300px!important} .ai-review-actions{ position:sticky!important; bottom:10px!important; z-index:15!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; padding:12px 14px!important; border-radius:14px!important; background:rgba(255,255,255,.97)!important; border:1px solid #dbe4ef!important; box-shadow:0 10px 30px rgba(15,23,42,.10)!important; } .ai-save-note{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important} .ai-save-note strong{font-size:12.5px!important;color:#1f6b45!important} .ai-save-note span{font-size:11.5px!important;color:#64748b!important;line-height:1.35!important} .ai-review-actions .btn-primary{flex:0 0 auto!important;min-width:230px!important} .ai-history-card{margin-top:0!important} @media(max-width:1180px){ .ai-review-workspace{grid-template-columns:minmax(250px,300px) minmax(0,1fr)!important} .ai-usage{grid-template-columns:1fr!important;min-width:190px!important} .ai-usage span{padding:8px 10px!important} .ai-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .ai-review-header{grid-template-columns:1fr!important;padding:18px!important} .ai-usage{grid-template-columns:repeat(3,minmax(0,1fr))!important;min-width:0!important;width:100%!important} .ai-review-workspace{grid-template-columns:1fr!important} .ai-review-sidebar{position:static!important;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr)!important;align-items:start!important} .ai-warning-scroll{max-height:280px!important} .ai-review-main .form-grid{grid-template-columns:1fr 1fr!important} .ai-review-main .form-grid .full{grid-column:1/-1!important} } @media(max-width:700px){ .ai-ordinance-page{gap:12px!important} .ai-review-header{padding:15px!important} .ai-usage{grid-template-columns:1fr!important} .ai-review-sidebar{grid-template-columns:1fr!important} .ai-warning-scroll{max-height:none!important;overflow:visible!important} .ai-review-main .form-grid{grid-template-columns:1fr!important} .ai-review-main .form-grid .full{grid-column:auto!important} .ai-meta-grid{grid-template-columns:1fr 1fr!important} .ai-review-actions{position:static!important;display:grid!important;grid-template-columns:1fr!important} .ai-review-actions .btn-primary{width:100%!important;min-width:0!important} .ai-save-note{text-align:left!important} .ai-violation-card{padding:14px!important} } @media(max-width:460px){ .ai-review-header h2{font-size:20px!important} .ai-meta-grid{grid-template-columns:1fr!important} .ai-warning-card,.ai-review-summary-card{padding:14px!important} .ai-review-form>.card:first-of-type{padding:15px!important} .ai-violation-card{padding:12px!important} } /* ===================================================================== V652 AI REVIEW SPACE-EFFICIENCY FIX Uses the full content width on long ordinance reviews. Review warnings and checklist sit above the form so no permanent empty sidebar column is left behind while violation/penalty content continues down the page. ===================================================================== */ .ai-review-support{ display:grid!important; grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr)!important; gap:14px!important; align-items:stretch!important; min-width:0!important; } .ai-review-support.single{grid-template-columns:1fr!important} .ai-review-support>.card{margin:0!important;height:100%!important} .ai-review-main{width:100%!important;max-width:none!important;min-width:0!important} .ai-review-form{width:100%!important;max-width:none!important} .ai-review-summary-card{display:flex!important;flex-direction:column!important;gap:12px!important} .ai-review-summary-top{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:flex-start!important} .ai-review-summary-top h2{margin:3px 0 0!important} .ai-review-summary-card .ai-draft-meta{padding-top:0!important;border-top:0!important;min-width:min(100%,250px)!important} .ai-check-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:0!important} .ai-review-summary-card .ai-reject-form{margin-top:auto!important} .ai-warning-scroll{max-height:220px!important} /* Use the full desktop width for penalty details instead of forcing a horizontal scrollbar and leaving unused space around the table. */ .ai-violation-card .table-wrap{overflow-x:visible!important} .ai-penalty-table{width:100%!important;min-width:0!important;table-layout:fixed!important} .ai-penalty-table th:nth-child(1),.ai-penalty-table td:nth-child(1){width:14%!important} .ai-penalty-table th:nth-child(2),.ai-penalty-table td:nth-child(2){width:15%!important} .ai-penalty-table th:nth-child(3),.ai-penalty-table td:nth-child(3){width:39%!important;min-width:0!important} .ai-penalty-table th:nth-child(4),.ai-penalty-table td:nth-child(4){width:20%!important} .ai-penalty-table th:nth-child(5),.ai-penalty-table td:nth-child(5){width:12%!important} .ai-penalty-table input,.ai-penalty-table select{width:100%!important;min-width:0!important;max-width:100%!important} .ai-penalty-table td{overflow-wrap:anywhere!important;word-break:break-word!important} .ai-review-actions{width:100%!important} @media(max-width:1050px){ .ai-review-support{grid-template-columns:1fr!important} .ai-warning-scroll{max-height:260px!important} .ai-review-summary-top{align-items:flex-start!important} .ai-check-list{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ai-review-summary-card .ai-reject-form{margin-top:2px!important} .ai-violation-card .table-wrap{overflow-x:auto!important} .ai-penalty-table{min-width:760px!important;table-layout:auto!important} .ai-penalty-table th:nth-child(n),.ai-penalty-table td:nth-child(n){width:auto!important} } @media(max-width:700px){ .ai-review-summary-top{display:grid!important;grid-template-columns:1fr!important} .ai-review-summary-card .ai-draft-meta{min-width:0!important;width:100%!important;padding-top:10px!important;border-top:1px solid #e2e8f0!important} .ai-check-list{grid-template-columns:1fr!important} .ai-warning-scroll{max-height:none!important} } /* ========================================================= V653 AI ORDINANCE REVIEW — FOCUSED, COMPACT, READ-FIRST UI Goal: less scrolling, fewer controls, no wasted columns. ========================================================= */ .ai-review-focused, .ai-review-form-focused{width:100%!important;max-width:none!important;min-width:0!important} .ai-review-form-focused{display:grid!important;gap:14px!important} .ai-focus-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;padding:18px 20px!important;margin:0!important} .ai-focus-title{min-width:0!important;flex:1 1 auto!important} .ai-focus-title h2{font-size:clamp(1.22rem,2vw,1.65rem)!important;line-height:1.2!important;margin:2px 0 5px!important;color:#17324d!important} .ai-focus-title p{margin:0!important;max-width:900px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .ai-focus-stats{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important;flex:0 0 auto!important} .ai-focus-stats>span{display:inline-flex!important;gap:5px!important;align-items:center!important;padding:7px 10px!important;border:1px solid #e2e8f0!important;border-radius:999px!important;background:#f8fafc!important;color:#64748b!important;font-size:.78rem!important;white-space:nowrap!important} .ai-focus-stats>span b{color:#17324d!important;font-variant-numeric:tabular-nums!important} .ai-focus-stats>span.attention{background:#fff7ed!important;border-color:#fed7aa!important;color:#9a5b07!important} .ai-focus-stats>span.attention b{color:#9a5b07!important} .ai-attention-panel{padding:0!important;margin:0!important;border-color:#f3d19c!important;background:#fffaf0!important;overflow:hidden!important} .ai-attention-panel>summary{list-style:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:12px 16px!important;cursor:pointer!important;user-select:none!important} .ai-attention-panel>summary::-webkit-details-marker{display:none!important} .ai-attention-panel>summary>span:first-child{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important} .ai-attention-panel>summary strong{color:#8a5208!important;white-space:nowrap!important} .ai-attention-panel>summary small{color:#8a6a33!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .ai-attention-panel[open] .ai-details-chevron{transform:rotate(180deg)} .ai-attention-panel ul{margin:0!important;padding:0 24px 14px 42px!important;display:grid!important;gap:7px!important;color:#5d4a27!important;font-size:.88rem!important;line-height:1.48!important} .ai-details-chevron{transition:transform .15s ease!important;color:#8a6a33!important} .ai-compact-details{padding:0!important;overflow:hidden!important;margin:0!important} .ai-compact-details>summary{list-style:none!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:12px 16px!important;cursor:pointer!important} .ai-compact-details>summary::-webkit-details-marker{display:none!important} .ai-details-body{display:grid!important;gap:10px!important;padding:0 16px 14px!important} .ai-ordinance-summary-card{padding:18px 20px!important;margin:0!important} .ai-summary-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important} .ai-summary-head>div:first-child{min-width:0!important;flex:1 1 auto!important} .ai-summary-head h2{font-size:clamp(1.15rem,1.8vw,1.45rem)!important;line-height:1.3!important;margin:2px 0 0!important;color:#17324d!important;overflow-wrap:anywhere!important} .ai-inline-editor{position:relative!important;flex:0 0 auto!important} .ai-inline-editor>summary{list-style:none!important;cursor:pointer!important} .ai-inline-editor>summary::-webkit-details-marker{display:none!important} .ai-inline-editor-panel{position:absolute!important;right:0!important;top:calc(100% + 8px)!important;width:min(720px,calc(100vw - 90px))!important;z-index:30!important;background:#fff!important;border:1px solid #dbe4ee!important;border-radius:16px!important;box-shadow:0 20px 55px rgba(15,23,42,.16)!important;padding:16px!important} .ai-inline-editor[open]>summary{background:#eef6f1!important;border-color:#9cc7ad!important} .ai-ordinance-facts{display:grid!important;grid-template-columns:repeat(4,minmax(120px,1fr))!important;gap:8px!important;margin-top:14px!important} .ai-ordinance-facts>span{display:flex!important;flex-direction:column!important;gap:2px!important;padding:9px 11px!important;border:1px solid #e2e8f0!important;border-radius:11px!important;background:#f8fafc!important;min-width:0!important} .ai-ordinance-facts small{color:#64748b!important;font-size:.72rem!important} .ai-ordinance-facts b{font-size:.9rem!important;color:#334155!important;overflow-wrap:anywhere!important} .ai-ordinance-facts .needs-review{background:#fff7ed!important;border-color:#fed7aa!important} .ai-ordinance-facts .needs-review b{color:#9a5b07!important} .ai-summary-text{margin:12px 0 0!important;color:#475569!important;line-height:1.5!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important} .ai-minor-meta{display:flex!important;gap:6px!important;flex-wrap:wrap!important;margin-top:10px!important} .ai-minor-meta span{padding:4px 8px!important;background:#f1f5f9!important;border-radius:999px!important;color:#64748b!important;font-size:.72rem!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .ai-rules-section{padding:18px 20px!important;margin:0!important} .ai-rules-heading{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:18px!important;margin-bottom:12px!important} .ai-rules-heading h2{font-size:clamp(1.15rem,1.8vw,1.4rem)!important;margin:2px 0 0!important;color:#17324d!important} .ai-rules-heading>p{margin:0!important;text-align:right!important;max-width:520px!important;font-size:.82rem!important} .ai-compact-rule-list{display:grid!important;gap:8px!important} .ai-rule-compact{border:1px solid #e2e8f0!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important} .ai-rule-compact.needs-attention{border-color:#f4c97d!important;background:#fffdf8!important} .ai-rule-compact>summary{list-style:none!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;cursor:pointer!important;user-select:none!important} .ai-rule-compact>summary::-webkit-details-marker{display:none!important} .ai-rule-compact[open]>summary{background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important} .ai-rule-number{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border-radius:10px!important;background:#eaf5ee!important;color:#1f6b45!important;font-weight:800!important;font-variant-numeric:tabular-nums!important} .ai-rule-main{display:grid!important;gap:3px!important;min-width:0!important} .ai-rule-main>strong{font-size:.96rem!important;color:#1e293b!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .ai-rule-main>small{color:#64748b!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .ai-rule-side{display:flex!important;align-items:center!important;gap:9px!important;white-space:nowrap!important} .ai-edit-label{color:#1f6b45!important;font-size:.78rem!important;font-weight:700!important} .ai-penalty-chips{display:flex!important;gap:5px!important;flex-wrap:wrap!important;margin-top:2px!important} .ai-penalty-chips em{font-style:normal!important;font-size:.72rem!important;padding:3px 7px!important;border-radius:999px!important;background:#f1f5f9!important;color:#475569!important;font-variant-numeric:tabular-nums!important} .ai-rule-editor{padding:14px!important;background:#fff!important} .ai-rule-editor .form-grid{gap:10px 12px!important} .ai-rule-editor textarea{min-height:64px!important} .ai-penalty-edit-list{display:grid!important;gap:7px!important;margin-top:12px!important;padding-top:12px!important;border-top:1px solid #eef2f7!important} .ai-penalty-edit-row{display:grid!important;grid-template-columns:130px 150px minmax(220px,1fr) minmax(150px,.55fr)!important;gap:8px!important;align-items:end!important} .ai-penalty-edit-row>select{height:42px!important} .ai-penalty-edit-row label{margin:0!important} .ai-penalty-edit-row label>span{font-size:.7rem!important;margin-bottom:4px!important} .ai-penalty-edit-row .input,.ai-penalty-edit-row select{min-width:0!important;width:100%!important} .ai-penalty-source{font-size:.75rem!important;color:#64748b!important;padding-bottom:10px!important;overflow-wrap:anywhere!important} .ai-review-actions-focused{position:sticky!important;bottom:8px!important;z-index:25!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%!important;padding:10px 12px!important;margin:0!important;border:1px solid rgba(203,213,225,.96)!important;border-radius:14px!important;background:rgba(255,255,255,.95)!important;backdrop-filter:blur(10px)!important;box-shadow:0 14px 35px rgba(15,23,42,.10)!important} .ai-approval-status{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important} .ai-approval-status strong{font-size:.86rem!important;color:#17324d!important;white-space:nowrap!important} .ai-approval-status span{font-size:.78rem!important;color:#64748b!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .ai-action-buttons{display:flex!important;gap:8px!important;align-items:center!important;flex:0 0 auto!important} .ai-action-buttons .btn{min-height:40px!important;padding:8px 14px!important} .danger-outline{color:#b42318!important;border-color:#f3b0aa!important;background:#fff!important} .danger-outline:hover{background:#fff1f0!important;border-color:#e46a60!important;color:#9f1d14!important} /* Focus mode removes dead gutters/sidebars from previous AI review versions. */ .ai-ordinance-page:has(.ai-review-focused){gap:12px!important} .ai-ordinance-page:has(.ai-review-focused) .ai-review-main{display:block!important;width:100%!important} @media(max-width:1100px){ .ai-focus-header{display:grid!important;grid-template-columns:1fr!important} .ai-focus-stats{justify-content:flex-start!important} .ai-ordinance-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ai-penalty-edit-row{grid-template-columns:120px 140px minmax(180px,1fr)!important} .ai-penalty-source{grid-column:1/-1!important;padding:0!important} } @media(max-width:760px){ .ai-focus-header,.ai-ordinance-summary-card,.ai-rules-section{padding:14px!important} .ai-focus-title p{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important} .ai-focus-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important} .ai-focus-stats>span{justify-content:center!important} .ai-attention-panel>summary>span:first-child{display:grid!important;gap:2px!important} .ai-attention-panel>summary strong,.ai-attention-panel>summary small{white-space:normal!important} .ai-summary-head{display:grid!important;grid-template-columns:1fr!important} .ai-inline-editor{width:100%!important} .ai-inline-editor>summary{width:100%!important;justify-content:center!important} .ai-inline-editor-panel{position:static!important;width:100%!important;margin-top:8px!important;box-shadow:none!important;border-radius:12px!important} .ai-ordinance-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important} .ai-rules-heading{display:block!important} .ai-rules-heading>p{text-align:left!important;margin-top:5px!important} .ai-rule-compact>summary{grid-template-columns:32px minmax(0,1fr)!important;gap:9px!important} .ai-rule-side{grid-column:2!important;justify-content:flex-start!important} .ai-rule-main>strong,.ai-rule-main>small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .ai-penalty-edit-row{grid-template-columns:1fr 1fr!important} .ai-penalty-edit-row .grow{grid-column:1/-1!important} .ai-penalty-source{grid-column:1/-1!important} .ai-review-actions-focused{position:static!important;display:grid!important;grid-template-columns:1fr!important} .ai-approval-status{display:grid!important;gap:2px!important} .ai-approval-status strong,.ai-approval-status span{white-space:normal!important} .ai-action-buttons{display:grid!important;grid-template-columns:1fr!important} .ai-action-buttons .btn{width:100%!important;justify-content:center!important} } @media(max-width:460px){ .ai-focus-stats{grid-template-columns:1fr!important} .ai-ordinance-facts{grid-template-columns:1fr 1fr!important} .ai-rule-compact>summary{padding:10px!important} .ai-rule-number{width:30px!important;height:30px!important} .ai-penalty-edit-row{grid-template-columns:1fr!important} .ai-penalty-edit-row .grow,.ai-penalty-source{grid-column:auto!important} } /* ========================================================= V654 AI ORDINANCE UPLOAD — CLICKABLE + COMPACT ========================================================= */ .ai-upload-card-v654{width:100%!important;max-width:none!important;padding:clamp(18px,2vw,28px)!important} .ai-upload-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px} .ai-upload-heading h2{margin:3px 0 6px;font-size:clamp(22px,2.2vw,30px);line-height:1.15} .ai-upload-heading p{margin:0;max-width:850px;line-height:1.5} .ai-setup-strip{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;margin-bottom:14px;border:1px solid} .ai-setup-strip.is-warning{background:#fffaf0;border-color:#f4d6a0;color:#6b4b18} .ai-setup-strip.is-ready{background:#f2fbf5;border-color:#b7dfc5;color:#1f6b45} .ai-setup-strip-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.78);font-size:18px} .ai-setup-strip-copy{display:grid;gap:2px;min-width:0} .ai-setup-strip-copy strong{font-size:14px;color:inherit} .ai-setup-strip-copy small{font-size:12.5px;line-height:1.4;color:inherit;opacity:.88;overflow-wrap:anywhere} .ai-settings-text-link{font-weight:800;color:#1f6b45;text-decoration:none;padding:8px 4px} .ai-upload-form-v654{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 14px!important;align-items:center!important} .ai-drop-zone-v654{grid-column:1/-1;width:100%!important;min-height:126px!important;padding:18px 20px!important;display:grid!important;grid-template-columns:56px minmax(0,1fr) auto!important;align-items:center!important;justify-items:stretch!important;text-align:left!important;gap:16px!important;border-radius:16px!important;border:2px dashed #8db99d!important;background:linear-gradient(135deg,#f8fcf9,#fbfdff)!important;cursor:pointer!important;position:relative!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important} .ai-drop-zone-v654:hover,.ai-drop-zone-v654:focus-within{border-color:#1f6b45!important;background:#f2faf5!important;box-shadow:0 0 0 4px rgba(31,107,69,.07)!important} .ai-native-file-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:2!important;margin:0!important} .ai-icon-v654{width:54px!important;height:54px!important;border-radius:15px!important;font-size:22px!important} .ai-drop-copy{display:grid;gap:4px;min-width:0} .ai-drop-copy strong{font-size:16px;color:#172033} .ai-drop-copy small{font-size:13px;color:#64748b} .ai-choose-file-btn{position:relative;z-index:3;pointer-events:none;white-space:nowrap} .ai-selected-file{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dbe7df;border-radius:12px;background:#f8fcf9;min-width:0} .ai-selected-file[hidden]{display:none!important} .ai-selected-file>i{color:#b42318;font-size:20px} .ai-selected-file>span{display:grid;min-width:0;flex:1} .ai-selected-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px} .ai-selected-file small{color:#64748b;font-size:12px} .ai-file-clear{border:0;background:transparent;color:#64748b;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;cursor:pointer;position:relative;z-index:4} .ai-file-clear:hover{background:#fee2e2;color:#b42318} .ai-upload-actions-v654{display:flex;align-items:center;gap:12px;min-width:0;grid-column:1/-1} .ai-upload-actions-v654 .btn{min-width:190px;justify-content:center} .ai-upload-actions-v654 small{line-height:1.35} @media(max-width:720px){ .ai-upload-heading{display:grid;grid-template-columns:1fr}.ai-upload-heading>.btn{justify-self:start} .ai-setup-strip{grid-template-columns:38px minmax(0,1fr)}.ai-setup-strip>.btn,.ai-setup-strip>.ai-settings-text-link{grid-column:1/-1;width:100%;justify-content:center;text-align:center} .ai-drop-zone-v654{grid-template-columns:48px minmax(0,1fr)!important;min-height:118px!important;padding:15px!important}.ai-icon-v654{width:46px!important;height:46px!important}.ai-choose-file-btn{grid-column:1/-1;width:100%;justify-content:center} .ai-upload-actions-v654{display:grid;grid-template-columns:1fr}.ai-upload-actions-v654 .btn{width:100%;min-width:0}.ai-upload-actions-v654 small{text-align:center} } @media(max-width:420px){.ai-upload-card-v654{padding:15px!important}.ai-drop-zone-v654{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important}.ai-drop-copy{text-align:center}.ai-icon-v654{margin:auto}.ai-selected-file strong{white-space:normal;overflow-wrap:anywhere}} /* V655 AI upload UI cleanup */ .ai-upload-card-v654{padding:28px 30px!important} .ai-upload-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px} .ai-upload-heading h2{font-size:clamp(28px,2vw,34px);margin:4px 0 8px;color:#172033} .ai-upload-heading .eyebrow{color:#1f6b45;font-weight:800;letter-spacing:.08em} .ai-upload-heading .muted{color:#5b6b7f} .ai-setup-strip{border-radius:16px;padding:14px 16px;gap:14px;margin-bottom:16px} .ai-setup-strip.is-warning{background:#fff8ec;border-color:#edd5a2;color:#7a5420} .ai-setup-strip.is-ready{background:#eef8f1;border-color:#b8d9c2;color:#1f6b45} .ai-setup-strip-icon{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)} .ai-upload-form-v655{display:grid;gap:14px} .ai-native-file-input-v655{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} .ai-drop-zone-v655{width:100%;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;border:2px dashed #8db99d;border-radius:18px;background:linear-gradient(180deg,#fbfdfb,#f4fbf6);cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;text-align:left;color:inherit} .ai-drop-zone-v655:hover,.ai-drop-zone-v655:focus-visible,.ai-drop-zone-v655.is-dragover{border-color:#1f6b45;background:#eef8f1;box-shadow:0 0 0 4px rgba(31,107,69,.08);outline:none} .ai-drop-zone-v655 .btn{pointer-events:none} .ai-drop-zone-v655 .ai-drop-copy strong{display:block;font-size:25px;line-height:1.1;color:#172033;margin-bottom:4px} .ai-drop-zone-v655 .ai-drop-copy small{display:block;font-size:14px;line-height:1.45;color:#5b6b7f} .ai-selected-file-v655{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #d7e7dd;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.03)} .ai-selected-file-v655>i{font-size:22px;color:#b42318} .ai-selected-file-v655 strong{display:block;font-size:15px;color:#172033;white-space:normal;overflow-wrap:anywhere} .ai-selected-file-v655 small{font-size:12.5px;color:#64748b} .ai-upload-actions-v655{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .ai-upload-actions-v655 .btn{min-width:210px;justify-content:center} .ai-upload-actions-v655 .muted{font-size:13px;line-height:1.45;color:#5b6b7f;max-width:760px} .ai-file-clear{margin-left:auto} #aiAnalyzeButton[aria-disabled="true"]{opacity:.72} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .ai-upload-card-v654{padding:22px!important} .ai-upload-heading{flex-direction:column;align-items:stretch} .ai-upload-heading>.btn{align-self:flex-start} .ai-drop-zone-v655{grid-template-columns:56px minmax(0,1fr);padding:16px} .ai-drop-zone-v655 .ai-choose-file-btn{grid-column:1/-1;justify-self:start} } @media(max-width:640px){ .ai-upload-card-v654{padding:18px!important} .ai-setup-strip{grid-template-columns:40px minmax(0,1fr)} .ai-setup-strip>.btn,.ai-setup-strip>.ai-settings-text-link{grid-column:1/-1;width:100%;text-align:center;justify-content:center} .ai-drop-zone-v655{grid-template-columns:1fr;justify-items:start;text-align:left} .ai-drop-zone-v655 .ai-icon-v654{width:50px!important;height:50px!important} .ai-drop-zone-v655 .ai-drop-copy strong{font-size:22px} .ai-drop-zone-v655 .ai-choose-file-btn{width:100%;justify-content:center} .ai-upload-actions-v655{display:grid;grid-template-columns:1fr} .ai-upload-actions-v655 .btn{width:100%;min-width:0} } /* ========================================================= V656 AI ORDINANCE UPLOAD — COMPACT, CLEAN, ORIGINAL PALETTE ========================================================= */ .ai-upload-card-v654{ padding:26px 28px!important; background:#fff!important; border:1px solid #e3e8ef!important; box-shadow:0 12px 34px rgba(23,50,77,.08)!important; } .ai-upload-heading{margin-bottom:14px!important} .ai-upload-heading h2{font-size:clamp(24px,1.8vw,30px)!important;line-height:1.15!important;color:#172033!important} .ai-upload-heading .eyebrow{font-size:13px!important;color:#1f6b45!important} .ai-upload-heading .muted{font-size:15px!important;color:#64748b!important;max-width:900px} /* Setup status strip */ .ai-setup-strip{ border:1px solid #ead9b5!important; background:#fffaf0!important; color:#6f5220!important; border-radius:14px!important; padding:12px 14px!important; margin:0 0 14px!important; box-shadow:none!important; } .ai-setup-strip.is-ready{background:#f3faf5!important;border-color:#cfe3d5!important;color:#1f6b45!important} .ai-setup-strip-icon{background:#fff!important;color:#8a6117!important;border:1px solid #f0e2c3!important} .ai-setup-strip.is-ready .ai-setup-strip-icon{color:#1f6b45!important;border-color:#dcebe0!important} .ai-setup-strip .btn{background:#1f6b45!important;border-color:#1f6b45!important;color:#fff!important;box-shadow:none!important} .ai-setup-strip .btn:hover{background:#18583a!important;border-color:#18583a!important} /* Compact picker: no giant empty mint area */ .ai-drop-zone-v655{ display:grid!important; grid-template-columns:54px minmax(0,1fr) auto!important; align-items:center!important; gap:15px!important; min-height:0!important; padding:18px!important; border:1.5px dashed #8fb3a0!important; border-radius:16px!important; background:#fbfdfb!important; color:#172033!important; box-shadow:none!important; } .ai-drop-zone-v655:hover,.ai-drop-zone-v655:focus-visible,.ai-drop-zone-v655.is-dragover{ border-color:#1f6b45!important; background:#f4faf6!important; box-shadow:0 0 0 4px rgba(31,107,69,.07)!important; } .ai-icon-v654{ width:52px!important;height:52px!important;border-radius:14px!important; background:linear-gradient(135deg,#1f6b45,#3b82c4)!important; color:#fff!important;box-shadow:none!important; } .ai-drop-zone-v655 .ai-drop-copy strong{ font-size:18px!important;line-height:1.2!important;margin:0 0 4px!important;color:#172033!important; } .ai-drop-zone-v655 .ai-drop-copy small{font-size:13px!important;color:#64748b!important} .ai-drop-zone-v655 .ai-choose-file-btn{ min-width:128px!important;height:42px!important;padding:0 16px!important; background:#fff!important;border:1px solid #cbd5e1!important;color:#17324d!important; border-radius:11px!important;box-shadow:none!important;font-weight:750!important; } /* Selected file */ .ai-selected-file-v655{ margin-top:0!important;padding:11px 13px!important;border-radius:12px!important; background:#f8fafc!important;border:1px solid #e2e8f0!important;box-shadow:none!important; } .ai-selected-file-v655>i{font-size:20px!important;color:#b63e34!important} .ai-selected-file-v655 strong{font-size:14.5px!important} .ai-selected-file-v655 small{font-size:12px!important} .ai-file-clear{color:#64748b!important;background:transparent!important} .ai-file-clear:hover{color:#b63e34!important;background:#fef2f2!important} /* Primary action */ .ai-upload-actions-v655{gap:12px!important;margin-top:0!important} .ai-upload-actions-v655 .btn-primary{ min-width:200px!important;height:44px!important; background:#1f6b45!important;border-color:#1f6b45!important;color:#fff!important; box-shadow:0 8px 18px rgba(31,107,69,.16)!important; } .ai-upload-actions-v655 .btn-primary:hover{background:#18583a!important;border-color:#18583a!important} #aiAnalyzeButton[aria-disabled="true"]{background:#a7bfae!important;border-color:#a7bfae!important;box-shadow:none!important;cursor:not-allowed!important} .ai-upload-actions-v655 .muted{color:#64748b!important} /* Keep recent history visually separated */ .ai-upload-card-v654 + .card{margin-top:18px!important} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ .ai-upload-card-v654{padding:22px!important} .ai-drop-zone-v655{grid-template-columns:52px minmax(0,1fr) auto!important} } @media(max-width:680px){ .ai-upload-card-v654{padding:17px!important} .ai-upload-heading h2{font-size:24px!important} .ai-setup-strip{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important} .ai-setup-strip>.btn{grid-column:1/-1!important;width:100%!important} .ai-drop-zone-v655{grid-template-columns:48px minmax(0,1fr)!important;padding:14px!important;gap:12px!important} .ai-drop-zone-v655 .ai-choose-file-btn{grid-column:1/-1!important;width:100%!important;justify-self:stretch!important} .ai-icon-v654{width:48px!important;height:48px!important} .ai-drop-zone-v655 .ai-drop-copy strong{font-size:17px!important} .ai-upload-actions-v655{display:grid!important;grid-template-columns:1fr!important} .ai-upload-actions-v655 .btn-primary{width:100%!important;min-width:0!important} .ai-upload-actions-v655 .muted{text-align:center!important} } /* ========================================================= V657 MODERN LOGIN EXPERIENCE Modern two-panel authentication layout while preserving the established LGU-MDVMS forest/navy brand palette. ========================================================= */ body.auth-page.auth-modern{ min-height:100svh!important; display:grid!important; place-items:center!important; overflow:auto!important; padding:clamp(18px,3vw,42px)!important; background:#edf3f0!important; position:relative!important; } .auth-modern-backdrop{position:fixed;inset:0;overflow:hidden;z-index:0;background:linear-gradient(135deg,#eef4f1 0%,#f5f8fb 56%,#faf7ef 100%)} .auth-modern-backdrop>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important;opacity:.07!important;filter:saturate(.9) blur(1px);transform:scale(1.025)} .auth-modern-overlay{position:absolute;inset:0;background: radial-gradient(circle at 15% 18%,rgba(31,107,69,.16),transparent 30%), radial-gradient(circle at 84% 82%,rgba(59,130,196,.12),transparent 28%), linear-gradient(135deg,rgba(247,250,248,.86),rgba(244,248,251,.92))} .auth-modern-shell{position:relative;z-index:2;width:min(1240px,100%);min-height:min(720px,calc(100svh - 64px));display:grid;grid-template-columns:minmax(0,1.08fr) minmax(460px,.92fr);background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:30px;overflow:hidden;box-shadow:0 35px 90px rgba(23,50,77,.16),0 8px 30px rgba(15,23,42,.06)} .auth-modern-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(34px,4vw,58px);color:#fff;background: radial-gradient(circle at 82% 18%,rgba(59,130,196,.28),transparent 30%), radial-gradient(circle at 12% 84%,rgba(214,166,60,.18),transparent 28%), linear-gradient(145deg,#17324d 0%,#164638 48%,#1f6b45 100%);overflow:hidden} .auth-modern-brand:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-180px;bottom:-210px;box-shadow:0 0 0 44px rgba(255,255,255,.025),0 0 0 88px rgba(255,255,255,.02)} .auth-brand-top,.auth-brand-copy,.auth-brand-features,.auth-brand-footer{position:relative;z-index:1} .auth-brand-top{display:flex;align-items:center;gap:14px} .auth-brand-logo-wrap{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.94);box-shadow:0 15px 34px rgba(0,0,0,.16)} .auth-brand-logo-wrap img{width:50px;height:50px;object-fit:contain!important;background:transparent!important;padding:0!important} .auth-brand-top strong{display:block;font-size:23px;line-height:1.05;letter-spacing:-.02em;color:#fff} .auth-brand-eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.68);font-weight:800;margin-bottom:5px} .auth-brand-copy{max-width:560px;margin:40px 0} .auth-brand-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:800;color:#e7f5eb} .auth-brand-copy h2{margin:20px 0 14px;font-size:clamp(32px,3.1vw,48px);line-height:1.04;letter-spacing:-.045em;color:#fff;max-width:600px} .auth-brand-copy p{margin:0;max-width:560px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.76)} .auth-brand-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:30px} .auth-feature-item{min-width:0;padding:14px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:10px;backdrop-filter:blur(8px)} .auth-feature-item>i{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;font-size:16px} .auth-feature-item span{min-width:0}.auth-feature-item strong{display:block;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-feature-item small{display:block;font-size:10px;margin-top:3px;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .auth-brand-footer{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.62)} .auth-modern-login{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,5vw,66px);background:linear-gradient(180deg,#ffffff 0%,#fbfcfb 100%)} .auth-login-head{text-align:left;margin-bottom:28px} .auth-login-logo-mobile{display:none}.auth-login-logo-mobile img{width:54px;height:54px;object-fit:contain!important;background:transparent!important;padding:0!important} .auth-login-kicker{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:#1f6b45;margin-bottom:12px} .auth-modern-login .auth-login-head h1{margin:0 0 9px!important;font-size:clamp(30px,3vw,40px)!important;line-height:1.06!important;letter-spacing:-.04em!important;color:#17324d!important;text-align:left!important} .auth-modern-login .auth-login-head p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:#64748b!important;text-align:left!important} .auth-modern-form{gap:17px!important} .auth-field-group{display:grid;gap:8px;text-align:left}.auth-field-label{font-size:13px;font-weight:850;color:#334155} .auth-field-wrap{position:relative;display:flex;align-items:center}.auth-field-wrap>i{position:absolute;left:16px;z-index:2;color:#728197;font-size:17px;pointer-events:none} .auth-modern-form .field{height:58px!important;min-height:58px!important;border:1px solid #dce4ea!important;border-radius:15px!important;background:#f9fbfa!important;padding:0 16px 0 46px!important;font-size:15px!important;color:#172033!important;box-shadow:none!important;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important} .auth-modern-form .field::placeholder{color:#94a3b8}.auth-modern-form .field:hover{border-color:#c6d4dd!important;background:#fff!important}.auth-modern-form .field:focus{border-color:#1f6b45!important;background:#fff!important;box-shadow:0 0 0 4px rgba(31,107,69,.10)!important} .auth-modern-form .pass-wrap .field{padding-right:88px!important}.auth-modern-form .show-btn{right:10px!important;height:38px!important;padding:0 8px!important;border-radius:10px!important;color:#365449!important;font-size:12px!important;display:inline-flex!important;align-items:center!important;gap:5px!important}.auth-modern-form .show-btn:hover{background:#edf6f0!important} .auth-helper-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11.5px;color:#64748b;margin-top:-2px}.auth-helper-row>span{display:inline-flex;align-items:center;gap:6px}.auth-helper-row>span:first-child{color:#1f6b45;font-weight:800}.auth-help-text{text-align:right} .auth-signin-btn{width:100%!important;min-height:56px!important;margin-top:2px!important;border-radius:15px!important;background:linear-gradient(135deg,#1f6b45,#2f7d4d)!important;box-shadow:0 14px 28px rgba(31,107,69,.22)!important;display:flex!important;justify-content:space-between!important;padding:0 18px 0 20px!important;font-size:14px!important;letter-spacing:.01em}.auth-signin-btn:hover{transform:translateY(-1px)!important;box-shadow:0 18px 34px rgba(31,107,69,.27)!important}.auth-signin-btn i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.13)} .auth-login-foot{margin-top:24px;padding-top:20px;border-top:1px solid #edf1f4;display:grid;gap:4px;text-align:left}.auth-login-foot>span{font-size:12px;font-weight:850;color:#334155;display:flex;align-items:center;gap:6px}.auth-login-foot small{font-size:11.5px;color:#7b8798;line-height:1.5} .auth-login-error{display:flex;gap:9px;align-items:flex-start;margin:-7px 0 18px!important;text-align:left!important} @media(max-width:1280px){ .auth-modern-shell{width:min(1140px,100%);grid-template-columns:minmax(0,1fr) minmax(430px,.9fr)} .auth-modern-brand{padding:34px 30px} .auth-brand-copy{margin:28px 0} .auth-brand-copy h2{font-size:clamp(28px,2.8vw,40px)} .auth-modern-login{padding:40px 34px} .auth-modern-login .auth-login-head h1{font-size:clamp(28px,3vw,38px)!important} } @media(max-width:1180px){ body.auth-page.auth-modern{padding:20px!important;place-items:center!important} .auth-modern-shell{width:min(620px,100%);min-height:auto;grid-template-columns:1fr;border-radius:28px} .auth-modern-brand{display:none} .auth-modern-login{padding:36px 32px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:34px!important;line-height:1.08!important} } @media(max-width:900px){ body.auth-page.auth-modern{padding:18px!important;place-items:center!important} .auth-modern-shell{width:min(560px,100%);min-height:auto;grid-template-columns:1fr;border-radius:26px} .auth-modern-brand{display:none} .auth-modern-login{padding:34px 30px} .auth-login-logo-mobile{display:block;margin-bottom:18px} .auth-login-head{margin-bottom:24px} .auth-modern-login .auth-login-head h1{font-size:32px!important} } @media(max-width:520px){ body.auth-page.auth-modern{padding:12px!important} .auth-modern-shell{border-radius:22px} .auth-modern-login{padding:28px 20px 24px} .auth-login-logo-mobile img{width:48px;height:48px} .auth-modern-login .auth-login-head h1{font-size:28px!important} .auth-modern-form .field{height:54px!important;min-height:54px!important;font-size:14px!important} .auth-helper-row{align-items:flex-start;flex-direction:column;gap:5px}.auth-help-text{text-align:left} .auth-signin-btn{min-height:54px!important} } /* ========================================================= V659 LOGIN BLUE-TONE POLISH + ICON ALIGNMENT ========================================================= */ body.auth-page.auth-modern{ background:#edf4fb!important; } .auth-modern-backdrop{ background:linear-gradient(135deg,#eff6fb 0%,#f6f9fd 58%,#f8fbff 100%)!important; } .auth-modern-overlay{ background: radial-gradient(circle at 15% 18%,rgba(37,99,235,.12),transparent 30%), radial-gradient(circle at 84% 82%,rgba(14,165,233,.10),transparent 28%), linear-gradient(135deg,rgba(247,250,252,.88),rgba(244,248,251,.94))!important; } .auth-modern-shell{ border-color:rgba(215,226,241,.95)!important; box-shadow:0 30px 80px rgba(21,44,74,.12),0 10px 28px rgba(15,23,42,.06)!important; } .auth-modern-brand{ background: radial-gradient(circle at 82% 18%,rgba(96,165,250,.30),transparent 30%), radial-gradient(circle at 12% 84%,rgba(56,189,248,.18),transparent 28%), linear-gradient(145deg,#17324d 0%,#174876 48%,#1d5f9a 100%)!important; } .auth-brand-pill{ color:#eff6ff!important; background:rgba(255,255,255,.12)!important; } .auth-login-kicker, .auth-helper-row>span:first-child{ color:#1d4ed8!important; } .auth-modern-login .auth-login-head h1{ color:#16385e!important; } .auth-modern-form .field:hover{ border-color:#bfd3ea!important; } .auth-modern-form .field:focus{ border-color:#2563eb!important; box-shadow:0 0 0 4px rgba(37,99,235,.12)!important; } .auth-modern-form .show-btn{ color:#355577!important; } .auth-modern-form .show-btn:hover{ background:#eef4ff!important; color:#16385e!important; } .auth-signin-btn{ background:linear-gradient(135deg,#2563eb,#1d4ed8)!important; box-shadow:0 14px 28px rgba(37,99,235,.22)!important; align-items:center!important; gap:14px!important; } .auth-signin-btn:hover{ box-shadow:0 18px 34px rgba(37,99,235,.26)!important; } .auth-signin-btn span{ flex:1 1 auto!important; text-align:left!important; display:flex!important; align-items:center!important; } .auth-signin-btn i{ margin-left:auto!important; flex:0 0 38px!important; width:38px!important; height:38px!important; min-width:38px!important; border-radius:12px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; align-self:center!important; line-height:1!important; font-size:18px!important; background:rgba(255,255,255,.14)!important; } .auth-login-foot>span i, .auth-helper-row i, .auth-field-wrap>i{ color:inherit!important; } .auth-modern-brand .auth-feature-item>i{ background:rgba(255,255,255,.12)!important; } @media(max-width:1180px){ .auth-modern-login{ background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important; } } @media(max-width:520px){ .auth-modern-login .auth-login-head h1{ font-size:26px!important; } .auth-signin-btn{ min-height:54px!important; padding:0 14px 0 18px!important; } .auth-signin-btn span{ font-size:14px!important; } .auth-signin-btn i{ flex-basis:34px!important; width:34px!important; height:34px!important; min-width:34px!important; border-radius:10px!important; font-size:16px!important; } } /* ========================================================= V660 ROLE NAVIGATION — GROUPED SUBMENUS Keeps all role sidebars short, task-based and touch-friendly. ========================================================= */ .grouped-role-nav{ display:grid!important; align-content:start!important; gap:7px!important; overflow-y:auto!important; overflow-x:hidden!important; padding:2px 3px 12px 0!important; } .grouped-role-nav .nav-direct, .grouped-role-nav .nav-group-toggle{ width:100%!important; min-height:46px!important; border-radius:14px!important; padding:0 12px!important; display:flex!important; align-items:center!important; gap:10px!important; color:#cbd5e1!important; background:rgba(255,255,255,.035)!important; border:1px solid rgba(255,255,255,.055)!important; box-shadow:none!important; text-transform:none!important; letter-spacing:0!important; font-size:13.5px!important; font-weight:800!important; cursor:pointer!important; text-align:left!important; } .grouped-role-nav .nav-direct:hover, .grouped-role-nav .nav-direct.active, .grouped-role-nav .nav-group.active-group>.nav-group-toggle, .grouped-role-nav .nav-group.open>.nav-group-toggle{ background:linear-gradient(135deg,#17324d,#2f6fa8)!important; border-color:rgba(148,196,235,.22)!important; color:#fff!important; } .grouped-role-nav .nav-group{ position:static!important; margin:0!important; isolation:auto!important; z-index:auto!important; } .grouped-role-nav .nav-group-label{ min-width:0!important; flex:1 1 auto!important; display:flex!important; align-items:center!important; gap:10px!important; } .grouped-role-nav .nav-group-label>span:last-child, .grouped-role-nav .nav-text{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .grouped-role-nav .nav-icon{ width:22px!important; min-width:22px!important; display:inline-grid!important; place-items:center!important; text-align:center!important; font-size:14px!important; color:inherit!important; } .grouped-role-nav .nav-group-chevron{ flex:0 0 auto!important; font-size:12px!important; opacity:.72!important; transition:transform .18s ease!important; } .grouped-role-nav .nav-group.open>.nav-group-toggle .nav-group-chevron{ transform:rotate(180deg)!important; opacity:1!important; } .grouped-role-nav .nav-group-items, .grouped-role-nav .nav-group:hover>.nav-group-items, .grouped-role-nav .nav-group.flyout-open>.nav-group-items, .grouped-role-nav .nav-group.active-group>.nav-group-items{ position:static!important; inset:auto!important; transform:none!important; width:100%!important; min-width:0!important; max-width:none!important; max-height:none!important; margin:0!important; padding:5px 0 1px 13px!important; display:none!important; gap:4px!important; overflow:visible!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; backdrop-filter:none!important; } .grouped-role-nav .nav-group-items:before{display:none!important;content:none!important;} .grouped-role-nav .nav-group.open>.nav-group-items{ display:grid!important; } .grouped-role-nav .nav-group-items a, .grouped-role-nav .nav-group.open>.nav-group-items a{ min-height:40px!important; padding:8px 10px!important; border-radius:11px!important; display:flex!important; align-items:center!important; gap:9px!important; font-size:12.5px!important; line-height:1.2!important; color:#aebdd2!important; background:transparent!important; border:1px solid transparent!important; box-shadow:none!important; } .grouped-role-nav .nav-group-items a:hover, .grouped-role-nav .nav-group-items a.active{ color:#fff!important; background:rgba(59,130,196,.20)!important; border-color:rgba(96,165,250,.16)!important; } .grouped-role-nav .nav-group-items a.active{ box-shadow:inset 3px 0 0 #60a5fa!important; } .grouped-role-nav .nav-badge{ margin-left:auto!important; min-width:22px!important; height:22px!important; padding:0 6px!important; border-radius:999px!important; display:inline-grid!important; place-items:center!important; background:#ef4444!important; color:#fff!important; font-size:10px!important; font-style:normal!important; font-weight:900!important; } @media(max-width:900px){ .grouped-role-nav{gap:6px!important;padding-bottom:18px!important;} .grouped-role-nav .nav-direct, .grouped-role-nav .nav-group-toggle{min-height:48px!important;font-size:14px!important;padding:0 13px!important;} .grouped-role-nav .nav-group-items{padding-left:12px!important;} .grouped-role-nav .nav-group-items a{min-height:44px!important;font-size:13px!important;} } /* ========================================================= V661 SIDEBAR ACCORDION + RESPONSIVE WIDTH POLISH Fixes grouped menu collapse behavior and gives labels enough room. ========================================================= */ :root{--sidebar-width:310px;} @media(min-width:901px){ .sidebar{ width:var(--sidebar-width)!important; min-width:280px!important; max-width:380px!important; padding:18px 16px!important; overflow:visible!important; } .workspace{ margin-left:var(--sidebar-width)!important; width:calc(100% - var(--sidebar-width))!important; max-width:calc(100vw - var(--sidebar-width))!important; } .sidebar-close-btn{display:none!important;} .mobile-backdrop,.mobile-backdrop.is-open{ display:none!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; } .brand{ min-height:72px!important; padding:5px 4px 13px!important; gap:12px!important; border-bottom:1px solid rgba(255,255,255,.08)!important; } .brand-logo img,.brand img{ width:50px!important; height:50px!important; border-radius:50%!important; } .brand-copy{ min-width:0!important; flex:1 1 auto!important; padding-right:2px!important; } .brand-copy strong{ font-size:16px!important; line-height:1.2!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere!important; } .brand-copy small{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; font-size:11.5px!important; line-height:1.3!important; margin-top:4px!important; } } .grouped-role-nav{ padding:4px 4px 18px 0!important; scrollbar-gutter:stable!important; } .grouped-role-nav .nav-direct, .grouped-role-nav .nav-group-toggle{ min-height:50px!important; padding:0 14px!important; border-radius:15px!important; gap:11px!important; font-size:14px!important; } .grouped-role-nav .nav-group-label>span:last-child, .grouped-role-nav .nav-text{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.2!important; overflow-wrap:anywhere!important; } .grouped-role-nav .nav-group-items{ padding:6px 0 2px 18px!important; } .grouped-role-nav .nav-group-items a, .grouped-role-nav .nav-group.open>.nav-group-items a{ min-height:42px!important; padding:9px 11px!important; font-size:13px!important; border-radius:12px!important; } .grouped-role-nav .nav-group:not(.open)>.nav-group-items{display:none!important;} .grouped-role-nav .nav-group.open>.nav-group-items{display:grid!important;} .grouped-role-nav .nav-group-chevron{margin-left:6px!important;} @media(max-width:900px){ :root{--sidebar-width:310px;} .sidebar{ width:min(310px,88vw)!important; max-width:min(310px,88vw)!important; padding:16px 14px!important; } .sidebar-close-btn{ display:grid!important; flex:0 0 42px!important; width:42px!important; height:42px!important; font-size:20px!important; } .brand{gap:10px!important;padding:4px 2px 12px!important;} .brand img{width:46px!important;height:46px!important;border-radius:50%!important;} .brand-copy strong{font-size:15px!important;white-space:normal!important;overflow-wrap:anywhere!important;} .brand-copy small{font-size:11px!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;} .grouped-role-nav .nav-direct, .grouped-role-nav .nav-group-toggle{min-height:50px!important;font-size:13.5px!important;padding:0 13px!important;} .grouped-role-nav .nav-group-items{padding-left:14px!important;} .grouped-role-nav .nav-group-items a{min-height:44px!important;font-size:13px!important;} } @media(max-width:420px){ .sidebar{width:min(300px,92vw)!important;max-width:min(300px,92vw)!important;} .grouped-role-nav .nav-direct,.grouped-role-nav .nav-group-toggle{font-size:13px!important;} .grouped-role-nav .nav-group-items a{font-size:12.5px!important;} } /* ========================================================= V662 — Overlay sidebar restoration + Developer dashboard polish Keeps the page full-width when the navigation drawer is closed. ========================================================= */ :root{--sidebar-width:310px;} /* The sidebar is a drawer on every device. Closing it must release all page width. */ .workspace, body.sidebar-collapsed .workspace{ margin-left:0!important; width:100%!important; max-width:100%!important; transition:none!important; } .sidebar, body.sidebar-collapsed .sidebar{ position:fixed!important; inset:0 auto 0 0!important; width:var(--sidebar-width)!important; min-width:0!important; max-width:min(var(--sidebar-width),92vw)!important; height:100dvh!important; transform:translateX(-102%)!important; transition:transform .2s cubic-bezier(.2,0,0,1)!important; z-index:120!important; overflow:hidden!important; box-shadow:10px 0 34px rgba(15,23,42,.22)!important; } .sidebar.is-open, body.sidebar-collapsed .sidebar.is-open{transform:translateX(0)!important;} .sidebar-close-btn{ display:grid!important; place-items:center!important; flex:0 0 40px!important; width:40px!important; height:40px!important; } .mobile-backdrop, .mobile-backdrop.is-open{ display:block!important; position:fixed!important; inset:0!important; z-index:110!important; background:rgba(15,23,42,.48)!important; transition:opacity .18s ease,visibility .18s ease!important; } .mobile-backdrop{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } .mobile-backdrop.is-open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } body.body-lock{overflow:hidden!important;} /* Developer dashboard: use available space without creating oversized empty cards. */ .developer-dashboard-v108{ width:100%!important; max-width:1500px!important; margin-inline:auto!important; gap:16px!important; } .developer-kpi-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; } .developer-kpi-card{ min-height:122px!important; padding:16px 18px!important; border-radius:20px!important; } .developer-kpi-card:after{ width:74px!important; height:74px!important; right:-20px!important; top:-22px!important; background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(14,165,233,.06))!important; } .developer-kpi-card strong{color:#173b65!important;} .developer-dashboard-grid{ display:grid!important; grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr)!important; gap:16px!important; align-items:stretch!important; } .developer-dashboard-card{ padding:20px!important; border-radius:22px!important; } .developer-role-card .apex-chart-shell.compact{ min-height:220px!important; height:220px!important; max-height:220px!important; } .developer-role-card .apexcharts-toolbar{display:none!important;} .developer-role-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:9px!important; margin-top:4px!important; } .developer-role-tile{ min-height:74px!important; padding:11px 12px!important; border-radius:15px!important; } .developer-role-tile strong{color:#173b65!important;font-size:24px!important;} .developer-health-card{ display:flex!important; flex-direction:column!important; } .developer-health-list{ margin-top:2px!important; gap:9px!important; } .developer-health-list>div{ min-height:52px!important; padding:11px 12px!important; border-radius:14px!important; } .developer-shortcut-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; } .developer-shortcut-card{ min-height:104px!important; padding:14px!important; border-radius:16px!important; } .developer-shortcut-card>span{color:#2563eb!important;} /* Laptop widths: 2x2 KPIs while keeping the dashboard panels balanced. */ @media (min-width:901px) and (max-width:1250px){ .developer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-dashboard-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)!important;} .developer-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} } @media (max-width:900px){ .sidebar{width:min(310px,88vw)!important;max-width:min(310px,88vw)!important;} .developer-dashboard-v108{max-width:none!important;} .developer-dashboard-grid{grid-template-columns:1fr!important;} .developer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-role-card .apex-chart-shell.compact{height:210px!important;min-height:210px!important;} } @media (max-width:560px){ .developer-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;} .developer-kpi-card{min-height:100px!important;padding:12px!important;} .developer-dashboard-card{padding:14px!important;border-radius:17px!important;} .developer-role-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;} .developer-role-tile{min-height:68px!important;padding:10px!important;} .developer-shortcut-grid{grid-template-columns:1fr!important;} .developer-card-head{gap:8px!important;} .developer-card-head .mini-link{width:auto!important;justify-self:start!important;} } @media (max-width:380px){ .developer-kpi-grid,.developer-role-grid{grid-template-columns:1fr!important;} } /* ========================================================= V663 SYSTEM-WIDE POLISH — STABLE NAVIGATION + CONSISTENT UI Applies the existing LGU-MDVMS design language without changing business rules. ========================================================= */ :root{ --sidebar-width:330px; --ui-blue:#2563eb; --ui-blue-dark:#1d4ed8; --ui-blue-soft:#eff6ff; --ui-navy:#17324d; --ui-text:#172033; --ui-muted:#64748b; --ui-border:#e2e8f0; --ui-border-strong:#cbd5e1; --ui-surface:#ffffff; --ui-surface-soft:#f8fafc; --ui-radius:18px; --ui-shadow:0 10px 28px rgba(23,50,77,.07); } /* Sidebar: click-driven accordion only. Hover must never move text/items. */ .sidebar{ width:var(--sidebar-width)!important; max-width:min(var(--sidebar-width),92vw)!important; } .grouped-role-nav .nav-direct, .grouped-role-nav .nav-group-toggle, .grouped-role-nav .nav-group-items a, .sidebar .nav a{ transform:none!important; translate:none!important; margin-left:0!important; margin-right:0!important; transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease!important; } .grouped-role-nav .nav-direct:hover, .grouped-role-nav .nav-group-toggle:hover{ transform:none!important; background:rgba(96,165,250,.075)!important; border-color:rgba(96,165,250,.22)!important; color:#f8fbff!important; box-shadow:none!important; } .grouped-role-nav .nav-direct.active, .grouped-role-nav .nav-group.active-group>.nav-group-toggle, .grouped-role-nav .nav-group.open>.nav-group-toggle{ transform:none!important; background:rgba(37,99,235,.16)!important; border-color:rgba(96,165,250,.48)!important; color:#fff!important; box-shadow:inset 3px 0 0 #60a5fa!important; } .grouped-role-nav .nav-group-items{ padding:6px 0 3px 20px!important; gap:3px!important; } .grouped-role-nav .nav-group-items a, .grouped-role-nav .nav-group.open>.nav-group-items a{ min-height:42px!important; padding:9px 12px!important; border-radius:10px!important; border:1px solid transparent!important; background:transparent!important; color:#b9c7d8!important; font-weight:600!important; transform:none!important; } .grouped-role-nav .nav-group-items a:hover{ background:rgba(96,165,250,.07)!important; border-color:rgba(96,165,250,.18)!important; color:#fff!important; transform:none!important; box-shadow:none!important; } .grouped-role-nav .nav-group-items a.active{ background:rgba(37,99,235,.13)!important; border-color:rgba(96,165,250,.28)!important; color:#fff!important; box-shadow:inset 2px 0 0 #60a5fa!important; } .grouped-role-nav .nav-icon, .grouped-role-nav .nav-group-chevron{ transform:none; } .grouped-role-nav .nav-group.open>.nav-group-toggle .nav-group-chevron{ transform:rotate(180deg)!important; } .grouped-role-nav .nav-group:not(.open)>.nav-group-items{display:none!important;} .grouped-role-nav .nav-group.open>.nav-group-items{display:grid!important;} .grouped-role-nav .nav-group:hover>.nav-group-items:not(:where(.open > .nav-group-items)){ display:none!important; } /* Stable interaction rule across the app: hover changes color/border, not geometry. */ .btn,.button,button,.mini-link,.card,.dash-kpi,.report-kpi,.role-action-card, .developer-kpi-card,.developer-role-tile,.developer-shortcut-card{ transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease!important; } .btn:hover,.button:hover,button:hover,.mini-link:hover, .card:hover,.dash-kpi:hover,.report-kpi:hover,.role-action-card:hover, .developer-kpi-card:hover,.developer-role-tile:hover,.developer-shortcut-card:hover{ transform:none!important; translate:none!important; } /* Shared page surfaces: one visual system across Developer, Treasurer, PNP and OMM. */ .main-content{ width:100%!important; max-width:1680px!important; margin-inline:auto!important; padding:clamp(14px,1.7vw,26px)!important; } .card,.chart-card,.report-card,.report-panel,.report-filter-card,.data-panel-card, .workspace-panel,.billing-center,.mayor-chart-card,.profile-head-card,.filter-strip{ border:1px solid var(--ui-border)!important; border-radius:var(--ui-radius)!important; box-shadow:var(--ui-shadow)!important; background:var(--ui-surface)!important; } .page-heading h1,.card h2,.card-head h2,.section-title h2,.developer-card-head h2{ color:var(--ui-navy)!important; } .muted,.subtitle,.page-heading p,.card-head p,.developer-card-head p{ color:var(--ui-muted)!important; } /* Forms and actions: consistent blue focus and aligned controls. */ .field,input:not([type="checkbox"]):not([type="radio"]),select,textarea{ border-color:var(--ui-border)!important; border-radius:12px!important; } .field:focus,input:focus,select:focus,textarea:focus{ border-color:#60a5fa!important; box-shadow:0 0 0 4px rgba(37,99,235,.10)!important; outline:none!important; } .btn-primary,.primary-button{ background:linear-gradient(135deg,var(--ui-blue),var(--ui-blue-dark))!important; border-color:var(--ui-blue)!important; color:#fff!important; box-shadow:none!important; } .btn-primary:hover,.primary-button:hover{ background:linear-gradient(135deg,#1d4ed8,#1e40af)!important; border-color:#1d4ed8!important; } .btn-outline,.btn-secondary{ background:#fff!important; border-color:var(--ui-border-strong)!important; color:#334155!important; } .btn-outline:hover,.btn-secondary:hover{ background:var(--ui-blue-soft)!important; border-color:#93c5fd!important; color:#1e3a5f!important; } /* Tables: clear scan path and no cramped headers. */ .table-wrap,.table-responsive,.report-table-wrap{ border:1px solid var(--ui-border)!important; border-radius:14px!important; background:#fff!important; overflow:auto!important; } table thead th{ background:#f4f8fc!important; color:#334155!important; border-bottom-color:#dce6f0!important; font-weight:800!important; white-space:nowrap; } table tbody tr:hover td{background:#f8fbff!important;} /* Header consistency. */ .app-header{ border-bottom:1px solid #e3ebf4!important; box-shadow:0 5px 18px rgba(23,50,77,.045)!important; } .header-brand-copy{min-width:0!important;} .header-system-name,.header-page-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Developer dashboard: remove chart/legend collision and balance content. */ .developer-dashboard-v108{gap:18px!important;} .developer-dashboard-grid{ grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr)!important; gap:18px!important; align-items:stretch!important; } .developer-dashboard-card{padding:22px!important;} .developer-role-card{ display:flex!important; flex-direction:column!important; min-width:0!important; } .developer-role-card .apex-chart-shell.compact{ width:100%!important; height:190px!important; min-height:190px!important; max-height:190px!important; margin:2px auto 8px!important; overflow:hidden!important; } .developer-role-card .apexcharts-legend, .developer-role-card .apexcharts-toolbar{display:none!important;} .developer-role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; margin-top:6px!important; position:relative!important; z-index:2!important; } .developer-role-tile{ min-height:76px!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto!important; align-items:center!important; column-gap:12px!important; padding:12px 14px!important; } .developer-role-tile>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} .developer-role-tile>strong{grid-column:2!important;grid-row:1 / span 2!important;align-self:center!important;} .developer-role-tile>small{grid-column:1!important;grid-row:2!important;} .developer-health-card{min-width:0!important;} .developer-health-list>div{border:1px solid #e8eef5!important;background:#fbfdff!important;} .developer-card-head{align-items:flex-start!important;} .developer-card-head .mini-link{white-space:nowrap!important;} /* Sidebar width & touch targets after polish. */ @media(min-width:901px){ .sidebar{width:var(--sidebar-width)!important;max-width:var(--sidebar-width)!important;} } @media(max-width:1280px) and (min-width:901px){ .developer-dashboard-grid{grid-template-columns:1fr!important;} .developer-health-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;display:grid!important;} } @media(max-width:900px){ .sidebar{width:min(330px,90vw)!important;max-width:min(330px,90vw)!important;} .main-content{padding:14px!important;} .developer-dashboard-grid{grid-template-columns:1fr!important;} .developer-health-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;} .developer-role-card .apex-chart-shell.compact{height:185px!important;min-height:185px!important;} } @media(max-width:600px){ .developer-health-list{grid-template-columns:1fr!important;} .developer-role-grid{grid-template-columns:1fr!important;} .developer-card-head{flex-direction:column!important;align-items:stretch!important;} .developer-card-head .mini-link{align-self:flex-start!important;} .header-page-name{max-width:42vw!important;} } @media(max-width:420px){ .sidebar{width:min(312px,94vw)!important;max-width:min(312px,94vw)!important;} }