/* Presentation only, requests 2–7. No selectors change the admin header/toolbar,
   visibility, data values, permission rules, table columns, or control order. */
:root {
  --polish-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --polish-ink: #18243d;
  --polish-muted: #64748b;
  --polish-line: #e3e8f1;
  --polish-row: #f8fafd;
  --polish-hover: #f0f4ff;
  --polish-surface: #fff;
}
html.dark {
  --polish-ink: #e8edf7;
  --polish-muted: #b0bdd1;
  --polish-line: #34435a;
  --polish-row: #1a273b;
  --polish-hover: #263653;
  --polish-surface: #1e293b;
}
.admin-main, .admin-dashboard > .fixed, .ui-dialog, .ui-toast,
.public-portal-icons, .page-shell .form-wrap { font-family: var(--polish-font); }
.admin-main :is(button, input, select, textarea), .admin-dashboard > .fixed :is(button, input, select, textarea) { font-family: inherit; }
.admin-main :is(h2, h3), .public-portal-icons :is(h1, h2, h3, h4) { letter-spacing: -.025em; }
.admin-main :is([id^="stat"], [id^="metricOngkir"], [id^="workspaceCount"]), .admin-main input[type="number"], .admin-main .text-right { font-variant-numeric: tabular-nums; }
.admin-dashboard::before { opacity: .4; }

/* 2. Compact dashboard, preserving every metric and its existing action. */
.admin-main > * + *, .admin-main > [id^="view"] > * + * { margin-top: 16px !important; }
.admin-main .dashboard-hero {
  padding: 19px 22px !important;
  border: 1px solid #ffffff12;
  border-radius: 18px;
  background: radial-gradient(ellipse at 100% 0, #6366f12b, transparent 65%), linear-gradient(120deg, #172247, #28245b) !important;
}
.admin-main .dashboard-hero h2 { font-size: clamp(21px, 1.9vw, 26px) !important; font-weight: 700; line-height: 1.3 !important; }
.admin-main .dashboard-hero p { color: #c2cce5; line-height: 1.65; }
.admin-main .workspace-summary { gap: 12px; }
.admin-main .workspace-metric { padding: 15px 16px; border-radius: 15px; box-shadow: 0 2px 5px #18243d03; }
.admin-main .workspace-metric-label { font-size: 12px; font-weight: 600; color: var(--polish-ink); }
.admin-main .workspace-metric small { color: var(--polish-muted); line-height: 1.55; }
.admin-main .workspace-metric strong { font-size: 26px; letter-spacing: -.04em; }
.admin-main .workspace-metric > .ui-icon { width: 17px; height: 17px; padding: 8px; border-radius: 11px; }
.admin-main > [id^="view"] > .grid:first-child { gap: 10px; }
.admin-main > [id^="view"] > .grid:first-child > div:has([id^="stat"]) {
  min-height: 76px;
  padding: 13px 15px !important;
  border: 1px solid var(--polish-line) !important;
  border-radius: 15px !important;
  box-shadow: 0 2px 6px #18243d03 !important;
}
.admin-main > [id^="view"] > .grid:first-child > div:has([id^="stat"])::before { width: 3px; opacity: .28; }
.admin-main > [id^="view"] > .grid:first-child > div:has([id^="stat"]) > p { font-size: 10px; font-weight: 600; letter-spacing: .035em; line-height: 1.5; }
.admin-main > [id^="view"] > .grid:first-child > div:has([id^="stat"]) h3 { margin-top: 3px; font-size: 23px; font-weight: 700; line-height: 1.25; }
.admin-main > [id^="view"] > .bg-white { border-radius: 17px !important; box-shadow: 0 3px 12px #18243d04 !important; }
.admin-main .workspace-columns { border-radius: 13px; }
.admin-main .workspace-columns > summary { padding-block: 11px; }

/* 3–4. Clear type hierarchy and quiet, readable tables. Semantic colored cells,
   existing alignments, sticky columns, and read-only/selected states survive. */
.admin-main .workspace-table-scroll thead th {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: .04em;
  padding-block: 13px;
  color: var(--polish-muted) !important;
  border-color: var(--polish-line) !important;
}
.admin-main .workspace-table-scroll tbody td { padding-block: 12px !important; line-height: 1.6; border-color: var(--polish-line) !important; }
.admin-main .workspace-table-scroll tbody tr:not([class*="bg-rose-"]):not([class*="bg-amber-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]):nth-child(even) > td:not([class*="bg-rose-"]):not([class*="bg-amber-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]) { background: var(--polish-row) !important; }
.admin-main .workspace-table-scroll tbody tr:not([class*="bg-rose-"]):not([class*="bg-amber-"]):hover > td:not([class*="bg-rose-"]):not([class*="bg-amber-"]):not([class*="bg-emerald-"]):not([class*="bg-indigo-"]) { background: var(--polish-hover) !important; }
.admin-main .workspace-table-scroll tbody tr:has(input[type="checkbox"]:checked) > td:not([class*="bg-rose-"]):not([class*="bg-amber-"]) { background: var(--polish-hover) !important; }
.admin-main [data-ui-content] { font-weight: 600; }
.admin-main .workspace-row-trigger { border-radius: 10px; font-weight: 600; box-shadow: none; }
.admin-main .workspace-scroll-hint { font-size: 10px; line-height: 1.5; color: var(--polish-muted); }

/* 5. Consistent badge geometry. Color follows existing status classes, not
   guessed text or recalculated workflow state. CRM identity colors stay distinct. */
:is(.admin-main td, #authorEventGrid, #activeThemeGrid) span[class*="rounded"][class*="bg-"]:not([class*=" w-"]):not([class*=" h-"]):not([class*="absolute"]) {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
}
:is(.admin-main td, #authorEventGrid, #activeThemeGrid) span:is([class*="bg-emerald-50"], [class*="bg-emerald-100"]):not([class*=" w-"]):not([class*=" h-"]) { background-color: #ecfdf5; color: #047857; border-color: #bbf7d0; }
:is(.admin-main td, #authorEventGrid, #activeThemeGrid) span:is([class*="bg-amber-50"], [class*="bg-amber-100"]):not([class*=" w-"]):not([class*=" h-"]) { background-color: #fffbeb; color: #92400e; border-color: #fde68a; }
:is(.admin-main td, #authorEventGrid, #activeThemeGrid) span:is([class*="bg-rose-50"], [class*="bg-rose-100"]):not([class*=" w-"]):not([class*=" h-"]) { background-color: #fff1f2; color: #be123c; border-color: #fecdd3; }
html.dark .admin-main td span:is([class*="bg-emerald-50"], [class*="bg-emerald-100"]) { background-color: #123d33; color: #6ee7b7; border-color: #24624e; }
html.dark .admin-main td span:is([class*="bg-amber-50"], [class*="bg-amber-100"]) { background-color: #3b321d; color: #fde68a; border-color: #6b5526; }
html.dark .admin-main td span:is([class*="bg-rose-50"], [class*="bg-rose-100"]) { background-color: #422737; color: #fda4af; border-color: #73404e; }

/* 6. Public portal: publisher-blue identity, soft surfaces and simpler emphasis. */
.public-portal-icons { background-color: #f7f9fc; color: #24334b; }
.public-portal-icons .portal-hero { background: radial-gradient(ellipse at 90% 0%, #5b8af52b, transparent 65%), linear-gradient(125deg, #103d80 0%, #1559ac 58%, #173e7c 100%); }
.portal-hero h1 { font-weight: 800; letter-spacing: -.04em; line-height: 1.14; text-wrap: balance; }
.portal-hero h1 > span { color: #a9daff; }
.portal-hero > div > .grid > div > p { color: #dfebff; line-height: 1.75; }
.public-portal-icons .portal-search-card { border: 1px solid #dce7f4; border-radius: 21px; box-shadow: 0 14px 36px #102e5c18; }
.portal-search-modes { background: #f0f4fa; border: 1px solid #e9eef6; border-radius: 13px; }
.portal-search-modes > :is(button, a) { font-weight: 600; border-radius: 9px; }
.portal-search-modes > button.bg-white { box-shadow: 0 2px 5px #173e7c0d; color: #154b91; }
.public-portal-icons #portalSearchInput { background: #f9fbfe; border-color: #dce4ef; border-radius: 12px; font-weight: 500; box-shadow: 0 1px 2px #18243d03; }
.public-portal-icons #portalSearchInput:focus { background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px #3b82f61a; }
.public-portal-icons #portalSearchInput::placeholder { color: #8190a7; }
.public-portal-icons #portalSearchForm + div > span:last-child { color: #64748b; }
.public-portal-icons #btnSubmitSearch { border-radius: 12px; background: #164c99; box-shadow: 0 3px 7px #164c991f; font-weight: 600; }
.public-portal-icons #btnSubmitSearch:hover { background: #123e7c; }
.public-portal-icons #suggestDropdown { border-color: #dce4ef; border-radius: 13px; box-shadow: 0 14px 40px #18243d1a; }
.public-portal-icons .portal-quick-nav { border-bottom-color: #e1e7f0; box-shadow: 0 2px 6px #18243d03; }
.public-portal-icons .portal-quick-nav button { font-weight: 600; }
.public-portal-icons #sectionCatalog > div:first-child { margin-bottom: 24px; }
.public-portal-icons #sectionCatalog h2 { font-weight: 700; line-height: 1.3; text-wrap: balance; }
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) > div {
  border: 1px solid #e0e7f1;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fcfdff);
  box-shadow: 0 3px 10px #18243d04;
}
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) > div:hover { border-color: #b8cdee; box-shadow: 0 7px 20px #18243d09; }
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) h4 { font-weight: 700; line-height: 1.5; }
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) a { border-radius: 11px; box-shadow: none; font-weight: 600; }
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) a[class*="bg-emerald-600"] { background: #058563; }
.public-portal-icons :is(#activeThemeGrid, #authorEventGrid) a[class*="bg-emerald-600"]:hover { background: #047857; }
.public-portal-icons #sectionTrackingDetail > div { border-color: #e0e7f1; border-radius: 21px; box-shadow: 0 5px 20px #18243d07; }
.public-portal-icons #tk_bookTitle { font-weight: 700; line-height: 1.3; }
.public-portal-icons #tk_bookTitle + div { color: #64748b; }
.public-portal-icons [id^="tk_info"] { font-weight: 600; line-height: 1.6; }
.public-portal-icons #sectionTrackingDetail div:has(> [id^="tk_info"]) > span:first-child { color: #64748b; font-weight: 600; }
.public-portal-icons #tk_badgeStatusHeader { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; font-weight: 600; box-shadow: none; }
.public-portal-icons #tk_badgeStatusHeader > span:first-child { background: #3b82f6; }
.public-portal-icons:has(#step_node_8 .step-bubble.text-blue-600) #tk_badgeStatusHeader { color: #047857; background: #ecfdf5; border-color: #bbf7d0; }
.public-portal-icons:has(#step_node_8 .step-bubble.text-blue-600) #tk_badgeStatusHeader > span:first-child { background: #10b981; }
.public-portal-icons .portal-stepper .step-bubble { box-shadow: none; }
.public-portal-icons .portal-stepper [id^="step_node_"] > span { font-weight: 500; }
.public-portal-icons #catalogPagination { border-color: #e1e7f0; margin-top: 26px; }
.public-portal-icons #catalogPageButtons button { border-radius: 10px; font-weight: 600; box-shadow: none; }
.public-portal-icons footer { background: #14223c; border-color: #26364f; line-height: 1.7; }
.public-portal-icons footer .text-slate-500 { color: #a5b2c8; }

/* 7. Shared form rhythm and dialogs. Keep native field types, validation,
   scroll limits, control visibility, and the established center positioning. */
.admin-dashboard > .fixed.inset-0:not(#modalRoleSelector) > div:first-child { border: 1px solid var(--polish-line); border-radius: 20px; box-shadow: 0 22px 70px #0f172a2b; }
.admin-dashboard > .fixed.inset-0:not(#modalRoleSelector) :is(h2, h3) { font-weight: 700; letter-spacing: -.025em; line-height: 1.4; }
.admin-dashboard > .fixed label, .page-shell .form-wrap label { font-weight: 600; line-height: 1.5; }
.admin-dashboard > .fixed :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { border-radius: 11px !important; font-family: var(--polish-font); font-weight: 500; line-height: 1.5; }
.admin-dashboard > .fixed :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: 2px solid #818cf866; outline-offset: 1px; }
.admin-dashboard > .fixed.inset-0 :is(button[type="submit"], button[onclick*="close"], button[onclick*="save"]) { border-radius: 11px; font-weight: 600; min-height: 44px; }
.admin-main :is(input, select, textarea):disabled, .admin-dashboard > .fixed :is(input, select, textarea):disabled { opacity: .75; cursor: not-allowed; }
.page-shell .form-wrap :is(h2, button) { font-family: var(--polish-font); }
.page-shell .form-wrap input { font-family: var(--polish-font); border-radius: 12px; font-weight: 500; font-size: 16px; }
.page-shell .form-wrap .submit-button { border-radius: 12px; font-weight: 600; box-shadow: 0 8px 20px #4f46e520; }
.ui-dialog { border-radius: 21px; border-color: var(--polish-line); box-shadow: 0 24px 80px #0f172a30; }
.ui-dialog-heading { padding: 25px 26px 0; }
.ui-dialog-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px; box-shadow: none; }
.ui-dialog-icon .ui-icon { width: 23px; height: 23px; }
.ui-dialog h2 { font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.ui-dialog-eyebrow { letter-spacing: .1em; font-weight: 600; }
.ui-dialog-body { padding: 13px 26px 22px; }
.ui-dialog-message { font-size: 13px; line-height: 1.75; }
.ui-dialog-close { width: 44px; height: 44px; border-radius: 11px; }
.ui-dialog-footer { padding: 16px 26px 22px; gap: 10px; }
.ui-dialog-button { min-height: 46px; border-radius: 11px; font-weight: 600; box-shadow: none; }
.ui-dialog-button:hover { transform: none; }
.ui-toast { border-radius: 13px; box-shadow: 0 8px 28px #0f172a14; }
@media (max-width: 767px) {
  .admin-main .workspace-metric { padding: 12px 14px; }
  .admin-main .dashboard-hero { padding: 16px 18px !important; }
  .admin-main .dashboard-hero h2 { font-size: 21px !important; }
  .admin-main .workspace-metric strong { font-size: 24px; }
}
@media (max-width: 639px) {
  .public-portal-icons .portal-hero h1 { font-size: clamp(26px, 7.1vw, 33px); }
  .public-portal-icons .portal-search-card { border-radius: 18px; }
  .public-portal-icons :is(#activeThemeGrid, #authorEventGrid) > div { border-radius: 16px; }
  .public-portal-icons :is(#sectionCatalog, #sectionAuthorResults) h2 { font-size: 21px; }
}
@media (max-width: 480px) {
  .ui-dialog-heading { padding: 23px 20px 0; }
  .ui-dialog h2 { font-size: 20px; }
  .ui-dialog-body { padding: 12px 20px 20px; }
  .ui-dialog-footer { padding: 15px 20px 20px; }
}