/* Kittiwana Notify — Admin Dashboard Styles */

/* ── Brand colours (single source of truth) ── */
:root {
  --color-primary:       #4338ca;
  --color-primary-hover: #3730a3;
  --color-primary-soft:  rgba(67, 56, 202, 0.10);
  --color-accent:        #0ea5e9;
  --color-accent-soft:   rgba(14, 165, 233, 0.10);
  --color-success:       #10b981;
  --color-warning:       #f59e0b;
  --color-danger:        #ef4444;
  --color-purple:        #8b5cf6;
  --sidebar-from:        #1e1b4b;
  --sidebar-to:          #312e81;
  --radius-card:         12px;
}

/* ── Layout ── */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#login-screen {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: 1.5rem;
  background: linear-gradient(145deg, var(--sidebar-from) 0%, #1e1b4b 35%, #1a1640 100%);
  position: relative; overflow: hidden;
}
#login-screen::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Login container (two-panel) ── */
.login-container {
  display: flex; width: 100%; max-width: 860px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  animation: login-appear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; z-index: 1;
}
@keyframes login-appear {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Left brand panel ── */
.login-brand-panel {
  width: 340px; flex-shrink: 0; padding: 2.5rem 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, var(--sidebar-from) 0%, var(--color-primary) 55%, var(--color-accent) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.login-brand-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.login-brand-panel::after {
  content: ""; position: absolute; right: -60px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.login-brand-content { position: relative; z-index: 1; }
.login-brand-icon {
  font-size: 2.5rem; margin-bottom: 1rem;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12); border-radius: 14px;
  backdrop-filter: blur(8px);
}
.login-brand-icon i { color: var(--color-accent); }
.login-brand-title {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.35rem; line-height: 1.2;
}
.login-brand-subtitle {
  font-size: 0.85rem; opacity: 0.7; margin-bottom: 2rem; line-height: 1.5;
}
.login-brand-features { display: flex; flex-direction: column; gap: 0.75rem; }
.login-feature {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; opacity: 0.85;
}
.login-feature i {
  font-size: 0.9rem; color: var(--color-accent);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border-radius: 8px; flex-shrink: 0;
}
.login-brand-footer {
  position: relative; z-index: 1;
  padding-top: 1.5rem; margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.login-brand-org   { font-size: 0.72rem; opacity: 0.5; line-height: 1.5; }
.login-brand-group { font-size: 0.72rem; opacity: 0.5; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }
.login-dept-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
  font-size: 0.62rem; font-weight: 600;
  padding: 0.15rem 0.5rem; border-radius: 20px;
}

/* ── Right form panel ── */
.login-form-panel {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bs-body-bg); padding: 2.5rem 2.25rem;
}
.login-form-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.login-form-header { margin-bottom: 1.75rem; }
.login-form-title  { font-size: 1.35rem; font-weight: 700; color: var(--bs-body-color); margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.login-form-desc   { font-size: 0.82rem; color: var(--bs-secondary-color); margin: 0; }

/* Input with icon */
.login-input-wrap {
  position: relative;
}
.login-input-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--bs-secondary-color); font-size: 0.9rem;
  pointer-events: none; transition: color 0.2s;
}
.login-input {
  padding-left: 2.5rem !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--bs-border-color) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.login-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
}
.login-input:focus ~ .login-input-icon,
.login-input-wrap:focus-within .login-input-icon { color: var(--color-primary); }

/* Submit button */
.login-submit-btn {
  border-radius: 10px !important; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.login-submit-btn:active { transform: scale(0.98); }

/* Footer */
.login-form-footer {
  text-align: center; padding-top: 1.25rem; margin-top: 1.5rem;
  border-top: 1px solid var(--bs-border-color);
}
.login-legal-links {
  display: flex; justify-content: center; align-items: center; gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.login-legal-links a {
  font-size: 0.75rem; color: var(--bs-secondary-color);
  text-decoration: none; transition: color 0.15s;
}
.login-legal-links a:hover { color: var(--color-primary); text-decoration: underline; }
.login-legal-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--bs-secondary-color); opacity: 0.4;
}
.login-copyright { font-size: 0.68rem; color: var(--bs-secondary-color); opacity: 0.6; }
#dashboard { display: flex; height: 100vh; }
.main    { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 1.5rem; overflow: hidden; display: flex; flex-direction: column; }

/* ── Sidebar ── */
.sidebar {
  width: 232px; color: #fff; display: flex; flex-direction: column; flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-from) 0%, var(--sidebar-to) 100%);
}
.sidebar-brand { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.sidebar-brand .title { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2px; }
.sidebar-brand .title i { color: var(--color-accent); }
.sidebar-brand .sub   { font-size: 0.7rem; opacity: 0.5; margin-top: 3px; letter-spacing: 0.5px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 1.25rem;
  color: rgba(255,255,255,0.6); text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.84rem; font-weight: 500;
  transition: all 0.18s ease; border-radius: 0;
}
.sidebar .nav-link:hover {
  color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.06);
}
.sidebar .nav-link.active {
  color: #fff; background: rgba(14,165,233,0.12);
  border-left-color: var(--color-accent); font-weight: 600;
}
.nav-icon { width: 18px; text-align: center; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; }
.nav-group-label {
  padding: 1rem 1.25rem 0.35rem;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.nav-group-label:first-child { padding-top: 0.5rem; }
.sidebar-footer {
  padding: 0.875rem 1.25rem; margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
}
.sidebar-footer .btn-sidebar {
  color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.15);
  background: transparent; font-size: 0.78rem; transition: all 0.18s ease;
}
.sidebar-footer .btn-sidebar:hover {
  color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3);
}

/* ── Topbar ── */
.topbar {
  background: var(--bs-body-bg); padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.topbar-left  { display: flex; align-items: center; gap: 0.75rem; }
.topbar-title { font-weight: 600; color: var(--bs-body-color); font-size: 0.95rem; letter-spacing: -0.01em; }

/* ── Hamburger (mobile only) ── */
.hamburger {
  display: none; background: none;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-size: 1.1rem; padding: 0.25rem 0.6rem;
  border-radius: 6px; cursor: pointer; line-height: 1;
}

/* ── Card overrides ── */
.card {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none;
}
.section > .card { margin-bottom: 1.5rem; }
.section > .card:last-child { margin-bottom: 0; }

/* KPI color cards */
.card-blue {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  border: none !important; color: #fff;
}
.card-green {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border: none !important; color: #fff;
}
.card-orange {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  border: none !important; color: #fff;
}
.card-purple {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border: none !important; color: #fff;
}
.card-blue .kpi-title,
.card-green .kpi-title,
.card-orange .kpi-title,
.card-purple .kpi-title { color: rgba(255,255,255,0.75); }
.card-blue .kpi-value,
.card-green .kpi-value,
.card-orange .kpi-value,
.card-purple .kpi-value { color: #fff; }
.card-blue .kpi-sub,
.card-green .kpi-sub,
.card-orange .kpi-sub,
.card-purple .kpi-sub { color: rgba(255,255,255,0.6); }

/* KPI stats */
.kpi-title { font-size: 0.78rem; color: var(--bs-secondary-color); margin-bottom: 0.35rem; font-weight: 500; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--bs-body-color); line-height: 1.1; letter-spacing: -0.02em; }
.kpi-sub   { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.3rem; }

/* ── Grid helpers ── */
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }

/* ── Sections ── */
.section        { display: none; }
.section.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0; }
.section-header h2 { font-size: 1rem; font-weight: 600; color: var(--bs-body-color); margin: 0; }

/* ── Table sections — fit viewport ── */
.section.active:has(.card-body.p-0) { overflow: hidden; }
.section.active:has(.card-body.p-0) > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card-body.p-0 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card-body.p-0 > .table-responsive { flex: 1; overflow-y: auto; }

/* ── Content sections — fit viewport ── */
#section-overview > .grid-6,
#section-overview > .grid-2:not(:last-child) { flex-shrink: 0; }
#section-overview > .grid-2:last-child       { flex: 1; min-height: 0; margin-bottom: 0; }
#section-overview > .grid-2:last-child > .card { min-height: 0; display: flex; flex-direction: column; }

#section-docs    { overflow: hidden; }
#section-docs > .card   { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#section-docs > .card > .card-body { flex: 1; overflow-y: auto; }

#section-legal   { overflow: hidden; }
#section-legal > .tabs  { flex-shrink: 0; }
#section-legal > .tab-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#section-legal > .tab-pane.active > .card-body { flex: 1; overflow-y: auto; }

#section-appconfigs { overflow: hidden; }
#section-appconfigs > .section-header { flex-shrink: 0; }
#section-appconfigs .appconfigs-layout { flex: 1; min-height: 0; }

/* ── Table tweaks ── */
.table th      { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--bs-secondary-color); }
.table td      { vertical-align: middle; font-size: 0.85rem; }
.col-actions   { white-space: nowrap; }
.actions-cell  { white-space: nowrap; }
.btn-gap       { margin-left: 4px; }
.btn-xs        { padding: 0.2rem 0.5rem; font-size: 0.75rem; line-height: 1.4; border-radius: 0.25rem; }
.cell-ellipsis { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-token    { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; font-size: 0.72rem; }

/* ── Progress bars ── */
.prog-wrap  { margin: 0.5rem 0; }
.prog-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 3px; }
.prog-label .name { color: var(--bs-body-color); font-weight: 500; }
.prog-label .val  { color: var(--bs-secondary-color); }
.prog-bar   { background: var(--bs-border-color); border-radius: 3px; height: 5px; overflow: hidden; }
.prog-fill  { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* ── Stat rows ── */
.stat-row             { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--bs-border-color); }
.stat-row:last-child  { border: none; }
.stat-label           { font-size: 0.85rem; color: var(--bs-secondary-color); }
.stat-value           { font-size: 0.85rem; font-weight: 600; color: var(--bs-body-color); }

/* ── Misc ── */
.loading-text { text-align: center; color: var(--bs-secondary-color); font-size: 0.875rem; padding: 2rem; }

/* ── Empty states ── */
.empty-state      { text-align: center; padding: 2.5rem 1.5rem; color: var(--bs-secondary-color); }
.empty-state-icon { font-size: 1.75rem; margin-bottom: 0.5rem; opacity: 0.35; }
.empty-state-title { font-size: 0.88rem; font-weight: 600; color: var(--bs-body-color); margin-bottom: 0.2rem; }
.empty-state-desc  { font-size: 0.78rem; color: var(--bs-secondary-color); }

/* ── Skeleton loading ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}
.skeleton-line    { height: 0.85rem; margin-bottom: 0.6rem; }
.skeleton-line:last-child { margin-bottom: 0; }
code {
  background: var(--bs-tertiary-bg); padding: 2px 7px; border-radius: 5px;
  font-size: 0.78rem; font-family: 'Consolas', monospace; color: var(--bs-body-color);
}

/* ── Modal overlay ── */
.modal-overlay      { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 1050; justify-content: center; align-items: center; }
.modal-overlay.open { display: flex; animation: overlay-in 0.2s ease forwards; }
@keyframes overlay-in { to { background: rgba(0,0,0,0.45); } }
.dash-modal         { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-card); padding: 1.5rem; width: 440px; max-width: 92vw; box-shadow: 0 4px 24px rgba(0,0,0,0.12); animation: modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dash-modal h3      { font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--bs-body-color); }
.dash-modal-footer  { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

/* ── API Key display ── */
.apikey-box {
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 8px;
  padding: 1rem; font-family: 'Consolas', monospace; font-size: 0.82rem;
  color: var(--color-primary); word-break: break-all; line-height: 1.6;
}

/* ── Pagination ── */
.pagination-bar { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; font-size: 0.82rem; flex-shrink: 0; }
.page-info      { color: var(--bs-secondary-color); }

/* ── Filter bar ── */
.filter-bar          { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; flex-shrink: 0; }
.date-filter-group   { display: flex; align-items: center; gap: 0.35rem; }
.date-filter-group label { font-size: 0.78rem; color: var(--bs-secondary-color); white-space: nowrap; margin: 0; }

/* ── Tabs ── */
.tabs              { display: flex; border-bottom: 2px solid var(--bs-border-color); margin-bottom: 1rem; }
.tab-btn           { padding: 0.5rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.85rem; color: var(--bs-secondary-color); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tab-btn.active    { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab-pane          { display: none; }
.tab-pane.active   { display: block; }
.tab-save-bar      { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 1rem; }

/* ── App Configs — master-detail layout ── */
.appconfigs-layout {
  display: flex;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.appconfigs-sidebar {
  width: 230px;
  flex-shrink: 0;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  overflow-y: auto;
}
.appconfig-item {
  padding: 0.875rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.appconfig-item:last-child { border-bottom: none; }
.appconfig-item:hover      { background: var(--bs-secondary-bg); }
.appconfig-item.active     { background: var(--bs-body-bg); border-left-color: var(--color-primary); }
.appconfig-item-name {
  font-size: 0.875rem; font-weight: 600; color: var(--bs-body-color);
  margin-bottom: 0.3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appconfig-item-meta { display: flex; align-items: center; gap: 0.4rem; }
.appconfigs-detail  { flex: 1; padding: 1.5rem; overflow-y: auto; min-width: 0; background: var(--bs-body-bg); }
.appconfig-detail-header {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.appconfig-detail-header strong { font-size: 1rem; }

/* ── App Config form helpers ── */
.form-grid-2              { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.config-save-msg          { font-size: 0.82rem; }
.config-save-msg.msg-success { color: var(--color-success); }
.config-save-msg.msg-error   { color: var(--color-danger); }

/* ── API Docs ── */
.docs-pre          { background: #1f2937; color: #e5e7eb; padding: 0.9rem 1rem; border-radius: 8px; font-size: 0.8rem; font-family: 'Consolas', monospace; overflow-x: auto; margin-bottom: 1rem; line-height: 1.6; }
.docs-h3           { font-size: 0.875rem; font-weight: 600; color: var(--bs-body-color); margin: 1.25rem 0 0.6rem; }
.docs-note         { font-size: 0.82rem; color: var(--bs-secondary-color); margin-bottom: 0.75rem; }
.docs-method-get    { color: var(--color-success); font-weight: 700; font-size: 0.75rem; }
.docs-method-post   { color: var(--color-primary); font-weight: 700; font-size: 0.75rem; }
.docs-method-put    { color: var(--color-warning); font-weight: 700; font-size: 0.75rem; }
.docs-method-delete { color: var(--color-danger);  font-weight: 700; font-size: 0.75rem; }
.docs-method-ws     { color: var(--color-purple, #8b5cf6); font-weight: 700; font-size: 0.75rem; }

/* Expandable endpoint rows */
.docs-expandable        { cursor: pointer; }
.docs-expandable:hover  { background: var(--bs-tertiary-bg) !important; }
.docs-toggle-icon       { display: inline-block; font-size: 0.6rem; color: var(--bs-secondary-color); transition: transform 0.2s; margin-left: 0.3rem; vertical-align: middle; }
.docs-row-open .docs-toggle-icon { transform: rotate(90deg); }
.docs-url               { cursor: pointer; }
.docs-url:hover         { text-decoration: underline; }

/* Detail row */
.docs-detail-row td     { padding: 0 !important; }
.docs-detail-content    { padding: 0.75rem 1rem; background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); }
.docs-detail-content .docs-pre { margin-bottom: 0.5rem; font-size: 0.75rem; }
.docs-detail-label      { font-size: 0.78rem; font-weight: 600; color: var(--bs-body-color); margin: 0.5rem 0 0.35rem; }
.docs-detail-label:first-child { margin-top: 0; }
.docs-query-list        { list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.78rem; }
.docs-query-list li     { padding: 0.15rem 0; }
.docs-query-list code   { font-size: 0.75rem; }

/* Auth badges */
.docs-auth-badge        { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.docs-auth-admin        { background: rgba(26, 86, 219, 0.12); color: var(--color-primary); }
.docs-auth-jwt          { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.docs-auth-apikey       { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.docs-auth-signature    { background: rgba(139, 92, 246, 0.12); color: var(--color-purple, #8b5cf6); }

/* ── Legal content ── */
.legal-doc  { line-height: 1.8; font-size: 0.875rem; color: var(--bs-body-color); }
.legal-meta { margin-bottom: 1.25rem; color: var(--bs-secondary-color); font-size: 0.8rem; }
.legal-h3   { font-size: 0.95rem; font-weight: 600; color: var(--bs-body-color); margin: 0 0 0.5rem; }
.legal-ul   { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-p    { margin-bottom: 0.5rem; }
.legal-p-lg { margin-bottom: 1rem; }

/* ── Toast notifications ── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.toast-msg {
  padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.82rem; color: #fff;
  opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 280px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.toast-msg.show  { opacity: 1; transform: translateX(0); }
.toast-success   { background: var(--color-success); }
.toast-error     { background: var(--color-danger); }
.toast-info      { background: var(--color-primary); }

/* ── Sidebar backdrop (mobile) ── */
#sidebar-backdrop      { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1039; }
#sidebar-backdrop.show { display: block; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .login-container { flex-direction: column; max-width: 420px; }
  .login-brand-panel { width: 100%; padding: 1.75rem 1.5rem 1.25rem; }
  .login-brand-features { display: none; }
  .login-brand-footer  { display: none; }
  .login-brand-subtitle { margin-bottom: 0; }
  .login-form-panel { padding: 1.75rem 1.5rem; }
}
@media (max-width: 640px) {
  .hamburger   { display: block; }
  .sidebar     { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1040; transform: translateX(-100%); transition: transform 0.25s ease; display: flex !important; }
  .sidebar.open { transform: translateX(0); }
  .grid-2      { grid-template-columns: 1fr; }
  .grid-4      { grid-template-columns: 1fr 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  /* App Configs: stack sidebar on top as a horizontal scroll row */
  .appconfigs-layout  { flex-direction: column; min-height: auto; }
  .appconfigs-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--bs-border-color); display: flex; overflow-x: auto; overflow-y: hidden; }
  .appconfig-item     { flex-shrink: 0; min-width: 120px; border-bottom: none; border-left: none; border-bottom: 3px solid transparent; }
  .appconfig-item.active { border-left-color: transparent; border-bottom-color: var(--color-primary); }
}

/* ── Form validation ── */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25); }
.invalid-feedback { display: none; font-size: 0.78rem; color: var(--color-danger); margin-top: 0.25rem; }
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback { display: block; }
.password-hint { font-size: 0.75rem; color: var(--bs-secondary-color); margin-top: 0.25rem; transition: color 0.2s; }
.password-hint.hint-weak { color: var(--color-danger); }
.password-hint.hint-ok { color: var(--color-warning); }
.password-hint.hint-strong { color: var(--color-success); }

/* ── Live button indicator ── */
#live-btn.btn-success { position: relative; }
#live-btn.btn-success::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: live-dot 1.5s ease-in-out infinite;
}
@keyframes live-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Section transition ── */
.section.active {
  animation: section-fade-in 0.15s ease;
}
@keyframes section-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Active nav link accent glow ── */
.sidebar .nav-link.active .nav-icon { color: var(--color-accent); }