*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", system-ui, sans-serif; background: #f4f5f6; color: #202326; }
input, select, textarea { font-size: 16px; }
h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
a { color: #c24a08; text-decoration: none; }
.muted { color: #6f767d; font-size: .9rem; margin: 0 0 1rem; }

.shell { min-height: 100dvh; height: 100dvh; padding-bottom: 0; overflow: hidden; }
.side { display: none; }
.main {
    padding: 1.1rem 1rem calc(4.5rem + env(safe-area-inset-bottom));
    max-width: none; margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
.tabs {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    background: #0d0d0d; border-top: 1px solid #2c3034;
    padding-bottom: env(safe-area-inset-bottom);
}
.tabs a { color: #d9dde1; text-align: center; padding: .85rem .15rem; font-size: .72rem; }
.tabs a.active { color: #f5680c; font-weight: 600; }

.cards { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; max-width: 920px; }
.card { background: #fff; border: 1px solid #e0e2e5; border-radius: 8px; padding: 1rem; }
.card .label { display: block; color: #6f767d; font-size: .75rem; margin-bottom: .35rem; }
.card strong { font-size: 1.15rem; }
.card.warn { background: #f8d7da; border-color: #e7b4b8; }

.table-wrap { overflow: auto; background: #fff; border: 1px solid #e0e2e5; border-radius: 8px; -webkit-overflow-scrolling: touch; }
.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
.grid th { text-align: left; background: #f5680c; color: #fff; padding: .55rem .65rem; font-weight: 600; }
.grid td { padding: .55rem .65rem; border-bottom: 1px solid #eee; }
.grid .num { text-align: right; }
.grid tr.overdue { background: #f8d7da; color: #841f1f; }

.list { display: flex; flex-direction: column; gap: .5rem; }
.row-link {
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    background: #fff; border: 1px solid #e0e2e5; border-radius: 8px; padding: .9rem 1rem; color: inherit;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.emp-sticky {
    position: sticky; top: 0; z-index: 6;
    background: #f4f5f6; padding: .35rem 0 .55rem; margin: 0 0 .35rem;
}
.form-card label.check { display: flex; align-items: center; gap: .5rem; height: auto; margin-top: .85rem; }
.form-card label.check input { width: auto; height: auto; }
.logo-sm { height: 40px; }
.kv { background: #fff; border: 1px solid #e0e2e5; border-radius: 8px; padding: .4rem 0; }
.kv > div { display: flex; justify-content: space-between; padding: .55rem 1rem; border-bottom: 1px solid #f0f0f0; }
.kv dt { color: #6f767d; }
.kv dd { margin: 0; font-weight: 600; }
.kv .due { background: #fff2e8; }
.kv dd.neg, .neg { color: #b42318; }
.item {
    background: #fff; border: 1px solid #e0e2e5; border-radius: 10px; padding: .75rem .9rem;
}
.item.open { border-color: #f5680c; }
.item.overdue { background: #f8d7da; border-color: #e7b4b8; }
.item.weekend { background: #f3f4f5; }
.inline-field {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    margin-top: .45rem;
}
.inline-field span { color: #6f767d; font-size: .85rem; }
.inline-field input {
    width: 88px; height: 40px; border: 1px solid #cdd1d5; border-radius: 8px;
    padding: 0 .5rem; text-align: right; background: #fff7e9;
}
.item-main { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; width: 100%; }
.item a.item-main { color: inherit; }
.item-main.as-btn { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .85rem; }
.page-actions .btn { margin: 0; }
.compact-form {
    display: flex; flex-wrap: wrap; gap: .45rem .85rem; align-items: end;
    background: #fff; border: 1px solid #e0e2e5; border-radius: 8px;
    padding: .55rem .75rem; margin: 0 0 .85rem;
}
.compact-form label { margin: 0; font-size: .75rem; color: #6f767d; display: flex; flex-direction: column; gap: .15rem; }
.compact-form input, .compact-form select {
    height: 34px; width: auto; min-width: 96px; border: 1px solid #cdd1d5; border-radius: 6px; padding: 0 .45rem;
}
.item-sub { margin: .35rem 0 0; }
.item-actions { display: flex; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; }
.item-detail { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid #f0f0f0; }
.item-detail p { margin: 0 0 .35rem; }
.cost-row {
    margin-top: .7rem; padding-top: .65rem; border-top: 1px solid #f0f0f0;
}
.cost-row select, .cost-row input {
    width: 100%; height: 40px; border: 1px solid #cdd1d5; border-radius: 8px;
    padding: 0 .55rem; margin-top: .35rem; background: #fff;
}
.form-card {
    background: #fff; border: 1px solid #e0e2e5; border-radius: 10px; padding: 1rem;
    margin: .75rem 0 1.2rem; border-top: 3px solid #f5680c;
}
.form-card label { display: block; font-size: .8rem; color: #6f767d; margin: .55rem 0 .25rem; }
.form-card input, .form-card select { width: 100%; height: 42px; border: 1px solid #cdd1d5; border-radius: 8px; padding: 0 .65rem; }
.form-card .item-actions { margin-top: .9rem; }
.form-card .btn { flex: 1; }
.sheet-toggle { margin: 1.4rem 0 2rem; }
.sheet-toggle summary { cursor: pointer; font-weight: 600; color: #c45a0a; padding: .4rem 0; }
.btn { min-height: 42px; margin: .5rem 0 1rem; }

@media (max-width: 859px) {
    .cards { grid-template-columns: 1fr; }
    .sheet-wrap { max-height: none; }
    h1 { font-size: 1.35rem; }
    .job-hint-desktop, .job-cards { display: none; }
    .job-empty-desktop { display: none; }
    .sheet.compact tr.rate-row input {
        min-height: 44px; height: 44px; font-size: 16px; min-width: 76px;
        text-align: right; background: #fff;
    }
    .sheet.compact tr.rate-row th { min-width: 96px; padding: 4px; }
    .rate-cards { display: grid; gap: .55rem; margin: 0 0 .85rem; }
}

.btn, .btn-sm {
    background: #f5680c; color: #fff; border: 0; border-radius: 7px;
    padding: .55rem 1rem; font-weight: 600; cursor: pointer;
}
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn.secondary, .btn-sm.secondary { background: #2c3034; }

.login { max-width: 360px; margin: 12vh auto; padding: 1.5rem; background: #fff; border-radius: 10px; border-top: 3px solid #f5680c; }
.login-logo { height: 48px; margin-bottom: 1rem; }
.login label { display: block; font-size: .8rem; color: #6f767d; margin: .6rem 0 .25rem; }
.login input { width: 100%; height: 38px; padding: 0 .6rem; border: 1px solid #cdd1d5; border-radius: 6px; }
.login .btn { margin-top: 1rem; width: 100%; }
.err { color: #b71c1c; }

.side .logo { height: 44px; margin: 1.1rem 1rem .4rem; }
.side-kicker { color: #ffa91a; font-size: .65rem; letter-spacing: .06em; margin: 0 1.1rem 1rem; font-weight: 600; }
.side-nav a { display: block; color: #d9dde1; padding: .7rem 1.1rem; border-radius: 6px; margin: 0 .6rem; }
.side-nav a.active { background: #303438; color: #fff; }

@media (min-width: 860px) {
    .shell { display: grid; grid-template-columns: 220px 1fr; padding-bottom: 0; min-height: 100vh; height: 100vh; }
    .side { display: block; background: #0d0d0d; overflow: auto; }
    .tabs { display: none; }
    .main { padding: 1.6rem 1.8rem; }
    .sheet .label, .sheet th.label { position: sticky; left: 0; z-index: 3; min-width: 148px; }
    .sheet th.label { z-index: 4; }
    .job-hint-mobile, .board.job-board, .job-empty-mobile { display: none; }
    .job-hint-desktop { display: block; }
    .job-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
        gap: .6rem;
        margin: 0 0 1rem;
    }
    .rate-cards { display: none; }
    .board { min-height: 280px; }
}

#blazor-error-ui { display: none; }

.board {
    position: relative;
    background: #fff;
    border: 1px solid #e0e2e5;
    border-radius: 8px;
    margin-top: 1rem;
    touch-action: pan-x pan-y;
    overflow: visible;
    user-select: none;
    min-height: min(70dvh, 520px);
}
.bubble.dragging { z-index: 20; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.bubble {
    position: absolute;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(0,0,0,.12);
    cursor: grab;
    touch-action: none;
}
.bubble.overdue { background: #f8d7da; }
.bubble-card {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
    padding-bottom: 2px;
}
.bubble-rule {
    width: 1.5px;
    background: #2a2a2a;
    opacity: .85;
    margin: 6px 0;
    flex: 0 0 auto;
}
.bubble-text { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; min-width: 0; }
.bubble.emp .bubble-text { padding: 4px 6px; }
.bubble-title {
    color: #5c5c5c;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bubble.emp .bubble-title { font-size: 10px; }
.bubble-amount { font-size: 14px; font-weight: 700; color: #2a2a2a; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble.emp .bubble-amount { font-size: 11px; margin-top: 1px; }
.bubble-amount.neg { color: #b42318; }
.bubble-accent {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: #f5680c; pointer-events: none;
}
.bubble-grip {
    position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px;
    border-right: 1.5px solid #2a2a2a; border-bottom: 1.5px solid #2a2a2a;
    cursor: nwse-resize; touch-action: none; z-index: 2;
}
.bubble-bar {
    display: flex; align-items: center; justify-content: space-between; gap: .35rem;
    background: #fff6ee;
    color: #c45a0a;
    font-weight: 600;
    font-size: .85rem;
    padding: .35rem .5rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
    flex: 0 0 auto;
}
.bubble-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.bubble-tools button {
    border: 0; background: #fff; color: #c45a0a; font-size: 12px; font-weight: 700;
    padding: 4px 8px; border-radius: 4px; cursor: pointer;
}
.bubble-tools button.danger { color: #b42318; }
.bubble-bar input.title {
    flex: 1; min-width: 80px; border: 0; background: transparent; font: inherit; color: inherit; font-weight: 600;
}
.sheet-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
.sheet-toolbar input, .sheet-toolbar select { height: 34px; border: 1px solid #cdd1d5; border-radius: 6px; padding: 0 .45rem; }
.sheet-toolbar .err { margin: 0; }
.sheet-wrap { overflow: auto; background: #fff; border: 1px solid #e0e2e5; border-radius: 8px; max-height: calc(100dvh - 220px); -webkit-overflow-scrolling: touch; margin: 0 0 .85rem; }
.sheet { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.sheet th, .sheet td { border: 1px solid #e0e3e6; padding: 2px 4px; white-space: nowrap; }
.sheet th { background: #f5680c; color: #fff; position: sticky; top: 0; z-index: 2; min-width: 88px; font-weight: 600; }
.sheet th a { color: #fff; }
.sheet .label, .sheet th.label { background: #fff; min-width: 88px; text-align: left; color: inherit; }
.sheet th.label { background: #f5680c; color: #fff; }
.sheet .weekend { background: #f0f2f4; color: #6c747d; }
.sheet .summary { background: #fff0e2; font-weight: 600; }
.sheet .section td { background: #0d0d0d; color: #fff; font-weight: 700; }
.sheet .due { background: #fff0e2; font-weight: 700; font-size: 13px; }
.sheet .num { text-align: right; min-width: 88px; }
.sheet input { width: 100%; min-width: 72px; border: 0; background: #fff7e9; text-align: right; padding: 2px 4px; font: inherit; }
.sheet.compact { font-size: 11px; }
.sheet.compact th, .sheet.compact td { padding: 1px 3px; }
.sheet.compact input, .sheet.compact select {
    min-width: 56px; height: 28px; font-size: 11px; width: 100%;
    border: 0; background: #fff7e9; padding: 1px 3px; font: inherit;
}
.sheet.compact select { text-align: left; min-width: 88px; }
.sheet.compact td:not(.num) input { text-align: left; min-width: 80px; }
.sheet th input, .sheet th select { color: #202326; background: #fff; min-width: 90px; text-align: left; }
.sheet th .head-tools { display: flex; gap: 2px; align-items: center; }
.sheet th .head-tools select { flex: 1; }
.sheet th .head-tools button { min-height: 0; margin: 0; padding: 0 6px; height: 26px; }
.job-card {
    display: flex; flex-direction: column; gap: .2rem;
    background: #fff; border: 1px solid #e0e2e5; border-radius: 8px;
    padding: .65rem .8rem; color: inherit; border-top: 3px solid #f5680c;
}
.job-card-title { font-weight: 700; }
.job-hint-desktop { display: none; }
.emp-switch { display: flex; align-items: center; gap: .4rem; }
.emp-switch h1 { margin: 0; flex: 1; min-width: 0; }
.emp-switch .btn-sm { margin: 0; flex: 0 0 auto; }
.rate-cards label {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid #e0e2e5; border-radius: 8px;
    padding: .55rem .75rem; font-size: .9rem;
}
.rate-cards input {
    width: 96px; height: 44px; font-size: 16px; text-align: right;
    border: 1px solid #cdd1d5; border-radius: 8px; padding: 0 .5rem; background: #fff7e9;
}
.board input, .board textarea { user-select: text; cursor: text; }
.bubble.table { overflow: hidden; cursor: default; }
.bubble.table .bubble-table { position: relative; }
.bubble-table { flex: 1; overflow: auto; padding: .35rem .35rem 18px; min-height: 0; }
.bubble-table table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.bubble-table th, .bubble-table td { border: 1px solid #eee; padding: 0; }
.bubble-table input { width: 100%; border: 0; padding: .2rem .3rem; font: inherit; background: transparent; }
.bubble-table .sum { color: #f5680c; font-weight: 600; padding: .3rem; }