/* 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-sum { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 4px 2px 16px; }
#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: flex-end; margin-top: 15px; }
#applist-modal .app-links-btns.none { display: none; }