/* Koder - what is Koder's own. The look (colors, rail, title line, buttons, tables, forms, modals) is the shared
   site theme, /css/core/site-theme.css, set in Koder's own Apps row > Theme; vars.css maps the --kd-* names onto it. */

body.koder.admin_page main { padding: 36px 32px 60px; min-height: 100dvh; }
body.koder.admin_page.tablet main { padding: 24px 16px 60px; }
/* phones: the rail turns into a bottom bar (site-theme.css) */
body.koder.admin_page.mobile main { padding: 20px 12px 90px; }
/* the admin's 96% stays: table rows hang their delete / copy icons just outside the table's edges */
body.koder.admin_page.desktop #page_wrap { max-width: 1800px; }

.kd-empty { color: var(--kd-muted); padding: 30px 0; }

/* Shared dev footer bar is not used here */
body.koder #dev { display: none; }

/*-------- Apps: Vanta effect pickers --------*/
.app-fx-editor { margin-top: 0; }
.fx-top { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 0 4px; }
.fx-top > .field, .fx-top > .fx-checks { margin: 0 auto 0 0; }
.fx-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fx-checks > .field { margin: 0; }
.app-fx-editor .kselect { width: 100%; }
.app-fx-editor .fx-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.app-fx-editor .fx-bool { align-self: end; }
/* the same box as the form's text fields */
.app-fx-editor select,
.app-fx-editor input[type=color] { box-sizing: border-box; width: 100%; height: 40px; border-radius: 5px; border: 2px solid transparent; background-color: var(--th-input-bg); color: var(--th-input-text); font: inherit; font-size: 16px; cursor: pointer; }
.app-fx-editor select { appearance: none; -webkit-appearance: none; padding: 0 36px 0 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238aa4c4' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.app-fx-editor input[type=color] { padding: 4px; }
.app-fx-editor :is(select, input[type=color]):focus { outline: none; border-color: #4f7ee6; }
@media (max-width: 520px) { .app-fx-editor .fx-opts { grid-template-columns: minmax(0, 1fr); } }

/*-------- Apps: Theme editor (site-theme.css previews on the right) --------*/
#theme-modal .th-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 24px; align-items: start; }
#theme-modal .th-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
#theme-modal .th-fields .th-wide { grid-column: 1 / -1; }
#theme-modal .th-sub-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kd-text); }
#theme-modal .th-form .divider { margin: 6px 0 16px; }
#theme-modal .th-preview-wrap { position: sticky; top: 0; }
#theme-modal .th-color { display: flex; align-items: center; gap: 10px; }
#theme-modal .th-color input[type=color] { flex: 0 0 52px; height: 40px; padding: 4px; border-radius: 5px; border: 2px solid transparent; background: var(--th-input-bg); cursor: pointer; }
#theme-modal .th-color input[type=range] { flex: 1; min-width: 0; }
#theme-modal .th-alpha { flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--kd-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { #theme-modal .th-split { grid-template-columns: minmax(0, 1fr); } #theme-modal .th-preview-wrap { position: static; } }

/* Theme editor: Named Theme (load) + Save As, above the tabs */
#theme-modal .th-named { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
#theme-modal .th-named .field { flex: 0 1 280px; margin: 0; }

/* App Details > Folders: each symlink on dev and live */
#applist-modal .app-links .table_wrap { max-height: 52vh; overflow-y: auto; }
#applist-modal .app-links-card { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 18px; padding: 18px 20px; border-radius: 8px; border: 1px solid var(--th-line, rgba(255,255,255,.14)); background: rgba(255,255,255,.03); text-align: center; }
#applist-modal .app-links-title { font-size: 17px; font-weight: 600; }
#applist-modal .app-links-side { display: grid; grid-template-columns: auto auto; gap: 8px 12px; }
#applist-modal .app-links-side > span:not(.live-l) { text-align: left; }
#applist-modal .app-links-when { font-size: 12px; color: var(--th-muted, rgba(255,255,255,.55)); }
#applist-modal .app-links-msg { padding: 14px 4px; color: var(--th-muted); }
#applist-modal .lnk:is(.lnk-broken, .lnk-wrong, .lnk-missing, .lnk-nosource) { color: #e5787a; }
#applist-modal .lnk-ok { color: #4fd18b; }
#applist-modal .lnk:is(.lnk-folder, .lnk-file) { color: #e8c15a; }
#applist-modal .app-links-btns { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
#applist-modal .app-links-btns .none { display: none; }


/* App Details > Splash: Convert Splash beside Copy to Login */
#applist-modal .fx-btns { display: flex; gap: 10px; }

/* Sync lists (/sync.files, /sync.dbs): a row that's off, and a row's problems in its modal */
.results .tbl.sl-off .tblc:not(.sl-on) { opacity: .45; }
.results .tblc.sl-on { cursor: pointer; }
#synclist-modal .sl-problems { margin-top: 12px; padding: 10px 14px; border-radius: 8px; color: #f0a3a4; background: rgba(229, 120, 122, .12); }

/* App Details > Sync: its two lists stacked in a card; Check is a Live-style row (.app-live-row, applist.live_box) */
#applist-modal .app-sync > .field { margin-bottom: 18px; }
#applist-modal .sync-card { display: grid; gap: 14px; padding: 16px 18px; border-radius: 5px; border: 1px solid var(--th-line, rgba(255,255,255,.14)); background: rgba(255,255,255,.03); }
#applist-modal .sync-card > .field { margin: 0; }
#applist-modal .app-sync > .divider { margin: 22px 0 14px; }
/* App Details > Live: each check's button with its result box beside it (applist.live_box) */
#applist-modal .app-live-row { display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 20px; padding: 6px 0; }
#applist-modal .app-live-row > .btn { width: 100%; }
#applist-modal .live-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 5px; border: 1px solid; text-align: center; }
#applist-modal .live-box.ok   { background: rgba(79, 209, 139, .12); border-color: rgba(79, 209, 139, .55); }
#applist-modal .live-box.miss { background: rgba(229, 120, 122, .10); border-color: rgba(229, 120, 122, .5); }
#applist-modal .live-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1; }
#applist-modal .live-box.ok .live-head { color: #4fd18b; }
#applist-modal .live-box.miss .live-head { color: #e5787a; }
#applist-modal .live-head .kft { position: relative; width: 18px; height: 18px; font-size: 18px; }	/* kft draws its icon centered on the span */
#applist-modal .live-rows { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 14px; font-size: 13px; }
#applist-modal .live-l { text-align: right; color: var(--th-muted, rgba(255,255,255,.55)); }
#applist-modal .live-v { text-align: left; word-break: break-all; }
#applist-modal .live-v.miss { color: #e5787a; }
#applist-modal .live-line { grid-column: 1 / -1; }
#applist-modal .live-box.miss .live-line { color: #e5787a; }

/* App Details: an open select stays above the fields after it (Login Icon over the effect options) */
#applist-modal .field:has(> .kselect.open), #applist-modal .kselect.open { position: relative; z-index: 20; }