/* Masjid Display Portal v4.2.51 — Studio Light UI
   Inspired by a clean editorial dashboard: soft neutral canvas, black pill navigation,
   rounded cards, muted pastels, thin borders and spacious typography. */

:root[data-portal-theme="studio"]{
  --portal-bg:#eef0f4;
  --portal-panel:#ffffff;
  --portal-panel-soft:#f8f8fa;
  --portal-border:#e8e9ed;
  --portal-ink:#15161a;
  --portal-muted:#787b84;
  --portal-accent:#15161a;
  --portal-accent-2:#dfff57;
  --portal-mint:#dcefe6;
  --portal-lilac:#e7e9fb;
  --portal-blue:#e7eefb;
  --portal-sidebar:#fbfbfc;
  --portal-shadow:0 18px 55px rgba(27,30,38,.075);
  color-scheme:light;
}

html[data-portal-theme="studio"],
html[data-portal-theme="studio"] body{
  background:#eef0f4!important;
  color:var(--portal-ink)!important;
}

html[data-portal-theme="studio"] body{
  min-height:100vh;
  padding:18px;
}

/* Main portal shell */
html[data-portal-theme="studio"] .app-shell{
  width:min(1720px,100%);
  min-height:calc(100vh - 36px);
  margin:0 auto;
  grid-template-columns:238px minmax(0,1fr);
  overflow:clip;
  border:1px solid rgba(255,255,255,.96);
  border-radius:30px;
  background:#fbfbfc;
  box-shadow:0 24px 70px rgba(31,34,43,.12),inset 0 0 0 1px rgba(233,234,238,.7);
}

html[data-portal-theme="studio"] .sidebar{
  position:sticky;
  top:18px;
  height:calc(100vh - 36px);
  padding:20px 15px 18px;
  gap:16px;
  overflow:hidden;
  background:var(--portal-sidebar)!important;
  color:var(--portal-ink)!important;
  border:0!important;
  border-right:1px solid var(--portal-border)!important;
  border-radius:30px 0 0 30px;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

html[data-portal-theme="studio"] .brand{
  min-height:58px;
  padding:5px 8px 13px;
  border-bottom:1px solid var(--portal-border);
}
html[data-portal-theme="studio"] .brand-mark.small{
  width:42px;height:42px;border-radius:14px;
  background:#15161a!important;color:#fff!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .brand strong{color:#15161a!important;font-size:13px;letter-spacing:-.01em}
html[data-portal-theme="studio"] .brand span{color:#93969f!important;font-size:10px}

html[data-portal-theme="studio"] .nav-groups{
  flex:1;
  min-height:0;
  overflow:auto;
  gap:7px;
  padding:0 1px 10px;
  scrollbar-width:thin;
  scrollbar-color:#d8d9de transparent;
}
html[data-portal-theme="studio"] .nav-groups details{
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
}
html[data-portal-theme="studio"] .nav-groups details[open]{background:#f4f4f6!important}
html[data-portal-theme="studio"] .nav-groups summary{
  min-height:35px;
  padding:8px 11px;
  color:#999ba2!important;
  opacity:1!important;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
}
html[data-portal-theme="studio"] .nav-groups details>div{padding:0 5px 7px}
html[data-portal-theme="studio"] .nav-groups button[data-page]{
  min-height:40px;
  padding:9px 11px;
  gap:11px;
  border:1px solid transparent!important;
  border-radius:13px!important;
  color:#696c74!important;
  background:transparent!important;
  font-size:12px;
  font-weight:700;
  box-shadow:none!important;
  transform:none!important;
}
html[data-portal-theme="studio"] .nav-groups button[data-page] b{
  display:grid;place-items:center;
  width:24px;height:24px;
  border-radius:8px;
  color:#7e8189;
  background:#fff;
  border:1px solid #e9e9ed;
  font-size:13px;
  line-height:1;
}
html[data-portal-theme="studio"] .nav-groups button[data-page]:hover{
  background:#ececef!important;color:#17181c!important;
}
html[data-portal-theme="studio"] .nav-groups button[data-page].active{
  background:#17181c!important;
  border-color:#17181c!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(22,23,27,.14)!important;
}
html[data-portal-theme="studio"] .nav-groups button[data-page].active b{
  background:#2a2b30;border-color:#34353a;color:#fff;
}
html[data-portal-theme="studio"] .nav-groups button[data-page].active:before{display:none!important}
html[data-portal-theme="studio"] .sidebar-search{
  min-height:39px!important;
  margin:0 1px 3px!important;
  padding:8px 11px!important;
  border:1px solid var(--portal-border)!important;
  border-radius:13px!important;
  background:#f3f3f5!important;
}
html[data-portal-theme="studio"] .sidebar-search input{color:#24252a!important;font-size:12px!important}
html[data-portal-theme="studio"] .sidebar-search input::placeholder{color:#a1a3aa!important}
html[data-portal-theme="studio"] .sidebar .ghost{
  min-height:40px;
  margin-top:0!important;
  border:1px solid var(--portal-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#70727a!important;
}
html[data-portal-theme="studio"] .sidebar .ghost:hover{background:#f0f0f2!important;color:#18191d!important}

html[data-portal-theme="studio"] main{
  min-width:0;
  padding:0 28px 34px;
  background:#fbfbfc;
}
html[data-portal-theme="studio"] .topbar{
  min-height:92px;
  padding:18px 2px 14px;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--portal-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html[data-portal-theme="studio"] .topbar h2{
  color:#16171b!important;
  font-size:28px;
  font-weight:650;
  letter-spacing:-.035em;
}
html[data-portal-theme="studio"] .topbar p{color:#90939b!important;font-size:12px}
html[data-portal-theme="studio"] .topbar-actions{gap:8px}
html[data-portal-theme="studio"] .topbar-actions button,
html[data-portal-theme="studio"] .preview-btn{
  min-height:39px;
  padding:9px 14px;
  border:1px solid var(--portal-border)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#313238!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .topbar-actions button:hover,
html[data-portal-theme="studio"] .preview-btn:hover{background:#f0f0f2!important;color:#15161a!important}

/* General controls */
html[data-portal-theme="studio"] .primary{
  border:1px solid #17181c!important;
  border-radius:999px!important;
  background:#17181c!important;
  color:#fff!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .primary:hover{background:#2b2c31!important}
html[data-portal-theme="studio"] .secondary{
  border:1px solid var(--portal-border)!important;
  border-radius:999px!important;
  background:#f2f2f4!important;
  color:#35363b!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .secondary:hover{background:#e9e9ec!important;color:#17181c!important}
html[data-portal-theme="studio"] button.danger,
html[data-portal-theme="studio"] .danger{border-radius:999px!important}

html[data-portal-theme="studio"] input,
html[data-portal-theme="studio"] select,
html[data-portal-theme="studio"] textarea,
html[data-portal-theme="studio"] .panel input,
html[data-portal-theme="studio"] .panel select{
  border-color:#e2e3e7!important;
  border-radius:13px!important;
  background:#f8f8f9!important;
  color:#191a1e!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] input:focus,
html[data-portal-theme="studio"] select:focus,
html[data-portal-theme="studio"] textarea:focus{
  border-color:#a9abb2!important;
  box-shadow:0 0 0 3px rgba(21,22,26,.06)!important;
}

/* Cards and surfaces */
html[data-portal-theme="studio"] .panel,
html[data-portal-theme="studio"] dialog{
  border:1px solid var(--portal-border)!important;
  border-radius:22px!important;
  background:#fff!important;
  color:#18191d!important;
  box-shadow:0 10px 28px rgba(28,31,39,.045)!important;
  backdrop-filter:none!important;
}
html[data-portal-theme="studio"] .panel{padding:20px;margin-top:16px}
html[data-portal-theme="studio"] .panel h3,
html[data-portal-theme="studio"] .panel h2{color:#17181c!important;letter-spacing:-.025em}
html[data-portal-theme="studio"] .panel small,
html[data-portal-theme="studio"] .panel p{color:#858890}
html[data-portal-theme="studio"] .panel-head{margin-bottom:15px}
html[data-portal-theme="studio"] .panel-head h3{font-size:16px;font-weight:750}
html[data-portal-theme="studio"] .eyebrow{color:#9799a1!important;font-size:9px!important;letter-spacing:.14em!important}
html[data-portal-theme="studio"] .badge,
html[data-portal-theme="studio"] .sync-pill,
html[data-portal-theme="studio"] .status-pill{
  border:1px solid #e4e5e8!important;
  background:#f2f2f4!important;
  color:#5d6068!important;
}
html[data-portal-theme="studio"] .sync-pill.success,
html[data-portal-theme="studio"] .badge.active{background:#e1f3e8!important;color:#27704b!important;border-color:#cbe8d6!important}
html[data-portal-theme="studio"] .empty{
  border-color:#dadbe0;
  border-radius:16px;
  background:#fafafa;
  color:#9698a0;
}

/* Dashboard */
html[data-portal-theme="studio"] .ops-dashboard-head{
  padding:28px 2px 10px;
  align-items:flex-end;
}
html[data-portal-theme="studio"] .ops-dashboard-head h2{
  margin:3px 0 4px;
  color:#17181c;
  font-size:34px;
  font-weight:620;
  letter-spacing:-.045em;
}
html[data-portal-theme="studio"] .ops-dashboard-head p{color:#8b8e96;font-size:13px}
html[data-portal-theme="studio"] .ops-head-actions{color:#999ba2}
html[data-portal-theme="studio"] .cards.ops-summary{gap:12px;margin-top:10px}
html[data-portal-theme="studio"] .stat-card{
  min-height:136px;
  padding:18px;
  border:1px solid #ebecef!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:none!important;
  position:relative;
  overflow:hidden;
}
html[data-portal-theme="studio"] .stat-card:nth-child(1){background:#e9edfb!important}
html[data-portal-theme="studio"] .stat-card:nth-child(2){background:#f1f4dc!important}
html[data-portal-theme="studio"] .stat-card:nth-child(3){background:#dfeee7!important}
html[data-portal-theme="studio"] .stat-card:nth-child(4){background:#f2eaf4!important}
html[data-portal-theme="studio"] .stat-card:after{
  content:"";position:absolute;right:-18px;top:-18px;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.38);
}
html[data-portal-theme="studio"] .stat-card .label{color:#73767d;font-size:10px;letter-spacing:.08em}
html[data-portal-theme="studio"] .stat-card strong{margin-top:15px;font-size:32px;font-weight:650;letter-spacing:-.04em;color:#17181c}
html[data-portal-theme="studio"] .stat-card small{color:#7d8087;font-size:11px}

html[data-portal-theme="studio"] .ops-alert-stack{gap:8px;margin-top:12px}
html[data-portal-theme="studio"] .ops-alert,
html[data-portal-theme="studio"] .ops-all-good{
  border-radius:16px!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .ops-all-good{background:#eff6e4!important;border-color:#e1eccf!important;color:#2f5335!important}
html[data-portal-theme="studio"] .ops-layout{gap:14px}
html[data-portal-theme="studio"] .ops-two-column{gap:14px}
html[data-portal-theme="studio"] .ops-device-card{
  border:1px solid #e8e9ed!important;
  border-radius:18px!important;
  background:#fafafa!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .ops-device-grid>div,
html[data-portal-theme="studio"] .ops-current-slide{background:#fff!important;border-color:#ececef!important;border-radius:13px!important}
html[data-portal-theme="studio"] .ops-device-grid small,
html[data-portal-theme="studio"] .ops-current-slide small{color:#9a9ca3!important}
html[data-portal-theme="studio"] .prayer-mini-grid{gap:7px}
html[data-portal-theme="studio"] .prayer-mini-grid>div{
  border:1px solid #ececef;
  border-radius:14px;
  background:#f8f8f9;
}
html[data-portal-theme="studio"] .prayer-mini-grid span{color:#8b8e95}
html[data-portal-theme="studio"] .prayer-mini-grid strong{color:#191a1e;font-weight:650}
html[data-portal-theme="studio"] .date-block{background:#17181c!important;border-radius:15px!important;color:#fff!important}
html[data-portal-theme="studio"] .ops-preview{
  align-self:start;
  background:#f0f2fb!important;
  border-color:#e1e4f2!important;
}
html[data-portal-theme="studio"] .preview-frame{border-radius:18px;background:#111}
html[data-portal-theme="studio"] .ops-quick-links button{
  border:1px solid #dfe1ec!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#41434a!important;
}

/* Tables / lists */
html[data-portal-theme="studio"] .table-wrap{border:1px solid #ececef;border-radius:17px;background:#fff;overflow:auto}
html[data-portal-theme="studio"] table{background:#fff}
html[data-portal-theme="studio"] th{background:#f8f8f9;color:#8b8d94;border-bottom-color:#ececef;font-size:10px;letter-spacing:.08em}
html[data-portal-theme="studio"] td{border-bottom-color:#eeeeF1;color:#35363b}
html[data-portal-theme="studio"] tr:last-child td{border-bottom:0}
html[data-portal-theme="studio"] .slide-item,
html[data-portal-theme="studio"] .speaker-management-card,
html[data-portal-theme="studio"] .device-card{
  border-color:#e8e9ed!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:none!important;
}
html[data-portal-theme="studio"] .row-actions button,
html[data-portal-theme="studio"] .command-grid button{
  border-color:#e4e5e8!important;
  border-radius:10px!important;
  background:#f8f8f9!important;
  color:#4e5057!important;
}

/* Settings theme library */
html[data-portal-theme="studio"] .portal-settings-nav{
  top:12px;
  padding:8px;
  border:1px solid var(--portal-border)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 24px rgba(27,30,38,.05)!important;
}
html[data-portal-theme="studio"] .portal-settings-nav button{
  border-radius:12px!important;
  background:transparent!important;
  color:#666970!important;
}
html[data-portal-theme="studio"] .portal-settings-nav button.active{
  background:#17181c!important;
  color:#fff!important;
}
html[data-portal-theme="studio"] .portal-theme-card{border-radius:18px!important;border-color:#e7e8eb!important;background:#fff!important;box-shadow:none!important}
html[data-portal-theme="studio"] .portal-theme-card.selected{border-color:#17181c!important;box-shadow:0 0 0 2px #17181c inset!important}
.preview-studio{background:linear-gradient(145deg,#f7f7f9 0 28%,#e7e9fb 28% 55%,#dcefe6 55% 78%,#dfff57 78%)}

/* Dialogs */
html[data-portal-theme="studio"] dialog::backdrop{background:rgba(30,31,36,.34);backdrop-filter:blur(8px)}
html[data-portal-theme="studio"] .dialog-head{border-bottom:1px solid #ececef}
html[data-portal-theme="studio"] .dialog-actions{border-top:1px solid #ececef}

/* Login */
html[data-portal-theme="studio"] body:has(#loginView:not(.hidden)){
  padding:0;
  background:#eff0f3!important;
}
html[data-portal-theme="studio"] .login-shell{
  min-height:100vh;
  padding:28px;
  background:radial-gradient(circle at 18% 14%,rgba(224,227,249,.8),transparent 34%),radial-gradient(circle at 82% 80%,rgba(220,239,230,.9),transparent 32%),#eff0f3!important;
}
html[data-portal-theme="studio"] .login-card{
  width:min(430px,100%);
  padding:34px;
  border:1px solid #fff!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.92)!important;
  color:#17181c!important;
  box-shadow:0 24px 70px rgba(30,33,41,.11)!important;
  backdrop-filter:blur(20px)!important;
}
html[data-portal-theme="studio"] .login-card .brand-mark{background:#17181c!important;color:#fff!important;box-shadow:none!important}
html[data-portal-theme="studio"] .login-card h1{color:#17181c!important;letter-spacing:-.04em}
html[data-portal-theme="studio"] .login-card p,
html[data-portal-theme="studio"] .login-card small{color:#858890!important}
html[data-portal-theme="studio"] .login-card input{background:#f6f6f7!important;color:#17181c!important;border-color:#e4e5e8!important}
html[data-portal-theme="studio"] .login-card .primary{width:100%;background:#17181c!important;color:#fff!important}
html[data-portal-theme="studio"] .login-card .qr-login-start{border-radius:999px!important;background:#edf0fb!important;color:#3c4052!important;border-color:#e1e5f4!important}

/* Compact option becomes a real compact desktop sidebar */
@media(min-width:1001px){
  html[data-portal-theme="studio"] body.compact-sidebar .app-shell{grid-template-columns:88px minmax(0,1fr)}
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar{padding-left:12px;padding-right:12px}
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar .brand>div:last-child,
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar .nav-groups summary,
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar nav span,
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar-search input{display:none!important}
  html[data-portal-theme="studio"] body.compact-sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups button[data-page]{justify-content:center;padding:8px}
  html[data-portal-theme="studio"] body.compact-sidebar .nav-groups button[data-page] b{width:31px;height:31px}
  html[data-portal-theme="studio"] body.compact-sidebar .sidebar-search{justify-content:center;padding:8px!important}
}

@media(max-width:1180px){
  html[data-portal-theme="studio"] .app-shell{grid-template-columns:210px minmax(0,1fr)}
  html[data-portal-theme="studio"] main{padding-left:20px;padding-right:20px}
  html[data-portal-theme="studio"] .ops-layout{grid-template-columns:1fr!important}
  html[data-portal-theme="studio"] .ops-preview{position:static!important}
}

@media(max-width:1000px){
  html[data-portal-theme="studio"] body{padding:10px}
  html[data-portal-theme="studio"] .app-shell{min-height:calc(100vh - 20px);border-radius:24px;grid-template-columns:80px 1fr}
  html[data-portal-theme="studio"] .sidebar{top:10px;height:calc(100vh - 20px);border-radius:24px 0 0 24px}
  html[data-portal-theme="studio"] main{padding:0 16px 28px}
  html[data-portal-theme="studio"] .topbar h2{font-size:24px}
}

@media(max-width:650px){
  html[data-portal-theme="studio"] body{padding:0;background:#fbfbfc!important}
  html[data-portal-theme="studio"] .app-shell{display:block;min-height:100vh;border:0;border-radius:0;box-shadow:none}
  html[data-portal-theme="studio"] main{padding:0 13px 96px}
  html[data-portal-theme="studio"] .topbar{min-height:78px;padding-top:12px}
  html[data-portal-theme="studio"] .ops-dashboard-head{padding-top:20px;align-items:flex-start;flex-direction:column}
  html[data-portal-theme="studio"] .ops-dashboard-head h2{font-size:28px}
  html[data-portal-theme="studio"] .cards.ops-summary{grid-template-columns:1fr 1fr}
  html[data-portal-theme="studio"] .stat-card{min-height:118px;padding:15px}
  html[data-portal-theme="studio"] .stat-card strong{font-size:27px}
  html[data-portal-theme="studio"] .panel{padding:15px;border-radius:18px!important}
  html[data-portal-theme="studio"] .sidebar{border-radius:0!important}
}

@media(max-width:430px){
  html[data-portal-theme="studio"] .cards.ops-summary{grid-template-columns:1fr}
  html[data-portal-theme="studio"] .stat-card{min-height:105px}
}

/* Mobile drawer follows Studio Light instead of the legacy green drawer. */
@media(max-width:800px){
  html[data-portal-theme="studio"] .mobile-menu-toggle{background:#17181c!important;box-shadow:0 10px 24px rgba(22,23,27,.18)!important}
  html[data-portal-theme="studio"] .mobile-menu-overlay{background:rgba(24,25,29,.42)!important;backdrop-filter:blur(5px)!important}
  html[data-portal-theme="studio"] #portalSidebar.sidebar{
    background:#fbfbfc!important;
    color:#17181c!important;
    border-right:1px solid #e7e8ec!important;
    box-shadow:18px 0 50px rgba(28,31,39,.13)!important;
  }
  html[data-portal-theme="studio"] .mobile-sidebar-head{
    color:#17181c!important;
    background:rgba(251,251,252,.96)!important;
    border-bottom:1px solid #e7e8ec;
  }
  html[data-portal-theme="studio"] .mobile-sidebar-head button{border-color:#e2e3e7!important;background:#f2f2f4!important;color:#17181c!important}
  html[data-portal-theme="studio"] .mobile-menu-rail-close{background:#17181c!important;color:#fff!important}
  html[data-portal-theme="studio"] #portalSidebar .brand{border-bottom-color:#e7e8ec!important}
  html[data-portal-theme="studio"] #portalSidebar nav.nav-groups summary{color:#95979e!important}
  html[data-portal-theme="studio"] #portalSidebar nav.nav-groups button{color:#65676e!important}
  html[data-portal-theme="studio"] #portalSidebar nav.nav-groups button.active{background:#17181c!important;color:#fff!important}
  html[data-portal-theme="studio"] #portalSidebar>#logoutBtn{border-color:#ead7d4!important;background:#f7e3df!important;color:#943d34!important;box-shadow:none!important}
}