@import url('../theme.php');
:root{--bg:#f4f7f6;--card:#fff;--text:#16211f;--muted:#667773;--line:#e1e8e5;--primary:#176b5b;--primary2:#238772;--deep:#0d2923;--danger:#b42318;--warning:#9a6700;--shadow:0 16px 45px rgba(18,43,37,.08);--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f7f6;color:var(--text)}a{color:inherit}button,input,select,textarea{font:inherit}
.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border:0;border-radius:11px;background:var(--primary);color:#fff;cursor:pointer;font-weight:700;transition:.16s ease}.btn:hover,button:hover{background:var(--primary2);transform:translateY(-1px)}.danger{background:var(--danger)!important}.alt{background:#edf2f0!important;color:#25332f!important}.ghost{background:transparent!important;color:var(--primary)!important;border:1px solid var(--line)!important}
.card{width:min(480px,calc(100% - 30px));margin:7vh auto;padding:36px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}.card h1{margin:0 0 8px;font-size:31px;letter-spacing:-.8px}.card p{color:var(--muted)}label{display:block;margin:16px 0;font-weight:650;font-size:14px}input,select,textarea{display:block;width:100%;padding:12px 13px;margin-top:7px;border:1px solid #d2dbd7;border-radius:11px;background:#fff;color:var(--text);outline:none}textarea{min-height:105px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--primary2);box-shadow:0 0 0 4px rgba(35,135,114,.10)}.error{background:#fff1ef;color:#941d12;border:1px solid #ffd1cb;padding:12px 13px;border-radius:11px;margin:14px 0}.notice{background:#edf8f4;color:#155a4d;border:1px solid #d2ece4;padding:13px 14px;border-radius:12px;margin:14px 0}.notice.warning{background:#fff8e7;color:#7a5200;border-color:#f3dfaa}.small{font-size:12px;color:var(--muted)}
.wrap{max-width:1180px;margin:auto;padding:34px 22px}.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 26px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.4px}.brandmark{width:34px;height:34px;border-radius:10px;background:var(--deep);color:#fff;display:grid;place-items:center;font-weight:800}.top span{color:var(--muted);font-size:14px}.top a{color:var(--primary);text-decoration:none;font-weight:650}.hero{margin:14px 0 26px}.hero h1{font-size:34px;margin:0 0 7px;letter-spacing:-1px}.hero p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.app,.panel,.stat{background:rgba(255,255,255,.94);border:1px solid var(--line);padding:22px;border-radius:var(--radius);box-shadow:0 8px 28px rgba(16,24,40,.045)}.app{text-decoration:none;transition:.18s ease}.app:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfe2dc}.app h2{margin:0 0 8px;font-size:19px}.app .role{color:var(--primary);font-weight:650;font-size:13px}.stat strong{font-size:31px;display:block;letter-spacing:-1px}.stat span{display:block;color:var(--muted);font-size:13px;margin-top:4px}.section-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:28px 0 13px}.section-title h2{margin:0}.section-title p{margin:0;color:var(--muted);font-size:13px}
.layout{display:flex;min-height:100vh}aside{width:255px;min-height:100vh;background:linear-gradient(180deg,#0d2923,#102f28);color:#fff;padding:20px 13px;position:sticky;top:0;align-self:flex-start;box-shadow:8px 0 30px rgba(8,30,24,.08)}aside h2{font-size:19px;padding:4px 12px 22px;margin:0;letter-spacing:-.3px}aside .navlabel{color:#89aaa0;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.08em;padding:13px 12px 6px}aside a{display:flex;align-items:center;gap:9px;text-decoration:none;color:#e9f4f0;padding:11px 12px;border-radius:11px;margin:3px 0;font-size:14px}aside a:hover{background:rgba(255,255,255,.08)}.main{flex:1;min-width:0}.mainhead{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);padding:16px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}.mainhead .user{font-weight:750}.mainhead .role{color:var(--muted);font-size:13px}.content{padding:30px;max-width:1320px}.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}.pagehead h1{margin:0;font-size:30px;letter-spacing:-.8px}.pagehead p{margin:5px 0 0;color:var(--muted)}.tablewrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 28px rgba(16,24,40,.04)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px 15px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:#fafcfa}.table tr:hover td{background:#fbfdfc}.form{max-width:760px;background:#fff;border:1px solid var(--line);padding:24px;border-radius:var(--radius)}.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eaf5f1;color:#176353;font-size:12px;font-weight:750}.badge.off{background:#f1f3f4;color:#667085}.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}.role-card{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fbfcfc}.role-card h3{margin:0 0 12px;font-size:16px}.check{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;margin:2px 0;font-size:14px;font-weight:550}.check:hover{background:#f1f6f4}.check input{width:17px;height:17px;margin:0;accent-color:var(--primary)}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.toolbar select{min-width:260px;margin:0}.empty{padding:24px;color:var(--muted);text-align:center}
@media(max-width:820px){.layout{display:block}aside{width:100%;min-height:auto;position:static;padding:12px;display:flex;flex-wrap:wrap;gap:4px}aside h2{width:100%;padding:4px 8px 10px}aside .navlabel{display:none}aside a{display:inline-flex;padding:8px 10px}.mainhead{position:static;align-items:flex-start;flex-direction:column;gap:4px;padding:14px 16px}.content{padding:18px}.wrap{padding:24px 16px}.top{padding:12px 16px;align-items:flex-start;gap:10px;flex-direction:column}.pagehead,.section-title{align-items:flex-start;flex-direction:column}.card{margin:4vh auto;padding:26px}.toolbar select{width:100%;min-width:0}}

html,body{min-height:100%;background:#f4f7f6!important}.main,.content{background:transparent!important}

.portal-logo{text-align:center;margin-bottom:18px}.portal-logo img{max-width:220px;max-height:90px;object-fit:contain}.brand-logo-small{max-height:34px;max-width:150px;object-fit:contain}.app-logo{display:block;max-width:110px;max-height:64px;object-fit:contain;margin-bottom:12px}.app-logo-preview{max-width:120px;max-height:70px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff}.file-help{font-size:12px;color:var(--muted);margin-top:5px}
/* Responsive logo handling */
.portal-logo{display:flex;justify-content:center;align-items:center;min-height:48px}.portal-logo img{display:block;width:auto;max-width:min(100%,360px);height:auto;max-height:120px;object-fit:contain}.brand-logo-small{display:block;width:auto;max-width:min(150px,35vw);height:auto;max-height:40px;object-fit:contain}.app-logo{display:block;width:auto;max-width:100%;height:auto;max-height:84px;object-fit:contain}.app-logo-preview{display:block;width:auto;max-width:100%;height:auto;max-height:100px;object-fit:contain}
@media(max-width:560px){.portal-logo img{max-width:82vw;max-height:90px}.brand-logo-small{max-width:120px;max-height:34px}.app-logo{max-height:70px}}

.logo-manage{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.logo-manage form{margin:0}
.subhead{margin:28px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.theme-grid label{margin:8px 0}
.theme-grid input[type=color]{height:48px;padding:4px;cursor:pointer}
.theme-grid select{margin-top:7px}

/* V4.7 — Modern rounded UI */
:root{
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --shadow-soft:0 10px 30px rgba(22,33,31,.07);
  --shadow-hover:0 16px 38px rgba(22,33,31,.11);
  --line-soft:rgba(22,33,31,.08);
}
html{scroll-behavior:smooth}
body{
  font-weight:400;
  letter-spacing:-.01em;
}
h1,h2,h3{letter-spacing:-.025em}
.panel,.card,.notice,.error,.tablewrap,.stat,.app-card,.login-card,.form-card{
  border-radius:var(--radius-xl)!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden;
}
.panel,.card,.app-card,.login-card,.form-card{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(8px);
}
.panel:hover,.app-card:hover{
  box-shadow:var(--shadow-hover)!important;
}
button,.btn{
  border-radius:12px!important;
  min-height:42px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
button:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(22,33,31,.12);
}
input,select,textarea{
  border-radius:12px!important;
  border:1px solid #dfe7e4!important;
  min-height:44px;
  background:#fff!important;
}
input[type=color]{min-height:44px!important;border-radius:12px!important}
table{border-collapse:separate!important;border-spacing:0 8px!important}
.table thead th{
  border:0!important;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  opacity:.68;
}
.table tbody tr{
  background:#fff!important;
  box-shadow:0 4px 16px rgba(22,33,31,.045);
}
.table tbody td{
  border-top:1px solid rgba(22,33,31,.055)!important;
  border-bottom:1px solid rgba(22,33,31,.055)!important;
}
.table tbody td:first-child{
  border-left:1px solid rgba(22,33,31,.055)!important;
  border-radius:14px 0 0 14px!important;
}
.table tbody td:last-child{
  border-right:1px solid rgba(22,33,31,.055)!important;
  border-radius:0 14px 14px 0!important;
}
.badge,.role,.tag{
  border-radius:999px!important;
  padding:6px 10px!important;
  font-weight:700;
}
.app-logo-preview{
  max-width:min(180px,45vw)!important;
  max-height:90px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:14px!important;
}
.logo-manage{
  padding:12px;
  border-radius:16px!important;
  background:#f7f9f8;
  border:1px solid var(--line-soft);
}
.pagehead{
  margin-bottom:22px;
}
.pagehead h1{
  font-size:clamp(1.65rem,2.6vw,2.25rem);
}
.navlabel{
  opacity:.6;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:18px;
}
aside a{
  border-radius:12px!important;
  margin:3px 0;
  transition:background .16s ease,transform .16s ease;
}
aside a:hover{
  transform:translateX(2px);
}
.mainhead{
  min-height:68px;
  backdrop-filter:blur(10px);
}
.notice,.error{
  padding:14px 17px!important;
}
.form-actions{
  margin-top:22px;
}
.theme-grid{
  gap:16px!important;
}
.theme-grid label{
  background:#fafcfb;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line-soft);
}
@media(max-width:760px){
  .panel,.card,.app-card,.login-card,.form-card{border-radius:18px!important}
  .content{padding:16px!important}
  .mainhead{padding:12px 16px!important}
  table{font-size:.9rem}
}

/* V4.8 — Mobile-first refinements */
.app-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px!important;
}
.app-card{
  border-radius:24px!important;
  padding:22px!important;
  min-height:190px;
  display:flex!important;
  flex-direction:column;
  justify-content:space-between;
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:0 10px 28px rgba(22,33,31,.065)!important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.app-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(22,33,31,.11)!important;
}
.app-card .app-logo,
.app-card img{
  max-width:150px!important;
  max-height:78px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:16px!important;
}
.app-card .app-head{
  display:flex;
  align-items:center;
  gap:15px;
}
.app-card .app-icon{
  width:58px;height:58px;
  border-radius:18px!important;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#f1f5f3;
  flex:0 0 58px;
}
.app-card h2,.app-card h3{
  margin:0!important;
  font-size:1.05rem!important;
  line-height:1.25;
}
.app-card .app-actions{
  margin-top:18px;
}
.app-card .btn{
  width:100%;
  text-align:center;
}

/* Dashboard cards */
.stats,.stats-grid,.dashboard-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  gap:16px!important;
}
.stat{
  border-radius:22px!important;
  padding:20px!important;
}

/* Mobile navigation and layout */
@media(max-width:900px){
  .layout{display:block!important}
  aside{
    position:sticky!important;
    top:0;
    z-index:50;
    width:100%!important;
    min-height:auto!important;
    padding:12px!important;
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
  }
  aside h2{
    width:100%;
    margin:4px 6px 8px!important;
    font-size:1.05rem!important;
  }
  aside .navlabel{display:none!important}
  aside a{
    flex:1 1 auto;
    text-align:center;
    padding:9px 8px!important;
    font-size:.82rem;
  }
  .main{width:100%!important}
  .mainhead{
    position:sticky!important;
    top:0;
    z-index:40;
    min-height:56px!important;
  }
  .content{
    padding:16px!important;
    max-width:100%!important;
  }
  .pagehead{
    display:block!important;
  }
  .pagehead h1{
    font-size:1.65rem!important;
  }
  .panel{
    padding:18px!important;
    border-radius:20px!important;
  }
  .app-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .app-card{
    min-height:170px;
    border-radius:22px!important;
    padding:18px!important;
  }
  .tablewrap{
    overflow-x:auto!important;
    border-radius:18px!important;
  }
  .form{
    width:100%!important;
  }
  .form label{
    width:100%!important;
  }
  button,.btn{
    min-height:44px!important;
  }
}

@media(max-width:520px){
  body{
    font-size:15px;
  }
  .content{
    padding:12px!important;
  }
  .mainhead{
    padding:10px 12px!important;
  }
  .mainhead .user{
    max-width:55vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .panel,.card,.login-card,.form-card{
    border-radius:18px!important;
    padding:16px!important;
  }
  .app-card{
    border-radius:20px!important;
    padding:16px!important;
  }
  .app-card .app-head{
    gap:12px;
  }
  .app-card .app-icon{
    width:50px;height:50px;flex-basis:50px;border-radius:15px!important;
  }
  .app-card .app-logo,.app-card img{
    max-width:120px!important;
    max-height:62px!important;
  }
  .theme-grid{
    grid-template-columns:1fr!important;
  }
  .form-actions{
    display:flex!important;
    flex-direction:column;
    gap:8px;
  }
  .form-actions .btn,.form-actions button{
    width:100%;
  }
  table{
    min-width:640px;
  }
}

/* V4.9 — Mobile navigation */
@media (max-width:900px){
  body{padding-bottom:0!important}
  .layout{display:block!important}
  aside{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:10px 12px!important;
    display:block!important;
    background:linear-gradient(135deg,var(--deep),var(--primary))!important;
    box-shadow:0 6px 24px rgba(0,0,0,.12)!important;
  }
  aside h2{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    margin:0!important;
    padding:4px 2px 8px!important;
    font-size:1.02rem!important;
    line-height:1.2!important;
  }
  aside h2::after{
    content:"MENU";
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    opacity:.72;
  }
  aside .navlabel{display:none!important}
  aside a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    margin:3px 2px!important;
    padding:8px 11px!important;
    border-radius:12px!important;
    font-size:.78rem!important;
    font-weight:600!important;
    flex:0 1 auto!important;
    white-space:nowrap!important;
  }
  aside a:hover{transform:none!important}
  .main{width:100%!important}
  .mainhead{
    top:0!important;
    z-index:900!important;
  }
}

/* compact bottom navigation for very small phones */
@media(max-width:520px){
  aside{
    padding:8px 10px!important;
  }
  aside h2{
    padding-bottom:7px!important;
  }
  aside a{
    width:calc(25% - 6px)!important;
    min-width:0!important;
    padding:8px 3px!important;
    font-size:.69rem!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  /* Keep the most important destinations visible and compact. */
  aside a[href="index.php"],
  aside a[href="dashboard.php"],
  aside a[href="users.php"],
  aside a[href="applications.php"],
  aside a[href="roles.php"],
  aside a[href="assignments.php"],
  aside a[href="branding.php"],
  aside a[href="audit.php"]{
    display:inline-flex!important;
  }
}

/* Improve touch targets everywhere */
@media (pointer:coarse){
  button,.btn,a,input,select,textarea{
    -webkit-tap-highlight-color:transparent;
  }
  button,.btn{
    min-height:44px!important;
  }
}

/* V4.10 — Desktop readability and responsive balance */
@media(min-width:901px){
  .layout{
    min-height:100vh!important;
  }
  aside{
    width:248px!important;
    min-width:248px!important;
    padding:22px 16px!important;
  }
  aside h2{
    font-size:1.18rem!important;
    line-height:1.25!important;
    margin:2px 6px 22px!important;
  }
  aside a{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-height:44px!important;
    padding:10px 13px!important;
    font-size:.91rem!important;
    font-weight:600!important;
    border-radius:13px!important;
  }
  .main{
    min-width:0!important;
  }
  .mainhead{
    min-height:72px!important;
    padding:14px 28px!important;
  }
  .content{
    width:min(1380px,calc(100% - 48px))!important;
    max-width:1380px!important;
    margin:0 auto!important;
    padding:28px 0 42px!important;
  }
  .pagehead{
    margin-bottom:26px!important;
  }
  .pagehead h1{
    font-size:2rem!important;
    line-height:1.15!important;
  }
  .pagehead p{
    font-size:.98rem!important;
    max-width:780px;
  }
  .panel{
    padding:26px!important;
    border-radius:22px!important;
  }
  .app-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
    gap:20px!important;
  }
  .app-card{
    min-height:205px!important;
    padding:22px!important;
    border-radius:24px!important;
  }
  .app-card h2,.app-card h3{
    font-size:1.12rem!important;
  }
  .app-card .btn{
    min-height:46px!important;
  }
  .stats,.stats-grid,.dashboard-grid{
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  }
  .stat{
    padding:22px!important;
    border-radius:22px!important;
  }
  .tablewrap{
    border-radius:20px!important;
  }
  .table{
    font-size:.92rem!important;
  }
  .table thead th{
    padding:13px 14px!important;
  }
  .table tbody td{
    padding:14px!important;
  }
  .form{
    max-width:1100px;
  }
  .theme-grid{
    grid-template-columns:repeat(2,minmax(250px,1fr))!important;
  }
}

/* Large monitors: avoid excessive empty space */
@media(min-width:1500px){
  .content{
    width:min(1460px,calc(100% - 72px))!important;
    max-width:1460px!important;
  }
}

/* Tablet */
@media(min-width:601px) and (max-width:900px){
  .app-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Accessibility / readability */
button,.btn,a,input,select,textarea{
  font-family:var(--font-family)!important;
}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary2) 38%,transparent)!important;
  outline-offset:2px!important;
}