/* ===================================================================
   TATSS Timer - Site Stylesheet
   Clean, light design with consistent button and table styling.
   =================================================================== */

/* --- Navbar --- */
.navbar-portal {
    background-color: #1c2333;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 46px;
}

.navbar-portal-brand {
    color: #4fc3d0 !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 10px 16px 10px 0;
}

.navbar-portal-brand:hover {
    color: #7dd8e2 !important;
}

.navbar-portal-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.9rem;
    padding: 14px 12px !important;
    white-space: nowrap;
}

.navbar-portal-link:hover,
.navbar-portal-link:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar-portal .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-portal .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%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-portal-dropdown {
    background-color: #1c2333;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    min-width: 160px;
    padding: 4px 0;
    margin-top: 0 !important;
}

.navbar-portal-dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.875rem;
    padding: 8px 16px;
}

.navbar-portal-dropdown-item:hover,
.navbar-portal-dropdown-item:focus {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-portal-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.15);
}

/* --- Base --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8f9fa;
}

/* --- Links --- */
a {
    color: #0077cc;
}

a:hover {
    color: #005a99;
}

/* --- Focus Styles --- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* --- Buttons --- */
/* Primary button - use for the main action on the page (1 Primary, rest Secondary) */
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.btn-primary:active, .btn-primary:focus {
    background-color: #204d74;
    border-color: #1b3d5c;
}

/* Secondary button - use for all other actions */
.btn-secondary {
    color: #333;
    background-color: #f0f0f0;
    border-color: #ccc;
}

.btn-secondary:hover {
    color: #333;
    background-color: #e0e0e0;
    border-color: #adadad;
}

.btn-secondary:active, .btn-secondary:focus {
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

/* Danger button */
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

/* Button transition for smooth hover effect */
.btn {
    transition: all 0.2s ease-in-out;
}

/* --- Layout --- */
.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    font-size: 0.85rem;
}

/* --- Navbar --- */
.navbar-brand {
    white-space: normal;
    display: flex;
    align-items: center;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

/* --- Tables --- */
.table {
    font-size: 0.8rem;
    border-collapse: collapse;
    margin-bottom: 0;
}

/* Table header - dark, bold, tight */
.table thead th {
    background-color: #2c3340;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    padding: 8px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.table thead th a {
    color: #fff;
    text-decoration: none;
}

.table thead th a:hover {
    color: #cce0ff;
    text-decoration: underline;
}

/* Body rows - compact, clean */
.table tbody td {
    padding: 5px 10px;
    vertical-align: middle;
    border-top: 1px solid #e8eaed;
    border-bottom: none;
    color: #333;
}

/* Stripe: disabled - all rows white */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #ffffff;
}

/* Hover: clear highlight like the screenshot */
.table-hover > tbody > tr:hover > * {
    background-color: #eef3fb !important;
    color: #111;
}

/* Wrap the table for a card-like border */
.table-responsive,
.table-wrapper {
    border: 1px solid #d0d4da;
    border-radius: 4px;
    overflow: hidden;
}

/* Sortable table styles */
.sortable th {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sortable th:hover {
    background-color: #1e2530;
}

.sortable th::after {
    content: '\2195';
    position: absolute;
    right: 8px;
    opacity: 0.35;
    font-size: 0.7rem;
}

.sortable th.sort-asc::after {
    content: '\2191';
    opacity: 1;
}

.sortable th.sort-desc::after {
    content: '\2193';
    opacity: 1;
}

/* No-sort column: hide the sort indicator */
.sortable th.no-sort {
    cursor: default;
}

.sortable th.no-sort::after {
    content: '';
}

/* --- Action Links in Tables --- */
.table-action-link {
    color: #337ab7;
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
}

.table-action-link:hover {
    color: #1a5276;
    text-decoration: underline;
}

.table-action-delete {
    color: #c0392b;
}

.table-action-delete:hover {
    color: #922b21;
}

/* --- Action Icons in Tables --- */
.action-icon {
    width: 18px;
    height: 18px;
    margin: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.action-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* --- Cards --- */
.card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* --- Forms --- */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Alerts --- */
.alert {
    font-size: 0.9rem;
}

/* --- Login Page --- */
.login-container {
    max-width: 400px;
    margin: 0 auto;
}

/* --- Tasks Page --- */
.task-status {
    font-size: 0.78rem;
    font-weight: 600;
}

.task-status-pending {
    color: #c0392b;
}

.task-status-completed {
    color: #1e7e34;
}

.task-actions {
    white-space: nowrap;
}

.task-actions .btn {
    font-size: 0.72rem;
    padding: 1px 7px;
    margin-right: 3px;
}

.task-actions .task-move {
    padding: 1px 6px;
    line-height: 1.35;
}

.task-add-card .card-header {
    background-color: #f4f6f8;
    font-weight: 600;
    font-size: 0.9rem;
}

.task-view-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7a8794;
    margin-bottom: 2px;
}

/* Keep the user's line breaks when showing the full task */
.task-view-description {
    white-space: pre-wrap;
    word-break: break-word;
    background-color: #f8f9fa;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    padding: 10px 12px;
    min-height: 90px;
}

/* Tapping a task row on mobile opens the View Task popup */
@media (max-width: 767.98px) {
    #pendingPane tbody tr,
    #completedPane tbody tr {
        cursor: pointer;
    }
}

.nav-pills .nav-link {
    font-size: 0.82rem;
    padding: 4px 14px;
}
/* --- Reports Page (insight tabs) --- */

/* KPI strip above the tabs */
.kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.kpi-card {
    flex: 1 1 130px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 12px;
}

.kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    font-weight: 700;
    display: block;
}

.kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c2333;
    letter-spacing: 0.02em;
}

.kpi-sub {
    font-size: 0.72rem;
    color: #888;
}

/* Status pill on the Project Health tab */
.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.status-over     { background: #f8d7da; color: #842029; }
.status-risk     { background: #fff3cd; color: #664d03; }
.status-ontrack  { background: #d1e7dd; color: #0f5132; }
.status-none     { background: #e9ecef; color: #6c757d; }

/* Light tint on a project that has run past its allocated hours */
tr.row-over-budget > td {
    background-color: #fdf2f3;
}

/* Budget-used bar. A plain div track, no charting library. */
.usage-track {
    background: #e9ecef;
    border-radius: 3px;
    height: 7px;
    width: 100%;
    min-width: 60px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    border-radius: 3px;
    background: #4c8b5f;
}

.usage-fill.is-risk { background: #d9a406; }
.usage-fill.is-over { background: #b02a37; }

/* Expandable detail rows (contributors, per-user projects) */
.expand-row > td {
    background-color: #f8f9fa;
    padding: 0 !important;
}

.expand-inner {
    padding: 8px 14px;
}

.expand-toggle {
    cursor: pointer;
    user-select: none;
}

/* ===================================================================
   Dashboard
   The landing page after sign in. Everything on it is scoped to the
   signed in user. Bars and charts are plain divs sized by percentage,
   matching the approach already used on the Reports tabs, so no
   charting library is pulled in.
   =================================================================== */

.dash-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.dash-greeting-hello {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c2333;
    line-height: 1.2;
}

.dash-greeting-sub {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

.dash-dot {
    color: #ccc;
    margin: 0 5px;
}

/* --- Running timer banner --- */
.dash-timer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #1c2333;
    border-radius: 6px;
    padding: 10px 16px;
    color: #fff;
}

.dash-timer-body {
    flex: 1 1 auto;
    min-width: 140px;
}

.dash-timer-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4fc3d0;
    font-weight: 700;
}

.dash-timer-project {
    font-size: 0.95rem;
    font-weight: 600;
}

.dash-timer-client {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.dash-timer-clock {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: #4fc3d0;
}

/* The pulse is decorative only. It is not the source of the elapsed
   time, which is computed from TimerStartedAt in the browser. */
.dash-timer-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4fc3d0;
    flex: 0 0 auto;
    animation: dash-pulse 1.8s ease-in-out infinite;
}

@keyframes dash-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Respect a user who has asked the operating system for less motion */
@media (prefers-reduced-motion: reduce) {
    .dash-timer-pulse {
        animation: none;
    }
}

/* --- Headline number cards --- */
.dash-kpi {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px 14px;
    height: 100%;
}

.dash-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8a94a3;
    font-weight: 700;
}

.dash-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1c2333;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.dash-kpi-foot {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 2px;
    min-height: 1.1rem;
}

/* Today is the figure the user is most likely to act on right now, so it
   carries an accent edge to lift it out of the row */
.dash-kpi-total {
    border-left: 3px solid #4fc3d0;
}

.dash-chip {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 600;
}

.dash-chip-up   { background: #d1e7dd; color: #0f5132; }
.dash-chip-down { background: #f8d7da; color: #842029; }
.dash-chip-flat { background: #e9ecef; color: #6c757d; }

/* --- Secondary stat strip --- */
.dash-strip {
    display: flex;
    flex-wrap: wrap;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 4px;
}

.dash-strip-item {
    flex: 1 1 90px;
    text-align: center;
    padding: 2px 6px;
    border-right: 1px solid #e4e8ec;
}

.dash-strip-item:last-child {
    border-right: none;
}

.dash-strip-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c2333;
    font-variant-numeric: tabular-nums;
}

.dash-strip-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a94a3;
}

/* --- Panels --- */
.dash-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.dash-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    font-weight: 600;
    color: #1c2333;
    font-size: 0.9rem;
}

.dash-card-sub {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
}

.dash-card-body {
    padding: 12px 14px;
}

/* Tables sit flush inside their panel, the panel supplies the padding */
.dash-card-body .table-wrapper {
    margin-bottom: 0;
}

.dash-empty {
    color: #98a2ae;
    font-style: italic;
    font-size: 0.85rem;
}

/* --- Week strip --- */
.dash-week {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.dash-week-day {
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}

.dash-week-hours {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    height: 1rem;
    font-variant-numeric: tabular-nums;
}

.dash-week-track {
    height: 92px;
    background: #f1f3f5;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.dash-week-bar {
    width: 100%;
    background: #6e92b8;
    border-radius: 3px 3px 0 0;
    min-height: 0;
}

.dash-week-day.is-today .dash-week-bar { background: #4fc3d0; }
.dash-week-day.is-today .dash-week-name { color: #1c2333; font-weight: 700; }
.dash-week-day.is-future { opacity: 0.5; }

.dash-week-name {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 4px;
}

.dash-week-date {
    font-size: 0.68rem;
    color: #adb5bd;
}

.dash-missing {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #e9ecef;
    font-size: 0.78rem;
}

.dash-missing-label {
    color: #6c757d;
    margin-right: 4px;
}

.dash-missing-link {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #fff3cd;
    color: #664d03;
    text-decoration: none;
}

.dash-missing-link:hover {
    background: #ffe8a1;
    color: #664d03;
}

/* --- Budget bar inside the projects table --- */
.dash-budget {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dash-budget-track {
    flex: 1 1 auto;
    height: 7px;
    min-width: 60px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.dash-budget-bar {
    height: 100%;
    background: #4c8b5f;
    border-radius: 3px;
}

.dash-budget-bar.is-over { background: #b02a37; }

.dash-budget-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.dash-budget-text.is-over { color: #b02a37; }

.dash-budget-note {
    font-size: 0.68rem;
    color: #98a2ae;
    margin-top: 1px;
}

/* --- Open tasks --- */
.dash-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-task {
    padding: 7px 0;
    border-bottom: 1px solid #f1f3f5;
}

.dash-task:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-task:first-child {
    padding-top: 0;
}

.dash-task-heading {
    font-size: 0.85rem;
    color: #1c2333;
}

.dash-task-meta {
    font-size: 0.72rem;
    color: #8a94a3;
}

/* --- Quick links --- */
.dash-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-link {
    display: block;
    padding: 7px 10px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    text-decoration: none;
    background: #fff;
}

.dash-link:hover {
    background: #f8f9fa;
    border-color: #ccd6e0;
}

.dash-link-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1c2333;
}

.dash-link-sub {
    display: block;
    font-size: 0.72rem;
    color: #8a94a3;
}

/* Green when the person has logged something today, grey when not */
.dash-dotmark {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ced4da;
    margin-right: 6px;
    vertical-align: middle;
}

.dash-dotmark.is-on { background: #4c8b5f; }

@media (max-width: 575.98px) {
    .dash-kpi-value { font-size: 1.45rem; }
    .dash-week-track { height: 70px; }
    .dash-timer-clock { font-size: 1.25rem; }

    /* Six items wrap to two rows of three on a phone; the right hand
       border on the third item would sit against the screen edge */
    .dash-strip-item { flex: 1 1 33%; }
}