/*
 * WalkerDrive shared stylesheet (Oct 31 2026; makeover started Nov 2 2026).
 *
 * Every logged-in page loads it: older pages through app/nav.php (after
 * their own <style>, so rules here win), made-over pages through
 * app/head.php. Made-over pages have <html class="wd-themed"> and a
 * data-theme of "dark" (InDesign look) or "light"; all their colors come
 * from the variables below, so a page never names a color itself.
 * Older pages keep their own light look; only the top bar is shared.
 */

/* ---------- Colors ---------- */

:root {
    --wd-font: "Myriad Pro", "Adobe Clean", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;

    /* Dark (default, also the top bar of older pages) */
    --wd-bar: #474747;
    --wd-bar-text: #d4d4d4;
    --wd-bar-line: #3a3a3a;
    --wd-pill-line: #626262;
    --wd-pill-current: #626262;
    --wd-bg: #5d5d5d;
    --wd-line: #8b8b8b;
    --wd-line-soft: #6d6d6d;
    --wd-text: #d2d2d2;
    --wd-text-dim: #a9a9a9;
    --wd-heading: #e6e6e6;
    --wd-link: #ececec;
    --wd-selected: #4b4b4b;
    --wd-hover: #545454;
    --wd-field: #bcbcbc;
    --wd-field-text: #262626;
    --wd-field-line: #bcbcbc;
    --wd-button: #474747;
    --wd-button-text: #e0e0e0;
    --wd-button-line: #6e6e6e;
    --wd-ok-bg: #4d5e4d;
    --wd-ok-line: #7a9a7a;
    --wd-error-bg: #6e4a4a;
    --wd-error-line: #b07a7a;
}

html.wd-themed[data-theme="light"] {
    --wd-bar: #e3e3e3;
    --wd-bar-text: #3a3a3a;
    --wd-bar-line: #cdcdcd;
    --wd-pill-line: #c2c2c2;
    --wd-pill-current: #cfcfcf;
    --wd-bg: #f3f3f3;
    --wd-line: #bdbdbd;
    --wd-line-soft: #dcdcdc;
    --wd-text: #333333;
    --wd-text-dim: #6c6c6c;
    --wd-heading: #1f1f1f;
    --wd-link: #1f1f1f;
    --wd-selected: #e0e0e0;
    --wd-hover: #e9e9e9;
    --wd-field: #ffffff;
    --wd-field-text: #222222;
    --wd-field-line: #bdbdbd;
    --wd-button: #e3e3e3;
    --wd-button-text: #262626;
    --wd-button-line: #bdbdbd;
    --wd-ok-bg: #e6f3e6;
    --wd-ok-line: #a9d1a9;
    --wd-error-bg: #fbe9e9;
    --wd-error-line: #dba3a3;
}

html.wd-themed {
    color-scheme: dark;
}

html.wd-themed[data-theme="light"] {
    color-scheme: light;
}


/* ---------- Top bar (every page) ---------- */

.wd-topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--wd-bar);
    color: var(--wd-bar-text);
    border-bottom: 1px solid var(--wd-bar-line);
    padding: 8px 20px;
    font-family: var(--wd-font);
    font-size: 14px;
    /* Older pages: their body has 40px / 20px margins. */
    margin: -40px -20px 30px -20px;
}

.wd-topnav-left,
.wd-topnav-right,
.wd-topnav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wd-topnav a {
    color: var(--wd-bar-text);
    text-decoration: none;
    white-space: nowrap;
}

.wd-topnav-brand {
    font-weight: bold;
    font-size: 17px;
    margin-right: 22px;
}

.wd-topnav-links a {
    border: 1px solid var(--wd-pill-line);
    border-radius: 5px;
    padding: 4px 14px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wd-topnav-links a:hover {
    background: var(--wd-pill-current);
}

.wd-topnav-links a.wd-current {
    background: var(--wd-pill-current);
}

.wd-topnav-user {
    color: var(--wd-bar-text);
    opacity: 0.75;
    margin: 0 6px 0 4px;
    white-space: nowrap;
}

.wd-topnav-right a:hover {
    text-decoration: underline;
}

/* The menu button only shows on phones. */
.wd-topnav-toggle,
html.wd-themed .wd-topnav-toggle {
    display: none;
}

/* Sun / moon: only on made-over pages. Sun shows in the dark theme
   ("switch to light"), moon in the light theme. */
.wd-theme-btn {
    display: none;
}

html.wd-themed .wd-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 5px;
    color: var(--wd-bar-text);
    cursor: pointer;
}

html.wd-themed .wd-theme-btn:hover {
    background: var(--wd-pill-current);
}

.wd-icon-moon {
    display: none;
}

html.wd-themed[data-theme="light"] .wd-icon-sun {
    display: none;
}

html.wd-themed[data-theme="light"] .wd-icon-moon {
    display: block;
}


/* ---------- Made-over pages ---------- */

html.wd-themed body {
    margin: 0;
    padding: 0;
    max-width: none;
    min-height: 100vh;
    background: var(--wd-bg);
    color: var(--wd-text);
    font-family: var(--wd-font);
    font-size: 15px;
    line-height: 1.45;
}

html.wd-themed .wd-topnav {
    margin: 0;
}

html.wd-themed a {
    color: var(--wd-link);
    text-underline-offset: 3px;
}

html.wd-themed h1,
html.wd-themed h2,
html.wd-themed h3 {
    color: var(--wd-heading);
    font-weight: 600;
    line-height: 1.2;
}

html.wd-themed h1 { font-size: 26px; margin: 0 0 6px; }
html.wd-themed h2 { font-size: 20px; margin: 0 0 12px; }

/* Breadcrumbs under the top bar */
.wd-crumbs {
    padding: 12px 20px 12px 30px;
    font-size: 13px;
    color: var(--wd-text-dim);
    border-bottom: 1px solid var(--wd-line);
}

.wd-crumbs a {
    color: var(--wd-text);
    text-decoration: none;
}

.wd-crumbs a:hover {
    text-decoration: underline;
}

.wd-crumb-sep {
    margin: 0 6px;
}

/* Sidebar | content */
.wd-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 100px);
}

.wd-side {
    width: 290px;
    flex-shrink: 0;
    border-right: 1px solid var(--wd-line);
    padding: 28px 0 40px 40px;
    box-sizing: border-box;
}

.wd-main {
    flex: 1;
    min-width: 0;
    padding: 34px 40px 60px 60px;
    box-sizing: border-box;
}

.wd-intro {
    color: var(--wd-text-dim);
    margin: 0 0 22px;
}

/* Sidebar list: upper-case rows between lines; <details> rows fold open. */
.wd-side-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wd-heading);
    margin: 0 0 18px;
}

.wd-side-list {
    border-top: 1px solid var(--wd-line);
}

.wd-side-row {
    border-bottom: 1px solid var(--wd-line);
}

.wd-side-row > summary,
.wd-side-row > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wd-text);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.wd-side-row > summary::-webkit-details-marker {
    display: none;
}

.wd-side-row > summary:hover,
.wd-side-row > a:hover {
    background: var(--wd-hover);
}

.wd-side-row.wd-current > summary,
.wd-side-row.wd-current > a {
    background: var(--wd-selected);
}

.wd-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 4px;
    opacity: 0.8;
    transition: transform 0.15s;
}

details[open] > summary .wd-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.wd-side-sub {
    padding: 2px 0 10px 24px;
}

.wd-side-sub a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: var(--wd-text);
    text-decoration: none;
}

.wd-side-sub a:hover {
    text-decoration: underline;
}

.wd-side-sub .wd-dim {
    color: var(--wd-text-dim);
    font-size: 13px;
    padding: 5px 0;
}

/* "Add Client"-style fold-out action above the list */
.wd-side-add {
    margin: 0 0 22px;
}

.wd-side-add > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--wd-heading);
    cursor: pointer;
    list-style: none;
}

.wd-side-add > summary::-webkit-details-marker {
    display: none;
}

.wd-side-add form {
    padding: 8px 24px 0 0;
}

/* Tables */
html.wd-themed table.wd-table {
    width: 100%;
    border-collapse: collapse;
}

html.wd-themed .wd-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wd-text-dim);
    padding: 8px 12px;
    border-bottom: 1px solid var(--wd-line);
    background: none;
}

html.wd-themed .wd-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--wd-line-soft);
    vertical-align: top;
}

html.wd-themed .wd-table tr:hover td {
    background: var(--wd-hover);
}

.wd-num {
    text-align: right !important;
    width: 1%;
    white-space: nowrap;
}

/* Forms */
html.wd-themed label {
    display: block;
    font-weight: 600;
    color: var(--wd-heading);
    margin: 14px 0 6px;
}

html.wd-themed input[type="text"],
html.wd-themed input[type="password"],
html.wd-themed input[type="email"],
html.wd-themed input[type="date"],
html.wd-themed select,
html.wd-themed textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--wd-field-text);
    background: var(--wd-field);
    border: 1px solid var(--wd-field-line);
    border-radius: 0;
}

html.wd-themed button,
html.wd-themed input[type="submit"],
html.wd-themed .wd-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 22px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wd-button-text);
    background: var(--wd-button);
    border: 1px solid var(--wd-button-line);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

html.wd-themed button:hover,
html.wd-themed input[type="submit"]:hover,
html.wd-themed .wd-btn:hover {
    filter: brightness(1.12);
}

/* The top bar's own buttons keep their own look. */
html.wd-themed .wd-topnav button {
    margin-top: 0;
    letter-spacing: 0;
    text-transform: none;
    border: 0;
}

/* Page without a sidebar (My Work) */
.wd-page {
    max-width: 1200px;
    padding: 30px 40px 60px;
    box-sizing: border-box;
}

.wd-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

.wd-section {
    margin: 0 0 38px;
}

.wd-section h2 {
    border-bottom: 1px solid var(--wd-line);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.wd-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--wd-text-dim);
    margin-left: 6px;
}

.wd-empty {
    color: var(--wd-text-dim);
    margin: 12px 0 0;
}

.wd-dim {
    color: var(--wd-text-dim);
    font-size: 13px;
}

/* Account numbers (administrators) */
.wd-stats {
    display: flex;
    gap: 10px;
}

.wd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 8px 10px;
    border: 1px solid var(--wd-line);
    border-radius: 6px;
    text-decoration: none;
}

html.wd-themed a.wd-stat {
    color: var(--wd-text);
}

.wd-stat:hover {
    background: var(--wd-hover);
}

.wd-stat-num {
    font-size: 22px;
    font-weight: 600;
    color: var(--wd-heading);
}

.wd-stat-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wd-text-dim);
}

/* Status color square, due dates (same colors as the panel), Id / Ic tags */
.wd-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    vertical-align: 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.wd-overdue {
    color: #ff5a4f;
    font-weight: 600;
}

.wd-due-soon {
    color: #ffa53a;
    font-weight: 600;
}

html.wd-themed[data-theme="light"] .wd-overdue {
    color: #c62d22;
}

html.wd-themed[data-theme="light"] .wd-due-soon {
    color: #b8650a;
}

.wd-kind {
    display: inline-block;
    width: 22px;
    padding: 1px 0;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 3px;
}

.wd-kind-id {
    color: #ff3d8b;
    background: #49021f;
}

.wd-kind-ic {
    color: #e6a6ff;
    background: #2b0738;
}

/* Messages */
.wd-msg {
    padding: 10px 14px;
    margin: 0 0 18px;
    border: 1px solid var(--wd-ok-line);
    background: var(--wd-ok-bg);
    color: var(--wd-text);
}

.wd-msg.wd-error {
    border-color: var(--wd-error-line);
    background: var(--wd-error-bg);
}


/* Fold-open sections in the content area (Clients page, Nov 3 2026): the client's name
   opens its editable details; "Add Project" opens its form. */
.wd-fold {
    margin: 0 0 18px;
}

.wd-fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.wd-fold > summary::-webkit-details-marker {
    display: none;
}

.wd-fold-title > summary h1 {
    margin: 0;
}

.wd-fold-title > summary .wd-chevron {
    width: 9px;
    height: 9px;
}

.wd-fold-add > summary {
    font-size: 18px;
    font-weight: 600;
    color: var(--wd-heading);
}

.wd-fold-body {
    max-width: 560px;
    padding: 4px 0 8px;
}

.wd-fold-danger {
    margin-top: 22px;
    padding-top: 6px;
    border-top: 1px solid var(--wd-line-soft);
}

html.wd-themed button.wd-danger {
    color: #fff;
    background: #a32121;
    border-color: #7d1818;
}

html.wd-themed button:disabled {
    opacity: 0.4;
    filter: none;
    cursor: default;
}

.wd-side-empty {
    display: block;
    padding: 13px 12px;
    font-size: 13px;
    color: var(--wd-text-dim);
}

/* A list of links between lines (a client's projects). */
.wd-link-list {
    border-top: 1px solid var(--wd-line);
    max-width: 760px;
}

.wd-link-list > a {
    display: block;
    padding: 12px 12px;
    border-bottom: 1px solid var(--wd-line);
    color: var(--wd-text);
    text-decoration: none;
}

.wd-link-list > a:hover {
    background: var(--wd-hover);
}

.wd-link-name {
    font-weight: 600;
}

.wd-link-note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--wd-text-dim);
}

.wd-link-list .wd-empty {
    padding: 12px;
    margin: 0;
}


/* The project page's shared editors (Categories, Schedule) on the theme. They carry
   their own light-page styles; these win only on themed pages. */
html.wd-themed .wd-catlist td,
html.wd-themed .wd-statuslist td {
    border-bottom-color: var(--wd-line-soft);
}

html.wd-themed .wd-statuslist th,
html.wd-themed .wd-catlist-hint,
html.wd-themed .wd-statuslist-hint,
html.wd-themed .wd-gate-hint,
html.wd-themed .wd-statuslist .wd-used {
    color: var(--wd-text-dim);
}

html.wd-themed .wd-catlist input.wd-pos {
    width: 64px;
    text-align: right;
    padding: 6px 28px 6px 6px;
}

html.wd-themed .wd-catlist input.wd-name,
html.wd-themed .wd-statuslist input.wd-name {
    padding: 6px 8px;
}

html.wd-themed .wd-statuslist select,
html.wd-themed .wd-statuslist input[type="date"] {
    width: auto;
    padding: 5px 8px;
}

html.wd-themed .wd-statuslist select:not([multiple]) {
    padding-right: 32px;
}

html.wd-themed .wd-gate-list {
    background: var(--wd-field);
    border-color: var(--wd-field-line);
    color: var(--wd-text);
}

html.wd-themed .wd-gate-list label {
    font-weight: normal;
    margin: 0;
}

html.wd-themed .wd-statuslist input[type="color"],
html.wd-themed .wd-statuslist-add input[type="color"] {
    border-color: var(--wd-field-line);
    background: var(--wd-field);
}

html.wd-themed .wd-catlist button,
html.wd-themed .wd-statuslist button {
    margin-top: 0;
}


/* ---------- Phones (screens up to 700px) ---------- */

@media (max-width: 700px) {

    body {
        margin: 12px auto !important;
        padding: 0 12px !important;
        max-width: none !important;
        -webkit-text-size-adjust: 100%;
    }

    html.wd-themed body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Top menu: brand + ☰ button; the links fold out below. */
    .wd-topnav {
        flex-wrap: wrap;
        margin: -12px -12px 16px -12px !important;
        padding: 10px 12px !important;
    }

    html.wd-themed .wd-topnav {
        margin: 0 !important;
    }

    .wd-topnav-toggle,
    html.wd-themed .wd-topnav-toggle {
        display: block;
        background: none;
        border: 0;
        color: var(--wd-bar-text);
        font-size: 24px;
        line-height: 1;
        padding: 4px 6px;
        cursor: pointer;
    }

    .wd-topnav-left,
    .wd-topnav-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
    }

    .wd-topnav-left {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .wd-topnav-links,
    .wd-topnav-right {
        display: none !important;
    }

    .wd-topnav.wd-open .wd-topnav-links,
    .wd-topnav.wd-open .wd-topnav-right {
        display: flex !important;
    }

    .wd-topnav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
        padding-top: 6px;
        gap: 0;
    }

    .wd-topnav-links a {
        border: 0;
        border-radius: 0;
    }

    .wd-topnav a,
    .wd-topnav-user {
        margin: 0 !important;
        padding: 10px 0;
        border-top: 1px solid var(--wd-bar-line);
    }

    .wd-topnav-brand {
        border-top: 0 !important;
        padding: 4px 0 !important;
    }

    html.wd-themed .wd-theme-btn {
        width: auto;
        justify-content: flex-start;
        padding: 10px 0;
    }

    /* Made-over pages: sidebar above the content. */
    .wd-shell {
        flex-direction: column;
        min-height: 0;
    }

    .wd-side {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid var(--wd-line);
        padding: 18px 16px;
    }

    .wd-main,
    .wd-page {
        padding: 22px 16px 40px;
    }

    .wd-crumbs {
        padding: 10px 16px;
    }

    /* Project / Categories pages: the tab list becomes one row of tabs
       above the content that scrolls sideways. */
    .layout-shell {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .sidebar {
        width: auto !important;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar a {
        flex-shrink: 0;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    /* Page headers with a title + buttons side by side: wrap. */
    .top {
        flex-wrap: wrap;
        gap: 10px;
    }

    h1 {
        font-size: 24px;
        overflow-wrap: anywhere;
    }

    /* Wide tables scroll sideways inside their own box, not the page. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th, td {
        padding: 10px 12px !important;
    }

    /* Form fields fit the screen; 16px stops iPhones zooming in on tap. */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        width: 100%;
    }

    /* ...except inside tables (Schedule, Categories): they keep their size
       and the table scrolls. */
    td input, td select, td textarea {
        width: auto;
    }

    input[type="submit"],
    button {
        min-height: 40px;
    }
}


/* Users page (Nov 3 2026): checkbox rows, the groups checklist, a note under each name
   in the left list, inactive users dimmed, headings over the link lists. */
html.wd-themed label.wd-check {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: normal;
    color: var(--wd-text);
    margin: 12px 0 0;
    cursor: pointer;
}

html.wd-themed label.wd-check input {
    margin: 0;
}

.wd-checklist {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 12px 12px;
    background: var(--wd-field);
    border: 1px solid var(--wd-field-line);
}

html.wd-themed .wd-checklist label.wd-check,
html.wd-themed .wd-checklist .wd-dim {
    margin-top: 8px;
    color: var(--wd-field-text);   /* same color as the text in the fields */
}

.wd-side-row > a:has(.wd-side-note) {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.wd-side-note {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wd-text-dim);
}

.wd-side-row.wd-inactive > a {
    opacity: 0.55;
}

html.wd-themed .wd-list-head {
    font-size: 16px;
    margin: 36px 0 8px;
}


/* Projects page (Nov 3 2026): client headings with an action on the right, filter box. */
.wd-client-head {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    max-width: 760px;
}

/* The intro line keeps the filter box level with it. */
.wd-page-head:has(.wd-filter) .wd-intro {
    margin-bottom: 0;
}

.wd-client-head a {
    color: var(--wd-heading);
    text-decoration: none;
}

.wd-client-head a:hover {
    text-decoration: underline;
}

html.wd-themed .wd-client-head .wd-head-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--wd-text-dim);
}

html.wd-themed input.wd-filter {
    box-sizing: border-box;
    width: 260px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--wd-field-text);
    background: var(--wd-field);
    border: 1px solid var(--wd-field-line);
}

.wd-page-head:has(.wd-filter) {
    max-width: 760px;
    align-items: flex-end;
}

.wd-client-block[hidden],
.wd-link-list > a[hidden] {
    display: none;
}

/* Placeholder text in the fields follows the field's own text color (it was too light
   in dark mode), and project names on the Projects page are not bold. */
html.wd-themed input::placeholder,
html.wd-themed textarea::placeholder {
    color: var(--wd-field-text);
    opacity: 0.6;
}

.wd-client-block .wd-link-name {
    font-weight: normal;
}

/* Tables with a second, dim line in a cell and buttons in the last cell (Trash). */
.wd-cell-note {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--wd-text-dim);
}

.wd-table td a {
    color: var(--wd-text);
    font-weight: 600;
    text-decoration: none;
}

.wd-table td a:hover {
    text-decoration: underline;
}

.wd-row-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

html.wd-themed .wd-row-actions button,
html.wd-themed .wd-row-actions .wd-btn {
    margin: 0 0 0 6px;
}


/* My Work: the Time Zone line at the bottom (Nov 3 2026). */
.wd-time-zone {
    margin-top: 36px;
    font-size: 13px;
    color: var(--wd-text-dim);
}

.wd-time-zone strong {
    color: var(--wd-text);
    font-weight: 600;
}


/* My Work: section headings fold open and closed (Nov 3 2026). */
details.wd-section > summary {
    list-style: none;
    cursor: pointer;
}

details.wd-section > summary::-webkit-details-marker {
    display: none;
}

details.wd-section > summary h2 {
    display: flex;
    align-items: center;
    gap: 2px;
}

details.wd-section > summary .wd-chevron {
    margin-left: 10px;
}

details.wd-section:not([open]) > summary h2 {
    margin-bottom: 0;
}

/* Online Users: a green dot before the name. */
.wd-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3bb54a;
    margin-right: 8px;
    vertical-align: 1px;
}


/* "Save changes on <section>?" (project page, Nov 3 2026). */
.wd-dialog-back {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}

.wd-dialog-back[hidden] {
    display: none;
}

.wd-dialog {
    width: 100%;
    max-width: 420px;
    padding: 22px 24px 18px;
    background: var(--wd-bg);
    color: var(--wd-text);
    border: 1px solid var(--wd-line);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.wd-dialog h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--wd-heading);
}

.wd-dialog p {
    margin: 0 0 18px;
    color: var(--wd-text-dim);
}

.wd-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

html.wd-themed .wd-dialog-buttons button {
    margin: 0;
}

html.wd-themed button.wd-primary {
    background: #2f6fd0;
    border-color: #2559a8;
    color: #fff;
}

html.wd-themed button.wd-primary:hover {
    background: #2a63bb;
}


/* Locks: both tables share one column grid (Nov 3 2026). */
.wd-lock-table {
    table-layout: fixed;
}

.wd-lock-table td {
    overflow-wrap: anywhere;
}

/* Properties page (item-properties.php): what cannot be changed is one line of facts
   under the name; the form holds only what can be changed. */
html.wd-themed .wd-props form {
    max-width: 560px;
}

html.wd-themed .wd-props input[type="text"],
html.wd-themed .wd-props select,
html.wd-themed .wd-props textarea {
    width: 100%;
    box-sizing: border-box;
}

html.wd-themed .wd-props-facts span + span::before {
    content: "·";
    margin: 0 8px;
    color: var(--wd-text-dim);
}

html.wd-themed .wd-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--wd-text-dim);
}

html.wd-themed .wd-props-value {
    margin: 0;
}

html.wd-themed .wd-props-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Dropdowns: flat like InDesign / InCopy pop-ups (no browser 3D button), small up-down
   arrows on the right, dark gray (the fields are light in both themes). */
html.wd-themed select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cpath d='M1.5 7l4.5-4.5 4.5 4.5M1.5 11l4.5 4.5 4.5-4.5' fill='none' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px 18px;
    cursor: pointer;
}

html.wd-themed select:not([multiple]):focus {
    outline: none;
    border-color: var(--wd-link);
}

html.wd-themed select:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Number fields: no browser stepper (it drew white arrows tight against the number); the
   dropdowns' up-down arrows instead. head.php makes a click on them step the number. */
html.wd-themed input[type="number"] {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    color: var(--wd-field-text);
    background-color: var(--wd-field);
    border: 1px solid var(--wd-field-line);
    border-radius: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18'%3E%3Cpath d='M1.5 7l4.5-4.5 4.5 4.5M1.5 11l4.5 4.5 4.5-4.5' fill='none' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px 18px;
}

html.wd-themed input[type="number"]::-webkit-inner-spin-button,
html.wd-themed input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Log In page (login.php): one centered box, no menu bar. */
html.wd-themed body.wd-login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

html.wd-themed .wd-login {
    width: 100%;
    max-width: 380px;
    padding: 32px 32px 36px;
    box-sizing: border-box;
    border: 1px solid var(--wd-line);
    background: var(--wd-bg);
}

html.wd-themed .wd-login h1 {
    margin: 0 0 4px;
}

html.wd-themed .wd-login .wd-intro {
    margin: 0 0 18px;
}

html.wd-themed .wd-login button {
    width: 100%;
    margin-top: 26px;
    padding: 10px;
}

/* Account page (account.php, Nov 4 2026). The user's name at the top right links there. */
html.wd-themed .wd-account form {
    max-width: 560px;
}

html.wd-themed .wd-account-section {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--wd-line);
}

html.wd-themed .wd-account-section h2.wd-list-head {
    margin-top: 0;
    font-size: 19px;
}

html.wd-themed .wd-account-section .wd-table {
    margin-top: 6px;
}

html.wd-themed .wd-account-all {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

html.wd-themed .wd-account-all .wd-cell-note {
    margin: 0;
}

html.wd-themed .wd-account-all button {
    margin-top: 0;
}

a.wd-topnav-user {
    text-decoration: none;
}

a.wd-topnav-user:hover,
a.wd-topnav-user.wd-current {
    opacity: 1;
}

html.wd-themed input.wd-field-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 1px #c0392b;
}

html.wd-themed .wd-account-pw-msg .wd-msg {
    margin: 18px 0 0;
}