/* Supplementary styles for production CMS controls not present in the prototype */

.cms-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  padding: 24px;
}
.cms-login-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cms-login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: 13px;
  background: color-mix(in oklab, var(--red), var(--bg) 90%);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.cms-field { display: flex; flex-direction: column; gap: 6px; }
.cms-field > span, .cms-field > label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.cms-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
.cms-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
textarea.cms-input { resize: vertical; }

.btn-block { width: 100%; justify-content: center; }

.cms-inline-form { padding: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.cms-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.cms-toggle-row { display: flex; gap: 16px; }
.cms-check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }

.cms-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 900px) { .cms-settings-grid, .cms-form-grid { grid-template-columns: 1fr; } }

/* navigation editor */
.cms-nav-editor { display: flex; flex-direction: column; gap: 8px; }
.cms-nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.cms-nav-reorder { display: flex; flex-direction: column; gap: 2px; }
.cms-nav-reorder .cms-rowbtn { width: 24px; height: 18px; }
.cms-nav-reorder .cms-rowbtn:disabled { opacity: .3; cursor: default; }
@media (max-width: 640px) { .cms-nav-row { grid-template-columns: auto 1fr auto; } .cms-nav-row .cms-input:nth-of-type(2) { grid-column: 2 / -1; } }

.media-actions { display: flex; gap: 4px; margin-top: 6px; }
.media-thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--panel-2); }

.cms-nav-item, .cms-back, .cms-newbtn { text-decoration: none; }

/* =========================================================================
   Responsive CMS shell — fixed sidebar (no scroll), collapsible / off-canvas
   ========================================================================= */
.cms-app { display: block; }                 /* override the prototype's fixed grid */

.cms-side {
  position: fixed; top: 0; left: 0; width: 244px; height: 100dvh; z-index: 60;
  overflow-y: auto; overflow-x: hidden;
  transition: transform .22s ease, width .22s ease, padding .22s ease;
}
.cms-nav-item, .cms-newbtn, .cms-back, .kb-logo { white-space: nowrap; }

.cms-main { margin-left: 244px; transition: margin-left .22s ease; min-height: 100dvh; }

/* Desktop: collapsed = narrow icon-only rail (icons only, labels hidden) */
@media (min-width: 901px) {
  .cms-app.nav-collapsed .cms-side { width: 66px; padding-left: 9px; padding-right: 9px; }
  .cms-app.nav-collapsed .cms-main { margin-left: 66px; }
  .cms-app.nav-collapsed .kb-logo-word,
  .cms-app.nav-collapsed .cms-nav-item span,
  .cms-app.nav-collapsed .cms-newbtn span,
  .cms-app.nav-collapsed .cms-back span { display: none; }
  .cms-app.nav-collapsed .cms-nav-item,
  .cms-app.nav-collapsed .cms-newbtn,
  .cms-app.nav-collapsed .cms-back { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .cms-app.nav-collapsed .cms-side-top { display: flex; justify-content: center; padding-left: 0; padding-right: 0; }
  .cms-app.nav-collapsed .kb-logo { gap: 0; }
}

/* topbar stays put while content scrolls */
.cms-topbar { position: sticky; top: 0; z-index: 40; }
.cms-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cms-topbar-left h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cms-burger {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); cursor: pointer;
  transition: color .14s, background .14s;
}
.cms-burger:hover { color: var(--text); background: var(--panel-2); }
.cms-logout { background: none; border: 0; cursor: pointer; width: 100%; }

/* off-canvas scrim (mobile only) */
.cms-scrim { display: none; }
@media (max-width: 900px) {
  /* Mobile: collapsed = fully hidden off-canvas drawer (a rail would waste space) */
  .cms-main { margin-left: 0 !important; }
  .cms-side { box-shadow: var(--shadow-lg); }
  .cms-app.nav-collapsed .cms-side { transform: translateX(-100%); }
  .cms-app:not(.nav-collapsed) .cms-scrim {
    display: block; position: fixed; inset: 0; background: rgba(15, 27, 39, .45); z-index: 55;
  }
}

/* tables scroll horizontally instead of stretching the page */
.cms-tablecard { overflow-x: auto; }
.cms-table { min-width: 560px; }
.cms-td-title { min-width: 160px; }

/* dashboard / panels must be able to shrink below their content's natural width */
.cms-dash-grid > *, .cms-panel { min-width: 0; }
.hbar-label { min-width: 0; }
.cms-querylist, .cms-query { min-width: 0; }
/* the dashboard "Perlu ditinjau" table lives directly in a panel — let it scroll */
.cms-panel-wide { overflow-x: auto; }

/* segmented filter bar scrolls horizontally on narrow screens instead of overflowing */
.cms-toolbar { max-width: 100%; }
.cms-segmented { min-width: 0; max-width: 100%; overflow-x: auto; }
.cms-segmented::-webkit-scrollbar { height: 0; }
.cms-seg { flex: none; }
.cms-toolbar-right { flex-wrap: wrap; }

/* =========================================================================
   Public + shared responsive safety — let grid/flex children shrink
   ========================================================================= */
.home-split-main, .home-split-side, .article-body, .cms-main, .cms-content,
.cat-body, .new-main, .catlist-main, .pop-card, .cat-card-body { min-width: 0; }

@media (max-width: 980px) {
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
}

/* long content (code, urls, images) must not blow out the viewport */
.prose, .cms-md-preview { overflow-wrap: anywhere; }
.prose pre, .codeblock pre, .md-pre, .cms-md-preview pre { overflow-x: auto; max-width: 100%; }
.prose img, .cms-md-preview img { max-width: 100%; height: auto; }
.prose table { display: block; overflow-x: auto; max-width: 100%; }

/* header: keep the action row from overflowing on small screens */
@media (max-width: 600px) {
  .kb-header-right { gap: 6px; }
  .cms-settings-grid { grid-template-columns: 1fr; }
}