/**
 * CSL PLANNING ENGINE — Stylesheet v2
 * Scoped to .planner-root — no conflicts with platform CSS.
 */

/* ── Root ──────────────────────────────────────────────────── */
.planner-root {
    font-family: var(--font, 'Outfit', 'Inter', system-ui, sans-serif);
    color: var(--text-main, #1a1a2e);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.planner-root-start {
    color: var(--text-main, #1a1a2e);
    overflow: auto;
    background:
        radial-gradient(circle at top right, rgba(45, 122, 120, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(10,12,18,0.98), rgba(15,23,42,0.98));
}

/* ── New simplified start screen ──────────────────────────── */
.planner-start-simple {
    max-width: 480px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.planner-start-h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.planner-start-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.planner-start-name-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.planner-start-name-input::placeholder { color: rgba(255,255,255,0.35); }
.planner-start-name-input:focus {
    border-color: var(--primary,#2d7a78);
    background: rgba(255,255,255,0.1);
}
[data-theme="light"] .planner-start-name-input {
    background: #fff;
    border-color: var(--border, #e2e8f0);
    color: var(--text-main, #1a1a2e);
}
[data-theme="light"] .planner-start-name-input::placeholder { color: #94a3b8; }
.planner-start-submit-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
}
.planner-start-recent {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.planner-start-recent-head {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
}
[data-theme="light"] .planner-start-recent-head { color: #94a3b8; }
.planner-start-recent-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.1s, border-color 0.1s;
    width: 100%;
    box-sizing: border-box;
}
.planner-start-recent-row:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.16);
}
[data-theme="light"] .planner-start-recent-row {
    background: rgba(0,0,0,0.03);
    border-color: var(--border, #e2e8f0);
}
[data-theme="light"] .planner-start-recent-row:hover {
    background: rgba(45,122,120,0.06);
}
.planner-start-recent-icon { font-size: 0.95rem; flex-shrink: 0; }
.planner-start-recent-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
[data-theme="light"] .planner-start-recent-name { color: var(--text-main, #1a1a2e); }
.planner-start-recent-date {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
    white-space: nowrap;
}
[data-theme="light"] .planner-start-recent-date { color: #94a3b8; }
.planner-start-template-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.planner-start-template-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}
[data-theme="light"] .planner-start-template-label { color: #64748b; }
.planner-start-secondary {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.planner-start-secondary-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-family: inherit;
    transition: color 0.15s;
}
.planner-start-secondary-btn:hover { color: rgba(255,255,255,0.7); }
[data-theme="light"] .planner-start-secondary-btn { color: #94a3b8; }
[data-theme="light"] .planner-start-secondary-btn:hover { color: #475569; }

.planner-start-shell {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 1.6rem;
}
.planner-start-hero {
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.76);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    margin-bottom: 1rem;
}
.planner-start-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary,#2d7a78);
    margin-bottom: 0.45rem;
}
.planner-start-hero h1 {
    margin: 0 0 0.45rem;
    font-size: 2rem;
    line-height: 1.05;
}
.planner-start-hero p {
    margin: 0;
    max-width: 64ch;
    color: var(--text-muted, #6b7280);
    line-height: 1.55;
}
.planner-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}
.planner-start-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(280px, 0.85fr);
    gap: 1rem;
}
.planner-start-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.planner-start-section-head {
    padding: 0.15rem 0.15rem 0.05rem;
}
.planner-start-section-head h2 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    color: var(--text-main, #1a1a2e);
}
.planner-start-section-head p {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font-size: 0.8rem;
    line-height: 1.5;
}
[data-theme="light"] .planner-root-start {
    color: #0f172a;
    background:
        radial-gradient(circle at top right, rgba(45, 122, 120, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
}
[data-theme="light"] .planner-root-start .planner-start-hero,
[data-theme="light"] .planner-root-start .planner-start-card {
    background: rgba(255,255,255,0.92);
    color: #0f172a;
}
[data-theme="light"] .planner-root-start .planner-start-hero h1,
[data-theme="light"] .planner-root-start .planner-start-card-head h2,
[data-theme="light"] .planner-root-start .planner-start-section-head h2,
[data-theme="light"] .planner-root-start .planner-label,
[data-theme="light"] .planner-root-start .planner-start-recent-title,
[data-theme="light"] .planner-root-start .planner-start-type-title,
[data-theme="light"] .planner-root-start .planner-start-base-title,
[data-theme="light"] .planner-root-start .planner-start-template-head strong {
    color: #0f172a;
}
[data-theme="light"] .planner-root-start .planner-start-hero p,
[data-theme="light"] .planner-root-start .planner-start-section-head p,
[data-theme="light"] .planner-root-start .planner-start-card-head span,
[data-theme="light"] .planner-root-start .planner-start-recent-meta,
[data-theme="light"] .planner-root-start .planner-start-type-copy,
[data-theme="light"] .planner-root-start .planner-start-base-copy,
[data-theme="light"] .planner-root-start .planner-start-template-head span {
    color: #475569;
}
[data-theme="light"] .planner-root-start .planner-input,
[data-theme="light"] .planner-root-start .planner-input-sm,
[data-theme="light"] .planner-root-start .planner-select,
[data-theme="light"] .planner-root-start .planner-select-sm {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.35);
}
[data-theme="light"] .planner-root-start .planner-input::placeholder,
[data-theme="light"] .planner-root-start .planner-input-sm::placeholder {
    color: #94a3b8;
}
.planner-start-card {
    padding: 1.25rem;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}
.planner-start-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.planner-start-card-head h2 {
    margin: 0;
    font-size: 1.08rem;
}
.planner-start-card-head span {
    font-size: 0.74rem;
    color: var(--text-muted, #6b7280);
    font-weight: 700;
}
.planner-start-step-label {
    margin-top: 1rem;
    margin-bottom: 0.35rem;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary, #2d7a78);
}
.planner-start-step-label:first-of-type {
    margin-top: 0;
}
.planner-start-help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.planner-start-help-trigger {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 1px solid rgba(45, 122, 120, 0.22);
    background: rgba(45, 122, 120, 0.07);
    color: #2d7a78;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.planner-start-help-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 122, 120, 0.35);
    background: rgba(45, 122, 120, 0.13);
}
.planner-start-help-trigger[aria-expanded="true"] {
    border-color: rgba(45, 122, 120, 0.45);
    background: rgba(45, 122, 120, 0.15);
}
.planner-start-help-panel {
    display: none;
    margin: 0.45rem 0 0.65rem;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(45, 122, 120, 0.18);
    background: rgba(240,253,250,0.98);
    color: #2d7a78;
    font-size: 0.79rem;
    line-height: 1.55;
}
.planner-start-help-panel.is-open {
    display: block;
}
.planner-start-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.55rem;
}
.planner-start-type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-height: 116px;
    text-align: left;
    padding: 0.9rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248,250,252,0.92);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.planner-start-type-card:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 122, 120, 0.24);
    background: rgba(240,253,250,0.92);
}
.planner-start-type-card.is-active {
    border-color: rgba(45, 122, 120, 0.45);
    background: linear-gradient(180deg, rgba(240,253,250,0.96), rgba(248,250,252,0.98));
    box-shadow: 0 12px 28px rgba(45, 122, 120, 0.1);
}
.planner-start-type-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--text-main, #1a1a2e);
}
.planner-start-type-copy {
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}
.planner-start-base-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.55rem;
}
.planner-start-base-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-height: 108px;
    text-align: left;
    padding: 0.9rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248,250,252,0.92);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.planner-start-base-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.24);
    background: rgba(240,253,250,0.92);
}
.planner-start-base-card.is-active {
    border-color: rgba(15, 118, 110, 0.44);
    background: linear-gradient(180deg, rgba(236,253,245,0.96), rgba(248,250,252,0.98));
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}
.planner-start-base-card.is-disabled {
    opacity: 0.56;
    cursor: not-allowed;
}
.planner-start-base-card.is-disabled:hover {
    transform: none;
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(248,250,252,0.92);
    box-shadow: none;
}
.planner-start-base-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--text-main, #1a1a2e);
}
.planner-start-base-copy {
    font-size: 0.79rem;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}
.planner-start-template-panel {
    display: none;
    margin-top: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(45, 122, 120, 0.16);
    background: linear-gradient(180deg, rgba(240,253,250,0.95), rgba(255,255,255,0.98));
}
.planner-start-template-panel.is-open {
    display: block;
}
.planner-start-template-head {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: baseline;
    margin-bottom: 0.65rem;
}
.planner-start-template-head strong {
    font-size: 0.9rem;
    color: var(--text-main, #1a1a2e);
}
.planner-start-template-head span {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}
.planner-start-note {
    margin-top: 0.9rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: rgba(45, 122, 120, 0.07);
    color: #2d7a78;
    font-size: 0.8rem;
    line-height: 1.5;
}
.planner-start-submit-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
}
.planner-start-shortcuts {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.planner-start-shortcuts-head {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: baseline;
    margin-bottom: 0.8rem;
}
.planner-start-shortcuts-head strong {
    font-size: 0.9rem;
    color: var(--text-main, #1a1a2e);
}
.planner-start-shortcuts-head span {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
}
.planner-start-template-picks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}
.planner-start-template-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    text-align: left;
    width: 100%;
    min-height: 120px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(45, 122, 120, 0.14);
    background: linear-gradient(180deg, rgba(240,253,250,0.88), rgba(248,250,252,0.98));
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.planner-start-template-pick:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 122, 120, 0.3);
    box-shadow: 0 14px 30px rgba(45, 122, 120, 0.1);
}
.planner-start-template-pick-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary, #2d7a78);
}
.planner-start-template-pick-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
}
.planner-start-template-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
}
.planner-start-template-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(45, 122, 120, 0.1);
    color: #2d7a78;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.planner-start-template-pick-meta {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.45;
}
.planner-start-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.planner-start-recent-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.planner-start-recent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.planner-template-row {
    display: flex;
    gap: 0.55rem;
    align-items: stretch;
}
.planner-template-row .planner-start-recent {
    flex: 1;
}
.planner-start-recent {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248,250,252,0.88);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.planner-start-recent:hover {
    border-color: rgba(45, 122, 120, 0.22);
    background: rgba(240,253,250,0.82);
    transform: translateY(-1px);
}
.planner-start-recent-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
}
.planner-start-recent-meta,
.planner-start-empty {
    font-size: 0.77rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
}
.planner-start-empty {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(248,250,252,0.88);
    border: 1px dashed rgba(148, 163, 184, 0.35);
}

/* ── Toolbar ───────────────────────────────────────────────── */
.planner-toolbar {
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 0.9rem 1.25rem 0.65rem;
    flex-shrink: 0;
}
.planner-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.planner-plan-name {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 1px 4px 1px 0;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}
.planner-plan-name:focus { border-bottom-color: var(--primary,#2d7a78); }

.planner-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.planner-btn-icon-only {
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
    min-width: unset;
}
.planner-overflow-wrap {
    position: relative;
}
.planner-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    flex-direction: column;
    min-width: 180px;
    overflow: hidden;
    padding: 4px 0;
}
.planner-overflow-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    color: var(--text-main, #f1f5f9);
    cursor: pointer;
    transition: background 0.1s;
    font-family: inherit;
}
.planner-overflow-item:hover {
    background: var(--hover-bg, rgba(255,255,255,0.08));
}
[data-theme="light"] .planner-overflow-item:hover {
    background: rgba(0,0,0,0.05);
}
.planner-overflow-item.is-active {
    color: var(--primary, #2d7a78);
    font-weight: 600;
}
.planner-overflow-sep {
    height: 1px;
    background: var(--border, #e2e8f0);
    margin: 4px 0;
}
.planner-save-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    color: var(--text-muted, #6b7280);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.planner-save-status.saved {
    color: #065f46;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
}
.planner-save-status.info {
    color: var(--primary, #2d7a78);
    background: rgba(45, 122, 120, 0.1);
    border-color: rgba(45, 122, 120, 0.18);
}
.planner-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.planner-stat {
    font-size: 0.76rem;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}
.planner-stat-readiness {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.75rem;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid transparent;
}
.planner-stat-readiness.is-ready {
    color: #065f46;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
}
.planner-stat-readiness.is-warning {
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.24);
}
.planner-stat-readiness.is-blocked {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.22);
}
.planner-stat-alert {
    color: #991b1b;
    font-weight: 700;
}
.planner-stat-warn {
    color: #92400e;
    font-weight: 700;
}
.planner-stat-game {
    color: var(--primary,#2d7a78);
    font-weight: 600;
}
.planner-stat-suggest {
    color: #92400e;
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.3);
    font-weight: 700;
    animation: pulse-suggest 1.8s ease-in-out infinite;
}
@keyframes pulse-suggest {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.planner-mode-toggle {
    border-left: 3px solid var(--primary,#2d7a78) !important;
}

/* ── Body ──────────────────────────────────────────────────── */
.planner-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ── Icon rail ─────────────────────────────────────────────── */
.planner-icon-rail {
    width: 48px;
    flex-shrink: 0;
    background: var(--surface, #f9fafb);
    border-right: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    gap: 2px;
    z-index: 60;
}
.planner-rail-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    color: var(--text-muted, #9ca3af);
}
.planner-rail-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-main, #f1f5f9);
}
.planner-rail-btn.is-active {
    background: var(--primary,#2d7a78);
    color: #fff;
}
[data-theme="light"] .planner-rail-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-main, #1a1a2e);
}

/* ── Drawers ───────────────────────────────────────────────── */
.planner-drawer {
    position: absolute;
    left: 48px;
    top: 0;
    bottom: 0;
    width: 240px;
    background: var(--surface, #f9fafb);
    border-right: 1px solid var(--border, #e5e7eb);
    z-index: 50;
    display: none;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    overflow: hidden;
}
.planner-drawer.is-open {
    display: flex;
}
.planner-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #9ca3af);
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.planner-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s;
}
.planner-drawer-close:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-main, #f1f5f9);
}
[data-theme="light"] .planner-drawer-close:hover {
    background: rgba(0,0,0,0.06);
}
.planner-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}


.planner-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted, #9ca3af);
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    margin-bottom: 0.2rem;
}
.planner-staff-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.planner-coverage-grid {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.planner-coverage-card {
    border: 1px solid var(--border, #e5e7eb);
    background: var(--card-bg, #fff);
    border-radius: 8px;
    padding: 0.65rem 0.7rem;
}
.planner-coverage-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
}
.planner-coverage-count {
    color: var(--primary,#2d7a78);
    font-size: 0.72rem;
    font-weight: 700;
}
.planner-coverage-days {
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
    margin-bottom: 0.35rem;
}
.planner-coverage-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}
.planner-coverage-flag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.planner-coverage-flag.is-muted {
    color: var(--text-muted, #6b7280);
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.18);
}
.planner-coverage-flag.is-warn {
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.24);
}
.planner-coverage-flag.is-danger {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.22);
}
.planner-coverage-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.planner-coverage-item {
    font-size: 0.7rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.35;
}
.planner-coverage-item.is-empty {
    color: var(--text-muted, #9ca3af);
    font-style: italic;
}
.planner-staff-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 7px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    font-size: 0.82rem;
}
.planner-staff-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.planner-staff-name {
    flex: 1; min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-staff-remove {
    background: none; border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer; font-size: 0.95rem;
    padding: 2px 3px; border-radius: 3px;
    line-height: 1;
    transition: color 0.12s, background 0.12s;
}
.planner-staff-remove:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

.planner-add-form {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.planner-export-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.planner-media-tools {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.35rem;
}
.planner-upload-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border: 1px dashed rgba(45, 122, 120, 0.25);
    border-radius: 8px;
    background: rgba(45, 122, 120, 0.06);
    color: var(--primary, #2d7a78);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}
.planner-upload-btn input {
    display: none;
}
.planner-media-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.65rem;
}
.planner-media-thumb,
.planner-media-empty {
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--card-bg, #fff);
    min-height: 74px;
    overflow: hidden;
}
.planner-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.planner-media-thumb-bg {
    grid-column: 1 / -1;
    min-height: 110px;
}
.planner-media-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.74rem;
    color: var(--text-muted, #9ca3af);
    padding: 0.75rem;
}
.planner-empty {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
    padding: 0.4rem 0;
}

/* ── Week Area ─────────────────────────────────────────────── */
.planner-week-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Day tabs */
.planner-day-tabs {
    display: flex;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--card-bg, #fff);
    padding: 0 1rem;
    flex-shrink: 0;
    gap: 2px;
    overflow-x: auto;
}
.planner-day-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.planner-day-tab:hover { color: var(--text-main, #1a1a2e); }
.planner-day-tab.active {
    color: var(--primary,#2d7a78);
    border-bottom-color: var(--primary,#2d7a78);
}
.planner-day-count {
    background: var(--surface, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border-radius: 10px;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 6px;
    transition: background 0.15s, color 0.15s;
}
.planner-day-tab.active .planner-day-count {
    background: rgba(45,122,120,0.12);
    color: var(--primary, #2d7a78);
}

/* Day content */
.planner-day-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.planner-day-panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 860px;
}

/* Assign row */
.planner-assign-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface, #f3f4f6);
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    flex-wrap: wrap;
}
.planner-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(45, 122, 120, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(45, 122, 120, 0.12);
    flex-wrap: wrap;
}
.planner-select-compact {
    max-width: 240px;
}
.planner-activity-focus {
    box-shadow: 0 0 0 3px rgba(45, 122, 120, 0.22), 0 10px 22px rgba(45, 122, 120, 0.14);
    transition: box-shadow 0.2s ease;
}
.planner-label {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
    white-space: nowrap;
}
.planner-day-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.planner-day-summary-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--text-muted, #6b7280);
    font-size: 0.74rem;
    font-weight: 700;
}
.planner-day-summary-pill.warning {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
}
.planner-day-summary-pill.linked {
    color: var(--primary, #2d7a78);
    background: rgba(45, 122, 120, 0.1);
    border-color: rgba(45, 122, 120, 0.18);
}

/* Empty day placeholder */
.planner-empty-day {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}


.planner-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.planner-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--text-muted, #6b7280);
    font-size: 0.72rem;
    font-weight: 700;
}
.planner-meta-pill-time {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.2);
}
.planner-meta-pill-time.planner-meta-pill-warn {
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.24);
}
.planner-meta-pill.linked {
    color: var(--primary, #2d7a78);
    background: rgba(45, 122, 120, 0.1);
    border-color: rgba(45, 122, 120, 0.18);
}
.planner-meta-pill-alert {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.22);
}
.planner-activity-warning {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #991b1b;
}
.planner-quick-fix-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: -0.1rem;
}
.planner-btn-quickfix {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
}
.planner-btn-quickfix:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.3);
}

/* Header row */
.planner-activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.planner-activity-name-wrap { flex: 1; min-width: 0; }
.planner-activity-name-input {
    width: 100%;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 1px 2px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.planner-activity-name-input:focus {
    border-bottom-color: var(--primary, #2d7a78);
    background: rgba(45,122,120,0.03);
}

.planner-activity-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.planner-order-controls {
    display: inline-flex;
    gap: 4px;
}
.planner-activity-order {
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #f9fafb);
    color: var(--text-muted, #6b7280);
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.planner-activity-order:hover {
    border-color: var(--primary,#2d7a78);
    color: var(--primary,#2d7a78);
}

/* Time range */
.planner-time-range {
    display: flex;
    align-items: center;
    gap: 3px;
}
.planner-time-quick-actions {
    display: inline-flex;
    gap: 4px;
}
.planner-time-quick {
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}
.planner-time-quick:hover {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.3);
}
.planner-time-input {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.76rem;
    font-family: inherit;
    color: var(--text-secondary, #6b7280);
    background: var(--surface, #f9fafb);
    cursor: pointer;
    outline: none;
    width: 86px;
    transition: border-color 0.15s;
}
.planner-time-input:focus { border-color: var(--primary,#2d7a78); }
.planner-time-sep {
    font-size: 0.72rem;
    color: var(--text-muted, #9ca3af);
}

.planner-activity-delete {
    background: none; border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer; font-size: 1.05rem;
    padding: 2px 5px; border-radius: 4px; line-height: 1;
    transition: color 0.12s, background 0.12s;
}
.planner-activity-delete:hover { color: #ef4444; background: rgba(239,68,68,0.08); }

/* Game badge */
.planner-game-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(45,122,120,0.06);
    border: 1px solid rgba(45,122,120,0.2);
    border-radius: 7px;
}
.planner-game-icon { font-size: 1rem; flex-shrink: 0; }
.planner-game-info { flex: 1; min-width: 0; }
.planner-game-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary,#2d7a78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-game-tags {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.planner-game-tag {
    font-size: 0.65rem;
    background: rgba(45,122,120,0.12);
    color: var(--primary, #2d7a78);
    border-radius: 4px;
    padding: 1px 5px;
}
.planner-game-unlink {
    background: none; border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer; font-size: 0.8rem;
    padding: 2px 4px; border-radius: 3px;
    transition: color 0.12s;
}
.planner-game-unlink:hover { color: #ef4444; }

/* Staff chips */
.planner-staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 0;
}
.planner-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(45,122,120,0.09);
    color: var(--primary, #2d7a78);
    border: 1px solid rgba(45,122,120,0.2);
    border-radius: 20px;
    padding: 2px 8px 2px 10px;
    font-size: 0.77rem;
    font-weight: 500;
}
.planner-chip-remove {
    background: none; border: none; color: inherit;
    cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1;
    opacity: 0.65; transition: opacity 0.12s;
}
.planner-chip-remove:hover { opacity: 1; }

/* Activity actions row */
.planner-activity-actions {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

/* Activity notes row */
.planner-activity-notes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Add activity form */
.planner-add-activity-form {
    display: flex;
    gap: 6px;
}

/* Day note */
.planner-day-note-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0.25rem;
}
.planner-textarea {
    width: 100%;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-main, #1a1a2e);
    background: var(--card-bg, #fff);
    resize: vertical;
    min-height: 56px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.planner-textarea:focus { border-color: var(--primary,#2d7a78); }

/* ── Shared Inputs ─────────────────────────────────────────── */
.planner-input {
    flex: 1; min-width: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: inherit; font-size: 0.83rem;
    color: var(--text-main, #1a1a2e);
    background: var(--card-bg, #fff);
    outline: none;
    transition: border-color 0.15s;
}
.planner-input:focus { border-color: var(--primary,#2d7a78); }

.planner-input-sm {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit; font-size: 0.76rem;
    color: var(--text-secondary, #6b7280);
    background: var(--surface, #f9fafb);
    outline: none; flex: 1; min-width: 0;
    transition: border-color 0.15s;
}
.planner-input-sm:focus {
    border-color: var(--primary,#2d7a78);
    color: var(--text-main, #1a1a2e);
}

.planner-select {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit; font-size: 0.83rem;
    color: var(--text-main, #1a1a2e);
    background: var(--card-bg, #fff);
    outline: none; cursor: pointer;
    transition: border-color 0.15s;
}
.planner-select:focus { border-color: var(--primary,#2d7a78); }
.planner-select-sm {
    min-width: 110px;
    padding: 5px 8px;
    font-size: 0.76rem;
    background: var(--surface, #f9fafb);
}
.planner-select-assign {
    min-width: 170px;
    flex: 1 1 180px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.planner-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #374151);
    font-family: inherit; font-size: 0.83rem; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.planner-btn:hover {
    background: var(--surface, #f3f4f6);
    border-color: rgba(0,0,0,0.12);
}
.planner-btn-primary {
    background: var(--primary,#2d7a78);
    color: #fff;
    border-color: var(--primary,#2d7a78);
}
.planner-btn-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 2px 8px rgba(45,122,120,0.3);
}
.planner-btn-sm { padding: 5px 11px; font-size: 0.78rem; }

.planner-btn-assign {
    border-style: dashed;
    color: var(--primary, #2d7a78);
    border-color: rgba(45,122,120,0.35);
    background: rgba(45,122,120,0.04);
}
.planner-btn-assign:hover {
    background: rgba(45,122,120,0.1);
    border-color: var(--primary, #2d7a78);
    border-style: solid;
}

.planner-btn-copy {
    border-style: dashed;
    color: #b45309;
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.06);
}
.planner-btn-copy:hover {
    background: rgba(245,158,11,0.12);
    border-color: #d97706;
    border-style: solid;
}

.planner-btn-game {
    border-style: dashed;
    color: #059669;
    border-color: rgba(5,150,105,0.35);
    background: rgba(5,150,105,0.04);
}
.planner-btn-game:hover {
    background: rgba(5,150,105,0.1);
    border-color: #059669;
    border-style: solid;
}

.planner-btn-export {
    width: 100%;
    justify-content: flex-start;
    font-size: 0.79rem;
    padding: 6px 9px;
}

.planner-btn-icon {
    background: none; border: none;
    cursor: pointer; padding: 2px 5px;
    border-radius: 4px; font-size: 0.78rem;
    line-height: 1;
}

/* ── Modals (game picker, export, file) ────────────────────── */
.planner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.planner-modal {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
    width: 100%;
    max-width: 760px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: plannerModalIn 0.2s ease;
}
.planner-modal-wide { max-width: 960px; }
.planner-modal-export {
    max-width: 1180px;
    background:
        linear-gradient(180deg, rgba(250, 250, 252, 0.98), rgba(243, 244, 246, 0.98));
}
@keyframes plannerModalIn {
    from { transform: scale(0.94) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}
.planner-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.planner-modal-header h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }
.planner-modal-close {
    background: none; border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 1.5rem; cursor: pointer;
    padding: 2px 7px; border-radius: 6px; line-height: 1;
    transition: color 0.12s;
}
.planner-modal-close:hover { color: var(--text-main, #1a1a2e); }
.planner-modal-body {
    flex: 1; overflow-y: auto; overflow-x: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.planner-modal-export .planner-modal-body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.08)),
        repeating-linear-gradient(
            45deg,
            rgba(148, 163, 184, 0.035),
            rgba(148, 163, 184, 0.035) 10px,
            transparent 10px,
            transparent 20px
        );
    padding: 1.5rem;
}
.planner-modal-export #export-body {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: 1.5rem;
}
.planner-export-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.4rem;
    align-content: flex-start;
    margin-bottom: 0.9rem;
    align-items: center;
    position: sticky;
    top: 0.2rem;
    z-index: 3;
    padding: 0.28rem 0 0.45rem;
    background: linear-gradient(180deg, rgba(250,250,252,0.96), rgba(250,250,252,0.78), rgba(250,250,252,0));
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 18px -18px rgba(15, 23, 42, 0.4);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.planner-export-canvas {
    transform-origin: top center;
    transition: transform 0.16s ease;
    padding-top: 0.35rem;
}
.planner-export-canvas-small {
    transform: scale(0.9);
}
.planner-export-canvas-normal {
    transform: scale(1);
}
.planner-export-canvas-large {
    transform: scale(1.08);
}
.planner-export-scale-group {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.planner-export-scale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    white-space: nowrap;
    background: rgba(255,255,255,0.88);
    border-color: rgba(148, 163, 184, 0.18);
}
.planner-export-scale.is-active {
    background: rgba(45, 122, 120, 0.12);
    border-color: rgba(45, 122, 120, 0.22);
    color: var(--primary, #2d7a78);
}
.planner-export-summary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: var(--text-secondary, #4b5563);
    font-size: 0.74rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    white-space: nowrap;
}
.planner-export-summary-chip.is-state {
    background: rgba(45, 122, 120, 0.09);
    border-color: rgba(45, 122, 120, 0.16);
    color: var(--primary, #2d7a78);
}
.planner-export-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 28px;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(45, 122, 120, 0.14);
    color: var(--text-secondary, #4b5563);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.planner-export-toggle input {
    accent-color: #2d7a78;
    flex-shrink: 0;
}
.planner-export-reset {
    justify-content: center;
    background: rgba(45, 122, 120, 0.08);
    border-color: rgba(45, 122, 120, 0.16);
    color: var(--primary, #2d7a78);
    white-space: nowrap;
}
.planner-export-reset:hover {
    background: rgba(45, 122, 120, 0.14);
    border-color: rgba(45, 122, 120, 0.24);
}
.planner-modal-footer {
    display: flex;
    gap: 8px;
    row-gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.7rem 1.2rem;
    border-top: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
    justify-content: flex-end;
}
.planner-modal-footer .planner-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.planner-modal-export .planner-modal-footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.96));
    backdrop-filter: blur(8px);
    border-top-color: rgba(148, 163, 184, 0.1);
    box-shadow: 0 -8px 16px -18px rgba(15, 23, 42, 0.28);
}

/* ── Game Picker ───────────────────────────────────────────── */
.planner-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.planner-game-card {
    text-align: left;
    background: var(--surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 9px;
    padding: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.planner-game-card:hover {
    background: rgba(45,122,120,0.05);
    border-color: rgba(45,122,120,0.3);
    box-shadow: 0 2px 8px rgba(45,122,120,0.1);
}
.planner-game-card:focus-visible {
    outline: 2px solid rgba(45,122,120,0.55);
    outline-offset: 2px;
}
.planner-game-card-title {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--text-main, #1a1a2e);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.planner-game-card-pitch {
    font-size: 0.76rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.planner-game-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 1px;
    min-width: 0;
}
.planner-game-card-tags span {
    font-size: 0.65rem;
    background: rgba(45,122,120,0.1);
    color: var(--primary, #2d7a78);
    border-radius: 4px;
    padding: 2px 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.planner-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}

/* ── File List ─────────────────────────────────────────────── */
.planner-file-list { display: flex; flex-direction: column; gap: 6px; }
.planner-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: var(--surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit; font-size: 0.86rem;
    color: var(--text-main, #1a1a2e);
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.planner-file-item:hover {
    background: rgba(45,122,120,0.05);
    border-color: rgba(45,122,120,0.25);
}
.planner-file-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.planner-file-row.is-active .planner-file-open {
    border-color: rgba(45,122,120,0.32);
    background: rgba(45,122,120,0.07);
}
.planner-file-open {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    background: var(--surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--text-main, #1a1a2e);
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.planner-file-open:hover {
    background: rgba(45,122,120,0.05);
    border-color: rgba(45,122,120,0.25);
}
.planner-file-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.planner-file-delete {
    flex-shrink: 0;
    min-width: 68px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(239,68,68,0.18);
    background: rgba(239,68,68,0.06);
    color: #b91c1c;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.planner-file-delete:hover {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.28);
}
.planner-file-name { font-weight: 500; }
.planner-file-date { font-size: 0.73rem; color: var(--text-muted, #9ca3af); }

/* ── Export Output ─────────────────────────────────────────── */
.exp-week-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
    align-items: start;
    min-width: 0;
}
.exp-week-grid > * { min-width: 0; }
.exp-week-grid-enhanced {
    position: relative;
    z-index: 1;
}
.exp-print-sheet {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 1.2rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

/* Export sheet er ALTID lys — uanset app-theme */
.exp-print-sheet,
.exp-print-sheet * {
    --surface: #fff;
    --surface-2: #f8fafc;
    --card-bg: #fff;
    --border: #e2e8f0;
    --text-main: #1a1a2e;
    --text-muted: #64748b;
}
.exp-print-sheet .exp-day,
.exp-print-sheet .exp-day-clean,
.exp-print-sheet .exp-day-fun,
.exp-print-sheet .exp-day-kids-v3 {
    background: #fff !important;
    color: #1a1a2e !important;
    border-color: #e2e8f0 !important;
}
.exp-print-sheet .exp-day h4 { color: #1d4ed8 !important; }
.exp-print-sheet .exp-act-row,
.exp-print-sheet .exp-act-row-fun,
.exp-print-sheet .exp-act-v3 {
    background: #fff !important;
    color: #1a1a2e !important;
    border-color: #e2e8f0 !important;
}
.exp-print-sheet .exp-time { color: #6366f1 !important; }
.exp-print-sheet .exp-note-sm { color: #64748b !important; }
.exp-print-sheet .exp-meal { color: #d97706 !important; }
.exp-print-sheet .exp-print-hero {
    background: #fff !important;
    color: #1a1a2e !important;
}
.exp-print-sheet .exp-print-hero h3 { color: #1a1a2e !important; }
.exp-print-sheet .exp-print-hero p,
.exp-print-sheet .exp-print-kicker { color: #64748b !important; }
.exp-print-sheet .exp-print-footer {
    color: #94a3b8 !important;
    border-top-color: #e2e8f0 !important;
}

/* Kompakt dag-kort tekst så 5 kolonner passer */
.exp-week-grid .exp-day h4 {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
}
.exp-week-grid .exp-act-row,
.exp-week-grid .exp-act-row-fun,
.exp-week-grid .exp-act-v3 {
    font-size: 0.76rem;
    padding: 0.35rem 0.45rem;
}
.exp-week-grid .exp-time {
    font-size: 0.68rem;
}
.exp-week-grid .exp-day {
    padding: 0.7rem;
}

/* A4 liggende preview-bredde */
.planner-export-canvas .exp-print-sheet {
    min-width: 900px;
}
.planner-export-canvas > .exp-print-sheet:first-child,
.planner-export-canvas > .exp-gallery-page:first-child {
    margin-top: 0.15rem;
}
.exp-print-inner {
    position: relative;
    z-index: 1;
    padding: 1.2rem;
}
.exp-week-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.exp-print-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.exp-print-hero > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}
.exp-print-hero h3 {
    margin: 0.15rem 0 0.35rem;
    font-size: 1.45rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.exp-print-hero p {
    margin: 0;
    color: var(--text-muted, #6b7280);
    max-width: 60ch;
}
.exp-print-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary,#2d7a78);
}
.exp-print-meta {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}
.exp-print-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(229, 231, 235, 0.85);
    font-size: 0.72rem;
    color: var(--text-muted, #6b7280);
}
.exp-print-footer span:last-child {
    margin-left: auto;
    text-align: right;
}
.exp-print-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(45, 122, 120, 0.08);
    color: var(--primary, #2d7a78);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}
.exp-print-badge-date {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary, #4b5563);
}
.exp-print-adult {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250, 250, 252, 0.98));
}
.exp-print-adult .exp-print-kicker,
.exp-print-adult .exp-day h4 {
    color: #1d4ed8;
}
.exp-print-adult .exp-print-badge {
    background: rgba(30, 64, 175, 0.08);
    color: #1d4ed8;
}
.exp-print-kids {
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245, 255, 251, 0.98));
}
.exp-print-kids .exp-print-hero h3 {
    color: #047857;
}
.exp-print-kids .exp-print-kicker,
.exp-print-kids .exp-day h4,
.exp-print-kids .exp-day-fun h4 {
    color: #059669;
}
.exp-print-kids .exp-print-badge {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}
.exp-print-kids .exp-day-clean {
    background: rgba(255,255,255,0.92);
    border-color: rgba(16, 185, 129, 0.18);
}
.exp-print-kids .exp-time-strong {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.exp-print-kids .exp-born-dot {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.exp-day {
    background: var(--surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 9px;
    padding: 0.9rem;
    min-width: 0;
}
.exp-day-clean {
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.86);
    padding: 1rem;
}
.exp-day h4 {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--primary,#2d7a78);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.exp-day-fun h4 { color: #059669; }
.exp-day-fun { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.15); }

.exp-act-row {
    border-bottom: 1px solid var(--border, #e5e7eb);
    padding: 4px 0;
    font-size: 0.8rem;
}
.exp-act-row:last-child { border-bottom: none; }
.exp-act-main {
    color: var(--text-main, #1a1a2e);
    line-height: 1.4;
    min-width: 0;
}

.exp-act-row-fun {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 4px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.exp-act-row-fun:last-child { border-bottom: none; }
.exp-act-row-clean,
.exp-act-row-fun-clean {
    align-items: flex-start;
    gap: 0.6rem;
}
.exp-act-row-clean {
    padding: 0.58rem 0;
}
.exp-act-row-clean.is-compact,
.exp-act-row-fun-clean.is-compact {
    padding: 0.4rem 0;
}
.exp-act-row-clean .exp-act-main,
.exp-act-row-fun-clean .exp-act-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.exp-act-row-clean.is-compact .exp-act-main,
.exp-act-row-fun-clean.is-compact .exp-act-main {
    gap: 0.05rem;
}

.exp-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    background: var(--surface, #f3f4f6);
    border-radius: 4px;
    padding: 0 5px;
    margin-right: 2px;
}
.exp-time-strong {
    min-width: 78px;
    justify-content: center;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    display: inline-flex;
}
.exp-game-ref {
    font-size: 0.73rem;
    color: var(--primary,#2d7a78);
    font-style: italic;
    margin-top: 1px;
}
.exp-game-pitch {
    font-size: 0.76rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.45;
    margin-top: 3px;
    font-style: italic;
    overflow-wrap: anywhere;
}
.exp-note-sm {
    font-size: 0.73rem;
    color: var(--text-muted, #6b7280);
    margin-top: 1px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.exp-empty {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    margin: 0;
}
.exp-meal {
    font-size: 0.72rem;
    color: #d97706;
    margin-top: 1px;
}
.exp-day-note {
    font-size: 0.74rem;
    color: var(--text-muted, #6b7280);
    border-top: 1px dashed var(--border, #e5e7eb);
    margin-top: 6px;
    padding-top: 5px;
    font-style: italic;
    overflow-wrap: anywhere;
}
.exp-tag {
    display: inline;
    background: rgba(45,122,120,0.1);
    color: var(--primary, #2d7a78);
    border-radius: 3px;
    font-size: 0.7rem;
    padding: 0 4px;
    margin-left: 3px;
}
.exp-empty {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    font-style: italic;
}
.exp-empty-week {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
}

.exp-born-list { display: flex; flex-direction: column; gap: 0.65rem; }
.exp-born-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.78rem 0.95rem;
    background: var(--surface, #f9fafb);
    border-radius: 9px;
    border: 1px solid var(--border, #e5e7eb);
}
.exp-print-kids .exp-born-list {
    gap: 0.8rem;
}
.exp-print-kids .exp-born-item {
    background: rgba(255,255,255,0.92);
    border-color: rgba(16, 185, 129, 0.16);
    box-shadow: 0 8px 22px rgba(5, 150, 105, 0.06);
}
.exp-born-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--primary,#2d7a78);
    flex-shrink: 0;
    margin-top: 5px;
}

/* v3 print additions */
.exp-act-v3 { border-left-width: 4px; padding-left: 0.5rem; }
.exp-day-v3 { border-top-width: 4px; border-radius: 8px 8px 0 0; overflow: hidden; }
.exp-day-kids-v3 { border-radius: 10px; padding: 0.85rem; margin-bottom: 0.5rem; }
.exp-born-dot-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.75rem;
}
.exp-born-item-v3 {
    padding-left: 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 5px;
}
.exp-act-kids-v3 {
    align-items: flex-start;
}
.exp-note-section {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}
.exp-note-label {
    font-size: 0.68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.exp-gallery-page {
    margin-top: 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--border, #e5e7eb);
    background:
        radial-gradient(circle at top left, rgba(45, 122, 120, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff, #f0faf9);
    padding: 1.1rem;
    page-break-before: always;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.planner-export-canvas .exp-gallery-page {
    margin-top: 1rem;
}
.exp-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.exp-gallery-header > div:first-child {
    flex: 1 1 280px;
    min-width: 0;
}
.exp-gallery-header h4 {
    margin: 0.15rem 0 0.3rem;
    font-size: 1.2rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}
.exp-gallery-header p {
    margin: 0;
    max-width: 46ch;
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
    overflow-wrap: anywhere;
}
.exp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.exp-gallery-card {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    border: 1px solid var(--border, #e5e7eb);
    background: rgba(255,255,255,0.96);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.exp-gallery-card.is-feature {
    grid-column: span 2;
    min-height: 320px;
}
.exp-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex: 1;
}
.exp-gallery-card figcaption {
    padding: 0.65rem 0.8rem 0.75rem;
    font-size: 0.76rem;
    color: var(--text-secondary, #4b5563);
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    background: rgba(255,255,255,0.92);
    overflow-wrap: anywhere;
}
.exp-gallery-grid-1 {
    grid-template-columns: 1fr;
}
.exp-gallery-grid-1 .exp-gallery-card.is-feature,
.exp-gallery-grid-2 .exp-gallery-card.is-feature {
    grid-column: auto;
}
.exp-gallery-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exp-gallery-grid-3 .exp-gallery-card.is-feature,
.exp-gallery-grid-4 .exp-gallery-card.is-feature {
    grid-column: span 2;
}

.exp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}
.exp-table th, .exp-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.exp-table th {
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(15, 23, 42, 0.04);
}
.exp-table td { color: var(--text-main, #1a1a2e); vertical-align: top; }
.exp-table tbody tr:nth-child(even) td {
    background: rgba(15, 23, 42, 0.02);
}
.exp-table tbody tr:last-child td {
    border-bottom: none;
}
.exp-table-empty {
    color: var(--text-muted, #9ca3af);
}
.exp-print-matrix .exp-print-hero p {
    max-width: 52ch;
}
.exp-matrix-wrap {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255,255,255,0.94);
}
.exp-matrix-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.88rem;
    background: #fff;
}
.exp-matrix-table th,
.exp-matrix-table td {
    border: 1px solid rgba(148, 163, 184, 0.35);
    padding: 0.7rem 0.65rem;
    vertical-align: top;
    text-align: left;
    min-height: 56px;
}
.exp-matrix-table thead th {
    background: rgba(15, 23, 42, 0.05);
    font-size: 0.82rem;
    font-weight: 800;
}
.exp-matrix-table tbody th {
    width: 15%;
    background: rgba(15, 23, 42, 0.03);
    font-weight: 700;
}
.exp-matrix-row-meta th {
    background: rgba(45, 122, 120, 0.06);
}
.exp-matrix-table td {
    color: #0f172a;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.exp-matrix-table.is-blank td {
    height: 72px;
}
.exp-matrix-table.is-blank td,
.exp-matrix-table.is-blank th {
    background: #fff;
}
.exp-matrix-row-placeholder td {
    color: rgba(148, 163, 184, 0.6);
}

/* ── Simple matrix print (matches physical paper) ──────────── */
.exp-print-matrix-simple {
    background: #fff;
    padding: 0;
}
.exp-matrix-page {
    padding: 10mm 12mm;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.exp-matrix-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4mm;
}
.exp-matrix-title {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}
.exp-matrix-date {
    font-size: 0.75rem;
    color: #555;
}
.exp-matrix-simple {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.72rem;
    background: #fff;
    color: #000;
    flex: 1;
}
.exp-matrix-simple th,
.exp-matrix-simple td {
    border: 1px solid #000;
    padding: 2mm 2.5mm;
    vertical-align: top;
    text-align: left;
    min-height: 12mm;
    line-height: 1.3;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.exp-matrix-simple thead th {
    background: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    padding: 1.5mm 2mm;
}
.exp-matrix-simple .exp-matrix-name-col {
    width: 16%;
}
.exp-matrix-simple tbody th {
    font-weight: 700;
    background: #fff;
    width: 16%;
}
.exp-matrix-simple .exp-matrix-row-meta th,
.exp-matrix-simple .exp-matrix-row-meta td {
    font-style: italic;
    font-size: 0.68rem;
    min-height: 8mm;
    background: #fff;
}
.exp-matrix-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 3mm;
    font-size: 0.62rem;
    color: #777;
}

@media print {
    .exp-print-matrix-simple {
        display: block !important;
    }
    .exp-matrix-page {
        padding: 8mm 10mm;
    }
    .exp-matrix-simple {
        font-size: 0.68rem;
    }
    .exp-matrix-simple th,
    .exp-matrix-simple td {
        padding: 1.5mm 2mm;
        min-height: 10mm;
    }
}
.exp-print-adult .exp-day-note,
.exp-print-kids .exp-day-note {
    margin-top: 1rem;
}

/* ── Staff-grid (sg-*) — week matrix ────────────────────────── */
.sg-wrap { width: 100%; }
.sg-topbar {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.75rem; margin-bottom: 0.25rem;
}
.sg-topbar-title { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.sg-topbar-hint  { font-size: 0.75rem; color: var(--text-muted); }
.sg-scroll { overflow-x: auto; }
.sg-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.82rem; table-layout: fixed;
}
.sg-th-name { width: 130px; text-align: left; padding: 6px 8px; font-size: 0.72rem; color: var(--text-muted); }
.sg-th-day  { text-align: center; padding: 6px 8px; font-size: 0.75rem; font-weight: 700; color: var(--text-main); }
.sg-row { border-bottom: 1px solid var(--border); }
.sg-row[draggable="true"] { cursor: grab; }
.sg-row.sg-dragging { opacity: 0.4; }
.sg-row.sg-row-over { background: rgba(45,122,120,0.10); outline: 2px dashed rgba(45,122,120,0.4); outline-offset: -2px; }
.sg-name-cell {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 6px 8px; white-space: nowrap; font-weight: 600;
    color: var(--text-main); font-size: 0.82rem;
}
.sg-drag-handle { cursor: grab; opacity: 0.35; font-size: 0.7rem; user-select: none; }
/* Mobile reorder buttons — hidden on desktop, shown on touch */
.sg-mobile-reorder { display: none; }
.sg-move-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: 0.55rem; padding: 0 2px; color: var(--text-muted);
    line-height: 1;
}
.sg-move-btn:hover { color: var(--accent, #6366f1); }
@media (max-width: 700px) {
    .sg-drag-handle { display: none; }
    .sg-mobile-reorder { display: flex; flex-direction: column; gap: 0; }
}
.sg-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sg-name-text { overflow: hidden; text-overflow: ellipsis; }
/* Day column action buttons */
.sg-day-actions { display: inline-flex; gap: 2px; margin-left: 4px; opacity: 0; transition: opacity 0.15s; }
.sg-th-day:hover .sg-day-actions { opacity: 1; }
.sg-day-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: 0.6rem; padding: 1px 3px; border-radius: 3px;
    color: var(--text-muted); line-height: 1;
}
.sg-day-btn:hover { background: var(--surface); color: var(--text-main); }
.sg-day-btn-danger:hover { color: #ef4444; }
.sg-cell {
    padding: 6px 8px; text-align: center; cursor: pointer;
    border: 1px solid var(--border); min-height: 38px;
    transition: background 0.12s;
}
.sg-cell:hover { background: var(--surface-raised, rgba(45,122,120,0.06)); }
.sg-filled { background: rgba(45,122,120,0.06); }
.sg-cell-main { font-size: 0.8rem; font-weight: 600; color: var(--text-main); }
.sg-cell-note { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.sg-no-staff {
    text-align: center; padding: 1.5rem; color: var(--text-muted);
    font-size: 0.82rem; font-style: italic;
}
/* Mad row */
.sg-mad-row { border-top: 2px solid var(--border); }
.sg-mad-label { font-weight: 700; }
.sg-mad-icon { font-size: 0.85rem; }
.sg-mad-cell { padding: 4px 6px; }
.sg-mad-inp {
    width: 100%; border: none; background: transparent;
    font-size: 0.78rem; padding: 4px; color: var(--text-main);
    font-family: inherit;
}
.sg-mad-inp::placeholder { color: var(--text-muted); opacity: 0.6; }
/* Notes bar */
.sg-notes-bar { padding: 0.5rem 0; }
.sg-notes-field { display: flex; gap: 0.5rem; align-items: flex-start; }
.sg-notes-label { font-size: 0.8rem; font-weight: 700; color: var(--text-main); padding-top: 4px; }
.sg-notes-area {
    flex: 1; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card-bg); color: var(--text-main);
    font-size: 0.8rem; padding: 6px 8px; resize: vertical;
    font-family: inherit;
}
.sg-notes-area::placeholder { color: var(--text-muted); opacity: 0.6; }
/* Floating cell editor */
.sg-editor {
    position: fixed; z-index: 900;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.6rem; width: 260px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; gap: 0.35rem;
}
.sg-ed-who { font-size: 0.78rem; font-weight: 700; color: var(--text-main); }
.sg-ed-main, .sg-ed-note-inp {
    width: 100%; border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 8px; font-size: 0.82rem; background: var(--surface);
    color: var(--text-main); font-family: inherit;
}
.sg-ed-main::placeholder, .sg-ed-note-inp::placeholder { color: var(--text-muted); opacity: 0.6; }
.sg-ed-btns { display: flex; gap: 0.3rem; }
.sg-ed-save {
    flex: 1; padding: 5px 0; border: none; border-radius: 6px;
    background: var(--accent, #6366f1); color: #fff;
    font-weight: 600; font-size: 0.78rem; cursor: pointer;
}
.sg-ed-save:hover { opacity: 0.9; }
.sg-ed-clear {
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-muted);
    font-size: 0.78rem; cursor: pointer;
}
.sg-ed-clear:hover { background: var(--surface); }
/* Suggestion chips in editor */
.sg-suggestions { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-sug-btn {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-main); cursor: pointer; font-family: inherit;
}
.sg-sug-btn:hover { background: var(--accent, #6366f1); color: #fff; border-color: transparent; }
/* Colleague search */
.planner-colleague-search { margin-top: 0.5rem; }
.planner-colleague-results { display: flex; flex-direction: column; gap: 2px; margin-top: 0.3rem; max-height: 200px; overflow-y: auto; }
.planner-colleague-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.5rem; border-radius: 6px; border: none;
    background: transparent; cursor: pointer; font-family: inherit;
    color: var(--text-main); font-size: 0.82rem; text-align: left; width: 100%;
}
.planner-colleague-item:hover { background: var(--surface); }
.planner-colleague-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent, #6366f1); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; flex-shrink: 0;
}
.planner-colleague-role { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.planner-staff-linked { font-size: 0.7rem; margin-left: 0.2rem; }

/* Print: show matrix as clean table */
@media print {
    /* Show planner body + matrix in print */
    .planner-body { display: block !important; }
    .planner-week-area { width: 100% !important; padding: 0 !important; }
    .planner-toolbar { display: block !important; }
    .planner-toolbar-actions,
    .planner-stats-row,
    .planner-overflow-wrap { display: none !important; }
    .planner-plan-name {
        border: none !important; font-size: 14pt !important;
        font-weight: 700 !important; color: #000 !important;
        padding: 0 !important; background: transparent !important;
    }
    .planner-icon-rail,
    .planner-drawer,
    .planner-day-summary,
    .sg-editor,
    .sg-drag-handle,
    .sg-mobile-reorder,
    .sg-topbar-hint,
    .sg-sug-btn,
    .sg-day-actions { display: none !important; }
    .sg-wrap {
        break-inside: avoid;
        background: #fff !important;
        color: #000 !important;
    }
    .sg-topbar-title { color: #000 !important; }
    .sg-table { font-size: 9pt; width: 100%; }
    .sg-cell, .sg-mad-cell, .sg-name-cell, .sg-th-day, .sg-th-name {
        border: 0.5pt solid #999 !important; padding: 3pt 4pt;
        color: #000 !important; background: #fff !important;
    }
    .sg-cell-main { color: #000 !important; }
    .sg-cell-note { color: #444 !important; }
    .sg-name-text { color: #000 !important; }
    .sg-th-day { color: #000 !important; font-weight: 700; }
    .sg-notes-label { color: #000 !important; }
    .sg-notes-area {
        border: 0.5pt solid #999 !important;
        color: #000 !important; background: #fff !important;
    }
    .sg-mad-inp { color: #000 !important; }
    .sg-avatar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ── Dark mode overrides ───────────────────────────────────── */

/* Start screen cards */
[data-theme="dark"] .planner-start-type-card,
[data-theme="dark"] .planner-start-base-card {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .planner-start-type-card:hover,
[data-theme="dark"] .planner-start-base-card:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(45,122,120,0.4) !important;
}
[data-theme="dark"] .planner-start-type-card.is-active,
[data-theme="dark"] .planner-start-base-card.is-active {
    background: rgba(45,122,120,0.18) !important;
    border-color: rgba(45,122,120,0.5) !important;
}
[data-theme="dark"] .planner-start-type-title,
[data-theme="dark"] .planner-start-base-title {
    color: #fff !important;
}
[data-theme="dark"] .planner-start-type-copy,
[data-theme="dark"] .planner-start-base-copy {
    color: rgba(255,255,255,0.6) !important;
}
/* Recent plan cards on start screen */
[data-theme="dark"] .planner-start-recent {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .planner-start-recent:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.16) !important;
}
[data-theme="dark"] .planner-start-recent-item,
[data-theme="dark"] .planner-file-row {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .planner-start-recent-name,
[data-theme="dark"] .planner-file-name {
    color: #fff !important;
}
[data-theme="dark"] .planner-start-recent-meta,
[data-theme="dark"] .planner-file-date {
    color: rgba(255,255,255,0.5) !important;
}
/* Template cards */
[data-theme="dark"] .planner-start-template-card {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .planner-start-template-head strong {
    color: #fff !important;
}
[data-theme="dark"] .planner-start-template-head span {
    color: rgba(255,255,255,0.5) !important;
}
/* General planner card background */
[data-theme="dark"] .planner-activity-card,
[data-theme="dark"] .planner-staff-item,
[data-theme="dark"] .planner-file-item,
[data-theme="dark"] .planner-game-card,
[data-theme="dark"] .exp-day,
[data-theme="dark"] .exp-born-item {
    background: var(--card-bg);
    border-color: var(--border);
}
[data-theme="dark"] .planner-input,
[data-theme="dark"] .planner-input-sm,
[data-theme="dark"] .planner-select,
[data-theme="dark"] .planner-textarea,
[data-theme="dark"] .planner-time-input,
[data-theme="dark"] .planner-activity-name-input,
[data-theme="dark"] .planner-cat-select,
[data-theme="dark"] .planner-time-quick {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--border);
}
/* Card v3 dark mode */
[data-theme="dark"] .planner-card-inner {
    color: var(--text-main);
}
[data-theme="dark"] .planner-meta-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
}
[data-theme="dark"] .planner-meta-pill-warn {
    background: rgba(251,191,36,0.18);
    border-color: rgba(251,191,36,0.35);
    color: #fde68a;
}
[data-theme="dark"] .planner-meta-pill-alert {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.35);
    color: #fca5a5;
}
[data-theme="dark"] .planner-meta-pill-cat {
    /* Keep cat color but use solid on dark */
    filter: brightness(1.3) saturate(0.9);
}
[data-theme="dark"] .planner-chip {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-main);
}
[data-theme="dark"] .planner-suggestion-banner {
    color: #fde68a;
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.3);
}
[data-theme="dark"] .planner-activity-name-input {
    color: var(--text-main);
}
[data-theme="dark"] .planner-quick-fix-row .planner-btn-quickfix {
    background: rgba(251,191,36,0.15) !important;
    color: #fde68a !important;
    border-color: rgba(251,191,36,0.3) !important;
}

/* ── Print ─────────────────────────────────────────────────── */
@page {
    size: A4 landscape;
    margin: 8mm 10mm;
}
/* Override to portrait for single-day child view */
.exp-print-kids + * { page-break-before: always; }

@media print {
    .planner-toolbar,
    #planner-game-picker,
    #planner-file-overlay {
        display: none !important;
    }
    .planner-export-summary {
        display: none !important;
    }
    .planner-modal-footer,
    .planner-modal-header { display: none !important; }
    .planner-overlay {
        position: static !important;
        background: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
    }
    .planner-modal {
        border: none !important;
        box-shadow: none !important;
        max-height: none !important;
        max-width: none !important;
        width: 100% !important;
    }
    .planner-modal-body {
        padding: 0 !important;
        overflow: visible !important;
    }
    .planner-export-canvas,
    .planner-export-canvas-small,
    .planner-export-canvas-normal,
    .planner-export-canvas-large {
        transform: none !important;
        padding: 0 !important;
    }
    .planner-export-canvas .exp-print-sheet {
        min-width: auto !important;
    }
    .exp-week-grid {
        grid-template-columns: repeat(5,1fr) !important;
        gap: 0.4rem !important;
        font-size: 0.7rem !important;
    }
    .exp-print-sheet,
    .exp-gallery-page {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 6mm 0 !important;
        page-break-inside: avoid;
        page-break-after: always;
        background: #fff !important;
        color: #000 !important;
    }
    .exp-print-sheet:last-child,
    .exp-gallery-page:last-child {
        page-break-after: auto;
    }
    /* Strip all decorative backgrounds in print */
    .exp-print-sheet * {
        background-image: none !important;
    }
    .exp-day,
    .exp-day-fun,
    .exp-day-kids-v3 {
        background: #fff !important;
        border: 1px solid #ccc !important;
        border-top: 3px solid #000 !important;
        color: #000 !important;
        border-radius: 0 !important;
    }
    .exp-day h4 { color: #000 !important; }
    .exp-act-row,
    .exp-act-row-fun,
    .exp-act-v3 {
        background: #fff !important;
        color: #000 !important;
    }
    .exp-print-hero {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
    }
    .exp-print-hero h3 { color: #000 !important; }
    .exp-print-hero p, .exp-print-kicker { color: #444 !important; }
    .exp-print-badge {
        background: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
    }
    .exp-week-background { display: none !important; }
    /* Skjul meta-badges og beskrivelse i print */
    .exp-print-badge,
    .exp-print-hero p,
    .exp-print-kicker {
        display: none !important;
    }
    .exp-print-hero {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.4rem !important;
    }
    .exp-print-hero h3 {
        font-size: 1.1rem !important;
    }
    /* Simple matrix print: no extra decoration */
    .exp-print-matrix-simple { background: #fff !important; }

    .exp-act-row,
    .exp-act-row-fun,
    .exp-born-item,
    .exp-table tr,
    .exp-print-hero,
    .exp-print-footer {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .exp-table thead {
        display: table-header-group;
    }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .planner-start-shell {
        padding: 1rem;
    }
    .planner-start-hero,
    .planner-start-card {
        padding: 1rem;
        border-radius: 18px;
    }
    .planner-start-hero h1 {
        font-size: 1.55rem;
    }
    .planner-start-grid {
        grid-template-columns: 1fr;
    }
    .planner-start-type-grid {
        grid-template-columns: 1fr;
    }
    .planner-start-base-grid {
        grid-template-columns: 1fr;
    }
    .planner-modal-export {
        max-width: calc(100vw - 20px);
    }
    .planner-modal-export .planner-modal-body {
        padding: 1rem;
    }
    .planner-modal-export #export-body {
        max-width: none;
    }
    .planner-export-summary {
        gap: 0.4rem;
        margin-bottom: 0.75rem;
        row-gap: 0.35rem;
        top: 0.1rem;
        padding-top: 0.2rem;
        padding-bottom: 0.35rem;
    }
    .planner-export-summary-chip,
    .planner-export-toggle {
        min-height: 26px;
        padding: 0 0.78rem;
        font-size: 0.71rem;
    }
    .planner-export-summary-chip {
        flex: 1 1 auto;
    }
    .planner-export-toggle {
        flex: 1 1 auto;
    }
    .planner-export-reset {
        flex: 1 1 100%;
        min-height: 26px;
        padding: 0 0.7rem;
    }
    .planner-export-scale-group {
        width: 100%;
        margin-top: 0.1rem;
    }
    .planner-export-scale {
        flex: 1 1 72px;
        min-height: 26px;
        padding: 0 0.72rem;
    }
    .planner-export-canvas-small,
    .planner-export-canvas-normal,
    .planner-export-canvas-large {
        transform: none;
    }
    .exp-print-sheet {
        margin-bottom: 1rem;
    }
    .planner-export-canvas .exp-gallery-page {
        margin-top: 0.9rem;
    }
    .planner-modal-export .planner-modal-footer {
        padding: 0.6rem 0.85rem;
        justify-content: stretch;
    }
    .planner-modal-export .planner-modal-footer .planner-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .planner-body { flex-direction: column; }
    .planner-icon-rail { width: 100%; flex-direction: row; height: 44px; border-right: none; border-bottom: 1px solid var(--border); }
    .planner-drawer { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 60vh; border-right: none; border-top: 1px solid var(--border); }
    .planner-drawer.is-open { display: flex; }
    .planner-day-tabs { padding: 0 0.5rem; }
    .planner-day-tab { padding: 0.5rem 0.65rem; font-size: 0.78rem; }
    .exp-week-grid { grid-template-columns: 1fr 1fr; }
    .exp-gallery-grid { grid-template-columns: 1fr; }
}


/* =============================================================
   ACTIVITY CARD v3 — kategori-farvestribe + redesign
   ============================================================= */

/* Card shell */
.planner-activity-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.planner-activity-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-color: var(--cat-color, #6b7280);
}
.planner-activity-card.has-game {
    border-left-color: var(--primary,#2d7a78);
}
.planner-activity-card.has-conflict {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}
.planner-activity-card.is-suggested {
    border-style: dashed;
    border-color: #f59e0b;
    background: rgba(251,191,36,0.04);
}
.planner-activity-card.is-unassigned {
    border-left-color: #f97316;
}
.planner-activity-card.is-unscheduled {
    opacity: 0.88;
}

/* Kategori-farvestribe (venstre kant) */
.planner-cat-stripe {
    width: 5px;
    flex-shrink: 0;
    background: var(--cat-color, #6b7280);
    border-radius: 10px 0 0 10px;
    transition: width 0.15s;
}
.planner-activity-card:hover .planner-cat-stripe {
    width: 7px;
}

/* Inner content wrapper */
.planner-card-inner {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* ── Recurring activities modal ──────────────────────────── */
.planner-recurring-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.75rem;
}
.planner-recurring-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface, rgba(255,255,255,0.04));
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.88rem;
}
.planner-recurring-stripe {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}
.planner-recurring-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-main, #f1f5f9);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-recurring-time {
    font-size: 0.76rem;
    color: var(--text-muted, #9ca3af);
    min-width: 80px;
    font-variant-numeric: tabular-nums;
}
.planner-recurring-cat {
    font-size: 0.9rem;
}
.planner-recurring-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    transition: color 0.15s;
}
.planner-recurring-delete:hover { color: #ef4444; }
.planner-recurring-sep {
    height: 1px;
    background: var(--border, #e2e8f0);
    margin: 0.5rem 0 0.75rem;
}
.planner-recurring-add-form { display: flex; flex-direction: column; gap: 0.5rem; }
.planner-recurring-form-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Collapsed card row ───────────────────────────────────── */
.planner-activity-card.planner-card-collapsed {
    align-items: center;
    min-height: 40px;
    padding: 0;
    cursor: default;
}
.planner-card-row-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    min-width: 0;
    border-radius: 4px;
    transition: background 0.1s;
}
.planner-card-row-main:hover {
    background: rgba(255,255,255,0.06);
}
[data-theme="light"] .planner-card-row-main:hover {
    background: rgba(0,0,0,0.04);
}
.planner-row-time {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    min-width: 68px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.planner-row-warn {
    color: var(--text-muted, #9ca3af);
    opacity: 0.5;
}
.planner-row-name {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main, #f1f5f9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.planner-row-dots {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.planner-row-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.planner-row-badge {
    font-size: 0.75rem;
    padding: 0 0.2rem;
    flex-shrink: 0;
    line-height: 1;
}
.planner-row-badge-warn {
    color: #f59e0b;
    font-weight: 700;
}
.planner-row-badge-conflict {
    color: #ef4444;
}
.planner-row-expand-btn {
    flex-shrink: 0;
    padding: 0.3rem 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    transition: color 0.15s;
    line-height: 1;
}
.planner-row-expand-btn:hover {
    color: var(--text-main, #f1f5f9);
}
/* Delete button on collapsed row */
.planner-card-collapsed .planner-activity-delete {
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    transition: color 0.15s;
}
.planner-card-collapsed .planner-activity-delete:hover {
    color: #ef4444;
}
/* Collapse button inside expanded card */
.planner-card-collapse-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 0.72rem;
    padding: 0 0 0.4rem 0;
    text-align: left;
    transition: color 0.15s;
    align-self: flex-start;
}
.planner-card-collapse-btn:hover {
    color: var(--primary,#2d7a78);
}

/* Suggestion banner */
.planner-suggestion-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    color: #92400e;
    margin-bottom: 0.2rem;
}
.planner-btn-approve {
    background: #059669 !important;
    color: #fff !important;
    border-color: #059669 !important;
}
.planner-btn-approve:hover { background: #047857 !important; }
.planner-btn-reject {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}
.planner-btn-reject:hover { background: #dc2626 !important; }

/* Activity header row */
.planner-activity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Time block */
.planner-activity-time-block {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.planner-time-input {
    font-size: 0.8rem;
    padding: 0.18rem 0.3rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 5px;
    background: var(--surface-2, #f8fafc);
    color: var(--text-main, #1a1a2e);
    width: 80px;
    font-family: inherit;
    transition: border-color 0.12s;
}
.planner-time-input:focus {
    outline: none;
    border-color: var(--cat-color, #6366f1);
}
.planner-time-sep {
    color: var(--text-muted, #94a3b8);
    font-size: 0.75rem;
}
.planner-time-quick-actions {
    display: flex;
    gap: 0.15rem;
}
.planner-time-quick {
    font-size: 0.68rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    background: var(--surface-2, #f8fafc);
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: background 0.1s, color 0.1s;
}
.planner-time-quick:hover {
    background: var(--cat-color, #6366f1);
    color: #fff;
    border-color: transparent;
}

/* Activity name + cat icon */
.planner-activity-name-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 120px;
}
.planner-cat-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1;
}
.planner-activity-name-input {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main, #1a1a2e);
    border: none;
    border-bottom: 1.5px solid transparent;
    background: transparent;
    padding: 0.1rem 0;
    font-family: inherit;
    transition: border-color 0.12s;
    min-width: 0;
}
.planner-activity-name-input:focus {
    outline: none;
    border-bottom-color: var(--cat-color, #6366f1);
}

/* Header right: category select + order + delete */
.planner-activity-header-right {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    margin-left: auto;
}
.planner-cat-select {
    font-size: 0.72rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 5px;
    background: var(--surface-2, #f8fafc);
    color: var(--text-main, #1a1a2e);
    cursor: pointer;
    font-family: inherit;
    max-width: 110px;
}
.planner-cat-select:focus { outline: none; border-color: var(--cat-color, #6366f1); }

.planner-order-controls {
    display: flex;
    gap: 0.1rem;
}
.planner-activity-order {
    font-size: 0.75rem;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    background: var(--surface-2, #f8fafc);
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: background 0.1s;
}
.planner-activity-order:hover { background: var(--surface-3, #e2e8f0); }

.planner-activity-delete {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.planner-activity-delete:hover { background: #fef2f2; color: #ef4444; }

/* Meta pills */
.planner-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}
.planner-meta-pill {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-weight: 500;
    white-space: nowrap;
}
.planner-meta-pill-cat { font-weight: 600; }
.planner-meta-pill-time { font-family: var(--font-mono, monospace); color: #475569; }
.planner-meta-pill-warn { background: #fffbeb; border-color: #fbbf24; color: #92400e; }
.planner-meta-pill-alert { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.planner-meta-pill-game { background: #f0fdf4; border-color: #86efac; color: #166534; }

/* Staff chips with colored avatars */
.planner-staff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 0;
}
.planner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem 0.15rem 0.2rem;
    border-radius: 20px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 0.75rem;
    color: var(--text-main, #1a1a2e);
    font-weight: 500;
    transition: border-color 0.12s;
}
.planner-chip:hover { border-color: var(--chip-color, #6b7280); }
.planner-chip-conflict {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    font-weight: 700;
}
.planner-chip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.planner-chip-remove {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    margin-left: 0.1rem;
    transition: color 0.1s;
}
.planner-chip-remove:hover { color: #ef4444; }

/* Action row */
.planner-activity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.1rem;
}
.planner-select-assign { max-width: 130px; font-size: 0.72rem; }
.planner-btn-assign { flex-shrink: 0; }

/* Quick fix row */
.planner-quick-fix-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.planner-btn-quickfix {
    font-size: 0.7rem;
    background: #fffbeb !important;
    border-color: #fbbf24 !important;
    color: #78350f !important;
}
.planner-btn-quickfix:hover { background: #fef3c7 !important; }

/* Notes row */
.planner-activity-notes {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.1rem;
}
.planner-input-sm {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 5px;
    background: var(--surface-2, #f8fafc);
    color: var(--text-main, #1a1a2e);
    font-family: inherit;
    transition: border-color 0.12s;
    width: 100%;
    box-sizing: border-box;
}
.planner-input-sm:focus {
    outline: none;
    border-color: var(--cat-color, #6366f1);
    background: var(--surface, #fff);
}

/* Day actions (Kopier dag) */
.planner-day-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

/* Print additions */
@media print {
    .planner-activity-card {
        break-inside: avoid;
        border: 1px solid #d1d5db;
        border-left: 5px solid var(--cat-color, #6b7280);
        box-shadow: none;
        border-radius: 4px;
    }
    .planner-cat-stripe { display: none; }
    .planner-activity-actions,
    .planner-quick-fix-row,
    .planner-time-quick-actions,
    .planner-order-controls,
    .planner-activity-delete,
    .planner-chip-remove,
    .planner-cat-select { display: none !important; }
    .exp-note-lines {
        border-bottom: 1px dotted #bbb;
        height: 1.6em;
        margin: 2px 0;
    }
    .exp-draw-box {
        border: 2px dashed #ccc;
        border-radius: 8px;
        min-height: 60mm;
        margin: 4mm 0;
        position: relative;
    }
    .exp-draw-box::after {
        content: 'Tegn her';
        position: absolute;
        bottom: 4mm;
        right: 5mm;
        font-size: 0.7rem;
        color: #ccc;
    }
}

/* ── Bundle selector ──────────────────────────────────────── */
.planner-bundle-selector {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.9rem 1rem 1rem;
    background: var(--surface-2, #f8fafc);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.planner-bundle-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-main, #1a1a2e);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 7px;
    transition: background 0.15s;
}

.planner-bundle-option:hover {
    background: var(--border, #e2e8f0);
}

.planner-bundle-option input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #6366f1;
    cursor: pointer;
}

/* Planner visual refresh — warm editorial shell */
.planner-root {
    --primary: #c96a3d;
    --card-bg: #f6f0e5;
    --surface: #efe6d9;
    --surface-2: #fbf7ef;
    --border: #decfbc;
    --text-main: #1f2a24;
    --text-secondary: #48554d;
    --text-muted: #6c756c;
    background:
        radial-gradient(circle at top left, rgba(201, 106, 61, 0.09), transparent 28%),
        radial-gradient(circle at top right, rgba(45, 122, 120, 0.08), transparent 24%),
        linear-gradient(180deg, #f3ebdf 0%, #ece2d3 100%);
    font-family: "Public Sans", "Outfit", "Inter", system-ui, sans-serif;
}

[data-theme="dark"] .planner-root {
    --primary: #d1845a;
    --card-bg: #1f1813;
    --surface: #271d17;
    --surface-2: #31251d;
    --border: rgba(226, 202, 176, 0.14);
    --text-main: #f2e6d7;
    --text-secondary: #d7c3b0;
    --text-muted: #a8907b;
    background:
        radial-gradient(circle at top left, rgba(209, 132, 90, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(45, 122, 120, 0.12), transparent 24%),
        linear-gradient(180deg, #130f0c 0%, #1a1410 100%);
}

.planner-root-start {
    background:
        radial-gradient(circle at top right, rgba(201, 106, 61, 0.16), transparent 26%),
        radial-gradient(circle at top left, rgba(45, 122, 120, 0.1), transparent 22%),
        linear-gradient(180deg, #15110d, #1d1712);
}

[data-theme="light"] .planner-root-start {
    color: #1f2a24;
    background:
        radial-gradient(circle at top right, rgba(201, 106, 61, 0.1), transparent 26%),
        radial-gradient(circle at top left, rgba(45, 122, 120, 0.08), transparent 24%),
        linear-gradient(180deg, #f7f2e9, #f0e6d8);
}

.planner-toolbar {
    background:
        linear-gradient(180deg, rgba(255, 251, 245, 0.88), rgba(246, 238, 227, 0.82));
    border-bottom: 1px solid rgba(201, 106, 61, 0.14);
    padding: 1rem 1.35rem 0.9rem;
    box-shadow: 0 14px 26px rgba(43, 31, 20, 0.06);
}

[data-theme="dark"] .planner-toolbar {
    background:
        linear-gradient(180deg, rgba(31, 24, 19, 0.96), rgba(25, 19, 15, 0.94));
    border-bottom-color: rgba(209, 132, 90, 0.16);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}

.planner-title-row {
    gap: 0.95rem;
    margin-bottom: 0.75rem;
}

.planner-plan-name {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 0.2rem 0.15rem 0.25rem 0;
}

.planner-toolbar-actions {
    gap: 0.45rem;
}

.planner-btn,
.planner-save-status,
.planner-day-summary-pill,
.planner-coverage-flag,
.planner-day-count,
.planner-chip,
.planner-meta-pill {
    border-radius: 999px;
}

.planner-btn {
    min-height: 38px;
    padding: 0.6rem 0.95rem;
    border-color: rgba(201, 106, 61, 0.16);
    background: rgba(255, 251, 245, 0.82);
    color: var(--text-secondary, #48554d);
    font-weight: 650;
}

.planner-btn:hover {
    background: rgba(247, 238, 227, 0.98);
    border-color: rgba(201, 106, 61, 0.3);
    box-shadow: 0 10px 18px rgba(43, 31, 20, 0.07);
}

[data-theme="dark"] .planner-btn {
    background: rgba(49, 37, 29, 0.92);
    border-color: rgba(209, 132, 90, 0.18);
    color: var(--text-main, #f2e6d7);
}

[data-theme="dark"] .planner-btn:hover {
    background: rgba(60, 45, 35, 0.98);
    border-color: rgba(209, 132, 90, 0.3);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
}

.planner-btn-primary {
    background: linear-gradient(180deg, #d8895d, #c96a3d);
    border-color: #c96a3d;
    color: #fff8f2;
}

.planner-btn-primary:hover {
    filter: none;
    background: linear-gradient(180deg, #e09569, #cd7349);
    border-color: #cd7349;
    box-shadow: 0 12px 24px rgba(201, 106, 61, 0.26);
}

[data-theme="dark"] .planner-btn-primary {
    background: linear-gradient(180deg, #db9167, #ca754b);
    border-color: #ca754b;
}

.planner-save-status {
    min-height: 36px;
    border-color: rgba(201, 106, 61, 0.14);
    background: rgba(255, 249, 241, 0.82);
    color: var(--text-muted, #6c756c);
}

[data-theme="dark"] .planner-save-status {
    background: rgba(47, 36, 28, 0.96);
    border-color: rgba(209, 132, 90, 0.16);
}

.planner-stats-row {
    gap: 0.6rem 0.8rem;
}

.planner-stat {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.1rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 249, 241, 0.72);
    border: 1px solid rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .planner-stat {
    background: rgba(40, 30, 24, 0.94);
    border-color: rgba(209, 132, 90, 0.12);
}

.planner-body {
    background:
        linear-gradient(180deg, rgba(247, 241, 233, 0.72), rgba(236, 227, 214, 0.72));
}

[data-theme="dark"] .planner-body {
    background:
        linear-gradient(180deg, rgba(18, 14, 11, 0.86), rgba(24, 18, 14, 0.9));
}

.planner-icon-rail {
    width: 56px;
    background: rgba(255, 250, 243, 0.82);
    border-right-color: rgba(201, 106, 61, 0.14);
    padding: 0.7rem 0;
    gap: 0.45rem;
}

[data-theme="dark"] .planner-icon-rail {
    background: rgba(24, 18, 14, 0.94);
    border-right-color: rgba(209, 132, 90, 0.14);
}

.planner-rail-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid transparent;
}

.planner-rail-btn:hover {
    background: rgba(201, 106, 61, 0.12);
    border-color: rgba(201, 106, 61, 0.18);
    color: var(--text-main, #1f2a24);
}

[data-theme="dark"] .planner-rail-btn:hover {
    background: rgba(209, 132, 90, 0.12);
    border-color: rgba(209, 132, 90, 0.16);
    color: var(--text-main, #f2e6d7);
}

.planner-rail-btn.is-active {
    background: linear-gradient(180deg, #d8895d, #c96a3d);
    border-color: #c96a3d;
    box-shadow: 0 10px 20px rgba(201, 106, 61, 0.22);
}

.planner-drawer {
    left: 56px;
    width: 290px;
    background:
        linear-gradient(180deg, rgba(246, 239, 229, 0.97), rgba(240, 231, 219, 0.97));
    border-right-color: rgba(201, 106, 61, 0.14);
    box-shadow: 14px 0 28px rgba(43, 31, 20, 0.08);
}

[data-theme="dark"] .planner-drawer {
    background:
        linear-gradient(180deg, rgba(31, 24, 19, 0.98), rgba(24, 18, 14, 0.98));
    border-right-color: rgba(209, 132, 90, 0.14);
    box-shadow: 14px 0 28px rgba(0, 0, 0, 0.22);
}

.planner-drawer-header {
    padding: 0.85rem 1rem;
    color: var(--text-secondary, #48554d);
    border-bottom-color: rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .planner-drawer-header {
    border-bottom-color: rgba(209, 132, 90, 0.14);
}

.planner-drawer-body {
    padding: 0.9rem 1rem 1rem;
    gap: 0.55rem;
}

.planner-coverage-card,
.planner-staff-item,
.planner-media-thumb,
.planner-media-empty {
    border-radius: 16px;
}

.planner-week-area {
    position: relative;
    background:
        linear-gradient(180deg, rgba(245, 238, 228, 0.62), rgba(238, 228, 214, 0.62));
}

[data-theme="dark"] .planner-week-area {
    background:
        linear-gradient(180deg, rgba(23, 18, 14, 0.7), rgba(18, 14, 11, 0.72));
}

.planner-day-tabs {
    border-bottom: none;
    background: transparent;
    padding: 0.9rem 1.15rem 0;
    gap: 0.45rem;
}

.planner-day-tab {
    min-height: 42px;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(201, 106, 61, 0.12);
    border-radius: 999px;
    background: rgba(255, 251, 245, 0.72);
    color: var(--text-secondary, #48554d);
    border-bottom: 1px solid rgba(201, 106, 61, 0.12);
    margin-bottom: 0;
}

.planner-day-tab:hover {
    color: var(--text-main, #1f2a24);
    border-color: rgba(201, 106, 61, 0.24);
    background: rgba(255, 248, 240, 0.92);
}

.planner-day-tab.active {
    color: var(--primary, #c96a3d);
    border-color: rgba(201, 106, 61, 0.28);
    background: rgba(244, 225, 211, 0.9);
    box-shadow: 0 10px 18px rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .planner-day-tab {
    background: rgba(39, 29, 23, 0.88);
    border-color: rgba(209, 132, 90, 0.12);
    color: var(--text-secondary, #d7c3b0);
}

[data-theme="dark"] .planner-day-tab:hover {
    background: rgba(49, 37, 29, 0.94);
    border-color: rgba(209, 132, 90, 0.22);
}

[data-theme="dark"] .planner-day-tab.active {
    background: rgba(64, 42, 30, 0.96);
    border-color: rgba(209, 132, 90, 0.28);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.planner-day-content {
    padding: 1.15rem 1.35rem 1.6rem;
}

.planner-day-panel {
    max-width: 960px;
    gap: 0.9rem;
}

.planner-assign-row,
.planner-filter-row {
    border-radius: 18px;
    padding: 0.85rem 1rem;
}

.planner-assign-row {
    background: rgba(255, 251, 244, 0.72);
    border-color: rgba(201, 106, 61, 0.12);
}

.planner-filter-row {
    background: rgba(45, 122, 120, 0.08);
    border-color: rgba(45, 122, 120, 0.14);
}

[data-theme="dark"] .planner-assign-row {
    background: rgba(34, 26, 20, 0.9);
    border-color: rgba(209, 132, 90, 0.12);
}

[data-theme="dark"] .planner-filter-row {
    background: rgba(45, 122, 120, 0.12);
    border-color: rgba(45, 122, 120, 0.18);
}

.planner-activity-card {
    background: rgba(255, 251, 245, 0.84);
    border-color: rgba(201, 106, 61, 0.12);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(43, 31, 20, 0.05);
}

.planner-activity-card:hover {
    box-shadow: 0 16px 30px rgba(43, 31, 20, 0.09);
    border-color: rgba(201, 106, 61, 0.28);
}

[data-theme="dark"] .planner-activity-card {
    background: rgba(31, 24, 19, 0.96);
    border-color: rgba(209, 132, 90, 0.12);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .planner-activity-card:hover {
    border-color: rgba(209, 132, 90, 0.24);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.planner-card-inner {
    padding: 0.95rem 1rem 0.85rem;
    gap: 0.5rem;
}

.planner-card-row-main {
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
}

.planner-card-row-main:hover {
    background: rgba(201, 106, 61, 0.08);
}

[data-theme="dark"] .planner-card-row-main:hover {
    background: rgba(209, 132, 90, 0.1);
}

.planner-game-badge,
.planner-bundle-selector {
    border-radius: 18px;
}

.planner-overlay {
    background: rgba(20, 14, 10, 0.48);
    backdrop-filter: blur(8px);
}

.planner-modal {
    background:
        linear-gradient(180deg, rgba(248, 242, 233, 0.98), rgba(242, 234, 223, 0.98));
    border-color: rgba(201, 106, 61, 0.14);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(43, 31, 20, 0.16);
}

[data-theme="dark"] .planner-modal {
    background:
        linear-gradient(180deg, rgba(31, 24, 19, 0.98), rgba(24, 18, 14, 0.98));
    border-color: rgba(209, 132, 90, 0.14);
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.32);
}

.planner-modal-header,
.planner-modal-footer {
    border-color: rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .planner-modal-header,
[data-theme="dark"] .planner-modal-footer {
    border-color: rgba(209, 132, 90, 0.14);
}

.planner-modal-header h3 {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.planner-input,
.planner-input-sm,
.planner-select,
.planner-textarea,
.planner-time-input {
    border-color: rgba(201, 106, 61, 0.14);
    background: rgba(255, 251, 245, 0.88);
}

[data-theme="dark"] .planner-input,
[data-theme="dark"] .planner-input-sm,
[data-theme="dark"] .planner-select,
[data-theme="dark"] .planner-textarea,
[data-theme="dark"] .planner-time-input {
    background: rgba(49, 37, 29, 0.92);
    border-color: rgba(209, 132, 90, 0.14);
}

@media (max-width: 768px) {
    .planner-toolbar {
        padding: 0.9rem 1rem 0.85rem;
    }

    .planner-title-row {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .planner-plan-name {
        width: 100%;
        flex-basis: 100%;
        font-size: 1.14rem;
    }

    .planner-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .planner-save-status {
        order: 99;
    }

    .planner-icon-rail {
        width: 100%;
        height: auto;
        padding: 0.6rem 0.75rem 0.35rem;
        gap: 0.5rem;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .planner-rail-btn {
        width: 44px;
        height: 44px;
    }

    .planner-drawer {
        left: 0;
        width: 100%;
        height: 62vh;
        border-right: none;
        border-top: 1px solid var(--border);
        border-radius: 24px 24px 0 0;
    }

    .planner-day-tabs {
        padding: 0.85rem 0.85rem 0;
    }

    .planner-day-content {
        padding: 1rem 0.85rem 1.25rem;
    }

    .planner-assign-row,
    .planner-filter-row {
        padding: 0.8rem 0.85rem;
    }
}

@media (max-width: 480px) {
    .planner-toolbar {
        padding: 0.8rem 0.8rem 0.75rem;
    }

    .planner-plan-name {
        font-size: 1.02rem;
    }

    .planner-day-tabs {
        padding: 0.75rem 0.7rem 0;
        gap: 0.35rem;
    }

    .planner-day-tab {
        min-height: 38px;
        padding: 0.6rem 0.8rem;
        font-size: 0.78rem;
    }

    .planner-day-content {
        padding: 0.85rem 0.7rem 1.1rem;
    }

    .planner-card-inner {
        padding: 0.85rem 0.85rem 0.75rem;
    }

    .planner-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        align-items: stretch;
    }

    .planner-toolbar-actions > * {
        min-width: 0;
    }

    .planner-save-status {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

.planner-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.planner-add-activity-form {
    display: flex;
    gap: 0.7rem;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    background: rgba(255, 250, 243, 0.76);
    border: 1px dashed rgba(201, 106, 61, 0.28);
}

[data-theme="dark"] .planner-add-activity-form {
    background: rgba(39, 29, 23, 0.88);
    border-color: rgba(209, 132, 90, 0.2);
}

.planner-empty-day {
    text-align: center;
    padding: 2.5rem 1.1rem;
    border-radius: 22px;
    border: 1px dashed rgba(201, 106, 61, 0.24);
    background: rgba(255, 249, 241, 0.6);
    color: var(--text-muted, #6c756c);
}

[data-theme="dark"] .planner-empty-day {
    background: rgba(37, 28, 22, 0.86);
    border-color: rgba(209, 132, 90, 0.2);
    color: var(--text-muted, #a8907b);
}

.planner-day-note-wrap {
    padding: 0.95rem 1rem 1rem;
    border-radius: 20px;
    background: rgba(255, 250, 243, 0.72);
    border: 1px solid rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .planner-day-note-wrap {
    background: rgba(35, 27, 21, 0.9);
    border-color: rgba(209, 132, 90, 0.14);
}

.planner-activity-header {
    align-items: flex-start;
    gap: 0.7rem;
}

.planner-activity-name-input {
    font-size: 1rem;
    font-weight: 720;
}

.planner-activity-header-right {
    gap: 0.45rem;
}

.planner-activity-order {
    border-radius: 999px;
    min-height: 30px;
    background: rgba(255, 250, 243, 0.78);
    border-color: rgba(201, 106, 61, 0.14);
}

[data-theme="dark"] .planner-activity-order {
    background: rgba(47, 36, 28, 0.96);
    border-color: rgba(209, 132, 90, 0.14);
}

.planner-time-input {
    border-radius: 999px;
    background: rgba(255, 250, 243, 0.82);
}

.planner-time-quick {
    border-radius: 999px;
    border-color: rgba(45, 122, 120, 0.18);
    background: rgba(45, 122, 120, 0.08);
    color: #2d7a78;
}

.planner-time-quick:hover {
    background: rgba(45, 122, 120, 0.14);
    border-color: rgba(45, 122, 120, 0.3);
}

[data-theme="dark"] .planner-time-quick {
    background: rgba(45, 122, 120, 0.14);
    border-color: rgba(45, 122, 120, 0.22);
    color: #8ed1cf;
}

.planner-chip {
    padding: 0.3rem 0.72rem 0.3rem 0.82rem;
    font-weight: 600;
}

.planner-meta-pill {
    padding: 0.42rem 0.72rem;
    font-weight: 750;
}

.sg-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem 1.05rem 1.1rem;
    border-radius: 24px;
    background: rgba(255, 250, 243, 0.74);
    border: 1px solid rgba(201, 106, 61, 0.12);
    box-shadow: 0 14px 28px rgba(43, 31, 20, 0.05);
}

[data-theme="dark"] .sg-wrap {
    background: rgba(33, 25, 19, 0.92);
    border-color: rgba(209, 132, 90, 0.12);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

.sg-topbar {
    gap: 0.8rem;
    padding: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.sg-topbar-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

.sg-topbar-hint {
    font-size: 0.8rem;
    line-height: 1.5;
}

.sg-scroll {
    border-radius: 18px;
    border: 1px solid rgba(201, 106, 61, 0.12);
    background: rgba(255, 253, 248, 0.7);
    overflow-x: auto;
}

[data-theme="dark"] .sg-scroll {
    border-color: rgba(209, 132, 90, 0.12);
    background: rgba(25, 19, 15, 0.92);
}

.sg-table {
    min-width: 720px;
}

.sg-th-name,
.sg-th-day {
    background: rgba(246, 236, 224, 0.72);
    border-bottom: 1px solid rgba(201, 106, 61, 0.12);
    position: sticky;
    top: 0;
    z-index: 1;
}

[data-theme="dark"] .sg-th-name,
[data-theme="dark"] .sg-th-day {
    background: rgba(41, 31, 24, 0.96);
    border-bottom-color: rgba(209, 132, 90, 0.12);
}

.sg-th-name {
    width: 156px;
    padding: 0.75rem 0.85rem;
}

.sg-th-day {
    padding: 0.75rem 0.65rem;
}

.sg-row {
    border-bottom-color: rgba(201, 106, 61, 0.08);
}

[data-theme="dark"] .sg-row {
    border-bottom-color: rgba(209, 132, 90, 0.08);
}

.sg-name-cell {
    padding: 0.8rem 0.85rem;
    background: rgba(255, 251, 245, 0.66);
}

[data-theme="dark"] .sg-name-cell {
    background: rgba(30, 23, 18, 0.9);
}

.sg-avatar {
    width: 26px;
    height: 26px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.sg-day-actions {
    gap: 0.3rem;
    margin-left: 0.35rem;
}

.sg-day-btn {
    min-width: 22px;
    min-height: 22px;
    border-radius: 999px;
}

.sg-day-btn:hover {
    background: rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .sg-day-btn:hover {
    background: rgba(209, 132, 90, 0.14);
}

.sg-cell {
    padding: 0.75rem 0.65rem;
    border-color: rgba(201, 106, 61, 0.08);
    background: rgba(255, 254, 250, 0.56);
    border-radius: 10px;
}

[data-theme="dark"] .sg-cell {
    border-color: rgba(209, 132, 90, 0.08);
    background: rgba(27, 21, 16, 0.7);
}

.sg-cell:hover {
    background: rgba(201, 106, 61, 0.08);
}

[data-theme="dark"] .sg-cell:hover {
    background: rgba(209, 132, 90, 0.1);
}

.sg-filled {
    background: rgba(45, 122, 120, 0.08);
}

[data-theme="dark"] .sg-filled {
    background: rgba(45, 122, 120, 0.12);
}

.sg-cell-main {
    font-size: 0.81rem;
    line-height: 1.35;
}

.sg-cell-note {
    font-size: 0.7rem;
    line-height: 1.35;
}

.sg-mad-row {
    border-top-color: rgba(201, 106, 61, 0.18);
}

[data-theme="dark"] .sg-mad-row {
    border-top-color: rgba(209, 132, 90, 0.18);
}

.sg-mad-cell {
    background: rgba(255, 249, 241, 0.52);
}

[data-theme="dark"] .sg-mad-cell {
    background: rgba(31, 24, 19, 0.84);
}

.sg-mad-inp,
.sg-notes-area,
.sg-ed-main,
.sg-ed-note-inp {
    border-radius: 14px;
}

.sg-notes-bar {
    padding: 0;
}

.sg-notes-field {
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(255, 250, 243, 0.7);
    border: 1px solid rgba(201, 106, 61, 0.12);
}

[data-theme="dark"] .sg-notes-field {
    background: rgba(35, 27, 21, 0.9);
    border-color: rgba(209, 132, 90, 0.12);
}

.sg-editor {
    border-radius: 22px;
    border-color: rgba(201, 106, 61, 0.14);
    background: rgba(247, 241, 232, 0.98);
    box-shadow: 0 20px 44px rgba(43, 31, 20, 0.14);
}

[data-theme="dark"] .sg-editor {
    border-color: rgba(209, 132, 90, 0.14);
    background: rgba(33, 25, 19, 0.98);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

.sg-ed-save {
    background: linear-gradient(180deg, #d8895d, #c96a3d);
}

.sg-ed-clear:hover,
.sg-sug-btn:hover {
    background: rgba(201, 106, 61, 0.12);
    color: var(--text-main);
    border-color: rgba(201, 106, 61, 0.24);
}

[data-theme="dark"] .sg-ed-clear:hover,
[data-theme="dark"] .sg-sug-btn:hover {
    background: rgba(209, 132, 90, 0.12);
    border-color: rgba(209, 132, 90, 0.24);
}

@media (max-width: 768px) {
    .planner-add-activity-form {
        flex-direction: column;
    }

    .planner-day-note-wrap {
        padding: 0.85rem 0.85rem 0.9rem;
    }

    .sg-wrap {
        padding: 0.85rem;
        border-radius: 20px;
    }

    .sg-notes-field {
        flex-direction: column;
        align-items: stretch;
    }

    .sg-th-name {
        width: 132px;
    }
}

/* Page break between bundle sections */
.exp-page-break-before {
    page-break-before: always;
    break-before: page;
    margin-top: 2rem;
    padding-top: 0;
}

@media print {
    .exp-page-break-before {
        margin-top: 0;
        padding-top: 0;
    }
    .planner-bundle-selector { display: none !important; }
}

/* =============================================================
   MOBILGODKENDELSE — 375–600px fixes
   Tilføjet 2026-04-15
   ============================================================= */

/* ── Cell-editor: clamp til viewport ─────────────────────────
   .sg-editor er position:fixed med fast width:260px.
   På 320–375px skærme kan den flyde ud af højre kant.
   max-width + left/right clamp sikrer den altid er inden for.
*/
@media (max-width: 600px) {
    .sg-editor {
        width: calc(100vw - 2rem);
        max-width: 340px;
        left: 50% !important;
        transform: translateX(-50%);
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
        border-radius: 20px;
    }

    /* Gør knapper i editoren touch-venlige */
    .sg-ed-save,
    .sg-ed-clear {
        min-height: 40px;
        font-size: 0.85rem;
    }
}

/* ── Planner-modal: bottom-sheet på mobil ────────────────────
   På desktop er modal centered i overlay.
   På mobil lader vi den falde ned fra bunden som et sheet
   med safe-area padding og håndtag øverst.
*/
@media (max-width: 600px) {
    .planner-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .planner-modal {
        max-width: 100%;
        width: 100%;
        max-height: 92dvh;
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: plannerModalInMobile 0.25s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    }

    @keyframes plannerModalInMobile {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0);   opacity: 1; }
    }

    /* Håndtag øverst i sheet */
    .planner-modal-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 0 auto 0.6rem;
        flex-basis: 100%;
        order: -1;
    }

    .planner-modal-header {
        flex-wrap: wrap;
        padding: 0.65rem 1rem 0.85rem;
    }

    .planner-modal-body {
        padding: 1rem;
    }

    .planner-modal-footer {
        padding: 0.75rem 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .planner-modal-footer .planner-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }
}

/* ── Drawer: handle-bar og safe-area ─────────────────────────
   Drawer popper op nedefra på mobil (sat i eksisterende @700px
   og @768px regler). Tilføjer handle-bar og safe-area bottom.
*/
@media (max-width: 700px) {
    .planner-drawer {
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        max-height: 85dvh;
    }

    /* Handle-bar */
    .planner-drawer-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 0 auto 0.5rem;
        flex-basis: 100%;
        order: -1;
    }

    .planner-drawer-header {
        flex-wrap: wrap;
        padding-top: 0.5rem;
    }

    /* Sikre intern scroll fungerer */
    .planner-drawer-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Rail-knapper: touch targets ─────────────────────────────
   På mobil er rail vandret. Minimum 44×44px touch target.
*/
@media (max-width: 768px) {
    .planner-rail-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Luk-knap i drawer større touch target */
    .planner-drawer-close {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Activity card-knapper: touch targets ────────────────────
   .planner-btn-sm er 5px padding — for lille til touch.
   På mobil: hæv til 40px min-height.
*/
@media (max-width: 600px) {
    .planner-btn-sm {
        min-height: 40px;
        padding: 0.5rem 0.85rem;
    }

    .planner-btn-approve,
    .planner-btn-reject {
        min-height: 40px;
    }

    /* Kortere labels i toolbar på 375px for at undgå linjeskift */
    .planner-btn .planner-btn-label {
        display: none;
    }
}

/* ── Staffgrid: sikre scroll-hint er synlig ──────────────────
   .sg-scroll har overflow-x:auto — på mobil tilføjer vi en
   fade-kant til højre som hint om at der kan scrolles.
*/
@media (max-width: 600px) {
    .sg-scroll {
        position: relative;
    }

    .sg-wrap {
        padding: 0.7rem 0.75rem 0.85rem;
        border-radius: 16px;
    }

    .sg-th-name {
        width: 110px;
        padding: 0.6rem 0.6rem;
        font-size: 0.68rem;
    }

    .sg-th-day {
        padding: 0.6rem 0.45rem;
        font-size: 0.7rem;
        min-width: 72px;
    }

    .sg-cell {
        min-height: 44px;
        min-width: 72px;
    }

    .sg-cell-main {
        font-size: 0.74rem;
    }
}