:root{
  --oilora-app-sidebar:272px;
  --oilora-app-sidebar-collapsed:88px;
  --oilora-app-topbar:72px;
  --oilora-app-canvas:#f7faf9;
  --oilora-public-canvas:#fff;
  --oilora-content-max:1560px;
  --oilora-content-gutter:clamp(16px,2.2vw,32px);
  --oilora-ui-radius:var(--oilora-radius-lg);
  --oilora-ui-border:var(--oilora-border);
  --oilora-ui-shadow:var(--oilora-shadow-sm);
}

html,body{min-height:100%;}
body{overflow-x:hidden;}
#app{min-height:100dvh;}

/* Public canvas is intentionally light regardless of the management theme. */
html[data-oilora-area="public"],
html[data-oilora-area="public"] body,
body.oilora-surface-public,
body.oilora-surface-public #app,
body.oilora-surface-public .oilora-home,
body.oilora-surface-public .public-page,
body.oilora-surface-public .public-shell{
  background:var(--oilora-public-canvas)!important;
  color-scheme:light;
}

/* Canonical desktop application shell: sidebar never participates in page scroll. */
@media (min-width:981px){
  .shell[data-admin-shell]{
    display:block!important;
    min-height:100dvh;
    width:100%;
    background:var(--oilora-app-canvas);
  }
  .shell[data-admin-shell]>.sidebar{
    position:fixed!important;
    inset-block:0!important;
    inset-inline-start:0!important;
    top:0!important;
    width:var(--oilora-app-sidebar)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:60!important;
    overscroll-behavior:contain;
  }
  .shell[data-admin-shell].sidebar-collapsed>.sidebar{
    width:var(--oilora-app-sidebar-collapsed)!important;
  }
  .shell[data-admin-shell]>.main{
    min-width:0!important;
    width:calc(100% - var(--oilora-app-sidebar))!important;
    margin-inline-start:var(--oilora-app-sidebar)!important;
    min-height:100dvh!important;
    background:var(--oilora-app-canvas)!important;
  }
  .shell[data-admin-shell].sidebar-collapsed>.main{
    width:calc(100% - var(--oilora-app-sidebar-collapsed))!important;
    margin-inline-start:var(--oilora-app-sidebar-collapsed)!important;
  }
  .shell[data-admin-shell] .sidebar-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .shell[data-admin-shell] .sidebar-foot,
  .shell[data-admin-shell] .side-brand{flex:0 0 auto!important;}
  .shell[data-admin-shell]>.main>.topbar{
    position:sticky!important;
    inset-block-start:0!important;
    top:0!important;
    z-index:45!important;
    min-height:var(--oilora-app-topbar)!important;
    background:color-mix(in srgb,var(--panel,#fff) 94%,transparent)!important;
    border-bottom:1px solid var(--oilora-ui-border)!important;
    box-shadow:0 1px 0 rgba(15,40,26,.015)!important;
    backdrop-filter:blur(16px) saturate(1.08);
  }
}

/* Content frame is one source of truth across all admin modules. */
body.oilora-surface-admin{background:var(--oilora-app-canvas)!important;}
.shell[data-admin-shell]>.main>.content{
  width:min(100%,var(--oilora-content-max))!important;
  max-width:var(--oilora-content-max)!important;
  min-width:0;
  min-height:calc(100dvh - var(--oilora-app-topbar));
  margin-inline:auto!important;
  padding:26px var(--oilora-content-gutter) 48px!important;
}
.shell[data-admin-shell] .page-head{
  gap:16px!important;
  margin-block-end:20px!important;
}
.shell[data-admin-shell] .page-head h1{
  margin:0!important;
  font-size:clamp(22px,2vw,28px)!important;
  line-height:1.35!important;
  letter-spacing:-.015em;
}
.shell[data-admin-shell] .page-head p{
  max-width:780px;
  margin-block-start:6px!important;
  line-height:1.9!important;
}
.shell[data-admin-shell] :where(.card,.stat){
  border-color:var(--oilora-ui-border)!important;
  box-shadow:var(--oilora-ui-shadow)!important;
}
.shell[data-admin-shell] :where(.table-wrap,.mobile-table-scroll){
  max-width:100%;
  overflow:auto;
  overscroll-behavior-inline:contain;
}
.shell[data-admin-shell] :where(input,select,textarea,button,a){
  -webkit-tap-highlight-color:transparent;
}
.shell[data-admin-shell] :where(button,a,input,select,textarea):focus-visible{
  outline:3px solid var(--oilora-focus)!important;
  outline-offset:2px!important;
}

/* Route error/loading guard: never leave a blank management canvas. */
html[data-oilora-route-state="loading"] body.oilora-surface-admin .content:empty::before{
  content:"در حال آماده‌سازی صفحه…";
  min-height:180px;
  display:grid;
  place-items:center;
  color:#68776f;
  font-size:13px;
}
html[data-oilora-route-state="error"] body.oilora-surface-admin .content:empty::before{
  content:"بارگذاری صفحه کامل نشد. دوباره تلاش کنید.";
  min-height:180px;
  display:grid;
  place-items:center;
  color:#9b2c2c;
  font-size:13px;
}

/* Tablet/mobile: sidebar becomes a true drawer and content owns the viewport. */
@media (max-width:980px){
  :root{--oilora-app-topbar:68px;}
  .shell[data-admin-shell],.shell[data-admin-shell].sidebar-collapsed{display:block!important;min-height:100dvh!important;}
  .shell[data-admin-shell]>.main,
  .shell[data-admin-shell].sidebar-collapsed>.main{
    width:100%!important;
    margin:0!important;
    min-height:100dvh!important;
  }
  .shell[data-admin-shell]>.sidebar,
  .shell[data-admin-shell].sidebar-collapsed>.sidebar{
    position:fixed!important;
    inset-block:0!important;
    right:-310px!important;
    left:auto!important;
    width:min(286px,88vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:70!important;
    transition:right .22s ease!important;
  }
  html[dir="ltr"] .shell[data-admin-shell]>.sidebar,
  html[dir="ltr"] .shell[data-admin-shell].sidebar-collapsed>.sidebar{left:-310px!important;right:auto!important;transition:left .22s ease!important;}
  .shell[data-admin-shell]>.sidebar.open{right:0!important;}
  html[dir="ltr"] .shell[data-admin-shell]>.sidebar.open{left:0!important;right:auto!important;}
  .shell[data-admin-shell] .sidebar-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;}
  .shell[data-admin-shell] .sidebar-collapsed .nav-label{display:initial;}
  .shell[data-admin-shell]>.main>.topbar{position:sticky!important;top:0!important;z-index:50!important;}
  .shell[data-admin-shell]>.main>.content{width:100%!important;max-width:none!important;padding:20px 14px 96px!important;}
}

@media (max-width:640px){
  .shell[data-admin-shell]>.main>.content{padding-inline:12px!important;}
  .shell[data-admin-shell] .page-head{align-items:flex-start!important;flex-direction:column!important;}
  .shell[data-admin-shell] .page-actions{width:100%;}
  .shell[data-admin-shell] .page-actions>.btn{min-height:42px;}
}

@media (prefers-reduced-motion:reduce){
  .shell[data-admin-shell]>.sidebar{transition:none!important;}
}