@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--pms-ink:#152238;--pms-muted:#6f7c90;--pms-navy:#12243a;--pms-blue:#2463eb;--pms-bg:#f3f6fb;--pms-line:#e5eaf2;--pms-card:#fff;--pms-green:#16855b;--pms-amber:#a96708;--pms-red:#bd3434}*{box-sizing:border-box}body.pms-body{margin:0;background:var(--pms-bg);color:var(--pms-ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}.pms-shell{display:flex;min-height:100vh}.pms-sidebar{width:255px;flex:0 0 255px;background:var(--pms-navy);color:#c3ccda;padding:22px 15px;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:1030}.pms-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:4px 8px 26px}.brand-mark{width:43px;height:43px;border-radius:13px;background:#2d70f5;display:grid;place-items:center;color:#fff;font-size:22px}.pms-brand strong{display:block;font:800 14px 'Manrope',sans-serif;letter-spacing:.8px}.pms-brand small{display:block;color:#9eabc0;font-size:11px;margin-top:3px}.sidebar-label{padding:17px 11px 8px;color:#74869f;font-size:10px;letter-spacing:1.4px;font-weight:700}.side-link{display:flex;align-items:center;gap:12px;color:#bdc8d8;text-decoration:none;border-radius:9px;padding:11px 12px;margin:3px 0;font-weight:500;transition:.15s}.side-link i{font-size:17px;width:20px;text-align:center}.side-link:hover,.side-link.active{background:#213b59;color:#fff}.side-link.active{box-shadow:inset 3px 0 #4c8aff}.pms-main{margin-left:255px;min-width:0;display:flex;flex-direction:column;flex:1}.pms-topbar{height:83px;background:#fff;border-bottom:1px solid var(--pms-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:18px}.topbar-heading .eyebrow{font-size:9px;letter-spacing:1.6px;color:#8a97a9;font-weight:700}.topbar-heading h1{font:800 20px 'Manrope',sans-serif;margin:3px 0 0}.topbar-user{display:flex;align-items:center;gap:10px}.avatar-circle{width:39px;height:39px;border-radius:50%;background:#e7efff;color:#245ad1;display:grid;place-items:center;font-weight:800}.user-meta strong,.user-meta small{display:block}.user-meta strong{font-size:12px}.user-meta small{color:var(--pms-muted);font-size:11px}.pms-content{padding:27px 30px;flex:1;min-width:0}.pms-footer{display:flex;justify-content:space-between;gap:12px;padding:16px 30px;color:#8a97a9;font-size:11px;border-top:1px solid var(--pms-line);background:#fff}.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:22px}.page-intro h2{font:800 22px 'Manrope',sans-serif;margin:0}.page-intro p{color:var(--pms-muted);margin:6px 0 0}.pms-card{background:var(--pms-card);border:1px solid var(--pms-line);border-radius:15px;box-shadow:0 5px 20px rgba(24,44,76,.035)}.pms-card-head{padding:17px 20px;border-bottom:1px solid var(--pms-line);display:flex;align-items:center;justify-content:space-between;gap:12px}.pms-card-head h3{font:700 14px 'Manrope',sans-serif;margin:0}.pms-card-body{padding:20px}.metric-card{padding:20px;display:flex;gap:15px;align-items:center;height:100%}.metric-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:#eaf1ff;color:#2862dc}.metric-icon.green{background:#e5f7ef;color:#16855b}.metric-icon.amber{background:#fff3dd;color:#a96708}.metric-icon.purple{background:#f0eaff;color:#7148c9}.metric-label{font-size:12px;color:var(--pms-muted);font-weight:600}.metric-value{font:800 25px 'Manrope',sans-serif;letter-spacing:-.5px;margin-top:5px}.metric-note{font-size:11px;color:#8793a5;margin-top:4px}.table{--bs-table-bg:transparent;margin:0}.table thead th{background:#f7f9fc;color:#6e7c90;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;border-bottom:1px solid var(--pms-line);padding:13px 15px;white-space:nowrap}.table tbody td{padding:13px 15px;vertical-align:middle;border-color:#edf0f5}.form-label{font-size:12px;font-weight:700;color:#44536a}.form-control,.form-select{border-color:#dce3ed;border-radius:8px;min-height:41px;font-size:13px}.form-control:focus,.form-select:focus{border-color:#8aafff;box-shadow:0 0 0 .2rem rgba(36,99,235,.1)}.btn{border-radius:8px;font-weight:600;font-size:12px;padding:9px 13px}.btn-primary{background:var(--pms-blue);border-color:var(--pms-blue)}.badge-soft{background:#e7f7ee;color:#16724e}.badge-off{background:#ffebeb;color:#a72e2e}.empty-state{padding:34px;text-align:center;color:var(--pms-muted)}.empty-state i{font-size:29px;display:block;margin-bottom:8px}.permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.permission-option{border:1px solid var(--pms-line);border-radius:9px;padding:10px 12px;display:flex;gap:9px;align-items:flex-start}.permission-option small{display:block;color:var(--pms-muted);margin-top:3px}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#f4f7fc}.login-panel{padding:7vh 8vw;display:flex;flex-direction:column;justify-content:center}.login-brand{font:800 14px 'Manrope',sans-serif;letter-spacing:1px;margin-bottom:45px}.login-brand i{color:var(--pms-blue);font-size:25px;margin-right:9px}.login-panel h1{font:800 clamp(25px,3vw,38px) 'Manrope',sans-serif;letter-spacing:-1px}.login-panel>p{color:var(--pms-muted);line-height:1.7;max-width:430px}.login-form{max-width:420px;margin-top:25px}.login-visual{background:linear-gradient(145deg,#11253c,#193d60 65%,#2463eb);color:white;padding:8vw;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.login-visual:before,.login-visual:after{content:'';position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;width:460px;height:460px;right:-120px;top:-70px}.login-visual:after{width:330px;height:330px;right:-55px;top:-5px}.login-visual .big-icon{font-size:70px;position:relative;z-index:1;color:#cde0ff}.login-visual h2{font:800 30px 'Manrope',sans-serif;position:relative;z-index:1;margin-top:24px}.login-visual p{color:#c2d1e6;max-width:390px;line-height:1.8;position:relative;z-index:1}.login-alert{max-width:420px}@media(max-width:1100px){.pms-sidebar{width:225px;flex-basis:225px}.pms-main{margin-left:225px}.pms-content{padding:22px}.pms-topbar{padding:0 22px}.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:850px){.pms-sidebar{transform:translateX(-100%);transition:transform .2s;width:260px}.pms-sidebar.open{transform:translateX(0);box-shadow:10px 0 30px #14243a33}.pms-main{margin-left:0}.pms-topbar{height:72px;padding:0 16px}.pms-content{padding:18px 15px}.pms-footer{padding:14px 15px;flex-direction:column}.user-meta{display:none}.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-panel{padding:35px 25px}.permission-grid{grid-template-columns:1fr}}@media(max-width:520px){.page-intro{align-items:flex-start;flex-direction:column}.topbar-heading h1{font-size:17px}.metric-value{font-size:22px}.pms-card-body{padding:14px}.table thead th,.table tbody td{padding:10px}.pms-topbar .topbar-heading .eyebrow{display:none}}


/* Foundation layout refinements — shared by dashboard, users, roles and permissions. */
:root{--pms-radius:16px;--pms-shadow:0 10px 30px rgba(21,44,78,.055)}
.pms-body{background:radial-gradient(circle at 92% 0%,rgba(41,100,232,.055),transparent 28%),var(--pms-bg);line-height:1.55}
.pms-sidebar{background:linear-gradient(180deg,#10243b 0%,#0d1d31 100%);box-shadow:8px 0 30px rgba(12,29,49,.055);padding-top:20px}
.pms-brand{padding-bottom:23px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.brand-mark{box-shadow:0 8px 20px rgba(45,112,245,.26);background:linear-gradient(135deg,#3e83ff,#2358d6)}
.side-link{font-size:12px;min-height:42px}
.side-link i{opacity:.92}
.side-link:hover{transform:translateX(2px)}
.pms-topbar{position:sticky;top:0;z-index:800;min-height:82px;height:auto;box-shadow:0 4px 18px rgba(21,44,78,.025);backdrop-filter:blur(14px);background:rgba(255,255,255,.96)}
.topbar-heading .eyebrow{letter-spacing:1.5px}
.topbar-heading h1{letter-spacing:-.45px}
.topbar-meta{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-date{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--pms-line);border-radius:10px;color:#5c6b80;background:#f8faff;font-size:11px;font-weight:700;white-space:nowrap}
.topbar-date i{color:var(--pms-blue)}
.topbar-user{padding-left:12px;border-left:1px solid var(--pms-line)}
.avatar-circle{box-shadow:0 0 0 4px #f1f5ff;border:1px solid #dce7ff}
.pms-content{width:100%;max-width:1800px;margin:0 auto}
.page-intro{align-items:center;padding:3px 0 4px}
.page-intro h2{letter-spacing:-.55px}
.pms-card{border-radius:var(--pms-radius);box-shadow:var(--pms-shadow);transition:box-shadow .18s ease,border-color .18s ease}
.pms-card:hover{border-color:#d9e3f2}
.pms-card-head{padding:18px 21px}
.pms-card-body{padding:21px}
.metric-card{position:relative;overflow:hidden;min-height:126px}
.metric-card:after{content:"";position:absolute;right:-26px;bottom:-42px;width:112px;height:112px;border-radius:50%;background:currentColor;opacity:.035;pointer-events:none}
.metric-icon{box-shadow:inset 0 0 0 1px rgba(40,98,220,.06)}
.table-responsive{border-radius:0 0 var(--pms-radius) var(--pms-radius)}
.table tbody tr:last-child td{border-bottom:0}
.form-control,.form-select{transition:border-color .15s ease,box-shadow .15s ease}
.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-primary:hover{box-shadow:0 6px 14px rgba(36,99,235,.18);transform:translateY(-1px)}
.pms-footer{background:rgba(255,255,255,.88)}
@media(max-width:850px){.pms-topbar{position:relative;min-height:70px}.topbar-date{display:none}.topbar-user{border-left:0;padding-left:0}.pms-sidebar{box-shadow:12px 0 35px rgba(12,29,49,.2)}}
@media(max-width:520px){.pms-topbar{gap:10px}.topbar-heading h1{font-size:16px}.pms-card-head{padding:15px}.pms-card-body{padding:14px}.metric-card{padding:16px;min-height:108px}}

/* Premium station palette — consistent with legacy operational modules. */
:root{--pms-blue:#087f68;--pms-navy:#102b2a;--pms-bg:#f3f7f5;--pms-line:#dfe9e4;--pms-green:#0d8b68}
.pms-body{background:radial-gradient(circle at 92% 0%,rgba(8,127,104,.075),transparent 29%),linear-gradient(180deg,#f8faf9,#f1f6f3 65%,#f3f7f5);color:#203532}
.pms-sidebar{background:linear-gradient(180deg,#10332f 0%,#0b2422 100%)}
.brand-mark{background:linear-gradient(135deg,#f6bd5c,#ee9b2c);color:#173c32;box-shadow:0 8px 20px rgba(238,155,44,.18)}
.side-link:hover,.side-link.active{background:rgba(34,139,109,.22);color:#fff}
.side-link.active{box-shadow:inset 3px 0 #f4b34d}
.pms-topbar{border-bottom-color:#dce8e2}
.topbar-heading .eyebrow{color:#68867b}
.topbar-heading .eyebrow i{color:#0b8b6b}
.avatar-circle{background:#e4f3eb;color:#08745e;border-color:#cfe7da}
.pms-card{border-color:#dfe9e4;box-shadow:0 8px 24px rgba(19,55,45,.045)}
.pms-card-head{background:linear-gradient(180deg,#fff,#fbfdfc)}
.metric-icon{background:#e4f4eb;color:#087f68}
.metric-icon.green{background:#e2f5eb;color:#0d8b68}
.metric-icon.amber{background:#fff2db;color:#9b620c}
.table thead th{background:#f2f8f4;color:#5e7b70;border-bottom-color:#dce9e1}
.form-control:focus,.form-select:focus{border-color:#76bda5;box-shadow:0 0 0 .2rem rgba(8,127,104,.11)}
.btn-primary{background:linear-gradient(135deg,#0a8a6c,#08735d);border-color:#08735d}
.btn-primary:hover,.btn-primary:focus{background:#075e4c;border-color:#075e4c;box-shadow:0 6px 14px rgba(8,127,104,.2)}
.badge-soft{background:#e4f4eb;color:#08664f}
.pms-footer{background:#fff;color:#71857c;border-top-color:#dfe9e4}


/* Premium split-screen login page — inspired by the supplied Petro PMS reference. */
.pms-login-body{margin:0;min-height:100vh;background:#f5f8fc;color:#0d285f;font-family:'DM Sans',Arial,sans-serif}
.pms-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(430px,45%) minmax(0,55%)}
.pms-login-showcase{position:relative;isolation:isolate;display:flex;min-height:100vh;overflow:hidden;background:linear-gradient(145deg,#07346e 0%,#0755a2 48%,#041b3b 100%);color:#fff}
.pms-login-photo{position:absolute;z-index:-2;inset:0;background-image:url('../images/login-station-hero.jpg');background-size:cover;background-position:center 46%;opacity:.78}
.pms-login-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(3,39,85,.82) 0%,rgba(3,48,99,.15) 37%,rgba(2,22,47,.94) 100%),linear-gradient(90deg,rgba(3,37,79,.3),transparent)}
.pms-login-showcase-content{width:100%;display:flex;flex-direction:column;padding:clamp(28px,5vw,76px) clamp(25px,5.5vw,86px) 32px}
.pms-login-brand{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;max-width:700px}
.pms-login-brand-mark{display:grid;place-items:center;flex:0 0 66px;width:66px;height:66px;border:1px solid rgba(255,255,255,.42);border-radius:20px;background:rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.14);font-size:35px;color:#ffb51d}
.pms-login-brand strong,.pms-login-brand b,.pms-login-brand small{display:block}
.pms-login-brand strong{font:800 clamp(29px,3.5vw,48px)/1 'Manrope',sans-serif;letter-spacing:1.4px}
.pms-login-brand b{margin-top:6px;font:800 clamp(13px,1.3vw,19px)/1.2 'Manrope',sans-serif;letter-spacing:.7px}
.pms-login-brand small{margin-top:12px;color:#e2edfb;font-size:clamp(10px,.9vw,13px);white-space:nowrap}
.pms-login-brand small i{padding:0 4px;color:#ffb51d;font-style:normal}
.pms-login-feature-list{display:grid;gap:17px;margin-top:auto;padding-top:50px}
.pms-login-feature{display:flex;align-items:center;gap:15px;max-width:490px}
.pms-login-feature>span{display:grid;place-items:center;flex:0 0 51px;width:51px;height:51px;border-radius:15px;background:linear-gradient(145deg,#1479df,#0751ac);box-shadow:0 8px 18px rgba(0,0,0,.16);font-size:22px;color:#fff}
.pms-login-feature strong,.pms-login-feature small{display:block}
.pms-login-feature strong{font-size:13px;font-weight:800;color:#fff}
.pms-login-feature small{margin-top:4px;color:#d5e2f3;font-size:11px;line-height:1.55}
.pms-login-copyright{margin:42px 0 0;color:rgba(255,255,255,.72);font-size:10px}
.pms-login-main{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;padding:92px clamp(24px,5vw,84px) 45px;background:radial-gradient(ellipse at 92% 58%,rgba(39,112,220,.09),transparent 30%),linear-gradient(145deg,#fbfcfe,#f0f5fb)}
.pms-login-main:after{content:"";position:absolute;right:-130px;bottom:8%;width:350px;height:440px;border:34px solid rgba(34,104,208,.045);border-radius:52% 48% 58% 42%;transform:rotate(28deg);pointer-events:none}
.pms-login-security{position:absolute;top:34px;right:clamp(24px,4vw,65px);display:flex;align-items:center;gap:12px;color:#173e77}
.pms-login-security>i{font-size:28px;color:#164b9a}
.pms-login-security strong,.pms-login-security small{display:block}
.pms-login-security strong{font-size:11px;font-weight:800}
.pms-login-security small{margin-top:3px;color:#7086a6;font-size:10px}
.pms-login-security small b{padding:0 3px;color:#9cacc2}
.pms-login-card{position:relative;z-index:1;width:min(100%,550px);padding:clamp(28px,3.5vw,48px) clamp(25px,3.4vw,46px);border:1px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 20px 55px rgba(20,54,100,.12)}
.pms-login-card-brand{display:flex;justify-content:center;margin-bottom:18px}
.pms-login-card-brand>span{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#0b469c;font-size:48px;filter:drop-shadow(5px 2px 0 rgba(255,176,25,.9))}
.pms-login-card h1{margin:0;text-align:center;color:#0c2864;font:800 clamp(27px,2.5vw,36px)/1.2 'Manrope',sans-serif;letter-spacing:-.7px}
.pms-login-subtitle{margin:10px 0 29px;text-align:center;color:#6b83a8;font-size:14px}
.pms-login-form{width:100%}
.pms-login-field{margin-bottom:22px}
.pms-login-field>label{display:block;margin-bottom:9px;color:#102b63;font-size:12px;font-weight:800}
.pms-login-input-wrap{position:relative}
.pms-login-input-wrap>i{position:absolute;z-index:2;left:16px;top:50%;transform:translateY(-50%);color:#4f6d94;font-size:18px;pointer-events:none}
.pms-login-input-wrap .form-control{height:50px;min-height:50px;padding:12px 45px 12px 53px;border:1px solid #d5dfed;border-radius:10px;background:#fff;color:#1d355b;font-size:13px;box-shadow:0 2px 4px rgba(25,58,101,.025)}
.pms-login-input-wrap .form-control::placeholder{color:#91a5c2}
.pms-login-input-wrap .form-control:focus{border-color:#5d9df5;box-shadow:0 0 0 4px rgba(16,103,225,.1)}
.pms-password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:8px;background:transparent;color:#526b8d;font-size:17px}
.pms-password-toggle:hover{background:#f0f5fc}
.pms-login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:1px 0 27px}
.pms-remember{display:flex;align-items:center;gap:9px;margin:0;color:#526b8d;font-size:12px;cursor:pointer}
.pms-remember input{width:19px;height:19px;accent-color:#0967df}
.pms-login-help{color:#075bd3;font-size:11px;font-weight:700;cursor:help}
.pms-login-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:59px;border:0;border-radius:11px;background:linear-gradient(100deg,#0968e6,#0759d8);box-shadow:0 9px 20px rgba(8,93,218,.18);color:#fff;font-size:16px;font-weight:800;transition:transform .15s,box-shadow .15s}
.pms-login-submit:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(8,93,218,.24)}
.pms-login-submit i{font-size:20px}
.pms-login-divider{display:flex;align-items:center;gap:17px;margin:23px 0}
.pms-login-divider span{height:1px;flex:1;background:#e2e9f2}
.pms-login-divider small{color:#60799c;font-size:12px}
.pms-login-security-note{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:11px;background:#f0f6ff;color:#4773b3;font-size:11px;line-height:1.65}
.pms-login-security-note i{color:#124b9f;font-size:22px}
.pms-login-mobile-copyright{display:none}
.pms-login-alert{font-size:12px}
@media(min-width:1450px){.pms-login-shell{grid-template-columns:minmax(500px,45%) minmax(0,55%)}}
@media(max-width:1000px){.pms-login-shell{grid-template-columns:minmax(320px,42%) minmax(0,58%)}.pms-login-showcase-content{padding:35px 26px 24px}.pms-login-brand{gap:10px}.pms-login-brand-mark{flex-basis:52px;width:52px;height:52px;font-size:28px}.pms-login-brand small{white-space:normal}.pms-login-feature-list{gap:13px}.pms-login-feature>span{flex-basis:44px;width:44px;height:44px}.pms-login-main{padding:95px 22px 35px}.pms-login-card{padding:28px 24px}}
@media(max-width:760px){.pms-login-shell{grid-template-columns:1fr}.pms-login-showcase{display:none}.pms-login-main{min-height:100vh;padding:100px 18px 32px}.pms-login-security{top:23px;right:20px}.pms-login-card{max-width:500px;padding:30px 24px}.pms-login-mobile-copyright{display:block;position:relative;z-index:1;margin:22px 0 0;color:#8494aa;font-size:10px;text-align:center}}
@media(max-width:400px){.pms-login-main{padding:92px 12px 24px}.pms-login-card{padding:26px 18px}.pms-login-security strong{font-size:10px}.pms-login-security small{font-size:9px}.pms-login-options{align-items:flex-start}.pms-login-submit{min-height:53px}}