/* ==========================================================================
   ControlWorx Time Accounting — Global Stylesheet
   Light / dark theme; works alongside Tailwind v4 compiled CSS.

   Wrapped in @layer base so that Tailwind utilities (@layer utilities)
   always take priority — matching the cascade behavior of the old CDN.

   Architecture:
     - One place for typography, color, spacing, and component rules.
     - Pages add semantic class names only — no inline styles, no per-element
       font/color attributes.
     - Dark mode overrides at the bottom use .dark ancestor specificity.
   ========================================================================== */

@layer base {

/* --------------------------------------------------------------------------
   Reset & box model
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Typography — single declaration, inherited everywhere
   -------------------------------------------------------------------------- */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.875rem;   /* 14 px at browser default */
    line-height: 1.5;
    background-color: #f8f9fa;
    color: #1f2937;
    margin: 0;
}

/* All form and table elements inherit body font instead of repeating it */
p, table, input, textarea, option, select, button {
    font-family: inherit;
    font-size: inherit;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
    color: #2563eb;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
input:not([type=submit]),
textarea,
select {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: #ffffff;
    color: #1f2937;
}

input:not([type=submit]):focus,
textarea:focus,
select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
}


/* --------------------------------------------------------------------------
   Theme-toggle icon button — minimal reset so the emoji renders bare
   -------------------------------------------------------------------------- */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    vertical-align: middle;
    padding: 0 2px;
}


/* --------------------------------------------------------------------------
   Buttons — input[type=submit] and <button> look like real buttons.
   #theme-toggle is excluded so the icon button keeps its own minimal style.
   -------------------------------------------------------------------------- */
input[type=submit],
button:not(#theme-toggle):not(.cal-nav):not(.cal-month-btn):not(.cal-year-btn):not(.cal-pick-btn) {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 0.375rem;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    font-weight: 600;
}

input[type=submit]:hover,
button:not(#theme-toggle):not(.cal-nav):not(.cal-month-btn):not(.cal-year-btn):not(.cal-pick-btn):hover {
    background-color: #1d4ed8;
}

input[type=submit]:active,
button:not(#theme-toggle):not(.cal-nav):not(.cal-month-btn):not(.cal-year-btn):not(.cal-pick-btn):active {
    background-color: #1e40af;
}

/* Danger variant — red destructive action (e.g. Delete confirmation) */
input[type=submit].btn-danger {
    background-color: #dc2626;
}
input[type=submit].btn-danger:hover {
    background-color: #b91c1c;
}
input[type=submit].btn-danger:active {
    background-color: #991b1b;
}

/* Danger variant for <button> elements */
button.btn-danger:not(#theme-toggle) {
    background-color: #dc2626;
}
button.btn-danger:not(#theme-toggle):hover {
    background-color: #b91c1c;
}
button.btn-danger:not(#theme-toggle):active {
    background-color: #991b1b;
}

/* Secondary variant — neutral/cancel action */
input[type=submit].btn-secondary,
button.btn-secondary:not(#theme-toggle) {
    background-color: #6b7280 !important;
    color: #ffffff;
}
input[type=submit].btn-secondary:hover,
button.btn-secondary:not(#theme-toggle):hover {
    background-color: #4b5563 !important;
}
input[type=submit].btn-secondary:active,
button.btn-secondary:not(#theme-toggle):active {
    background-color: #374151 !important;
}


/* --------------------------------------------------------------------------
   Tables
   Collapse borders and apply consistent padding globally.
   The HTML border= / cellpadding= / cellspacing= attributes are superseded
   by these rules and can be removed from markup as pages are modernised.
   -------------------------------------------------------------------------- */
table {
    border-collapse: collapse;
}

td, th {
    padding: 0.3rem 0.6rem;
    vertical-align: top;
    border: 1px solid #e5e7eb;
}


/* --------------------------------------------------------------------------
   Navigation bars
   -------------------------------------------------------------------------- */
.systemMenu {
    font-weight: 600;
    color: #ffffff;
    background-color: #374151;
}

.mainMenu {
    color: #1f2937;
    background-color: #e5e7eb;
}

/* Anchor overrides — nav links keep the nav text colour, not the default blue */
a.systemMenu,
a.systemMenu:visited {
    color: #ffffff;
    font-weight: 600;
}

a.mainMenu,
a.mainMenu:visited {
    color: #1f2937;
}


/* --------------------------------------------------------------------------
   Table chrome classes
   -------------------------------------------------------------------------- */
.tableHeader {
    font-weight: 600;
    color: #1f2937;
    background-color: #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tableExpenses {
    font-weight: 600;
    color: #1e40af;
    background-color: #dbeafe;
}

.tableGroup {
    font-weight: 700;
    background-color: #eff6ff;
}

.tableInactive {
    color: #6b7280;
    background-color: #f3f4f6 !important;
}

.today {
    color: #1f2937;
    background-color: #9fbefd;
}


/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.sectionHeader {
    border-bottom: 1px solid #d1d5db;
    font-weight: 700;
    padding-bottom: 0.25rem;
}

.sectionHeader_0 {
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Utility / miscellaneous classes
   -------------------------------------------------------------------------- */
.button {
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

.bgLiteSilver {
    background-color: #f9fafb;
}

/* Calendar days that have time/expense entries logged */
.cal-entry {
    background-color: #dbeafe;
}

.textLite {
    color: #9ca3af;
}

.reportTop {
    border-top: 1px solid #e5e7eb;
}

.report {
    border-top: 1px solid darkred;
}

.combo {
    /* Legacy alias — inherits body font */
}

.err_msg {
    font-weight: 700;
    color: #dc2626;
}

.lineTopSilver {
    border-top: 1px solid #e5e7eb;
}

.lineBottomDouble {
    border-bottom: 3px double #1f2937;
}

/* Inline form — resets margins so a <form> inside a <td> doesn't add spacing */
.form-reset {
    margin: 0;
    padding: 0;
}


/* Link-buttons — anchor tags styled to look like action buttons.
   .btn sets shared geometry; .btn-primary and .btn-danger set colour.
   :visited overrides prevent links from changing colour after being followed. */
.btn {
    display: inline-block;
    border-radius: 0.375rem;
    padding: 0.2rem 0.6rem;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    box-sizing: border-box;
}
input[type="submit"].btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
}
.btn:hover {
    text-decoration: none;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active {
    color: #ffffff;
}
.btn-primary,
.btn-primary:visited {
    background-color: #2563eb;
}
.btn-primary:hover {
    background-color: #1d4ed8;
}

.btn-danger,
.btn-danger:link,
.btn-danger:visited,
.btn-danger:hover,
.btn-danger:active {
    color: #ffffff;
}
.btn-danger,
.btn-danger:visited {
    background-color: #dc2626;
}
.btn-danger:hover {
    background-color: #b91c1c;
}

.btn-disabled,
.btn-disabled:visited {
    background-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    pointer-events: none;
}


/* Alternating day-band rows in weekly time / expense tables.
   band-a is transparent (body bg shows through); band-b adds a tint. */
.row-band-a {
    /* inherits body background */
}

.row-band-b {
    background-color: #f3f4f6;
}


/* --------------------------------------------------------------------------
   Calendar widget (calendar.php)
   -------------------------------------------------------------------------- */
.cal-widget {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #ffffff;
    width: 16rem;
}

/* Day cells — circular, centered */
.cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 1px auto;
    border-radius: 9999px;
    font-size: 0.8rem;
    cursor: pointer;
    color: #1f2937;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.cal-day:hover {
    background-color: #e5e7eb;
    text-decoration: none;
}

.cal-day.cal-selected {
    background-color: #2563eb;
    color: #ffffff;
    font-weight: 700;
}

.cal-day.cal-selected:hover {
    background-color: #1d4ed8;
    text-decoration: none;
}

.cal-day.cal-has-entry {
    background-color: #dbeafe;
    font-weight: 600;
}

.cal-day.cal-has-entry:hover {
    background-color: #bfdbfe;
    text-decoration: none;
}

.cal-day.cal-selected.cal-has-entry {
    background-color: #2563eb;
    color: #ffffff;
}

.cal-day.cal-today:not(.cal-selected) {
    box-shadow: inset 0 0 0 1.5px #2563eb;
}

/* Calendar buttons — #cal-widget prefix overrides the global
   button:not(#theme-toggle) rule which has ID-level specificity. */

#cal-widget .cal-pick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: #1f2937;
    background: none;
    border: none;
    transition: background-color 0.15s ease;
    width: 100%;
}

#cal-widget .cal-pick-btn:hover {
    background-color: #e5e7eb;
}

#cal-widget .cal-pick-btn.cal-pick-active {
    background-color: #2563eb;
    color: #ffffff;
    font-weight: 600;
}

#cal-widget .cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: none;
    background: none;
    cursor: pointer;
    color: #6b7280;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

#cal-widget button.cal-nav:hover {
    background-color: #e5e7eb;
    color: #6b7280;
}

#cal-widget .cal-month-btn,
#cal-widget .cal-year-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

#cal-widget button.cal-month-btn:hover,
#cal-widget button.cal-year-btn:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

/* Header range text (year view) */
.cal-range-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.125rem 0.25rem;
}


/* ==========================================================================
   Dark mode overrides
   Applied when theme.js adds .dark to <html> (Tailwind darkMode: 'class').
   All light-mode rules above remain untouched; these selectors win via
   higher specificity (.dark ancestor + descendant).
   ========================================================================== */

/* --- Base --- */
.dark body {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.dark a {
    color: #6ea8fe;
}
.dark a:hover {
    color: #93c5fd;
}


/* --- Form controls --- */
.dark input:not([type=submit]),
.dark textarea,
.dark select {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #555555;
}


/* --- Buttons --- */
.dark input[type=submit],
.dark button:not(#theme-toggle):not(.cal-nav):not(.cal-month-btn):not(.cal-year-btn):not(.cal-pick-btn) {
    background-color: #2563eb;
    color: #ffffff;
}

.dark input[type=submit]:hover,
.dark button:not(#theme-toggle):not(.cal-nav):not(.cal-month-btn):not(.cal-year-btn):not(.cal-pick-btn):hover {
    background-color: #1d4ed8;
}

.dark input[type=submit].btn-danger,
.dark button.btn-danger:not(#theme-toggle) {
    background-color: #dc2626;
}
.dark input[type=submit].btn-danger:hover,
.dark button.btn-danger:not(#theme-toggle):hover {
    background-color: #b91c1c;
}

.dark .btn-primary,
.dark .btn-primary:link,
.dark .btn-primary:visited,
.dark .btn-primary:hover,
.dark .btn-primary:active {
    color: #ffffff;
}
.dark .btn-primary,
.dark .btn-primary:visited {
    background-color: #2563eb;
}
.dark .btn-primary:hover {
    background-color: #1d4ed8;
}

.dark .btn-danger,
.dark .btn-danger:link,
.dark .btn-danger:visited,
.dark .btn-danger:hover,
.dark .btn-danger:active {
    color: #ffffff;
}
.dark .btn-danger,
.dark .btn-danger:visited {
    background-color: #dc2626;
}
.dark .btn-danger:hover {
    background-color: #b91c1c;
}

.dark .btn-disabled,
.dark .btn-disabled:visited {
    background-color: #6b7280;
}

.dark input[type=submit].btn-secondary,
.dark button.btn-secondary:not(#theme-toggle) {
    background-color: #4b5563 !important;
}
.dark input[type=submit].btn-secondary:hover,
.dark button.btn-secondary:not(#theme-toggle):hover {
    background-color: #374151 !important;
}


/* --- Tables --- */
.dark td,
.dark th {
    border-color: #3a3a3a;
}


/* --- Navigation bars --- */
.dark .systemMenu {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark a.systemMenu,
.dark a.systemMenu:visited {
    color: #e0e0e0;
}

.dark .mainMenu {
    background-color: #252525;
    color: #cccccc;
}

.dark a.mainMenu,
.dark a.mainMenu:visited {
    color: #cccccc;
}

.adminMenu {
    background-color: #c7e3fe;
}

a.adminMenu,
a.adminMenu:visited {
    color: #1a1a1a;
}

.dark .adminMenu {
    background-color: #10182d;
}

.dark a.adminMenu,
.dark a.adminMenu:visited {
    color: #e0e0e0;
}


/* --- Table chrome --- */
.dark .tableHeader {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

.dark .tableGroup {
    background-color: #1e2a3a;
    color: #e0e0e0;
}

.dark .tableExpenses {
    background-color: #1a2a40;
    color: #90b8e8;
}

.dark .tableInactive {
    background-color: #2a2a2a !important;
    color: #777777;
}

.dark .today {
    background-color: #364e7e;
    color: #cccccc;
}


/* --- Section headings --- */
.dark .sectionHeader {
    border-bottom-color: #555555;
    color: #e0e0e0;
}

.dark .sectionExpenses {
    border-bottom-color: #2a4a7a;
    color: #90b8e8;
}

.dark .sectionHeader_0 {
    color: #e0e0e0;
}


/* --- Utility / miscellaneous --- */
.dark .button {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

.dark .bgLiteSilver {
    background-color: #252525;
}

.dark .cal-entry {
    background-color: #1a2a40;
}

.dark .textLite {
    color: #888888;
}

.dark .reportTop {
    border-top-color: #555555;
}

.dark .report {
    border-top-color: #8b2020;
}

.dark .err_msg {
    color: #f87171;
}

.dark .lineTopSilver {
    border-top-color: #444444;
}

.dark .lineBottomDouble {
    border-bottom-color: #e0e0e0;
}


/* --- Alternating day-band rows --- */
.dark .row-band-b {
    background-color: #2d2d2d;
}


/* --- Page header --- */
.dark header {
    background-color: #1e1e1e;
}


/* --- Calendar widget --- */
.dark .cal-widget {
    background-color: #2d2d2d;
    border-color: #3a3a3a;
}

.dark .cal-day {
    color: #e0e0e0;
}

.dark .cal-day:hover {
    background-color: #3a3a3a;
}

.dark .cal-day.cal-selected {
    background-color: #3b82f6;
    color: #ffffff;
}

.dark .cal-day.cal-selected:hover {
    background-color: #2563eb;
}

.dark .cal-day.cal-has-entry {
    background-color: #1a2a40;
}

.dark .cal-day.cal-has-entry:hover {
    background-color: #1e3a5f;
}

.dark .cal-day.cal-selected.cal-has-entry {
    background-color: #3b82f6;
    color: #ffffff;
}

.dark .cal-day.cal-today:not(.cal-selected) {
    box-shadow: inset 0 0 0 1.5px #6ea8fe;
}

.dark #cal-widget .cal-pick-btn {
    color: #e0e0e0;
}

.dark #cal-widget .cal-pick-btn:hover {
    background-color: #3a3a3a;
}

.dark #cal-widget .cal-pick-btn.cal-pick-active {
    background-color: #2563eb;
    color: #ffffff;
}

.dark #cal-widget .cal-nav {
    color: #9ca3af;
}

.dark #cal-widget button.cal-nav:hover {
    background-color: #3a3a3a;
    color: #9ca3af;
}

.dark #cal-widget .cal-month-btn,
.dark #cal-widget .cal-year-btn {
    color: #e0e0e0;
}

.dark #cal-widget button.cal-month-btn:hover,
.dark #cal-widget button.cal-year-btn:hover {
    background-color: #3a3a3a;
    color: #e0e0e0;
}

.dark .cal-range-text {
    color: #e0e0e0;
}

} /* end @layer base */

/* Print-only elements are hidden on screen, shown in @media print below */
.print-only {
    display: none;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Page setup: landscape, tight margins */
    @page {
        size: landscape;
        margin: 0.25in 0.50in;
    }

    /* Force background colours/graphics to print (e.g. highlight cells) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }


    /* Hide site chrome — only report content prints */
    header,
    footer,
    .systemMenu,
    .mainMenu,
    .adminMenu,
    nav,
    form,
    .btn-secondary,
    .btn-primary,
    .btn,
    .btn-disabled,
    .no-print {
        display: none !important;
    }

    /* Show elements marked print-only */
    .print-only {
        display: block !important;
    }

    /* Remove hyperlink styling — print as plain text */
    a, a:visited, a:hover, a:active {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Remove backgrounds and shadows for cleaner print */
    body {
        background: white !important;
        color: black !important;
        font-size: 10pt;
    }

    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure tables don't break mid-row */
    tr {
        page-break-inside: avoid;
    }

    /* Section headers should stay with content */
    .sectionHeader {
        page-break-after: avoid;
    }

    /* Print header — company name + report title on first page only */
    .print-header {
        text-align: center;
        font-size: 10pt;
        color: #333;
        padding-bottom: 2pt;
        margin-bottom: 4pt;
        border-bottom: 1px solid #ccc;
    }

    .print-header .company-name {
        font-weight: bold;
        font-size: 12pt;
    }

    .print-header .report-name {
        font-size: 10pt;
    }

    /* Override dark-mode colours for print — ensure black text on white */
    .dark .sectionHeader,
    .dark .sectionExpenses,
    .dark .sectionHeader_0,
    .dark .tableHeader,
    .dark .tableExpenses,
    .dark .tableGroup,
    .dark td,
    .dark th,
    .dark tr,
    .dark div,
    .dark span,
    .dark p {
        color: black !important;
        background-color: transparent !important;
        border-color: #d1d5db !important;
    }

    /* Preserve highlight cell colours (yellow/red for Running Total, etc.) */
    td[style*="background-color"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure table content isn't clipped by overflow container */
    .overflow-x-auto {
        overflow: visible !important;
    }

    /* Ensure tables fit within printed page width */
    table {
        table-layout: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Reduce cell padding in print to help tables fit */
    td, th {
        padding: 2pt 4pt !important;
        font-size: 8pt !important;
    }

    /* Print footer with timestamp */
    .print-footer {
        text-align: center;
        font-size: 8pt;
        color: #666;
        border-top: 1px solid #ccc;
        padding-top: 4pt;
        margin-top: 12pt;
    }
}