/* =========================================================
   My Planner — shared stylesheet
   Palette from my personal website: black + gold
   ========================================================= */

/* ---------- 1. Colors and fonts (change them here only) ---------- */
:root {
    --bg: #0d0c0a;          /* page background (near-black) */
    --surface: #16140f;     /* boxes, cards, table rows */
    --surface-2: #1d1a13;   /* alternate rows */
    --line: #2b2719;        /* borders */
    --fg: #ece6d6;          /* main text (warm white) */
    --muted: #a49c86;       /* secondary text */
    --gold: #e9c44a;        /* highlights: titles, links, today */
    --gold-dim: #8f7a33;    /* softer gold: borders, hovers */
    --done: #e9c44a;        /* completed habit squares */
    --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
    --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
    color-scheme: dark;     /* dark date/time pickers and scrollbars */
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 400 16px/1.5 var(--body);
}
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
h1 { font-size: 2em; margin: 0 0 12px; }
h2 { font-size: 1.3em; color: var(--gold); }
ul { padding-left: 20px; }
.page { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ---------- 3. Top menu ---------- */
.topbar {
    display: flex; align-items: center; gap: 20px;
    padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.brand { font: 800 1.4em/1 var(--display); letter-spacing: .05em; color: var(--fg); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--gold); }
.topbar nav { display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; }
.topbar nav a {
    color: var(--muted); text-decoration: none;
    font: 500 .78em/2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.topbar nav a:hover { color: var(--gold); }

/* ---------- 4. Buttons, forms, tables ---------- */
button, .button {
    font: 500 .9em/1 var(--mono); padding: 8px 14px; cursor: pointer;
    background: transparent; color: var(--gold); border: 1px solid var(--gold);
    text-decoration: none; display: inline-block;
}
button:hover, .button:hover { background: var(--gold); color: var(--bg); }
.button.solid, button.solid { background: var(--gold); color: var(--bg); }
input, select, textarea {
    font: inherit; color: var(--fg); background: var(--surface);
    border: 1px solid var(--line); padding: 6px 8px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-dim); }
.helptext { display: block; color: var(--muted); font-size: .85em; }
form p label { display: inline-block; min-width: 150px; color: var(--muted); }
table { border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 12px 4px 0; vertical-align: top; }
td { padding: 4px 0; }

/* list pages (Roles, Goals, …) */
.item-list { list-style: none; padding: 0; margin: 0; }
.item-list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.item-list li > a { font-size: 1.05em; }
.item-list .sub { margin: 3px 0 0 22px; font-size: .82em; color: var(--muted); }
.item-list .sub-label { font-family: var(--mono); font-size: .9em; letter-spacing: .05em; color: #6b6452; }

/* the small status buttons on each task (✓ → ✗ ↺) */
form.status { display: inline; }
form.status button { padding: 1px 5px; font-size: .8em; border-color: var(--gold-dim); color: var(--muted); }
form.status button:hover { background: var(--gold); color: var(--bg); }
.status-label { color: var(--muted); font: .8em var(--mono); }
.task-name { color: var(--role, var(--gold)); }
.task-name.done, .cont.done { text-decoration: line-through; opacity: .55; }
.task-name.moved, .task-name.dropped, .cont.moved, .cont.dropped { opacity: .4; }
.danger-zone { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.danger-zone button { border-color: #e5534b; color: #e5534b; }
.danger-zone button:hover { background: #e5534b; color: var(--bg); }
.repeat { color: var(--muted); margin-left: 4px; font-size: .9em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }

/* whiteboard (week / month priorities) */
.board textarea {
    display: block; width: calc(100% - 24px); margin: 4px 12px 12px; min-height: 130px; resize: vertical;
    background: var(--bg); border: 1px solid var(--line); color: var(--fg); line-height: 1.6;
}
.board .box-head button { padding: 5px 12px; font-size: .8em; }
.board .box-head { gap: 12px; }
.board-status { margin-left: auto; font: .75em var(--mono); color: var(--muted); }
.overview.full .table-scroll { max-height: none; }
.overview.full .box-head { display: none; }
.overview.full .table-scroll { padding-top: 8px; }

/* ---------- 5. Page headers: title left, buttons right ---------- */
.form-top, .detail-top {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 6px 0 10px; margin-bottom: 14px; border-bottom: 2px solid var(--gold);
}
.form-top { position: sticky; top: 0; background: var(--bg); z-index: 5; }
.form-top h1, .detail-top h1 { margin: 0; font-size: 1.6em; }
.actions { display: flex; gap: 8px; }
.actions a, .actions button { white-space: nowrap; }

/* ---------- 6. Daily pages: banner, summary, boxes ---------- */
.banner {
    text-align: center; padding: 10px; border: 1px solid var(--gold-dim);
    background: var(--surface); color: var(--gold);
    font: 800 1.6em/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.banner a { color: var(--gold); text-decoration: none; padding: 0 14px; }
.banner a:hover { color: var(--fg); }
.summary { text-align: center; margin: 8px 0 16px; color: var(--muted); }
.box { border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; }
.box h2 { margin: 0; padding: 8px 12px 4px; font-size: 1.1em; }
.box ul { padding-left: 18px; margin: 4px 0; }
.scroll { max-height: 160px; overflow-y: auto; padding: 0 12px 10px; }

/* ---------- 7. Time grids (Today and This Week) ---------- */
.grid-scroll { max-height: 520px; overflow: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid th {
    background: var(--bg); color: var(--gold); padding: 6px; text-align: center;
    font: 600 1em var(--display); letter-spacing: .05em; text-transform: uppercase;
    position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--gold-dim);
}
.grid th a { color: var(--gold); text-decoration: none; }
.grid th.is-today { background: var(--gold); }
.grid th.is-today a { color: var(--bg); }
.grid td { border: 1px solid var(--line); padding: 3px 6px; vertical-align: top; font-size: .85em; }
.grid tr:nth-child(odd) td { background: var(--surface); }
.grid tr:nth-child(even) td { background: var(--surface-2); }
.grid .time { width: 115px; white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: .75em; }
.grid tr.no-time td { background: #221d10; }
.grid .add { display: block; color: var(--gold-dim); text-decoration: none; min-height: 1.2em; }
.grid .add:hover { background: rgba(233, 196, 74, .12); color: var(--gold); }
.grid .task { margin-bottom: 3px; }
.grid tr td.busy { background: #2a2411; }
.grid td.busy .task, .grid td.busy .cont { border-left: 3px solid var(--role, var(--gold)); padding-left: 6px; }
.grid .cont { color: var(--role, var(--muted)); opacity: .8; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }

.day { max-width: 680px; margin: 0 auto; }
.week { max-width: 1100px; margin: 0 auto; }
.week .grid { min-width: 900px; table-layout: fixed; }
.week .grid .time, .week .grid th.time { position: sticky; left: 0; z-index: 1; width: 132px; }
.week .grid th.time { z-index: 3; }

/* habits checklist on Today */
.habit-list { list-style: none; padding-left: 0 !important; }
.habit-list li { margin: 4px 0; }
.habit-list form { display: inline; }
.habit-list button { width: 26px; height: 26px; padding: 0; color: var(--gold); border-color: var(--gold-dim); }
.habit-list .done button { background: var(--done); border-color: var(--done); color: var(--bg); }
.habit-list .done span { color: var(--muted); text-decoration: line-through; }

/* ---------- 8. This Month calendar ---------- */
.month { max-width: 1100px; margin: 0 auto; }
.cal-scroll { overflow-x: auto; }
.cal { border-collapse: collapse; min-width: 700px; width: 100%; table-layout: fixed; }
.cal th {
    color: var(--gold); padding: 6px; text-align: center; border-bottom: 1px solid var(--gold-dim);
    font: 600 1em var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.cal th.wk { width: 40px; }
.cal td { border: 1px solid var(--line); background: var(--surface); vertical-align: top; height: 92px; padding: 3px 5px; font-size: .8em; }
.cal td.wk { background: var(--bg); text-align: center; vertical-align: middle; }
.cal td.wk a { text-decoration: none; }
.cal td.other { background: var(--bg); color: #5c5545; }
.cal td.is-today { outline: 2px solid var(--gold); outline-offset: -2px; }
.cal .num { font: 600 1.15em var(--display); text-decoration: none; color: var(--fg); }
.cal td.other .num { color: #5c5545; }
.cal .add { float: right; text-decoration: none; color: var(--gold-dim); }
.cal .add:hover { color: var(--gold); }
.cal .t { display: block; color: var(--role, var(--gold)); text-decoration: none; margin-top: 2px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .t.done { text-decoration: line-through; opacity: .55; }
.cal .t.dropped, .cal .t.moved { opacity: .4; }
.cal .t .dot { margin: 0 3px 0 0; width: 6px; height: 6px; }

/* ---------- 9. Habit Tracker ---------- */
.habits { max-width: 900px; margin: 0 auto; }
.ht-scroll { overflow-x: auto; border: 1px solid var(--line); }
.ht { border-collapse: collapse; min-width: 560px; width: 100%; }
.ht th {
    color: var(--gold); padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--gold-dim);
    font: 600 1em/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.ht th a { color: var(--gold); text-decoration: none; }
.ht th.is-today { background: var(--gold); }
.ht th.is-today a { color: var(--bg); }
.ht th.name, .ht td.name { text-align: left; position: sticky; left: 0; background: var(--bg); }
.ht td { border: 1px solid var(--line); background: var(--surface); text-align: center; padding: 0; }
.ht td.name { padding: 6px 8px; }
.ht td.name small { color: var(--muted); }
.ht td.off { background: repeating-linear-gradient(45deg, var(--bg) 0 6px, #1f1b12 6px 12px); }
.ht td button { width: 100%; height: 40px; border: none; background: transparent; font-size: 1.3em; color: var(--gold); padding: 0; }
.ht td button:hover { background: rgba(233, 196, 74, .15); }
.ht td.done { background: var(--done); }
.ht td.done button { color: var(--bg); }
.ht td.score { background: var(--bg); padding: 0 8px; white-space: nowrap; font-family: var(--mono); color: var(--muted); }
.ht td.score.met { color: var(--gold); font-weight: 600; }

/* ---------- 10. Home page ---------- */
.home-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.home { min-width: 0; }
.overview { min-width: 0; }
.box-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px 4px; }
.box-head h2 { margin: 0; padding: 0; }
.box-head a { font: 500 .85em var(--mono); text-decoration: none; }
.table-scroll { overflow-x: auto; padding: 0 12px 10px; }
.overview .table-scroll { max-height: 340px; overflow-y: auto; }
.overview .list-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.list-table { width: 100%; font-size: .92em; }
.list-table td.nw { white-space: nowrap; }
.list-table th a.sort { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--gold-dim); }
.list-table th a.sort:hover { color: var(--gold); }
.list-table th a.sorted { color: var(--gold); border-bottom: none; }
.list-table th a.sorted::after { content: " ▼"; }
.list-table .role { display: block; }
.list-table .role + .role { margin-top: 3px; }
.list-table th {
    color: var(--muted); font: 500 .75em/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid var(--gold-dim); padding: 6px 10px 6px 0; white-space: nowrap;
}
.list-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.list-table td a { text-decoration: none; }
.list-table td a:hover { text-decoration: underline; }
.list-table tr.divider td {
    color: var(--muted); font: 500 .75em var(--mono); letter-spacing: .1em; text-transform: uppercase;
    padding-top: 16px; border-bottom: 1px solid var(--line);
}
.list-table tr.closed td, .list-table tr.closed td a { color: #6b6452; }
.muted { color: var(--muted); }
.prio { font: 500 .78em/1 var(--mono); padding: 3px 7px; border: 1px solid var(--gold-dim); white-space: nowrap; }
.prio-high { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.prio-medium { color: var(--gold); border-color: var(--gold); }
.prio-low { color: var(--muted); }
.hero { position: relative; margin: -16px -16px 0; overflow: hidden; height: 260px; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,12,10,0) 40%, var(--bg) 100%); }
.hero h1 {
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1; margin: 0; text-align: center;
    font-size: 3.2em; color: var(--gold); text-shadow: 0 2px 12px #000;
}
.home-section {
    font: 800 1.3em/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--gold-dim); padding: 22px 0 8px; margin-bottom: 6px;
}
.home ul { list-style: none; padding: 0; margin: 0; }
.home li a {
    display: block; padding: 10px 4px; border-bottom: 1px solid var(--line);
    font: 600 1.4em/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase;
    color: var(--fg); text-decoration: none;
}
.home li a::before { content: "▸ "; color: var(--gold); }
.home li a:hover { color: var(--gold); padding-left: 10px; }

/* ---------- Login ---------- */
.topbar .logout { margin-left: auto; }
.topbar .logout button { padding: 4px 10px; font-size: .75em; border-color: var(--gold-dim); color: var(--muted); }
.login-page { max-width: 420px; margin: 0 auto; }
.small-hero { height: 180px; }
.login-box { margin-top: 18px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.login-box label { display: block; min-width: 0; margin-bottom: 4px; }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: 8px; padding: 10px; }
.login-error { color: #e5534b; }

/* ---------- 11. Phones ---------- */
@media (max-width: 860px) {
    .home-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
    .list-table { min-width: 560px; }
    .page { padding: 10px; }
    .hero { margin: -10px -10px 0; height: 200px; }
    .hero h1 { font-size: 2.6em; }
    .banner { font-size: 1.05em; padding: 8px 4px; }
    .banner a { padding: 0 6px; }
    form p label { display: block; }
    .topbar { gap: 12px; }
}