/* =============================================================================
   Our Hidden Nest — homestead-root styling (landing, login, logout, users)
   ----------------------------------------------------------------------------
   Mirrors the theming model used by irrigation/assets/css/irrigation.css:
     - :root defines the PAPER theme tokens (default — warm cream, low-glare).
     - html.theme-dark overrides them.
     - All colors come from var(--token).
     - html.font-{small,medium,large,xlarge} sets the rem base for scaling.

   If you adjust palette tokens here, also adjust them in irrigation.css to
   keep the two apps in visual lockstep.
   ============================================================================= */

/* =============================================================================
   Theme tokens
   ============================================================================= */

:root {
    /* Surfaces */
    --bg:           #f5efe2;
    --bg-soft:      #ebe3cf;
    --card:         #fffaf0;
    --card-soft:    #f9f1dc;
    --input-bg:     #fdf9ee;

    /* Text */
    --text:         #2c2418;
    --muted:        #6b5e4f;
    --muted-bright: #3d342a;

    /* Borders */
    --border:       #d9d0bb;
    --border-soft:  #ebe3cf;

    /* Primary accent (forest green in paper, sky blue in dark) */
    --blue:         #2d6a4f;
    --blue-strong:  #1b4332;
    --on-accent:    #fffaf0;

    /* Status: good */
    --green:        #166534;
    --green-soft:   rgba(20, 83, 45, 0.13);
    --green-text:   #14532d;
    --green-border: #166534;

    /* Status: alert */
    --red:          #991b1b;
    --red-soft:     rgba(153, 27, 27, 0.10);
    --red-text:     #6f1d1d;
    --red-border:   #991b1b;

    /* Status: warning */
    --yellow:       #92400e;
    --yellow-soft:  rgba(146, 64, 14, 0.13);
    --yellow-text:  #78350f;
    --yellow-border:#92400e;

    /* Background "glow" tints used by the page background */
    --bg-glow-1:    rgba(45, 106, 79, 0.10);
    --bg-glow-2:    rgba(146, 100, 34, 0.07);

    /* Sizing */
    --radius:       14px;
    --radius-sm:    10px;
    --shadow:       0 4px 18px rgba(64, 51, 33, 0.08);
}

html.theme-dark {
    --bg:           #07111f;
    --bg-soft:      #0b1728;
    --card:         #111f33;
    --card-soft:    #13263d;
    --input-bg:     #07111f;

    --text:         #e5e7eb;
    --muted:        #9ca3af;
    --muted-bright: #bfdbfe;

    --border:       #26384f;
    --border-soft:  #1d2e44;

    --blue:         #38bdf8;
    --blue-strong:  #0ea5e9;
    --on-accent:    #04131f;

    --green:        #22c55e;
    --green-soft:   rgba(20, 83, 45, 0.45);
    --green-text:   #bbf7d0;
    --green-border: #22c55e;

    --red:          #ef4444;
    --red-soft:     rgba(127, 29, 29, 0.45);
    --red-text:     #fecaca;
    --red-border:   #ef4444;

    --yellow:       #facc15;
    --yellow-soft:  rgba(113, 63, 18, 0.40);
    --yellow-text:  #fef08a;
    --yellow-border:#facc15;

    --bg-glow-1:    rgba(14, 165, 233, 0.16);
    --bg-glow-2:    rgba(34, 197, 94, 0.10);

    --shadow:       0 18px 45px rgba(0, 0, 0, 0.35);
}

/* =============================================================================
   Font-size scaling — html font-size sets the rem base
   ============================================================================= */

html              { font-size: 16px; }
html.font-small   { font-size: 14px; }
html.font-medium  { font-size: 16px; }
html.font-large   { font-size: 19px; }
html.font-xlarge  { font-size: 22px; }

/* =============================================================================
   Base
   ============================================================================= */

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left,  var(--bg-glow-1), transparent 34rem),
        radial-gradient(circle at top right, var(--bg-glow-2), transparent 28rem),
        var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    padding: 2.5rem 1.5rem 5rem;
}

a { color: inherit; }

button, input, select, textarea { font: inherit; }
button { appearance: none; }

/* =============================================================================
   Common layout containers
   ============================================================================= */

.wrap {
    max-width: 35rem;
    margin: 0 auto;
}

.wrap.wide {
    max-width: 47.5rem;
}

/* =============================================================================
   Page header
   ============================================================================= */

.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-head h1,
header h1 {
    margin: 0;
    font: italic 400 1.875rem/1.2 ui-serif, Georgia, Cambria, "Times New Roman", serif;
    letter-spacing: -0.01em;
    color: var(--text);
}

.subtitle {
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.user-bar {
    color: var(--muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.user-bar a {
    color: var(--blue);
    text-decoration: none;
}

.user-bar a:hover {
    color: var(--blue-strong);
    text-decoration: underline;
}

.back-link {
    color: var(--blue);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link:hover {
    color: var(--blue-strong);
    text-decoration: underline;
}

/* =============================================================================
   Notices
   ============================================================================= */

.notice {
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.notice.success {
    background: var(--green-soft);
    color: var(--green-text);
    border-left: 3px solid var(--green-border);
}

.notice.error {
    background: var(--red-soft);
    color: var(--red-text);
    border-left: 3px solid var(--red-border);
}

.notice.warn,
.warn {
    background: var(--yellow-soft);
    color: var(--yellow-text);
    border-left: 3px solid var(--yellow-border);
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

/* =============================================================================
   Cards
   ============================================================================= */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.375rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

/* =============================================================================
   Forms — inputs, fields, checkbox rows
   ============================================================================= */

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.field-row.single { grid-template-columns: 1fr; }

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field label {
    color: var(--muted);
    font-size: 0.825rem;
    letter-spacing: 0.02em;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.625rem 0.75rem;
    font: inherit;
}

.field input:focus {
    outline: none;
    border-color: var(--blue);
}

.checkbox-row {
    display: flex;
    gap: 1.125rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.checkbox-row label {
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-row input[disabled] + span {
    color: var(--muted);
}

/* =============================================================================
   Buttons
   ============================================================================= */

button[type="submit"] {
    background: var(--blue);
    color: var(--on-accent);
    border: 0;
    border-radius: 0.4rem;
    padding: 0.6rem 1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 2.75rem;
}

button[type="submit"]:hover {
    background: var(--blue-strong);
}

button.secondary {
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--border);
}

button.secondary:hover {
    background: var(--card-soft);
    color: var(--blue-strong);
    border-color: var(--blue);
}

/* =============================================================================
   Landing page (index.php) — list of apps
   ============================================================================= */

.section-title {
    font-size: 0.825rem;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.app-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-list li {
    margin-bottom: 0.5rem;
}

.app-list a {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    box-shadow: var(--shadow);
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

.app-list a:hover {
    background: var(--card-soft);
    border-color: var(--blue);
    transform: translateY(-1px);
}

.empty {
    color: var(--muted);
    font-style: italic;
}

/* =============================================================================
   Login page (login.php)
   ============================================================================= */

.login-wrap {
    max-width: 24rem;
    margin: 4rem auto 0;
}

.login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 0 0 1.25rem;
    font: italic 400 1.625rem/1.2 ui-serif, Georgia, Cambria, "Times New Roman", serif;
    letter-spacing: -0.01em;
    color: var(--text);
    text-align: center;
}

.login-card .field {
    margin-bottom: 0.875rem;
}

.login-card button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
}

/* =============================================================================
   Users page (users.php) — user cards, app permissions, password reset
   ============================================================================= */

.user-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.user-card h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--muted-bright);
}

.user-card .meta {
    color: var(--muted);
    font-size: 0.8125rem;
}

.user-card .meta + .meta {
    margin-left: 0.75rem;
}

.self-badge {
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    color: var(--muted-bright);
}

.apps-fieldset {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.75rem 0.875rem 0.875rem;
    margin: 0.25rem 0 0.875rem;
    background: var(--bg-soft);
}

.apps-fieldset legend {
    color: var(--muted);
    font-size: 0.825rem;
    padding: 0 0.375rem;
}

.apps-fieldset .apps-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1.125rem;
    margin-top: 0.125rem;
}

@media (max-width: 560px) {
    .apps-fieldset .apps-list {
        grid-template-columns: 1fr;
    }
}

.apps-fieldset label {
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

details.password-reset {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
}

details.password-reset summary {
    color: var(--blue);
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
    list-style: none;
}

details.password-reset summary::-webkit-details-marker {
    display: none;
}

details.password-reset summary:hover {
    color: var(--blue-strong);
}

details.password-reset[open] summary {
    color: var(--muted-bright);
}

details.password-reset .pw-form {
    margin-top: 0.875rem;
}