/* ── Stock Take — FEAT-629 ────────────────────────────────────────────────── */
/* Prefix: .tk-  |  390 px first, dark phone UI */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.tk-page {
    padding: 0 0 40px;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Env header ──────────────────────────────────────────────────────────── */
.tk-env-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

body[data-theme="dark"]  .tk-env-header { background: #1e2a3a !important; color: #7ab4f0 !important; }
body[data-theme="light"] .tk-env-header { background: #dce8f7 !important; color: #1a4a7a !important; }
body[data-theme="dark"]  .tk-env-header * { color: inherit; }
body[data-theme="light"] .tk-env-header * { color: inherit; }

.tk-env-label { flex: 1; }

/* ── Env toggle (admin only) ─────────────────────────────────────────────── */
.tk-env-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tk-env-btn {
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid currentColor;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.tk-env-btn:hover { opacity: 0.85; }
.tk-env-btn-active { opacity: 1; }

body[data-theme="dark"]  .tk-env-btn { color: #7ab4f0; }
body[data-theme="light"] .tk-env-btn { color: #1a4a7a; }

.tk-uat-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #f5a623;
    white-space: nowrap;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tk-tabs .tab { font-weight: 600; }
.tk-tab-selected { border-bottom: 3px solid #4a9eff !important; }

body[data-theme="dark"]  .tk-tabs .tab { background: #111827 !important; color: #9ab4d4 !important; border-color: #2a3245 !important; }
body[data-theme="dark"]  .tk-tabs .tab--selected,
body[data-theme="dark"]  .tk-tab-selected { background: #1e2a3a !important; color: #7ab4f0 !important; }
body[data-theme="light"] .tk-tabs .tab { background: #f0f4fb !important; color: #3a5070 !important; border-color: #c0cfe0 !important; }
body[data-theme="light"] .tk-tabs .tab--selected,
body[data-theme="light"] .tk-tab-selected { background: #fff !important; color: #1a4a7a !important; }

/* ── Count panel ─────────────────────────────────────────────────────────── */
.tk-count-panel { padding: 12px 16px; }

.tk-pickers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

/* ── Source picker pills (BUG-686) ───────────────────────────────────────── */
.tk-source-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-source-pill-input { display: none; }
.tk-source-pill {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    border: 1.5px solid;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
body[data-theme="dark"]  .tk-source-pill { background: #1e2537; border-color: #3d4860; color: #c0c6d4; }
body[data-theme="dark"]  .tk-source-pill:has(input:checked) { background: #4a9eff22; border-color: #4a9eff; color: #4a9eff; }
body[data-theme="light"] .tk-source-pill { background: #f7f9fc; border-color: #c8d0de; color: #4a5568; }
body[data-theme="light"] .tk-source-pill:has(input:checked) { background: #4a9eff18; border-color: #4a90d9; color: #4a90d9; }

@media (max-width: 440px) {
    .tk-source-pills { flex-wrap: wrap; }
}

.tk-branch-dd,
.tk-session-dd { width: 100%; }

/* ── New session button ──────────────────────────────────────────────────── */
.tk-new-session-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px dashed #4a9eff;
    background: transparent;
    color: #4a9eff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.15s;
}
.tk-new-session-btn:hover { background: rgba(74,158,255,0.1); }

.tk-new-session-status { min-height: 20px; font-size: 0.85rem; }

/* ── Scan row ────────────────────────────────────────────────────────────── */
.tk-scan-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }  /* BUG-704: camera button wraps to its own line on a phone */

.tk-rack-btn {
    padding: 0 12px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid #4a9eff;
    background: transparent;
    color: #4a9eff;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.tk-rack-btn-active { background: #4a9eff; color: #fff; }

.tk-scan-input {
    flex: 1;
    min-width: 160px;  /* BUG-700/704: shrink below the intrinsic width, but stay usable; the row wraps instead */
    height: 48px;
    font-size: 1.1rem;
    padding: 0 12px;
    border-radius: 6px;
    border: 2px solid #4a9eff;
    outline: none;
}
body[data-theme="dark"]  .tk-scan-input { background: #1a2233; color: #e0e4ef; }
body[data-theme="light"] .tk-scan-input { background: #fff;    color: #111; }

/* ── Scan result label ───────────────────────────────────────────────────── */
.tk-scan-result { min-height: 24px; font-size: 0.95rem; margin-bottom: 6px; }
.tk-found-label   { color: #4caf50; font-weight: 600; }
.tk-unknown-label { color: #f44336; font-weight: 700; }

/* ── Qty panel ───────────────────────────────────────────────────────────── */
.tk-qty-panel {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
body[data-theme="dark"]  .tk-qty-panel { background: #1e2a3a; }
body[data-theme="light"] .tk-qty-panel { background: #f0f4fb; }

.tk-item-desc { font-weight: 600; margin-bottom: 8px; font-size: 1rem; }

.tk-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.tk-qty-btn {
    width: 48px; height: 48px;
    font-size: 1.4rem; font-weight: 700;
    border-radius: 8px; border: none;
    cursor: pointer;
}
body[data-theme="dark"]  .tk-qty-btn { background: #2d3a50; color: #e0e4ef; }
body[data-theme="light"] .tk-qty-btn { background: #d0d8e8; color: #111; }

.tk-qty-input {
    flex: 1; height: 48px;
    font-size: 1.3rem; font-weight: 700;
    text-align: center;
    border-radius: 6px; border: 2px solid #4a9eff;
}
body[data-theme="dark"]  .tk-qty-input { background: #1a2233; color: #e0e4ef; }
body[data-theme="light"] .tk-qty-input { background: #fff;    color: #111; }

.tk-qty-actions { display: flex; gap: 8px; }

.tk-qty-save {
    flex: 1; height: 44px;
    border-radius: 6px; border: none;
    background: #4a9eff; color: #fff;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
}
.tk-qty-cancel {
    height: 44px; padding: 0 20px;
    border-radius: 6px; border: none;
    font-size: 1rem; cursor: pointer;
}
body[data-theme="dark"]  .tk-qty-cancel { background: #2d3a50; color: #e0e4ef; }
body[data-theme="light"] .tk-qty-cancel { background: #d0d8e8; color: #111; }

/* ── Status row ──────────────────────────────────────────────────────────── */
.tk-status-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }

.tk-queue-badge {
    font-size: 0.85rem; font-weight: 700;
    padding: 2px 10px; border-radius: 10px;
    background: #4a9eff; color: #fff;
}

.tk-flush-status { font-size: 0.9rem; }

/* ── Last rows table ─────────────────────────────────────────────────────── */
.tk-last-rows { margin-top: 12px; overflow-x: auto; }

.tk-rows-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.tk-rows-table th,
.tk-rows-table td {
    padding: 6px 8px; text-align: left;
    border-bottom: 1px solid;
}
body[data-theme="dark"]  .tk-rows-table th,
body[data-theme="dark"]  .tk-rows-table td { border-color: #2a3245; }
body[data-theme="light"] .tk-rows-table th,
body[data-theme="light"] .tk-rows-table td { border-color: #d0d8e8; }

body[data-theme="dark"]  .tk-rows-table th { background: #1e2a3a; color: #7ab4f0; }
body[data-theme="light"] .tk-rows-table th { background: #e8f0fb; color: #1a4a7a; }

.tk-row-unknown td { color: #f44336; }
.tk-row-void    td { opacity: 0.5; text-decoration: line-through; }
.tk-line-row    td { }

/* ── Review panel ────────────────────────────────────────────────────────── */
.tk-review-panel { padding: 12px 16px; }

.tk-review-toolbar { margin-bottom: 12px; }

.tk-reload-btn {
    padding: 8px 20px;
    border-radius: 6px; border: none;
    background: #4a9eff; color: #fff;
    font-weight: 700; cursor: pointer;
}

.tk-review-section { margin-bottom: 24px; }

.tk-section-heading {
    font-size: 0.9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 12px 0 6px;
}
body[data-theme="dark"]  .tk-section-heading { color: #7ab4f0; }
body[data-theme="light"] .tk-section-heading { color: #1a4a7a; }

/* ── Review table ────────────────────────────────────────────────────────── */
.tk-review-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
    overflow-x: auto; display: block;
}
.tk-review-table th,
.tk-review-table td {
    padding: 6px 8px; text-align: left;
    border-bottom: 1px solid; white-space: nowrap;
}
body[data-theme="dark"]  .tk-review-table th,
body[data-theme="dark"]  .tk-review-table td { border-color: #2a3245; }
body[data-theme="light"] .tk-review-table th,
body[data-theme="light"] .tk-review-table td { border-color: #d0d8e8; }

body[data-theme="dark"]  .tk-review-table th { background: #1e2a3a; color: #7ab4f0; }
body[data-theme="light"] .tk-review-table th { background: #e8f0fb; color: #1a4a7a; }

/* ── Table actions (export buttons row) ──────────────────────────────────── */
.tk-table-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tk-export-btn {
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s;
}
body[data-theme="dark"]  .tk-export-btn { background: #1e2a3a; color: #7ab4f0; border-color: #2d4060; }
body[data-theme="dark"]  .tk-export-btn:hover { background: #2d4060; }
body[data-theme="light"] .tk-export-btn { background: #e8f0fb; color: #1a4a7a; border-color: #b8cce0; }
body[data-theme="light"] .tk-export-btn:hover { background: #dce8f7; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.tk-filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.tk-filter-input {
    flex: 1; min-width: 100px; max-width: 160px;
    padding: 6px 10px; border-radius: 5px;
    border: 1px solid;
}
body[data-theme="dark"]  .tk-filter-input { background: #1a2233; color: #e0e4ef; border-color: #2a3245; }
body[data-theme="light"] .tk-filter-input { background: #fff;    color: #111;    border-color: #ccd5e0; }

.tk-filter-dd  { min-width: 120px; flex: 1; }
.tk-filter-btn {
    padding: 6px 16px;
    border-radius: 5px; border: none;
    background: #4a9eff; color: #fff;
    font-weight: 700; cursor: pointer;
}

/* ── Session actions ─────────────────────────────────────────────────────── */
.tk-session-actions { margin-top: 10px; }

.tk-status-btn {
    padding: 8px 20px;
    border-radius: 6px; border: none;
    background: #4a9eff; color: #fff;
    font-weight: 700; cursor: pointer;
}

/* ── Submit section ──────────────────────────────────────────────────────── */
.tk-submit-section { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tk-submit-btn {
    padding: 10px 28px;
    border-radius: 6px; border: none;
    background: #4caf50; color: #fff;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
}
.tk-submit-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}

.tk-submit-reason { font-size: 0.9rem; }

.tk-submit-success { font-size: 0.95rem; }

/* ── Void modal ──────────────────────────────────────────────────────────── */
.tk-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
}

.tk-modal-box {
    border-radius: 10px;
    padding: 24px;
    min-width: 300px;
    max-width: 90vw;
}
body[data-theme="dark"]  .tk-modal-box { background: #1e2a3a; color: #e0e4ef; }
body[data-theme="light"] .tk-modal-box { background: #fff;    color: #111; }

.tk-modal-title { margin: 0 0 16px; font-size: 1.1rem; }

.tk-void-reason-input {
    width: 100%; padding: 8px 12px;
    border-radius: 6px; border: 1px solid;
    margin-bottom: 14px; font-size: 0.95rem;
    box-sizing: border-box;
}
body[data-theme="dark"]  .tk-void-reason-input { background: #1a2233; color: #e0e4ef; border-color: #2a3245; }
body[data-theme="light"] .tk-void-reason-input { background: #fff;    color: #111;    border-color: #ccd5e0; }

.tk-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.tk-void-confirm-btn {
    padding: 8px 20px;
    border-radius: 6px; border: none;
    background: #f44336; color: #fff;
    font-weight: 700; cursor: pointer;
}
.tk-void-cancel-btn {
    padding: 8px 20px;
    border-radius: 6px; border: none;
    font-weight: 700; cursor: pointer;
}
body[data-theme="dark"]  .tk-void-cancel-btn { background: #2d3a50; color: #e0e4ef; }
body[data-theme="light"] .tk-void-cancel-btn { background: #d0d8e8; color: #111; }

.tk-void-row-btn {
    padding: 3px 10px;
    border-radius: 4px; border: none;
    background: #f44336; color: #fff;
    font-size: 0.8rem; cursor: pointer;
}

/* ── State feedback ──────────────────────────────────────────────────────── */
.tk-empty { padding: 16px; font-style: italic; opacity: 0.6; font-size: 0.9rem; }
.tk-error { padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; color: #f44336; }
.tk-ok    { color: #4caf50; font-weight: 600; }

/* ── Inner tabs ──────────────────────────────────────────────────────────── */
.tk-inner-tabs .tab { font-size: 0.85rem; }

/* ── Progress tab (Phase 2) ──────────────────────────────────────────────── */
.tk-progress-refresh {
    font-size: 0.78rem; text-align: right; padding: 4px 0 8px;
}
body[data-theme="dark"]  .tk-progress-refresh { color: #7a8599; }
body[data-theme="light"] .tk-progress-refresh { color: #8898aa; }

/* ── Variance threshold (Phase 2) ────────────────────────────────────────── */
.tk-threshold-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.tk-threshold-label { font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.tk-threshold-input {
    width: 80px; height: 34px; padding: 0 8px; border-radius: 6px;
    border: 1px solid #4a9eff; font-size: 0.9rem; text-align: center;
}
body[data-theme="dark"]  .tk-threshold-input { background: #1a2233; color: #e0e4ef; }
body[data-theme="light"] .tk-threshold-input { background: #fff;    color: #111; }
.tk-threshold-hint { font-size: 0.8rem; white-space: nowrap; }
body[data-theme="dark"]  .tk-threshold-hint { color: #7a8599; }
body[data-theme="light"] .tk-threshold-hint { color: #8898aa; }

.tk-threshold-kpi {
    padding: 3px 10px; border-radius: 12px; font-size: 0.82rem; font-weight: 700;
}
body[data-theme="dark"]  .tk-threshold-kpi { background: rgba(244,67,54,0.15); color: #f44336; }
body[data-theme="light"] .tk-threshold-kpi { background: rgba(244,67,54,0.10); color: #c62828; }

.tk-over-only-toggle { margin-bottom: 8px; font-size: 0.88rem; }

.tk-row-over-threshold td { font-weight: 700; }
body[data-theme="dark"]  .tk-row-over-threshold { background: rgba(255,152,0,0.10); }
body[data-theme="light"] .tk-row-over-threshold { background: rgba(255,152,0,0.08); }
body[data-theme="dark"]  .tk-row-over-threshold td { color: #ffb74d; }
body[data-theme="light"] .tk-row-over-threshold td { color: #e65100; }

.tk-var-export-btn { margin-bottom: 8px; }

/* ── Not-counted header (Phase 2) ────────────────────────────────────────── */
.tk-nc-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.tk-nc-count { font-size: 0.88rem; font-weight: 600; }
body[data-theme="dark"]  .tk-nc-count { color: #aac; }
body[data-theme="light"] .tk-nc-count { color: #445; }

/* ── Recount Queue tab (p2) ──────────────────────────────────────────────── */
.tk-recount-create-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #4a9eff;
    background: transparent;
    color: #4a9eff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.15s;
}
.tk-recount-create-btn:hover { background: rgba(74,158,255,0.1); }

.tk-recount-status { min-height: 22px; font-size: 0.85rem; margin: 6px 0; }

.tk-recount-done-btn {
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #27ae60;
    background: transparent;
    color: #27ae60;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 4px;
}
.tk-recount-cancel-btn {
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #e74c3c;
    background: transparent;
    color: #e74c3c;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.tk-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

body[data-theme="dark"]  .tk-badge-open       { background: #1a3a5c; color: #4a9eff; }
body[data-theme="light"] .tk-badge-open       { background: #dce8f7; color: #1a4a7a; }
body[data-theme="dark"]  .tk-badge-done       { background: #1a3a2a; color: #27ae60; }
body[data-theme="light"] .tk-badge-done       { background: #d5f0e0; color: #1a6a3a; }
body[data-theme="dark"]  .tk-badge-cancelled  { background: #3a1a1a; color: #e74c3c; }
body[data-theme="light"] .tk-badge-cancelled  { background: #fde8e8; color: #a02020; }

.tk-threshold-status { font-size: 0.82rem; margin-left: 8px; }

/* ── Progress coverage grid (Phase 5) ───────────────────────────────────── */
.tk-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 12px;
}
.tk-coverage-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tk-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}
.tk-kpi-value {
    font-size: 1.05rem;
    font-weight: 700;
}
body[data-theme="dark"]  .tk-kpi-label { color: #7a8599; }
body[data-theme="light"] .tk-kpi-label { color: #8898aa; }
body[data-theme="dark"]  .tk-kpi-value { color: #e0e4ef; }
body[data-theme="light"] .tk-kpi-value { color: #111; }

/* ── 390 px responsive ───────────────────────────────────────────────────── */
@media (max-width: 440px) {
    .tk-filter-bar { flex-direction: column; }
    .tk-filter-input { max-width: 100%; }
    .tk-submit-section { flex-direction: column; align-items: flex-start; }
    .tk-qty-input { font-size: 1.1rem; }
}

/* ── Camera scan (Phase 3) ───────────────────────────────────────────────── */
.tk-cam-btn {
    padding: 0 12px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid #7ab4f0;
    background: transparent;
    color: #7ab4f0;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.tk-cam-btn-active { background: #1a4a7a; border-color: #4a9eff; color: #fff; }
.tk-cam-btn:hover:not(.tk-cam-btn-active) { background: rgba(122,180,240,0.12); }

.tk-cam-video {
    width: 100%;
    max-height: 240px;
    border-radius: 8px;
    margin-bottom: 8px;
    object-fit: cover;
}
body[data-theme="dark"]  .tk-cam-video { background: #111; }
body[data-theme="light"] .tk-cam-video { background: #000; }

.tk-cam-notice {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
body[data-theme="dark"]  .tk-cam-notice { background: rgba(255,152,0,0.10); color: #ffb74d; }
body[data-theme="light"] .tk-cam-notice { background: rgba(255,152,0,0.08); color: #e65100; }

@media (max-width: 390px) {
    .tk-cam-btn { font-size: 0.8rem; padding: 0 8px; }
}