/* Portal admin and legacy markup, restyled with the shared DK tokens (dk-tokens.css) so the old forms
   look like the rest of the DK apps and follow dark mode. Load after dk-tokens.css and dk-components.css.
   Colours here are always var(--dkc-*). Do not add hex values. */

body:not(.dkc-body) { font-family: var(--dkc-font); background: var(--dkc-canvas); color: var(--dkc-ink); margin: 0; }
h1 { margin-top: 0; }
a { color: var(--dkc-accent); }
a:hover { text-decoration: none; }
code { font-size: 0.92em; background: var(--dkc-surface-2); border: 1px solid var(--dkc-line); border-radius: var(--dkc-r-sm); padding: 0 5px; }
h2 { font: 650 15.5px/1.3 var(--dkc-font-display); letter-spacing: -0.012em; margin: 0 0 var(--dkc-s3); }
h3 { font: 650 14px/1.3 var(--dkc-font-display); margin: var(--dkc-s4) 0 var(--dkc-s2); }
.wrap { max-width: 900px; margin: 0 auto; padding: 24px; }
.wrap-dashboard { max-width: 1700px; }

/* Cards: forms stay a readable width, tables use the full width. */
.card { background: var(--dkc-surface); border: 1px solid var(--dkc-line); border-radius: var(--dkc-r-lg); padding: var(--dkc-s4) 20px; margin-bottom: var(--dkc-s5); }
.dkc-shell-content > .card { max-width: 820px; }
.dkc-shell-content > .card:has(table) { max-width: none; }
.card-collapsible summary { font-size: 15.5px; font-weight: 650; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.card-collapsible summary::-webkit-details-marker { display: none; }
.card-collapsible summary::before { content: '\25B6'; font-size: 11px; color: var(--dkc-muted); transition: transform 0.15s; }
.card-collapsible[open] summary::before { transform: rotate(90deg); }
.card-collapsible[open] summary { margin-bottom: var(--dkc-s3); }
.count-badge { background: var(--dkc-surface-2); color: var(--dkc-muted); border: 1px solid var(--dkc-line); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: 600; }

/* Fields */
label { display: block; margin-top: var(--dkc-s3); font-weight: 550; font-size: 12.5px; color: var(--dkc-muted); }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=email], input[type=url], textarea, select {
    width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 10px; margin-top: var(--dkc-s1);
    border: 1px solid var(--dkc-line-strong); border-radius: var(--dkc-r); background: var(--dkc-surface); color: var(--dkc-ink);
    font: inherit;
}
textarea { padding: 8px 10px; min-height: 90px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--dkc-accent); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { accent-color: var(--dkc-accent); }

/* Buttons. The default button is the primary one: one per screen. */
button {
    margin-top: var(--dkc-s3); min-height: 34px; padding: 0 14px;
    background: var(--dkc-primary-bg); color: var(--dkc-primary-ink); border: 1px solid var(--dkc-primary-bg);
    border-radius: var(--dkc-r); cursor: pointer; font: inherit; font-weight: 550;
}
button:hover { filter: brightness(1.12); }
button.btn-secondary { background: var(--dkc-surface); color: var(--dkc-ink); border-color: var(--dkc-line-strong); }
button.btn-secondary:hover { background: var(--dkc-surface-2); filter: none; }
.btn-sm {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin: 2px 4px 2px 0;
    border: 1px solid var(--dkc-line-strong); border-radius: var(--dkc-r); font-size: 13px; font-weight: 550;
    text-decoration: none; color: var(--dkc-ink); background: var(--dkc-surface); cursor: pointer;
}
button.btn-sm { margin-top: 2px; }
.btn-sm:hover { background: var(--dkc-surface-2); color: var(--dkc-ink); filter: none; }
.btn-sm.btn-grey { color: var(--dkc-muted); }
.btn-sm.btn-danger { color: var(--dkc-err-text); border-color: color-mix(in srgb, var(--dkc-err) 45%, var(--dkc-line-strong)); background: var(--dkc-surface); }
.btn-sm.btn-danger:hover { background: var(--dkc-err-bg); color: var(--dkc-err-text); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: var(--dkc-s2); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--dkc-line); font-size: var(--dkc-text); }
th { background: var(--dkc-surface-2); color: var(--dkc-muted); font-size: 12.5px; font-weight: 650; border-bottom: 1px solid var(--dkc-line-strong); }
tr:last-child td { border-bottom: 0; }

/* Status colours used inline by the admin pages */
.msg-ok { color: var(--dkc-ok-text); font-weight: 600; }
.msg-err { color: var(--dkc-err-text); font-weight: 600; }

/* App sign-in grid (admin/sso_access.php) */
.sso-cell { min-width: 150px; vertical-align: top; }
.sso-cell label.on { margin-top: 0; color: var(--dkc-ink); }
.sso-roles { margin: 6px 0 0 4px; font-size: 13px; }
.sso-roles label { font-weight: 400; margin-top: 2px; display: flex; align-items: center; gap: 6px; color: var(--dkc-ink); }
.sso-roles.off { opacity: .35; }

/* Sign-in page and small centred cards */
.dkc-center { max-width: 400px; margin: 8vh auto 0; padding: 0 var(--dkc-s4); }
.dkc-center .card { max-width: none; }

/* Admin menu fold (phones). Wide screens keep it open; the script in layout.php sets that. */
.dkc-side-collapse > summary { display: none; list-style: none; cursor: pointer; font-weight: 650; padding: 6px 8px; border-radius: var(--dkc-r-sm); }
.dkc-side-collapse > summary::-webkit-details-marker { display: none; }
.dkc-side-collapse > summary::after { content: '\25BE'; float: right; color: var(--dkc-muted); }
.dkc-side-collapse[open] > summary { margin-bottom: 4px; }

/* dk-components.css has align-items:flex-start on .dkc-shell, which lets content grow wider than a phone screen.
   Override here rather than editing the shared file (tell DK_Apps_Dev\shared\dk-design to fix it at source). */
@media (max-width: 860px) {
    .dkc-shell { align-items: stretch; }
    .dkc-side-collapse > summary { display: block; }
    .dkc-shell-content .card { overflow-x: auto; }
    .dkc-shell-content > .card { max-width: none; }
}

/* Legacy classes below came from the original Portal stylesheet. */
.reorder-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px; font-weight: 700;
    text-decoration: none; background: var(--dkc-canvas); color: var(--dkc-muted); flex: none;
}
.reorder-arrow:hover { background: var(--dkc-line); color: var(--dkc-ink); }
.reorder-arrow.disabled { color: var(--dkc-line-strong); background: transparent; }

/* Top bar shown on the dashboard when logged in as admin. */
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 14px; color: var(--dkc-muted);
}
.topbar a { margin-left: 4px; }
.portal-title { margin: 0 0 20px; }

/* Admin "view as" preview controls */
.preview-bar {
    display: flex; align-items: center; gap: 8px; margin: 0 0 20px;
    font-size: 13px; color: var(--dkc-muted);
}
.preview-bar select {
    width: auto; margin-top: 0; padding: 4px 8px; font-size: 13px;
}
.preview-banner {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--dkc-warn-bg); border: 1px solid var(--dkc-warn); color: var(--dkc-warn-text);
    border-radius: 8px; padding: 10px 16px; margin: 0 0 20px; font-size: 14px;
}
.preview-banner a { color: var(--dkc-warn-text); font-weight: 600; text-decoration: underline; }

/* .applet-tile sets its own display, so it needs an explicit [hidden] override -
   otherwise equal-specificity author CSS can beat the browser's default [hidden] rule. */
.applet-tile[hidden], .applet-section[hidden] { display: none; }

/* Sticky search + tag filter bar - stays visible while scrolling the grid below */
.filter-bar {
    position: sticky; top: 0; z-index: 10;
    background: var(--dkc-canvas);
    padding: 10px 0 16px;
    margin: 0 0 4px;
    display: flex; flex-direction: column; gap: 10px;
}
.search-box { position: relative; max-width: 420px; }
.search-box svg {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--dkc-muted); pointer-events: none;
}
.search-box input[type=search] {
    width: 100%; box-sizing: border-box; padding: 9px 12px 9px 34px;
    border: 1px solid var(--dkc-line-strong); border-radius: 8px; font-size: 14px; background: var(--dkc-surface);
}
.search-box input[type=search]:focus { outline: none; border-color: var(--dkc-muted); }

/* Tag filter pills */
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
    background: var(--dkc-surface); border: 1px solid var(--dkc-line-strong); color: var(--dkc-muted);
    border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer;
}
.tag-pill:hover { border-color: var(--dkc-muted); }
.tag-pill.active { background: var(--dkc-accent); border-color: var(--dkc-accent); color: var(--dkc-surface); }
.tag-pill .tag-count { opacity: 0.6; font-size: 11px; }

/* Up/down status dot next to a tile's domain subtitle */
.status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    flex: none; vertical-align: middle;
}
.status-dot.status-up { background: var(--dkc-ok); }
.status-dot.status-down { background: var(--dkc-err); }
.status-dot.status-unknown { background: var(--dkc-muted); }

/* Guest PIN gate */
.pin-gate { max-width: 320px; margin: 80px auto 0; text-align: center; }
.pin-gate input[type=password] { text-align: center; letter-spacing: 4px; font-size: 20px; }

/* Applet dashboard grid */
.applet-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* Unified light card, coloured left accent bar - compact single-line row */
.applet-tile {
    position: relative;
    display: flex; align-items: center;
    background: var(--dkc-surface);
    border: 1px solid var(--dkc-line);
    border-left: 4px solid var(--dkc-accent);
    border-radius: 4px 10px 10px 4px;
    padding: 9px 14px;
    text-decoration: none; color: var(--dkc-ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.applet-tile:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: var(--dkc-line-strong);
    color: var(--dkc-ink);
    z-index: 20;
}
.applet-tile.inactive { opacity: 0.45; }
.applet-tile.dragging { opacity: 0.4; }
.applet-tile[draggable="true"] { cursor: grab; }

.applet-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.applet-icon-badge {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.applet-icon-badge .applet-icon { font-size: 14px; }
.applet-title {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Description text - shown as a hover popover on a real tile (.applet-tooltip),
   and also reused as the always-visible caption on the dashed Add Applet tile. */
.applet-desc {
    margin-top: 10px;
    font-size: 12.5px; line-height: 1.5; color: var(--dkc-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.applet-tooltip {
    position: absolute; top: 100%; left: 14px; margin-top: 6px; z-index: 5;
    max-width: 240px; width: max-content;
    background: var(--dkc-primary-bg); color: var(--dkc-primary-ink); font-size: 12px; line-height: 1.4;
    padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.applet-tile:hover .applet-tooltip, .applet-tile:focus-visible .applet-tooltip { opacity: 1; }

/* Pin star - only rendered in edit mode */
.applet-star {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92); color: var(--dkc-line-strong); font-size: 12px;
    cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.applet-star:hover { color: var(--dkc-warn); }
.applet-star.on { color: var(--dkc-warn); }

/* Edit mode: whole tile is the edit target */
body.editmode .applet-tile { cursor: default; }
/* Reserve room so the top-left star never overlaps the icon/title */
body.editmode .applet-row { padding-left: 26px; }
/* Tinted hover cue only - the tile is now too short for a centred "Edit" label
   without it sitting on top of the applet name. */
body.editmode .applet-tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(37,99,235,0.12); border-radius: inherit;
    opacity: 0; transition: opacity 0.12s;
}
body.editmode .applet-tile:hover::after { opacity: 1; }
body.editmode .applet-tile.applet-add::after { content: none; }

.editmode-toggle {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    border: 1px solid var(--dkc-line-strong); color: var(--dkc-muted) !important; text-decoration: none;
    font-size: 13px;
}
.editmode-toggle.on { background: var(--dkc-accent); border-color: var(--dkc-accent); color: var(--dkc-surface) !important; }
.editmode-strip {
    background: var(--dkc-warn-bg); border: 1px solid var(--dkc-warn); color: var(--dkc-warn-text);
    border-radius: 8px; padding: 8px 14px; margin: 0 0 20px; font-size: 13px;
}

.applet-tile.applet-add {
    background: var(--dkc-surface); border: 2px dashed var(--dkc-line-strong); border-radius: 14px; color: var(--dkc-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px 16px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.applet-tile.applet-add:hover, .applet-tile.applet-add.drag-over { border-color: var(--dkc-accent); color: var(--dkc-accent); }
.applet-tile.applet-add.drag-over { background: var(--dkc-tint); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.applet-tile.applet-add .applet-icon { font-size: 24px; margin-bottom: 6px; display: block; }
.applet-tile.applet-add .applet-name { font-weight: 700; font-size: 15px; }
.applet-tile.applet-add .applet-desc { font-size: 11px; opacity: 0.75; display: block; -webkit-line-clamp: unset; }

.applet-section { margin: 0 0 22px; }
.applet-section:last-of-type { margin-bottom: 0; }

/* Coloured group heading, above its applets - keeps every tile a uniform single-row height,
   which a beside-the-grid rail couldn't do once tiles got this short. */
.applet-group-heading {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; color: var(--dkc-ink);
    margin: 0 0 10px;
}
.applet-group-icon {
    flex: none; width: 25px; height: 25px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}

.color-swatch-input { display: flex; align-items: center; gap: 8px; }
.color-swatch-input input[type=color] { width: 48px; height: 36px; padding: 2px; margin-top: 4px; }

/* Quick-pick row of icons already used elsewhere, shown under the Icon field */
.icon-quickpicks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.icon-quickpick {
    width: 32px; height: 32px; flex: none; padding: 0; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--dkc-line-strong); border-radius: 6px; background: var(--dkc-surface-2); cursor: pointer;
}
.icon-quickpick:hover { border-color: var(--dkc-muted); background: var(--dkc-canvas); }
.icon-quickpick.active { border-color: var(--dkc-accent); background: var(--dkc-tint); }

/* Extra applet-icon animations, set from Settings > Icon Animation and applied to
   every applet icon on the dashboard. Font Awesome's free tier already ships
   fa-spin / fa-spin-pulse / fa-beat / fa-beat-fade / fa-fade / fa-bounce / fa-shake;
   these seven are ours, since Font Awesome free doesn't have them - named fa-* to
   match its own convention. */
@keyframes portal-jello {
    0%, 11.1%, 100% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.fa-jello { display: inline-block; animation: portal-jello 1.6s ease infinite; }

@keyframes portal-tada {
    0%, 100% { transform: scale(1) rotate(0); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
.fa-tada { display: inline-block; animation: portal-tada 1.8s ease infinite; }

@keyframes portal-wobble {
    0%, 100% { transform: translateX(0%) rotate(0); }
    15% { transform: translateX(-18%) rotate(-5deg); }
    30% { transform: translateX(13%) rotate(3deg); }
    45% { transform: translateX(-10%) rotate(-3deg); }
    60% { transform: translateX(8%) rotate(2deg); }
    75% { transform: translateX(-4%) rotate(-1deg); }
}
.fa-wobble { display: inline-block; animation: portal-wobble 2s ease infinite; }

@keyframes portal-swing {
    20% { transform: rotate(12deg); }
    40% { transform: rotate(-9deg); }
    60% { transform: rotate(6deg); }
    80% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
.fa-swing { display: inline-block; transform-origin: top center; animation: portal-swing 2s ease infinite; }

@keyframes portal-heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}
.fa-heartbeat { display: inline-block; animation: portal-heartbeat 1.5s ease-in-out infinite; }

@keyframes portal-rubberband {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
}
.fa-rubberband { display: inline-block; animation: portal-rubberband 2s ease infinite; }

@keyframes portal-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.25; }
}
.fa-flash { animation: portal-flash 1.8s ease-in-out infinite; }

/* The logo is a dark shape: give it a faint outline on dark backgrounds so it does not vanish into the top bar. */
@media (prefers-color-scheme: dark) { .dkc-brand img { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); } }