/* ============================================================
   settings.css — Settings admin page
   Depends on: main.css + dashboard.css
   ============================================================ */

.stt-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stt-header__title { font-family: var(--gx-font-heading); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--gx-dark); }
.stt-header__sub { font-size: 0.875rem; color: var(--gx-gray-mid); }

/* Layout */
.stt-layout { display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: start; }

/* Settings nav */
.stt-nav { background: var(--gx-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-xl); overflow: hidden; position: sticky; top: calc(3.75rem + 1.5rem); }
.stt-nav__item { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--gx-g300); cursor: pointer; transition: background var(--gx-t), color var(--gx-t); border-bottom: 1px solid var(--gx-gray-light); }
.stt-nav__item:last-child { border-bottom: none; }
.stt-nav__item:hover { background: var(--gx-off-white); color: var(--gx-dark); }
.stt-nav__item.is-active { background: rgba(201,236,102,0.08); color: var(--gx-dark); font-weight: 600; }
.stt-nav__icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--gx-gray-mid); }
.stt-nav__item.is-active .stt-nav__icon { color: var(--gx-lime-dark); }

/* Settings content panels */
.stt-panels { display: flex; flex-direction: column; gap: 1.25rem; }

.stt-section { background: var(--gx-white); border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-xl); overflow: hidden; }

.stt-section__header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gx-gray-light); }
.stt-section__title { font-family: var(--gx-font-heading); font-size: 0.975rem; font-weight: 600; color: var(--gx-dark); margin-bottom: 0.15rem; }
.stt-section__sub { font-size: 0.78rem; color: var(--gx-gray-mid); }

.stt-section__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* Profile card */
.stt-profile { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--gx-gray-light); }
.stt-avatar { width: 4rem; height: 4rem; border-radius: 50%; background: var(--gx-dark); color: var(--gx-lime); font-family: var(--gx-font-heading); font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stt-avatar__info { flex: 1; }
.stt-avatar__name { font-family: var(--gx-font-heading); font-size: 1.05rem; font-weight: 700; color: var(--gx-dark); }
.stt-avatar__role { font-size: 0.78rem; color: var(--gx-gray-mid); }
.stt-avatar-btn { padding: 0.45rem 0.9rem; border-radius: var(--gx-r-full); font-size: 0.8rem; font-weight: 500; cursor: pointer; border: 1px solid var(--gx-gray-light); color: var(--gx-g300); background: transparent; transition: all var(--gx-t); }
.stt-avatar-btn:hover { border-color: var(--gx-gray); background: var(--gx-off-white); }

/* Form fields */
.stt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stt-field { display: flex; flex-direction: column; gap: 0.4rem; }
.stt-field--full { grid-column: 1 / -1; }
.stt-label { font-size: 0.8rem; font-weight: 500; color: var(--gx-dark); }
.stt-input { padding: 0.6rem 0.875rem; border: 1px solid var(--gx-gray-light); border-radius: var(--gx-r-md); font-family: var(--gx-font-body); font-size: 0.875rem; color: var(--gx-dark); background: var(--gx-off-white); transition: border-color var(--gx-t), background var(--gx-t); outline: none; }
.stt-input:focus { border-color: var(--gx-lime-dark); background: var(--gx-white); }
.stt-input::placeholder { color: var(--gx-gray-mid); }
.stt-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.5rem; cursor: pointer; }
.stt-hint { font-size: 0.72rem; color: var(--gx-gray-mid); }

/* Toggle switch */
.stt-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--gx-gray-light); }
.stt-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.stt-toggle-info { flex: 1; }
.stt-toggle-label { font-size: 0.875rem; font-weight: 500; color: var(--gx-dark); }
.stt-toggle-hint { font-size: 0.72rem; color: var(--gx-gray-mid); margin-top: 0.1rem; }

.stt-toggle { position: relative; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.stt-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.stt-toggle__track { position: absolute; inset: 0; background: var(--gx-gray-light); border-radius: var(--gx-r-full); transition: background var(--gx-t); cursor: pointer; }
.stt-toggle input:checked + .stt-toggle__track { background: var(--gx-lime-dark); }
.stt-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem; background: var(--gx-white); border-radius: 50%; transition: transform var(--gx-t); box-shadow: 0 1px 3px rgba(0,0,0,0.2); pointer-events: none; }
.stt-toggle input:checked ~ .stt-toggle__thumb { transform: translateX(1.25rem); }

/* Appearance swatches */
.stt-theme-picker { display: flex; gap: 0.75rem; }
.stt-theme-swatch { width: 5rem; border: 2px solid transparent; border-radius: var(--gx-r-md); overflow: hidden; cursor: pointer; transition: border-color var(--gx-t); }
.stt-theme-swatch.is-active { border-color: var(--gx-lime-dark); }
.stt-theme-swatch__preview { height: 3.5rem; display: flex; }
.stt-theme-swatch__bar { width: 35%; background: var(--gx-dark); }
.stt-theme-swatch__content { flex: 1; }
.stt-theme-swatch--light .stt-theme-swatch__content { background: #f0f2f5; }
.stt-theme-swatch--dark .stt-theme-swatch__bar { background: #0a0e1c; }
.stt-theme-swatch--dark .stt-theme-swatch__content { background: #080c14; }
.stt-theme-swatch__label { font-size: 0.68rem; font-weight: 600; text-align: center; color: var(--gx-g300); padding: 0.35rem; background: var(--gx-off-white); }

/* Danger zone */
.stt-danger { border-color: rgba(239,68,68,0.25); }
.stt-danger .stt-section__header { border-bottom-color: rgba(239,68,68,0.15); }
.stt-danger .stt-section__title { color: #dc2626; }
.stt-danger-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(239,68,68,0.1); }
.stt-danger-btn:last-child { border-bottom: none; }
.stt-danger-btn__label { font-size: 0.875rem; font-weight: 500; color: var(--gx-dark); }
.stt-danger-btn__sub { font-size: 0.72rem; color: var(--gx-gray-mid); }
.stt-btn-danger { padding: 0.5rem 1rem; border-radius: var(--gx-r-full); font-size: 0.8rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(239,68,68,0.4); color: #dc2626; background: rgba(239,68,68,0.05); transition: all var(--gx-t); white-space: nowrap; }
.stt-btn-danger:hover { background: rgba(239,68,68,0.12); border-color: #dc2626; }

/* Save button */
.stt-save-row { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
.stt-btn { padding: 0.6rem 1.25rem; border-radius: var(--gx-r-full); font-size: 0.85rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all var(--gx-t); }
.stt-btn--ghost { background: transparent; border-color: var(--gx-gray-light); color: var(--gx-g300); }
.stt-btn--ghost:hover { background: var(--gx-off-white); border-color: var(--gx-gray); }
.stt-btn--save { background: var(--gx-dark); color: var(--gx-lime); border-color: var(--gx-dark); }
.stt-btn--save:hover { background: var(--gx-gray-dark); }

/* ============================================================
   Dark theme
   ============================================================ */
[data-theme="dark"] .stt-header__title { color: #dde4f2; }
[data-theme="dark"] .stt-header__sub { color: #5c6880; }
[data-theme="dark"] .stt-nav { background: #0f1420; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .stt-nav__item { color: #8090b0; border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stt-nav__item:hover { background: rgba(255,255,255,0.04); color: #dde4f2; }
[data-theme="dark"] .stt-nav__item.is-active { background: rgba(201,236,102,0.07); color: #dde4f2; }
[data-theme="dark"] .stt-section { background: #0f1420; border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .stt-section__header { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .stt-section__title { color: #dde4f2; }
[data-theme="dark"] .stt-section__sub { color: #5c6880; }
[data-theme="dark"] .stt-avatar__name { color: #dde4f2; }
[data-theme="dark"] .stt-avatar__role { color: #5c6880; }
[data-theme="dark"] .stt-avatar-btn { border-color: rgba(255,255,255,0.1); color: #8090b0; }
[data-theme="dark"] .stt-avatar-btn:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .stt-profile { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .stt-label { color: #c0cce0; }
[data-theme="dark"] .stt-input { background: #080c14; border-color: rgba(255,255,255,0.09); color: #dde4f2; }
[data-theme="dark"] .stt-input:focus { border-color: var(--gx-lime-dark); background: rgba(255,255,255,0.03); }
[data-theme="dark"] .stt-input::placeholder { color: #4a5568; }
[data-theme="dark"] .stt-hint { color: #5c6880; }
[data-theme="dark"] .stt-toggle-row { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .stt-toggle-label { color: #dde4f2; }
[data-theme="dark"] .stt-toggle-hint { color: #5c6880; }
[data-theme="dark"] .stt-toggle__track { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .stt-toggle__thumb { background: #dde4f2; }
[data-theme="dark"] .stt-theme-swatch__label { background: rgba(255,255,255,0.05); color: #8090b0; }
[data-theme="dark"] .stt-danger { border-color: rgba(239,68,68,0.2); }
[data-theme="dark"] .stt-danger .stt-section__header { border-bottom-color: rgba(239,68,68,0.12); }
[data-theme="dark"] .stt-danger-btn { border-bottom-color: rgba(239,68,68,0.08); }
[data-theme="dark"] .stt-danger-btn__label { color: #dde4f2; }
[data-theme="dark"] .stt-danger-btn__sub { color: #5c6880; }
[data-theme="dark"] .stt-btn-danger { border-color: rgba(239,68,68,0.3); color: #f87171; background: rgba(239,68,68,0.07); }
[data-theme="dark"] .stt-btn-danger:hover { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .stt-btn--ghost { border-color: rgba(255,255,255,0.1); color: #8090b0; }
[data-theme="dark"] .stt-btn--ghost:hover { background: rgba(255,255,255,0.05); }

@media (max-width: 1024px) { .stt-layout { grid-template-columns: 1fr; } .stt-nav { position: static; display: flex; overflow-x: auto; } .stt-nav__item { white-space: nowrap; border-bottom: none; border-right: 1px solid var(--gx-gray-light); } }
@media (max-width: 768px) { .stt-row { grid-template-columns: 1fr; } }