:root {
    --blue: #2563eb;
    --blue-dark: #1e40af;
    --green: #16a34a;
    --yellow: #ca8a04;
    --red: #dc2626;
    --purple: #7c3aed;
    --gray: #6b7280;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --text: #1e293b;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top bar / nav ---------- */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.brand { font-weight: 700; color: var(--text); font-size: 16px; white-space: nowrap; }

.mainnav {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}
.mainnav a { color: var(--text); font-size: 14px; padding: 6px 4px; }
.quick-log-link { color: var(--blue) !important; font-weight: 700; }

/* ---------- Shared docked pill/panel ----------
   Used by both the global timer widget (includes/layout_bottom.php,
   present on every main-app page) and the Quick Log page (widget.php),
   so the two look and behave identically. Anchored to the bottom-right
   corner rather than a centered backdrop modal — a small pill when idle
   or when a timer is quietly running in the background, expanding in
   place to a fixed-size panel only when opened. */
.tks-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.tks-dock-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.tks-dock-pill .tks-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: tksTimerPulse 1.5s ease-in-out infinite;
}
.tks-dock-pill .tks-pill-meta { color: #94a3b8; font-weight: 400; }
@keyframes tksTimerPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.tks-dock-panel {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: min(80vh, 620px);
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    box-sizing: border-box;
}
.tks-dock-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.tks-dock-panel-header strong { font-size: 15px; }
.tks-dock-panel-links { font-size: 12px; color: #64748b; }
.tks-dock-panel-links a { color: #64748b; }

.userbox { font-size: 13px; display: flex; gap: 10px; align-items: center; color: var(--gray); }
.userbox-mobile { display: none; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.nav-toggle span {
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 auto;
    background: var(--text);
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* ---------- Dashboard: metric tiles, search, job cards ---------- */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.metric-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.metric-tile-danger { background: #fef2f2; border-color: #fecaca; }
.metric-tile-danger .metric-value { color: var(--red); }
.metric-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.metric-value { font-size: 24px; font-weight: 700; }

.search-box { margin-bottom: 14px; }

.job-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    color: var(--text);
    text-decoration: none;
}
.job-card:hover { border-color: var(--blue); text-decoration: none; }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.job-card-title { font-weight: 700; font-size: 15px; }
.job-card-client { font-size: 13px; color: #64748b; margin-top: 2px; }
.job-card-bottom { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; margin-top: 6px; }

/* ---------- Tabs (job edit page) ---------- */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}
.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
}
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.tab-btn:hover { text-decoration: none; }
.tab-count { color: #94a3b8; font-size: 12px; margin-left: 2px; }
.tab-btn.active .tab-count { color: var(--blue); }


/* ---------- Tables ---------- */
/* On small screens tables scroll horizontally as a block, rather than
   squeezing every column — this needs no per-page markup changes since it
   targets the bare <table> element everywhere in the app. */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}
th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
th { background: #f1f5f9; font-weight: 600; }
tr:hover td { background: #fafafa; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Buttons & forms ---------- */
.btn {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    min-height: 40px;
    line-height: 20px;
}
.btn:hover { background: var(--blue-dark); text-decoration: none; }
.btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f1f5f9; }
.btn-danger { background: var(--red); }
.btn-small { padding: 6px 12px; font-size: 12px; min-height: 32px; }

form.inline { display: inline; }

label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input, select, textarea {
    width: 100%;
    padding: 10px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    /* 16px minimum stops iOS Safari from auto-zooming the page on focus */
    font-size: 16px;
    font-family: inherit;
}
textarea { min-height: 70px; resize: vertical; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.badge-green { background: var(--green); }
.badge-yellow { background: var(--yellow); }
.badge-red { background: var(--red); }
.badge-blue { background: var(--blue); }
.badge-purple { background: var(--purple); }
.badge-gray { background: var(--gray); }

.alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 14px;
}
.alert-error { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--green); border: 1px solid #bbf7d0; }
.alert-warning { background: #fffbeb; color: var(--yellow); border: 1px solid #fde68a; }

/* Quick Log's status messages: the panel itself is a fixed-height,
   scrollable box (.tks-dock-panel, see below), so on a small screen an
   error or success message sitting at its normal spot near the top can
   end up scrolled out of view above whatever the person is actually
   looking at further down (a form, the recent-entries list). Sticking
   it to the top of that scroll area keeps it visible no matter where
   they've scrolled to. */
#qlError, #qlSuccess {
    position: sticky;
    top: 0;
    z-index: 5;
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    margin: 10px 0 4px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    flex: none;
}

.login-wrap {
    max-width: 360px;
    margin: 60px auto;
    background: #fff;
    padding: 30px 24px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.progress-bar {
    background: #e2e8f0;
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    margin: 6px 0;
}
.progress-bar-fill { height: 100%; background: var(--blue); }
.progress-bar-fill.over { background: var(--red); }
.progress-bar-fill.near { background: var(--yellow); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.toolbar h1 { margin-bottom: 0; }
.toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filters > div { min-width: 160px; flex: 1; }

.timer-display {
    font-size: 36px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 10px 0;
}

/* ---------- Quick Log panel: manual hours row & minimize link ----------
   Shared by widget.php's standalone Quick Log page and the in-app dock
   panel in includes/layout_bottom.php, so both stay in sync from one
   place. The hours row used to be a flex row with the input at flex:1
   next to a shrink-to-fit "Log It" button, but the mobile rule below
   (".btn { width: 100%; }") fights that layout on any narrow window,
   forcing the button to claim the row and squeeze the input down to
   almost nothing. Stacking them removes the conflict entirely. */
.ql-manual-row { display: flex; flex-direction: column; gap: 8px; }
.ql-manual-row input[type="number"] { width: 100%; }
.ql-manual-row .btn-secondary { width: 100%; }

/* "Minimize" is the link people reach for most in this panel, so it's
   styled like the nav's own quick-log-link (bold, blue) to stand out. */
.ql-minimize-link { color: var(--blue) !important; font-weight: 700; }

/* ---------- Time-check nudge popup ---------- */
.nudge-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 50;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.nudge-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.nudge-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.nudge-body { font-size: 14px; color: var(--text); margin-bottom: 16px; }
.nudge-actions { display: flex; gap: 8px; }
.nudge-actions .btn, .nudge-actions .btn-secondary { flex: 1; text-align: center; }

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 6px;
}
.modal-close:hover { color: var(--text); }

/* ---------- Activity review ---------- */
.activity-session-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.activity-session-app { font-weight: 700; font-size: 14px; }
.activity-session-doc { font-size: 13px; color: #64748b; margin-top: 2px; }
.activity-session-time { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.activity-session-actions { display: flex; gap: 8px; margin-top: 12px; }
.activity-session-actions .btn, .activity-session-actions .btn-secondary { flex: 1; }

.activity-date-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.activity-date-jump { margin: 0; }
.activity-date-jump input[type="date"] { width: auto; padding: 8px; }
.btn-disabled { opacity: 0.4; pointer-events: none; }
.activity-view-all { font-size: 13px; margin-left: auto; }
.activity-view-all.active { font-weight: 700; text-decoration: underline; }

@media print {
    .topbar, .no-print { display: none !important; }
    body { background: #fff; }
    .content { max-width: 100%; padding: 0; }
}

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 780px) {
    .topbar-inner { flex-wrap: wrap; }
    .nav-toggle { display: flex; }

    .mainnav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        order: 3;
        border-top: 1px solid var(--border);
        margin-top: 10px;
        padding-top: 6px;
    }
    .mainnav.open { display: flex; }
    .mainnav a {
        padding: 12px 4px;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
    }
    .userbox-desktop { display: none; }
    .userbox-mobile {
        display: flex;
        justify-content: space-between;
        padding: 12px 4px 4px;
        font-size: 14px;
    }

    .content { padding: 16px 12px 50px; }

    h1 { font-size: 19px; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .metric-value { font-size: 20px; }
    .job-card-bottom { flex-direction: column; gap: 2px; }

    /* Tables scroll horizontally as a unit instead of crushing columns */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    th, td { padding: 8px; }

    .btn { width: 100%; text-align: center; }
    .toolbar > div { width: 100%; }
    .toolbar > div .btn, .toolbar > div .btn-secondary { flex: 1; }
    form.inline .btn, form.inline .btn-small { width: auto; }

    .login-wrap { margin: 30px auto; max-width: 100%; }

    .filters > div { min-width: 100%; }
}