/* Masjid Display Portal v4.2.54 — Aqua Control selectable UI
   Inspired by the supplied teal/blue sidebar dashboard reference. */

:root[data-portal-theme="aqua"]{
  --portal-bg:#eef1f4;
  --portal-panel:#ffffff;
  --portal-border:#e1e7ec;
  --portal-ink:#15202b;
  --portal-muted:#6f7c89;
  --portal-accent:#079e9d;
  --portal-accent-2:#147fc3;
  --portal-sidebar:#08b39c;
  --portal-sidebar-2:#0b7fbd;
  --portal-shadow:0 10px 28px rgba(32,55,73,.08);
}

.preview-aqua{
  background:linear-gradient(90deg,#0aac9a 0 28%,#fff 28% 100%)!important;
  border:1px solid #dce3e8;
}
.preview-aqua i:nth-child(1){position:absolute!important;left:8%!important;top:14%!important;width:14%!important;height:72%!important;border-radius:8px!important;background:linear-gradient(180deg,#11bea4,#167fc2)!important;filter:none!important}
.preview-aqua i:nth-child(2){position:absolute!important;left:35%!important;right:7%!important;top:18%!important;height:22%!important;border-radius:7px!important;background:linear-gradient(90deg,#ffb33c 0 28%,#31339a 28% 62%,#1882c1 62%)!important;filter:none!important}
.preview-aqua i:nth-child(3){position:absolute!important;left:35%!important;right:7%!important;top:49%!important;bottom:12%!important;border:1px solid #e3e7eb!important;border-radius:8px!important;background:#fff!important;filter:none!important}

html[data-portal-theme="aqua"],
html[data-portal-theme="aqua"] body{
  background:#eef1f4!important;
  color:#15202b!important;
}
html[data-portal-theme="aqua"] body{
  min-height:100vh;
  background-image:radial-gradient(circle at 87% 10%,rgba(26,145,189,.08),transparent 25%),linear-gradient(180deg,#f2f4f6,#e9edf0)!important;
}

html[data-portal-theme="aqua"] .app-shell{
  background:#fff!important;
  border:1px solid #dfe5e9!important;
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 20px 54px rgba(31,45,56,.18)!important;
}
html[data-portal-theme="aqua"] main{
  background:#fbfcfd!important;
  min-width:0;
}
html[data-portal-theme="aqua"] .sidebar{
  background:linear-gradient(180deg,#0db79e 0%,#0698b5 45%,#1479c2 100%)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-portal-theme="aqua"] .sidebar .brand{
  border-bottom:1px solid rgba(255,255,255,.18)!important;
}
html[data-portal-theme="aqua"] .sidebar .brand-mark.small{
  color:#fff!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
html[data-portal-theme="aqua"] .sidebar .brand strong{color:#fff!important}
html[data-portal-theme="aqua"] .sidebar .brand span{color:rgba(255,255,255,.72)!important}
html[data-portal-theme="aqua"] .sidebar-search{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.21)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-portal-theme="aqua"] .sidebar-search span{color:#fff!important;opacity:.88!important}
html[data-portal-theme="aqua"] .sidebar-search input{color:#fff!important}
html[data-portal-theme="aqua"] .sidebar-search input::placeholder{color:rgba(255,255,255,.68)!important}
html[data-portal-theme="aqua"] .nav-groups details,
html[data-portal-theme="aqua"] .nav-groups details[open]{
  background:transparent!important;
  border-color:transparent!important;
}
html[data-portal-theme="aqua"] .nav-groups summary{
  color:rgba(255,255,255,.66)!important;
  letter-spacing:.08em!important;
}
html[data-portal-theme="aqua"] .nav-groups details[open]>summary{color:#fff!important}
html[data-portal-theme="aqua"] .nav-groups summary::after{color:rgba(255,255,255,.7)!important}
html[data-portal-theme="aqua"] .nav-groups button[data-page]{
  color:rgba(255,255,255,.92)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-portal-theme="aqua"] .nav-groups button[data-page] b{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-portal-theme="aqua"] .nav-groups button[data-page]:hover{
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  transform:translateX(2px);
}
html[data-portal-theme="aqua"] .nav-groups button[data-page].active{
  color:#fff!important;
  background:rgba(255,255,255,.20)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 18px rgba(0,86,130,.18)!important;
}
html[data-portal-theme="aqua"] .nav-groups button[data-page].active b{
  color:#087fae!important;
  background:#fff!important;
  border-color:#fff!important;
}
html[data-portal-theme="aqua"] .nav-groups button[data-page].active::before{
  left:0!important;
  top:26%!important;
  bottom:26%!important;
  width:3px!important;
  background:#fff!important;
}
html[data-portal-theme="aqua"] .nav-groups button[data-page].active::after{
  background:#d8ff75!important;
  box-shadow:0 0 0 3px rgba(216,255,117,.16)!important;
}
html[data-portal-theme="aqua"] .sidebar>#installPwa,
html[data-portal-theme="aqua"] .sidebar>#logoutBtn{
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.20)!important;
}
html[data-portal-theme="aqua"] .sidebar>#logoutBtn:hover{background:rgba(255,255,255,.20)!important}

html[data-portal-theme="aqua"] .topbar{
  background:#fff!important;
  border:0!important;
  border-bottom:1px solid #e6ebef!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-portal-theme="aqua"] .topbar h2{color:#15202b!important;font-weight:850!important;letter-spacing:-.025em}
html[data-portal-theme="aqua"] .topbar p{color:#7c8792!important}
html[data-portal-theme="aqua"] .topbar-actions button,
html[data-portal-theme="aqua"] .topbar-actions .preview-btn{
  background:#f7f9fa!important;
  color:#354352!important;
  border:1px solid #e3e8ec!important;
  box-shadow:none!important;
}
html[data-portal-theme="aqua"] .topbar-actions .preview-btn{
  background:linear-gradient(135deg,#08a99d,#0e8fbc)!important;
  border-color:transparent!important;
  color:#fff!important;
}

.quick-theme-picker{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 8px 0 10px;
  border:1px solid #e2e7eb;
  border-radius:11px;
  background:var(--portal-panel,#fff);
  color:var(--portal-ink,#51606c);
  border-color:var(--portal-border,#e2e7eb);
  box-shadow:0 2px 7px rgba(31,45,56,.04);
}
.quick-theme-picker>span{font-size:15px;color:#079e9d}
.quick-theme-picker select{
  max-width:132px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:7px 20px 7px 2px!important;
  font-size:12px!important;
  font-weight:750!important;
  color:var(--portal-ink,#33414e)!important;
  cursor:pointer;
}
html[data-portal-theme="aqua"] .quick-theme-picker{background:#f7f9fa;border-color:#e3e8ec}

html[data-portal-theme="aqua"] .page{color:#15202b}
html[data-portal-theme="aqua"] .panel,
html[data-portal-theme="aqua"] dialog,
html[data-portal-theme="aqua"] .portal-settings-nav,
html[data-portal-theme="aqua"] .guide-index{
  background:#fff!important;
  border:1px solid #e1e7ec!important;
  border-radius:16px!important;
  box-shadow:0 4px 14px rgba(34,56,72,.055)!important;
  backdrop-filter:none!important;
}
html[data-portal-theme="aqua"] .panel h3,
html[data-portal-theme="aqua"] .panel h4,
html[data-portal-theme="aqua"] label{color:#1d2a35!important}
html[data-portal-theme="aqua"] .panel small,
html[data-portal-theme="aqua"] .muted-line{color:#7a8692!important}
html[data-portal-theme="aqua"] .panel-head{border-bottom-color:#edf0f3!important}

html[data-portal-theme="aqua"] .ops-dashboard-head{
  padding:4px 2px 12px!important;
}
html[data-portal-theme="aqua"] .ops-dashboard-head h2{color:#16232f!important;letter-spacing:-.035em!important}
html[data-portal-theme="aqua"] .eyebrow{color:#0c999e!important}
html[data-portal-theme="aqua"] .cards.ops-summary{
  gap:12px!important;
}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card{
  min-height:116px!important;
  border:0!important;
  border-radius:16px!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(32,55,73,.12)!important;
  overflow:hidden;
  position:relative;
}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card::after{
  content:"";
  position:absolute;
  right:-16px;
  top:-22px;
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card:nth-child(1){background:linear-gradient(135deg,#ffb43b,#f29a27)!important}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card:nth-child(2){background:linear-gradient(135deg,#373ca2,#2e2f89)!important}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card:nth-child(3){background:linear-gradient(135deg,#1687c9,#1473b7)!important}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card:nth-child(4){background:linear-gradient(135deg,#10a995,#088e97)!important}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card .label,
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card small{color:rgba(255,255,255,.82)!important}
html[data-portal-theme="aqua"] .cards.ops-summary .stat-card strong{color:#fff!important;font-size:30px!important}

html[data-portal-theme="aqua"] .primary{
  background:linear-gradient(135deg,#08a99d,#0b8db7)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 7px 16px rgba(8,159,157,.20)!important;
}
html[data-portal-theme="aqua"] .secondary{
  background:#f7f9fa!important;
  color:#40505e!important;
  border-color:#e1e6ea!important;
  box-shadow:none!important;
}
html[data-portal-theme="aqua"] input,
html[data-portal-theme="aqua"] select,
html[data-portal-theme="aqua"] textarea{
  background:#fff!important;
  border-color:#dfe5e9!important;
  color:#1f2d38!important;
  box-shadow:0 1px 2px rgba(29,47,61,.025)!important;
}
html[data-portal-theme="aqua"] input:focus,
html[data-portal-theme="aqua"] select:focus,
html[data-portal-theme="aqua"] textarea:focus{
  border-color:#10a7a0!important;
  box-shadow:0 0 0 3px rgba(16,167,160,.10)!important;
}
html[data-portal-theme="aqua"] table{background:#fff!important}
html[data-portal-theme="aqua"] th{background:#f6f8fa!important;color:#62717e!important;border-bottom-color:#e6eaee!important}
html[data-portal-theme="aqua"] td{border-bottom-color:#edf0f2!important;color:#2e3b47!important}
html[data-portal-theme="aqua"] tr:hover td{background:#f9fbfc!important}
html[data-portal-theme="aqua"] .badge,
html[data-portal-theme="aqua"] .status-pill,
html[data-portal-theme="aqua"] .sync-pill{border-color:#dce7e8!important}
html[data-portal-theme="aqua"] .sync-pill.success{background:#e9f8f2!important;color:#13835f!important}
html[data-portal-theme="aqua"] .prayer-mini-grid>div{background:#f7fafb!important;border-color:#e3e9ed!important;border-radius:13px!important}
html[data-portal-theme="aqua"] .prayer-mini-grid strong{color:#0c8a9d!important}
html[data-portal-theme="aqua"] .ops-quick-links button{background:#f5f8f9!important;color:#3f4d59!important;border-color:#e2e7ea!important}
html[data-portal-theme="aqua"] .portal-settings-nav button.active{background:linear-gradient(135deg,#09a79d,#1387b7)!important;color:#fff!important}
html[data-portal-theme="aqua"] .portal-theme-card.selected{border-color:#079e9d!important;box-shadow:0 0 0 2px rgba(7,158,157,.12)!important}

html[data-portal-theme="aqua"] .login-card{
  background:#fff!important;
  border-color:#dde5e9!important;
  box-shadow:0 22px 60px rgba(26,53,72,.17)!important;
}
html[data-portal-theme="aqua"] .login-card .brand-mark{background:linear-gradient(145deg,#0db69f,#147cc0)!important;color:#fff!important}

@media (min-width:1001px){
  html[data-portal-theme="aqua"] .app-shell{
    width:min(1500px,calc(100vw - 42px));
    min-height:calc(100vh - 42px);
    margin:21px auto!important;
    grid-template-columns:252px minmax(0,1fr)!important;
  }
  html[data-portal-theme="aqua"] .sidebar{padding:20px 15px 17px!important}
  html[data-portal-theme="aqua"] .nav-groups button[data-page]{font-size:13.2px!important;min-height:42px!important}
  html[data-portal-theme="aqua"] body.compact-sidebar .app-shell{grid-template-columns:88px minmax(0,1fr)!important}
  html[data-portal-theme="aqua"] body.compact-sidebar .nav-groups details[open]{background:transparent!important}
}

@media(max-width:1000px){
  html[data-portal-theme="aqua"] .app-shell{border-radius:0!important;border:0!important;box-shadow:none!important}
  html[data-portal-theme="aqua"] #portalSidebar.sidebar{background:linear-gradient(180deg,#0db79e,#137cc0)!important}
  .quick-theme-picker select{max-width:104px}
}
@media(max-width:720px){
  .quick-theme-picker{padding:0 7px}
  .quick-theme-picker>span{display:none}
  .quick-theme-picker select{max-width:90px;font-size:11px!important}
}