/* UJIVA R51 — total admin UI cleanup and mobile performance layer */
:root{
  --a51-bg:#f4f6fa;--a51-card:#fff;--a51-ink:#17243a;--a51-muted:#6e7d90;
  --a51-line:#dce3ec;--a51-blue:#245fc3;--a51-indigo:#4338ca;--a51-soft:#f6f8fb;
  --a51-danger:#c83d49;--a51-ok:#158253;--a51-radius:18px;
}
html{scroll-behavior:auto!important;-webkit-text-size-adjust:100%;background:var(--a51-bg)}
body{background:var(--a51-bg)!important;color:var(--a51-ink)!important;overflow-x:hidden!important;overscroll-behavior-y:auto!important}
*{min-width:0}
button,a,input,select,textarea{touch-action:manipulation}
button{transition:background-color .12s ease,border-color .12s ease,transform .08s ease!important}
button:active{transform:scale(.985)}
.touchRipple{display:none!important}

/* Header */
.top{position:sticky!important;top:0!important;z-index:80!important;padding:0!important;background:linear-gradient(135deg,#101938,#272269)!important;box-shadow:0 2px 10px rgba(14,27,55,.14)!important}
.topin{max-width:1440px!important;min-height:64px!important;margin:auto!important;padding:8px 18px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;gap:10px!important}
.brand{font-size:18px!important;font-weight:900!important;line-height:1.15!important;color:#fff!important;overflow-wrap:anywhere}
.who{margin:0!important;max-width:360px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#dce6fa!important}
#logout,.adminR51MenuButton{min-height:42px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:13px!important;padding:8px 14px!important;font-weight:850!important}
#logout{background:rgba(255,255,255,.94)!important;color:#182841!important}
.adminR51MenuButton{display:none;background:rgba(255,255,255,.12)!important;color:#fff!important}

/* Main shell */
.wrap{max-width:1440px!important;margin:0 auto!important;padding:18px 18px 44px!important}
#panel:not(.hidden){display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
#panel>.tabs{grid-column:1!important;grid-row:1!important;display:grid!important;gap:5px!important;position:sticky!important;top:82px!important;max-height:calc(100dvh - 100px)!important;overflow:auto!important;margin:0!important;padding:9px!important;background:#fff!important;border:1px solid var(--a51-line)!important;border-radius:18px!important;box-shadow:0 5px 18px rgba(27,45,72,.06)!important;scrollbar-width:thin!important}
#panel>.tabs .tab{width:100%!important;min-height:43px!important;padding:9px 11px!important;text-align:left!important;justify-content:flex-start!important;white-space:normal!important;line-height:1.25!important;border-radius:11px!important;background:transparent!important;color:#516075!important;box-shadow:none!important}
#panel>.tabs .tab.active{background:#edf2ff!important;color:#2d2aa2!important;box-shadow:none!important}
#panel>div[id$="Tab"]{grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important}
.adminR44Menu{display:none!important}

/* Surfaces */
.card,.bundleHero,.package,.qrow,.payment,.dataRow,.packageAccessRow,.importbox,.packageFilterBox,.userPackageFilterBox{border:1px solid var(--a51-line)!important;background:#fff!important;box-shadow:none!important}
.card{border-radius:20px!important;padding:18px!important}
.bundleHero{border-radius:20px!important;padding:18px!important;background:linear-gradient(180deg,#f7fbff,#f9fcff)!important}
.package,.qrow,.payment,.dataRow,.packageAccessRow{border-radius:16px!important}
.package:hover,.qrow:hover,.dataRow:hover{box-shadow:none!important;background:#fbfcfe!important}
.bar{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important}
.bar>div{min-width:0!important;flex:1 1 280px!important}
.bar h2,.bar h3{margin:0!important;line-height:1.25!important;overflow-wrap:anywhere!important}
.muted,.meta,.small,.packageMeta,.fileHint{color:var(--a51-muted)!important;overflow-wrap:anywhere!important;word-break:normal!important}
.meta{line-height:1.5!important}

/* Buttons and forms */
.primary,.secondary,.danger,.ghost{min-height:42px!important;border-radius:12px!important;padding:9px 13px!important;font-weight:820!important;line-height:1.25!important;white-space:normal!important;box-shadow:none!important}
.primary{background:var(--a51-indigo)!important;color:#fff!important}
.secondary{background:#edf1f7!important;color:#253a55!important}
.danger{background:#fff0f1!important;color:var(--a51-danger)!important}
.ghost{background:#fff!important;border:1px solid var(--a51-line)!important;color:#335a90!important}
.field{min-width:0!important}
.field label{font-size:12px!important;line-height:1.3!important}
.field input,.field textarea,.field select,.searchRow input{width:100%!important;max-width:100%!important;min-height:44px!important;border:1.5px solid var(--a51-line)!important;border-radius:12px!important;padding:10px 12px!important;background:#fff!important;color:var(--a51-ink)!important;box-shadow:none!important;outline:none!important}
.field input:focus,.field textarea:focus,.field select:focus,.searchRow input:focus{border-color:#7aa4e8!important;box-shadow:0 0 0 3px rgba(62,115,204,.10)!important}
.field textarea{min-height:96px!important;line-height:1.5!important}
input[type=file]{overflow:hidden!important;text-overflow:ellipsis!important}

/* Lists/cards */
.dataGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:15px!important}
.dataRow{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important;padding:15px!important;overflow:hidden!important;content-visibility:auto!important;contain-intrinsic-size:auto 180px!important}
.dataRow>div{min-width:0!important;overflow-wrap:anywhere!important}
.dataRow .dataActions{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;gap:8px!important;justify-content:stretch!important}
.dataActions button{width:100%!important}
.package-list,.q-list,.packageAccessList{display:grid!important;gap:10px!important;overflow:visible!important;max-height:none!important}
.package,.qrow,.packageAccessRow{padding:13px!important;overflow:hidden!important;content-visibility:auto!important;contain-intrinsic-size:auto 150px!important}
.qtext{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-height:1.5!important;overflow-wrap:anywhere!important}
.pkghead,.packageAccessRow{min-width:0!important}
.pkghead>*{min-width:0!important}
.bundleFlow{gap:6px!important}
.bundleFlow span{font-size:11px!important;line-height:1.25!important;padding:5px 8px!important}
.pill,.fieldTag,.packageState{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.25!important}
.searchRow{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:end!important}

/* Workspaces and filters */
.split{display:grid!important;grid-template-columns:minmax(300px,340px) minmax(0,1fr)!important;gap:14px!important;align-items:start!important}
.workspaceCard{min-height:0!important}
.packageFilterGrid,.packageAccessFilters{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.packageFilterActions{grid-template-columns:minmax(0,1fr) auto!important}
.questionToolbar,.bulkLine,.formatGrid,.packageAccessToolbar{gap:8px!important}
.emptyState{min-height:140px!important}

/* Dialogs */
.dialog{background:rgba(12,22,42,.55)!important;backdrop-filter:none!important}
.dialogbox{width:min(760px,calc(100vw - 28px))!important;max-height:90dvh!important;overflow:auto!important;overscroll-behavior:contain!important;border-radius:20px!important;padding:18px!important;box-shadow:0 18px 50px rgba(11,28,50,.18)!important}
.dialogbox .bar{position:sticky!important;top:-18px!important;z-index:3!important;margin:-18px -18px 12px!important;padding:16px 18px 12px!important;background:#fff!important;border-bottom:1px solid #edf1f5!important}

/* Option image editor */
.option-grid,.option-grid.r50OptionGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.optionImageEditor{background:#f8fafc!important;border-color:var(--a51-line)!important;box-shadow:none!important}
.optionImagePreview{min-height:56px!important}
.optionImagePreview.hasImage{min-height:100px!important}
.optionImagePreview img{max-height:180px!important}

/* R51 mobile admin: no sticky selector overlay */
@media(max-width:850px){
  body{font-size:14px!important;padding-bottom:calc(14px + env(safe-area-inset-bottom))!important}
  .top{position:sticky!important;height:auto!important;padding:0!important}
  .topin{min-height:58px!important;height:auto!important;padding:8px 12px!important;grid-template-columns:minmax(0,1fr) auto auto!important}
  .brand{font-size:16px!important}
  .who{display:none!important}
  .adminR51MenuButton{display:inline-flex!important;align-items:center!important;justify-content:center!important}
  #logout{min-height:40px!important;padding:7px 11px!important;font-size:13px!important}
  .wrap{padding:12px 10px 28px!important;margin:0 auto!important}
  #panel:not(.hidden){display:block!important}
  #panel>.tabs{display:none!important}
  #panel>div[id$="Tab"]{display:block;min-width:0!important}
  #panel>div[id$="Tab"].hidden{display:none!important}
  .card,.bundleHero{padding:14px!important;border-radius:17px!important}
  .bar{gap:9px!important}
  .bar>div{flex-basis:210px!important}
  .bar h2{font-size:18px!important}
  .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  .actions>*{width:100%!important;min-width:0!important}
  .grid2,.grid3,.split,.option-grid,.option-grid.r50OptionGrid{grid-template-columns:1fr!important}
  .dataGrid{grid-template-columns:1fr!important;gap:10px!important}
  .dataRow{grid-template-columns:1fr!important;gap:8px!important;padding:13px!important}
  .dataRow .dataActions{grid-template-columns:1fr 1fr!important}
  .searchRow{grid-template-columns:minmax(0,1fr) 84px!important}
  .packageFilterGrid,.packageAccessFilters,.packageFilterActions,.packageAccessToolbar.r40{grid-template-columns:1fr!important}
  .packageFilterBox,.userPackageFilterBox{padding:10px!important}
  .package,.qrow,.payment,.packageAccessRow{padding:12px!important;border-radius:14px!important}
  .bundleHero .bar .pill{justify-self:start!important}
  .bundleFlow{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important;scrollbar-width:none!important;overscroll-behavior-x:contain!important}
  .bundleFlow::-webkit-scrollbar{display:none!important}
  .bundleFlow span{flex:0 0 auto!important}
  .dialog{align-items:end!important;padding:0!important}
  .dialogbox{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:24px 24px 0 0!important;padding:16px 14px calc(18px + env(safe-area-inset-bottom))!important;animation:none!important}
  .dialogbox .bar{top:-16px!important;margin:-16px -14px 10px!important;padding:14px!important}
  .optionImagePreview img{max-height:150px!important}
  .aiQuestionDialog .dialogbox{height:auto!important;max-height:92dvh!important;border-radius:24px 24px 0 0!important}
}
@media(max-width:460px){
  .actions{grid-template-columns:1fr!important}
  .dataRow .dataActions{grid-template-columns:1fr 1fr!important}
  .dataRow .dataActions:has(button:only-child){grid-template-columns:1fr!important}
  .filterPager .pagerButtons{grid-template-columns:1fr 1fr!important}
  .filterPager .packageListCountBadge{grid-column:1/-1!important;text-align:center!important;justify-self:center!important}
}

/* Navigation bottom-sheet */
.adminR51Sheet{position:fixed;inset:0;z-index:200;background:rgba(10,20,38,.45);display:none;align-items:end;justify-content:center;padding:0}
.adminR51Sheet.open{display:flex}
.adminR51SheetPanel{width:min(560px,100%);max-height:min(76dvh,680px);overflow:auto;background:#fff;border-radius:24px 24px 0 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -14px 44px rgba(15,32,58,.16)}
.adminR51SheetHandle{width:44px;height:5px;border-radius:99px;background:#d7dee8;margin:4px auto 12px}
.adminR51SheetHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.adminR51SheetHead strong{font-size:18px}
.adminR51SheetClose{width:42px;height:42px;border:0;border-radius:50%;background:#eef2f7;color:#31455f;font-size:20px}
.adminR51SheetList{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adminR51SheetList button{min-height:52px;border:1px solid var(--a51-line);border-radius:14px;background:#f8fafc;color:#2d405b;text-align:left;padding:10px 12px;font-weight:800}
.adminR51SheetList button.active{border-color:#9ea5ff;background:#efefff;color:#342aad}
@media(min-width:851px){.adminR51Sheet{display:none!important}}
.r51SectionToggle{width:100%;min-height:48px;margin:0 0 10px;border:1px solid var(--a51-line);border-radius:14px;background:#fff;color:#2d405b;padding:10px 13px;font-weight:850;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px}
.r51SectionToggle:after{content:'▾';font-size:16px;color:#708198;transition:transform .14s ease}
.r51SectionToggle.open:after{transform:rotate(180deg)}
.r51AdminAdvanced.r51Collapsed{display:none!important}