/* ------------------------------------------------------------------------
 * auth.develop.hair -- dark theme for the caddy-security auth portal
 * ------------------------------------------------------------------------
 * Loaded via the portal's "ui { custom css path /etc/caddy/portal-dark.css }"
 * directive, which is served as /assets/css/custom.css and referenced LAST in
 * <head>, after login.css/portal.css/basic.css. Nothing in the caddy binary
 * is patched, so upgrading caddy-security keeps this working.
 *
 * To revert: remove the "custom css path ..." line from /etc/caddy/Caddyfile
 * and run `systemctl reload caddy`. To keep a light option for users whose
 * browser prefers light, wrap the body block below in
 * @media (prefers-color-scheme: dark) { ... }.
 */

body.basic-theme {
  color-scheme: dark;

  /* Brand tokens: the basic theme is entirely driven by these. */
  --brand-page: #0b0f16;
  --brand-surface: #151b24;
  --brand-soft: #1b2330;
  --brand-ink: #e6edf3;
  --brand-muted: #9aa7b8;
  --brand-primary: #5b9dff;
  --brand-on-primary: #ffffff;
  --brand-primary-hover: #7db3ff;
  --brand-border: #283241;
  --brand-control-border: #3d4a5c;
  --brand-focus: #5b9dff;
  --brand-shadow: 0 12px 40px #00000099, 0 2px 6px #00000059;

  /* Drop the light background art; use a subtle dark gradient instead. */
  --brand-page-image: radial-gradient(circle at 20% 0%, #16233a 0%, #0b0f16 55%, #080b10 100%);
  --brand-banner-image: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
}

/* ------------------------------------------------------------- form fields */
body.basic-theme .app-inp-txt,
body.basic-theme .app-gen-inp-txt,
body.basic-theme .app-inp-sel,
body.basic-theme .app-inp-code-txt,
body.basic-theme .shell-textarea,
body.basic-theme textarea,
body.basic-theme input[type="text"],
body.basic-theme input[type="email"],
body.basic-theme input[type="password"],
body.basic-theme input[type="search"],
body.basic-theme input[type="tel"],
body.basic-theme input[type="url"],
body.basic-theme input[type="number"] {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
  border-color: var(--brand-control-border);
  caret-color: var(--brand-ink);
}

body.basic-theme .app-inp-txt:focus,
body.basic-theme .app-gen-inp-txt:focus,
body.basic-theme .app-inp-sel:focus,
body.basic-theme .shell-textarea:focus {
  border-color: var(--brand-focus);
  outline: 2px solid var(--brand-focus);
  outline-offset: 1px;
}

/* select dropdown arrow in the base CSS is a mid-grey inline SVG: fine. */

/* ----------------------------------------------------------------- buttons */
body.basic-theme .app-btn-pri:hover,
body.basic-theme .app-gen-btn-txt:hover {
  background: var(--brand-primary-hover);
}

body.basic-theme .app-btn-sec {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

body.basic-theme .app-btn-sec:hover {
  background: var(--brand-border);
}

/* password show/hide pair on the login page */
body.basic-theme .app-login-btn-box {
  border-color: var(--brand-border);
}

body.basic-theme .app-login-btn-txt {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
}

body.basic-theme .app-login-btn-txt:hover {
  background-color: var(--brand-border);
}

/* ------------------------------------------------------ portal app list btn */
body.basic-theme .app-portal-btn-box {
  border-color: var(--brand-border);
  min-height: unset;
}

body.basic-theme .app-portal-btn-img,
body.basic-theme .app-portal-btn-txt {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
}

body.basic-theme .app-portal-btn-txt:hover {
  background-color: var(--brand-border);
}

/* ----------------------------------------------------- settings page/nav/misc */
body.basic-theme .navlink,
body.basic-theme .navlink-active {
  color: var(--brand-ink);
}

body.basic-theme .navlink:hover {
  background-color: var(--brand-soft);
}

body.basic-theme .navlink-active {
  background-color: var(--brand-border);
}

body.basic-theme .navlink-ico,
body.basic-theme .kv-head {
  color: var(--brand-muted);
}

body.basic-theme .kv-val,
body.basic-theme .app-txt-section {
  color: var(--brand-ink);
}

body.basic-theme .empty-state-btn,
body.basic-theme .lst-item-btn {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary);
}

body.basic-theme .empty-state-btn:hover,
body.basic-theme .lst-item-btn:hover {
  background-color: var(--brand-primary-hover);
}

body.basic-theme pre,
body.basic-theme code,
body.basic-theme kbd,
body.basic-theme samp {
  color: var(--brand-ink);
  background-color: var(--brand-soft);
}

body.basic-theme hr {
  border-color: var(--brand-border);
}

/* ------------------------------------------- hardcoded Tailwind utility colors */
body.basic-theme .bg-white,
body.basic-theme .bg-gray-50,
body.basic-theme .bg-blue-100,
body.basic-theme .bg-\[\#f6f8fa\] {
  background-color: var(--brand-soft) !important;
}

body.basic-theme .border-gray-200,
body.basic-theme .border-r,
body.basic-theme .border-t {
  border-color: var(--brand-border) !important;
}

body.basic-theme .text-gray-900,
body.basic-theme .text-primary-900,
body.basic-theme .text-primary-700,
body.basic-theme .text-primary-600 {
  color: var(--brand-ink) !important;
}

body.basic-theme .text-gray-500,
body.basic-theme .text-primary-400,
body.basic-theme .text-primary-500 {
  color: var(--brand-muted) !important;
}

/* ==========================================================================
 * Post-login portal page: "Access Services" app list
 * Markup: div.app-link-list > div > a > div.app-portal-btn-box
 *           > .app-portal-btn-img (icon) + .app-portal-btn-txt (label)
 * ========================================================================== */

/* Phone: 1 column. Tablet (>=640px): 2. Desktop (>=1024px): 3.
 * minmax(0,1fr) lets tracks shrink so long labels can't widen the grid. */
body.basic-theme .app-link-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  body.basic-theme .app-link-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  body.basic-theme .app-link-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Three ~260px columns need more room than the default 580px card.
   * :has() scopes the widening to the portal page only, so the login form
   * keeps its narrow 580px width. */
  body.basic-theme:has(.app-link-list) .app-content {
    max-width: 880px;
  }
}

body.basic-theme .app-link-list > div {
  min-width: 0;
}

body.basic-theme .app-link-list .app-portal-btn-box {
  align-items: center;
}

/* Smaller, tighter label type (was 1.5rem / 2rem). */
body.basic-theme .app-link-list .app-portal-btn-txt {
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Scale the icon block to match the smaller label. */
body.basic-theme .app-link-list .app-portal-btn-img {
  padding: 0.55rem 0.7rem;
  font-size: 1.15rem;
  line-height: 1.3;
}

body.basic-theme .app-link-list .app-portal-btn-img i {
  font-size: 1.15rem;
}