/* ─── TimeTracker – Custom Styles ──────────────────────────────────────────── */

/* ── Base ──────────────────────────────────────────────────────────────────── */
:root {
    --nav-bg: #1a1d23;
    --nav-text: #e2e8f0;
    --nav-brand: #60a5fa;
    --card-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --transition: .2s ease;
}

body {
    background-color: #f3f4f6;
    min-height: 100vh;
}

/* ── Navbar ────────────────────────────────────────────────────────────────── */
#mainNav {
    background-color: var(--nav-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

#mainNav .navbar-brand { color: var(--nav-brand); }
#mainNav .navbar-brand:hover { color: #93c5fd; }
.nav-logo { width: 28px; height: 28px; object-fit: contain; }
#mainNav .nav-link { color: var(--nav-text); opacity: .8; }
#mainNav .nav-link:hover,
#mainNav .nav-link.active { color: #fff; opacity: 1; }
#mainNav .nav-link.active { font-weight: 600; }
#mainNav .navbar-text { color: var(--nav-text); opacity: .9; font-size: .85rem; }
#mainNav .navbar-toggler { border-color: rgba(255,255,255,.3); }
#mainNav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.7)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid #e5e7eb;
    box-shadow: var(--card-shadow);
    border-radius: 10px;
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0 !important;
    padding: .75rem 1rem;
    font-weight: 500;
}

/* ── Time Display ──────────────────────────────────────────────────────────── */
.time-display {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size: 1.25rem;
    letter-spacing: .05em;
}

.fw-mono {
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    font-size: .85rem;
}

/* ── Summary Grid ──────────────────────────────────────────────────────────── */
.summary-grid { display: flex; flex-direction: column; gap: .5rem; }
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Stat Cards ────────────────────────────────────────────────────────────── */
.stat-card { border-top-width: 3px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn { border-radius: 8px; font-weight: 500; }
.btn-xs {
    padding: .15rem .45rem;
    font-size: .75rem;
    border-radius: 5px;
}

/* ── Login Page ────────────────────────────────────────────────────────────── */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.login-container { width: 100%; max-width: 400px; padding: 1rem; }

.login-card { border: none; border-radius: 16px; }

.login-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.75rem;
    color: #fff;
}

.login-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}

.pin-input {
    font-size: 1.5rem;
    letter-spacing: .3em;
    border-radius: 10px;
}

/* ── Badge tweaks ──────────────────────────────────────────────────────────── */
.badge { font-weight: 500; font-size: .75em; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .45rem .65rem; }
.table-hover tbody tr:hover { cursor: pointer; }

/* ── Dark mode ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg: #111827;
    --bs-body-color: #e5e7eb;
}

[data-bs-theme="dark"] body { background-color: #0f172a; }
[data-bs-theme="dark"] .card {
    background-color: #1e293b;
    border-color: #334155;
}
[data-bs-theme="dark"] .card-header {
    background-color: #1e293b;
    border-color: #334155;
}
[data-bs-theme="dark"] .table { --bs-table-bg: #1e293b; }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #273549; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { --bs-table-hover-bg: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #273549;
    border-color: #3f5373;
    color: #e5e7eb;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6b7280; }
[data-bs-theme="dark"] .bg-light { background-color: #273549 !important; }
[data-bs-theme="dark"] .text-muted { color: #94a3b8 !important; }
[data-bs-theme="dark"] .modal-content {
    background-color: #1e293b;
    border-color: #334155;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .container-lg { padding-left: .75rem; padding-right: .75rem; }
    .card-body { padding: .75rem; }
    .time-display { font-size: 1.1rem; }
}

/* ── Live clock ────────────────────────────────────────────────────────────── */
#liveClock {
    font-size: .85rem;
    opacity: .8;
    color: var(--nav-text);
}

/* ── State card ────────────────────────────────────────────────────────────── */
.state-card { border-left-width: 4px; }
.state-work    { border-left-color: var(--bs-success); }
.state-travel  { border-left-color: var(--bs-primary); }
.state-break   { border-left-color: var(--bs-warning); }
.state-done    { border-left-color: var(--bs-success); }
.state-idle    { border-left-color: var(--bs-secondary); }
.state-icon-wrap { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }

/* ── Pulsing badge ──────────────────────────────────────────────────────────── */
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
.anim-pulse { animation: pulse 1.5s infinite; }

/* ── Action buttons ────────────────────────────────────────────────────────── */
.btn-lg { min-height: 52px; font-size: 1rem; }

/* ── App footer ────────────────────────────────────────────────────────────── */
.app-footer { background: transparent; }
.btn-coffee {
    background: #f6a623;
    color: #222;
    border: none;
    font-weight: 600;
    border-radius: 20px;
    padding: .3rem .9rem;
}
.btn-coffee:hover { background: #e09000; color: #fff; }

/* ── Print (hide from print view when using browser print) ─────────────────── */
@media print {
    .no-print { display: none !important; }
    #mainNav  { display: none !important; }
}