*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#101828;background:#f5f7fb}a{color:var(--primary,#090379);text-decoration:none}button,input,select,textarea{font:inherit}.shell{display:grid;grid-template-columns:244px 1fr;min-height:100vh}aside{position:fixed;inset:0 auto 0 0;width:244px;background:#0e172a;color:#fff;padding:22px 14px;display:flex;flex-direction:column;z-index:20}.app-brand{display:flex;gap:11px;align-items:center;padding:0 9px 24px;font-size:18px}.app-brand span,.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#111;background:var(--accent,#feff00);font-weight:900}.app-brand img{width:38px;height:38px;object-fit:contain}.nav-item{display:block;color:#b9c2d2;padding:10px 12px;border-radius:8px;margin:2px 0;font-weight:600}.nav-item:hover,.nav-item.active{color:#fff;background:#1c2941}.nav-item.active{box-shadow:inset 3px 0 var(--accent,#feff00)}.nav-break{border-top:1px solid #27344b;margin:14px 8px}.logout{margin-top:auto}main{grid-column:2;min-width:0}header{height:70px;background:#fff;border-bottom:1px solid #e5eaf1;display:flex;justify-content:flex-end;align-items:center;padding:0 28px;position:sticky;top:0;z-index:10}header div{display:grid;text-align:right}header span{font-size:12px;color:#667085}.menu-button{display:none}.content{padding:30px;max-width:1440px;margin:auto}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head h1{margin:0;font-size:28px}.page-head p{margin:5px 0 0;color:#667085}.card{background:#fff;border:1px solid #e5eaf1;border-radius:14px;padding:22px;box-shadow:0 3px 14px rgba(16,24,40,.04);margin-bottom:20px}.card h2{margin:0 0 18px}.card h3{margin-top:24px}.card-head{display:flex;align-items:center;justify-content:space-between}.button{appearance:none;border:1px solid #d0d5dd;background:#fff;color:#182230;border-radius:8px;padding:10px 15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.button.primary{background:var(--primary,#090379);color:#fff;border-color:var(--primary,#090379)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat{padding:20px;background:#fff;border:1px solid #e5eaf1;border-radius:14px}.stat strong{display:block;font-size:30px}.stat span{color:#667085}.table-wrap{overflow:auto}.card.table-wrap,.card>.table-wrap{padding:0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #eef1f5;white-space:nowrap}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#667085;background:#fafbfc}td small{display:block;color:#667085;margin-top:4px;max-width:340px;overflow:hidden;text-overflow:ellipsis}.status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;color:#fff;background:var(--status);font-size:12px;font-weight:800}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label,.card>label,.auth-card label{display:grid;gap:7px;font-size:13px;font-weight:700}.span-2{grid-column:1/-1}input,select,textarea{width:100%;border:1px solid #ccd3dd;border-radius:8px;padding:11px 12px;background:#fff;color:#101828}input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--primary) 16%,transparent);border-color:var(--primary)}textarea{resize:vertical}.actions{display:flex;gap:10px}fieldset{border:1px solid #e1e5ec;border-radius:10px;padding:14px}legend{font-size:13px;font-weight:700;padding:0 5px}.checks{display:flex;flex-wrap:wrap;gap:10px}.checks label{display:block;cursor:pointer}.checks input{position:absolute;opacity:0;width:auto}.checks span{display:block;border:2px solid #e2e8f0;border-radius:999px;padding:7px 12px}.checks input:checked+span{border-color:var(--pill);box-shadow:inset 0 0 0 2px #fff;background:var(--pill);color:#fff}.detail-grid,.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}dl{display:grid;grid-template-columns:130px 1fr;gap:12px;margin:0}dt{font-weight:700;color:#667085}dd{margin:0}.tag{display:inline-block;background:var(--tag);color:#fff;border-radius:5px;padding:4px 7px;font-size:12px;font-weight:800;margin-right:4px}.upload{display:flex;gap:8px}.file-list,.config-list{list-style:none;padding:0;margin:15px 0}.file-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #eef1f5}.file-list small{color:#667085}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.colour-row{display:flex;gap:20px;margin:16px 0}.colour-row input{height:45px;padding:3px}.config-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef1f5}.config-list i{width:12px;height:12px;border-radius:50%}.config-list span{flex:1}.config-list code,.version{background:#f1f3f6;border-radius:5px;padding:3px 6px;color:#475467}.inline-form{display:grid;grid-template-columns:2fr 1fr 46px auto;gap:8px;align-items:center}.inline-form .check{display:flex;align-items:center;gap:6px}.inline-form .check input{width:auto}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.module{display:flex;flex-direction:column;justify-content:space-between;min-height:210px}.module p{color:#667085}.switch{display:flex;align-items:center;gap:10px;cursor:pointer}.switch input{display:none}.switch span{width:44px;height:24px;border-radius:20px;background:#cbd5e1;position:relative}.switch span:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:3px;top:3px;transition:.2s}.switch input:checked+span{background:#16a34a}.switch input:checked+span:after{transform:translateX(20px)}.note{color:#475467}.empty{text-align:center!important;color:#98a2b3;padding:30px!important}.alert{padding:12px 15px;border-radius:9px;margin-bottom:18px;background:#e9f7ef;color:#166534;border:1px solid #b7e4c7}.alert.danger{background:#fef2f2;color:#991b1b;border-color:#fecaca}.auth-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at top,#dfe7ff,#f6f8fc 55%)}.auth-card{background:#fff;width:min(440px,100%);padding:34px;border-radius:18px;box-shadow:0 20px 60px rgba(15,23,42,.13)}.auth-card .brand-mark{margin-bottom:20px;background:#090379;color:#feff00}.auth-card h1{margin:0 0 8px}.auth-card p{color:#667085;margin:0 0 20px}.auth-card form{display:grid;gap:16px}.auth-card .button{width:100%}.auth-card small{display:block;margin-top:18px;color:#667085;line-height:1.5}
@media(max-width:900px){.shell{display:block}aside{transform:translateX(-100%);transition:.2s}.nav-open aside{transform:none}main{grid-column:auto}header{justify-content:space-between}.menu-button{display:block;border:0;background:transparent;font-size:22px}.content{padding:20px}.stats{grid-template-columns:repeat(2,1fr)}.settings-grid,.module-grid,.detail-grid,.two-col{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.inline-form{grid-template-columns:1fr 90px 46px}.inline-form .button{grid-column:1/-1}}
@media(max-width:520px){.stats{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.content{padding:16px}.card{padding:16px}.upload{flex-direction:column}header{padding:0 16px}}
.install-card{width:min(620px,100%)}
.install-card h2{font-size:16px;margin:8px 0 -4px;padding-top:8px;border-top:1px solid #eef1f5}
.install-card .check{display:flex;grid-template-columns:auto 1fr;align-items:flex-start;gap:9px;font-weight:600;line-height:1.4}
.install-card .check input{width:auto;margin-top:3px}

.module-installer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end}
.module-installer label{display:grid;gap:7px;font-size:13px;font-weight:700}
.module-installer .installer-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.module-installer .check{display:flex;align-items:center;gap:8px;font-weight:600}
.module-installer .check input{width:auto}
.module-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;background:#eef2ff;color:#3730a3}
.badge.enabled{background:#dcfce7;color:#166534}
.module-help{font-size:13px;color:#667085;line-height:1.55}
@media(max-width:700px){.module-installer{grid-template-columns:1fr}.module-installer .installer-actions{align-items:flex-start}}

.button.danger{background:#fff;color:#b42318;border-color:#fda29b}.button.danger:hover{background:#fef3f2}.module-actions{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #eef1f5}.module-actions form{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.remove-data{display:flex!important;align-items:center;gap:7px;font-size:12px!important;font-weight:600!important;color:#667085}.remove-data input{width:auto}.module-actions .button.danger{margin-left:auto}

/* Collapsible desktop sidebar */
.shell{transition:grid-template-columns .2s ease}
aside{transition:width .2s ease;padding-bottom:16px;overflow:hidden}
.app-brand{min-height:38px}
aside nav{min-height:0;overflow-y:auto;overflow-x:hidden}
.sidebar-bottom{margin-top:auto;padding-top:10px;border-top:1px solid #27344b}
.sidebar-bottom .logout{margin-top:0}
.sidebar-collapse{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;font-weight:600}
.sidebar-collapse:hover{color:#fff;background:#1c2941}
.sidebar-collapse-icon{font-size:22px;transition:transform .2s ease}
.nav-item{display:flex;align-items:center;gap:11px;min-height:42px;white-space:nowrap;overflow:hidden}
.nav-icon{width:20px;min-width:20px;display:grid;place-items:center;font-size:18px;line-height:1;color:currentColor}
.nav-label{overflow:hidden;text-overflow:ellipsis}
body.nav-collapsed .shell{grid-template-columns:76px 1fr}
body.nav-collapsed aside{width:76px;padding-left:10px;padding-right:10px}
body.nav-collapsed .app-brand{padding-left:9px;padding-right:9px;justify-content:center}
body.nav-collapsed .app-brand strong{display:none}
body.nav-collapsed .nav-item{justify-content:center;padding-left:10px;padding-right:10px;gap:0}
body.nav-collapsed .nav-label{display:none}
body.nav-collapsed .nav-break{margin-left:6px;margin-right:6px}
body.nav-collapsed .nav-item.active{box-shadow:inset 3px 0 var(--accent,#feff00)}
body.nav-collapsed .sidebar-collapse-icon{transform:rotate(180deg)}
body.nav-collapsed .sidebar-bottom{padding-top:10px}

@media(max-width:900px){
  body.nav-collapsed .shell{display:block}
  body.nav-collapsed aside{width:244px;padding:22px 14px}
  body.nav-collapsed .app-brand{padding:0 9px 24px;justify-content:flex-start}
  body.nav-collapsed .app-brand strong{display:block}
  body.nav-collapsed .nav-item{justify-content:flex-start;padding:10px 12px;gap:11px}
  body.nav-collapsed .nav-label{display:inline}
  .sidebar-collapse{display:none}
  .sidebar-bottom{margin-top:auto}
}

/* ContractorOS sidebar scrollbar */
aside nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(185,194,210,.10) transparent;
  scrollbar-gutter:stable;
}
aside nav:hover{
  scrollbar-color:rgba(185,194,210,.42) transparent;
}
aside nav::-webkit-scrollbar{width:7px;height:7px}
aside nav::-webkit-scrollbar-track{background:transparent}
aside nav::-webkit-scrollbar-thumb{
  background:rgba(185,194,210,.10);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
  min-height:34px;
}
aside nav:hover::-webkit-scrollbar-thumb{background:rgba(185,194,210,.38);background-clip:padding-box}
aside nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.58);background-clip:padding-box}
aside nav::-webkit-scrollbar-corner{background:transparent}