/* ==========================================================================
   Montagebericht Application - Main Stylesheet
   ========================================================================== */

/* Verhindert Flackern beim Seitenwechsel */
html.no-transitions * {
    transition: none !important; /* Keep important here for initial load */
}

/* ==========================================================================
   Variables & Base Theme (Dark Mode Default)
   ========================================================================== */

:root {
    /* Übergänge */
    --transition-speed: 0.3s;
    --transition-color: color var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);

    /* Schatten */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.25);

    /* Dark Mode (Standard) */
    /* Primärfarben */
    --primary-color: #1a2942;
    --secondary-color: #343a40;
    --accent-color: #00b8d4;
    --dark-bg: #121212;
    --card-bg: #212529;
    --hover-bg: #495057;
    --table-header-bg: rgba(0, 0, 0, 0.3);
    --input-bg: rgba(0, 0, 0, 0.2); /* Added from variables.css */
    --input-border: rgba(255, 255, 255, 0.1); /* Added from variables.css */
    --list-bg: rgba(0, 0, 0, 0.2); /* Added from variables.css */
    --list-hover-bg: rgba(255, 255, 255, 0.05); /* Added from variables.css */


    /* Textfarben */
    --text-primary: #f8f9fa;
    --text-secondary: #e9ecef;
    --text-muted: #adb5bd;
    --text-accent: #4dd0e1;

    /* Statusfarben */
    --status-neu: #1a5f7a;
    --status-zugewiesen: #006064;
    --status-in-bearbeitung: #ff8f00;
    --status-abgeschlossen: #2e7d32;
    --status-storniert: #b71c1c;

    /* Bootstrap-Farben überschreiben */
    --bs-primary: #1a2942;
    --bs-secondary: #343a40;
    --bs-success: #2e7d32;
    --bs-info: #006064;
    --bs-warning: #ff8f00;
    --bs-danger: #b71c1c;
    --bs-light: #e9ecef;
    --bs-dark: #121212;
}

/* ==========================================================================
   Base Layout & Typography
   ========================================================================== */

body {
    padding-top: 60px; /* Adjust if navbar height changes */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    transition: var(--transition-color);
}

main.container-fluid {
    flex: 1 0 auto;
    padding-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    transition: var(--transition-color);
}

p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    transition: var(--transition-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

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

/* Text Selection */
::selection {
    background-color: var(--accent-color);
    color: var(--text-primary); /* White text in dark mode */
}

/* ==========================================================================
   Layout Components (Navbar, Footer, etc.)
   ========================================================================== */

/* Navbar */
.navbar {
    background-color: var(--primary-color) !important; /* Keep important for Bootstrap override */
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-color);
}

.navbar-brand {
    font-weight: 600;
    color: var(--text-primary) !important; /* Keep important for Bootstrap override */
    transition: var(--transition-color);
}

.navbar-brand img {
    filter: brightness(1.1);
    transition: filter var(--transition-speed);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    transition: all var(--transition-speed);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--accent-color);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent-color);
    font-weight: 500;
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-md);
    transition: var(--transition-color);
}

.dropdown-item {
    color: var(--text-secondary);
    transition: all var(--transition-speed);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--hover-bg);
    color: var(--accent-color);
}

.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-color);
}

/* Footer */
.footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: var(--primary-color) !important; /* Keep important for Bootstrap override */
    color: var(--text-secondary);
    padding: 1.5rem 0;
    transition: var(--transition-color);
}

/* Login Form Container */
.login-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-lg);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-color);
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo img {
    max-width: 200px;
    height: auto;
    filter: brightness(1.1);
    transition: filter var(--transition-speed);
}

/* Theme Toggle Button */
.theme-toggle {
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    transition: color var(--transition-speed);
}

.theme-toggle:hover {
    color: var(--accent-color);
}

.theme-toggle i {
    font-size: 1.25rem;
}


/* ==========================================================================
   UI Components (Cards, Buttons, Tables, Forms, etc.)
   ========================================================================== */

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
}

.card-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem 1.25rem;
    transition: var(--transition-color);
}

.card-header:first-child {
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0;
    transition: var(--transition-color);
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    background-color: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.25rem;
    transition: var(--transition-color);
}

.card-footer:last-child {
    border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

/* Admin Tool Tiles (admin/index.php) */
.admin-tool-tile {
    background-color: var(--card-bg);
    border: 1px solid var(--input-border); /* Use input border for consistency */
    transition: var(--transition-color), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.admin-tool-tile:hover {
    background-color: var(--hover-bg);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.admin-tool-tile .card-title {
    color: var(--text-primary) !important; /* Ensure title uses theme variable and overrides others */
    font-size: 1rem; /* Adjust size if needed */
}

/* Make the selector more specific to override Bootstrap's .text-muted if necessary */
.admin-tool-tile .card-text.text-muted { 
    color: var(--text-muted) !important; /* Use muted text variable and ensure it overrides */
}

/* Dashboard Cards */
.dashboard-card {
    transition: transform 0.3s, box-shadow 0.3s, background-color var(--transition-speed), border-color var(--transition-speed);
    margin-bottom: 20px;
    overflow: hidden;
    height: 100%; /* Stellt sicher, dass alle Karten die gleiche Höhe haben */
    display: flex;
    flex-direction: column;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.dashboard-card .card-body {
    padding: 1.5rem;
    flex: 1; /* Lässt den Inhalt wachsen, um den verfügbaren Platz zu füllen */
    display: flex;
    flex-direction: column;
}

.dashboard-card .card-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--accent-color);
    opacity: 0.9;
    transition: var(--transition-color);
}

.dashboard-card h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    transition: var(--transition-color);
}

.dashboard-card.card-primary .card-icon { color: var(--accent-color); }
.dashboard-card.card-success .card-icon { color: #4caf50; }
.dashboard-card.card-info .card-icon { color: #29b6f6; }
.dashboard-card.card-warning .card-icon { color: #ffa726; }

.dashboard-card .card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.2);
    transition: var(--transition-color);
    margin-top: auto; /* Drückt den Footer nach unten */
}

.dashboard-card .card-footer a {
    color: var(--text-secondary);
    font-size: 0.875rem;
    display: block;
    transition: all var(--transition-speed);
}

.dashboard-card .card-footer a:hover {
    color: var(--accent-color);
}

/* Tables */
.table {
    color: var(--text-secondary);
    margin-bottom: 0; /* Often within cards */
    transition: var(--transition-color);
}

.table th {
    border-top: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-weight: 700;
    padding: 1rem;
    background-color: var(--table-header-bg);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition-color);
}

.table td {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    vertical-align: middle;
    transition: var(--transition-color);
}

/* Default Dark Mode Table Row Styling */
.table tbody tr {
    background-color: var(--card-bg); /* Use card background for consistency */
    color: var(--text-primary);
}

.table-hover tbody tr:hover {
    background-color: var(--hover-bg); /* Use hover variable */
    transition: background-color var(--transition-speed); /* Specific transition */
}

.table-responsive {
    overflow-x: auto;
}

.table-borderless th,
.table-borderless td {
    border: 0;
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: all var(--transition-speed);
    /* Ensure dark mode arrow is used */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(0, 0, 0, 0.3); /* Slightly darker focus */
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 184, 212, 0.25);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
    transition: var(--transition-color);
}

.form-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: var(--transition-color);
}

.form-text {
    color: var(--text-muted);
    transition: var(--transition-color);
}

.form-check-input {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    transition: var(--transition-color);
}

.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-check-label {
    color: var(--text-secondary);
    transition: var(--transition-color);
}

/* Ensure textarea also gets the correct dark mode styles */
textarea.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* Buttons */
.btn {
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all var(--transition-speed);
    border: none;
}

.btn-primary { background-color: var(--accent-color); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: #00acc1; box-shadow: 0 4px 8px rgba(0, 184, 212, 0.3); }

.btn-secondary { background-color: var(--secondary-color); color: var(--text-primary); }
.btn-secondary:hover, .btn-secondary:focus { background-color: #495057; }

.btn-success { background-color: var(--status-abgeschlossen); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #388e3c; }

.btn-danger { background-color: var(--status-storniert); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #c62828; }

.btn-warning { background-color: var(--status-in-bearbeitung); color: #212529; } /* Dark text on yellow */
.btn-warning:hover, .btn-warning:focus { background-color: #f57c00; }

.btn-info { background-color: var(--status-zugewiesen); color: white; }
.btn-info:hover, .btn-info:focus { background-color: #00796b; }

.btn-outline-primary { color: var(--accent-color); border-color: var(--accent-color); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--accent-color); color: white; }

.btn-outline-secondary { color: var(--text-secondary); border-color: var(--secondary-color); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--secondary-color); color: var(--text-primary); }

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }

/* Badges */
.badge {
    padding: 0.5em 0.75em;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: var(--transition-color);
}

/* Bootstrap background color overrides using status variables */
.bg-primary { background-color: var(--status-neu) !important; color: white !important; }
.bg-info { background-color: var(--status-zugewiesen) !important; color: white !important; }
.bg-warning { background-color: var(--status-in-bearbeitung) !important; color: white !important; } /* Changed to white text */
.bg-success { background-color: var(--status-abgeschlossen) !important; color: white !important; }
.bg-danger { background-color: var(--status-storniert) !important; color: white !important; }

/* Custom status badges (if needed beyond .bg-*) */
.badge-status-neu { background-color: var(--status-neu); color: white; }
.badge-status-zugewiesen { background-color: var(--status-zugewiesen); color: white; }
.badge-status-in_bearbeitung { background-color: var(--status-in-bearbeitung); color: white; } /* Changed to white text */
.badge-status-abgeschlossen { background-color: var(--status-abgeschlossen); color: white; }
.badge-status-storniert { background-color: var(--status-storniert); color: white; }

/* Alerts */
.alert {
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-color);
}

.alert-primary { background-color: rgba(0, 184, 212, 0.15); color: #80deea; }
.alert-success { background-color: rgba(46, 125, 50, 0.15); color: #a5d6a7; }
.alert-danger { background-color: rgba(183, 28, 28, 0.15); color: #ef9a9a; }
.alert-warning { background-color: rgba(255, 143, 0, 0.15); color: #ffcc80; }
.alert-info { background-color: rgba(0, 96, 100, 0.15); color: #80deea; }

/* List Groups */
.list-group {
    border-radius: 0.5rem;
    overflow: hidden;
}

.list-group-item {
    background-color: var(--list-bg); /* Use list variable */
    border-color: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    padding: 1rem 1.25rem;
    transition: var(--transition-color);
}

.list-group-item:hover {
    background-color: var(--list-hover-bg); /* Use list hover variable */
    transition: background-color var(--transition-speed);
}

/* Modals */
.modal-content {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-color);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    transition: var(--transition-color);
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
    transition: var(--transition-color);
}

/* Signature Pad */
.signature-pad-container {
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--input-bg);
    transition: var(--transition-color);
}

.signature-pad { /* The canvas wrapper */
    width: 100%;
    height: 200px;
    background-color: var(--dark-bg); /* Use main background */
    border: 1px solid var(--input-border);
    border-radius: 0.25rem;
    transition: var(--transition-color);
}

/* Signature Pad Specific Styles (Moved/Enhanced from unterschrift.php) */
#signatureCanvas { /* The actual canvas */
    width: 100%;
    height: 250px; /* Keep original height */
    border: 2px solid var(--input-border); /* Use variable */
    border-radius: 8px; /* Keep original radius */
    background-color: var(--dark-bg); /* Use dark-bg for contrast */
    cursor: crosshair;
    transition: box-shadow 0.3s ease, border-color var(--transition-speed), background-color var(--transition-speed); /* Add transitions */
    display: block; /* Ensure block display */
}

#signatureCanvas.active {
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Keep shadow */
    border-color: var(--accent-color); /* Use variable */
}

.signature-preview {
    max-height: 200px;
    border: 2px solid var(--input-border); /* Use variable */
    border-radius: 8px; /* Keep original radius */
    padding: 10px; /* Keep padding */
    background-color: var(--dark-bg); /* Match canvas background */
    transition: border-color var(--transition-speed), background-color var(--transition-speed); /* Add transitions */
}

/* Responsive adjustments for signature pad (keep original) */
@media (max-width: 768px) {
    /* Keep original responsive styles if needed, or adjust */
    /* Example: .signature-pad-container { margin: 0 -15px; } */
    #signatureCanvas {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* Ensure signature pad container styles are consistent */
.signature-pad-container {
    border: 1px solid var(--input-border); /* Use variable */
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--card-bg); /* Use card background */
    transition: var(--transition-color);
    position: relative; /* Keep from original embedded style if needed */
    touch-action: none; /* Keep from original embedded style */
    -webkit-touch-callout: none; /* Keep from original embedded style */
    -webkit-user-select: none; /* Keep from original embedded style */
    -khtml-user-select: none; /* Keep from original embedded style */
    -moz-user-select: none; /* Keep from original embedded style */
    -ms-user-select: none; /* Keep from original embedded style */
    user-select: none; /* Keep from original embedded style */
    -webkit-tap-highlight-color: transparent; /* Keep from original embedded style */
}

/* ==========================================================================
   Utilities
   ========================================================================== */
/* Stray height rule removed */

.signature-pad-buttons {
    margin-top: 1rem;
}


/* ==========================================================================
   Utilities
   ========================================================================== */

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--accent-color) !important; transition: var(--transition-color); }
.bg-dark-card { background-color: var(--card-bg); transition: var(--transition-color); }
.border-light { border-color: rgba(255, 255, 255, 0.05) !important; transition: var(--transition-color); }


/* ==========================================================================
   Specific Component Fixes (Dark Mode Defaults)
   ========================================================================== */

/* Fix table display in dark mode (Auftragsdaten, Artikel, etc.) */
/* Ensure table headers (labels) are light */
.table th {
    color: var(--text-primary); /* Explicitly set primary text color */
}

/* Ensure table data cells (values) have correct background and text color */
.table td {
    background-color: transparent !important; /* Override potential white background */
    color: var(--text-secondary); /* Use secondary text color for values */
}

/* Ensure borderless tables also get the fix */
.table-borderless th {
     color: var(--text-primary);
}
.table-borderless td {
    background-color: transparent !important;
    color: var(--text-secondary);
}

/* Fix "Keine Artikel vorhanden" cell */
.table td[colspan] { /* Target cells with colspan specifically */
    background-color: transparent !important;
    color: var(--text-secondary);
}

/* Attempt to fix signature image background in dark mode */
/* NOTE: This selector might be too broad. Add a specific class to the image/container if possible */
/* .card img { */ /* Targeting any image directly inside a card */
   /* filter: invert(1) brightness(1.8); */ /* Commenting out for now - needs specific selector */
   /* Consider adding a border if the inversion makes edges disappear */
   /* border: 1px solid var(--input-border); */
/* } */

/* Ensure text within cards is readable in dark mode */
/* Keep the previous general rule */
.card-body p,
.card-body .text-muted {
    color: var(--text-secondary);
}

/* Specific fix for Tätigkeitsbeschreibung text */
.card-body .taetigkeit-text { /* Target specifically */
    color: var(--text-secondary); /* Use secondary text color */
}

/* Specific fix for Statusverlauf description text */
/* Target the specific structure found in auftrag_status.php */
.list-group-item > div > div.text-muted.small { /* Target both classes */
    color: var(--text-primary); /* Use PRIMARY color for maximum contrast */
    font-weight: 500; /* Make slightly bolder */
}


/* ==========================================================================
   Light Mode Overrides
   ========================================================================== */

html.light-mode {
    /* Variable Overrides */
    --primary-color: #2c5282;
    --secondary-color: #718096;
    --accent-color: #0098b7;
    --dark-bg: #f8f9fa;
    --card-bg: #ffffff;
    --hover-bg: #e2e8f0;
    --table-header-bg: #e2e8f0;
    --input-bg: #fff;
    --input-border: rgba(0, 0, 0, 0.1);
    --list-bg: #ffffff; /* Use white for lists */
    --list-hover-bg: #f8f9fa; /* Lighter hover */

    --text-primary: #1a202c;
    --text-secondary: #4a5568; /* Slightly lighter secondary text */
    --text-muted: #5a687a; /* Darkened for contrast */
    --text-accent: #005c70; /* Darkened accent for hover/focus */

    --status-neu: #2b6cb0;
    --status-zugewiesen: #00838f;
    --status-in-bearbeitung: #d4782a; /* Darkened for contrast with black text */
    --status-abgeschlossen: #38a169;
    --status-storniert: #e53e3e;

    --bs-primary: #2c5282;
    --bs-secondary: #718096;
    --bs-success: #38a169;
    --bs-info: #00838f;
    --bs-warning: #ed8936;
    --bs-danger: #e53e3e;
    --bs-light: #f8f9fa;
    --bs-dark: #1a202c;

    /* General Text Color */
    color: var(--text-primary);

    /* Text Selection Override */
    ::selection {
        background-color: var(--hover-bg); /* Use light hover background */
        color: var(--text-primary); /* Dark text in light mode */
    }

    /* Specific Overrides */
    a:hover { color: var(--text-accent); } /* Use variable */

    .navbar { border-bottom-color: rgba(0, 0, 0, 0.05); }
    .navbar-brand img { filter: brightness(0.9); }
    /* Ensure navbar brand text is white in light mode */
    .navbar-brand { color: #ffffff !important; } 
    .navbar-dark .navbar-nav .nav-link { color: #ffffff; } /* White links in light mode */
    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link:focus { color: #e0e0e0; } /* Slightly off-white hover */
    .navbar-dark .navbar-nav .nav-link.active { color: #ffffff; font-weight: 500; } /* Keep active white */

    .dropdown-menu { border-color: rgba(0, 0, 0, 0.05); }
    .dropdown-item { color: var(--text-secondary); }
    .dropdown-item:hover, .dropdown-item:focus { background-color: var(--hover-bg); color: var(--accent-color); }
    .dropdown-divider { border-top-color: rgba(0, 0, 0, 0.05); }

    .card { border-color: rgba(0, 0, 0, 0.05); }
    .card-header { background-color: rgba(0, 0, 0, 0.03); border-bottom-color: rgba(0, 0, 0, 0.05); }
    .card-footer { background-color: rgba(0, 0, 0, 0.03); border-top-color: rgba(0, 0, 0, 0.05); color: var(--text-primary); }

    .dashboard-card.card-success .card-icon { color: #38a169; }
    .dashboard-card.card-info .card-icon { color: #00838f; }
    .dashboard-card.card-warning .card-icon { color: #c05621; }
    .dashboard-card .card-footer { background-color: rgba(0, 0, 0, 0.03); color: var(--text-primary); }
    .dashboard-card .card-footer a { color: var(--text-primary); }
    .dashboard-card .card-footer a:hover { color: var(--accent-color); }

    /* Table Fixes Integrated */
    .table { color: var(--text-secondary); }
    .table th { background-color: var(--table-header-bg); color: var(--text-primary); border-bottom-color: rgba(0, 0, 0, 0.1); }
    .table td { border-top-color: rgba(0, 0, 0, 0.05); }
    .table tbody tr { background-color: var(--card-bg); color: var(--text-primary); } /* Use card bg */
    .table-hover tbody tr:hover { background-color: var(--hover-bg); } /* Use hover bg */

    .form-control, .form-select { background-color: var(--input-bg); border-color: var(--input-border); }
    .form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--accent-color); box-shadow: 0 0 0 0.25rem rgba(0, 152, 183, 0.25); }
    .form-control::placeholder { color: #a0aec0; } /* Lighter placeholder */
    .form-label { color: var(--text-secondary); }
    .form-text { color: var(--text-muted); }
    /* Removed background-color: #fff; for .form-check-input in light mode */
    .form-check-input { border-color: rgba(0, 0, 0, 0.1); } 
    .form-check-label { color: var(--text-primary); }

    .btn-primary:hover, .btn-primary:focus { background-color: #0087a3; box-shadow: 0 4px 8px rgba(0, 152, 183, 0.3); }
    .btn-secondary:hover, .btn-secondary:focus { background-color: #4a5568; }
    .btn-success:hover, .btn-success:focus { background-color: #2f855a; }
    .btn-danger:hover, .btn-danger:focus { background-color: #c53030; }
    .btn-warning { color: #000000; } /* Ensure dark text on light yellow */
    .btn-warning:hover, .btn-warning:focus { background-color: #c05621; }
    .btn-info { color: #000000; } /* Changed to dark text */
    .btn-info:hover, .btn-info:focus { background-color: #00676b; }
    .btn-success { color: #000000; } /* Changed to dark text */
    .btn-danger { color: #000000; } /* Changed to dark text */
    .btn-primary { color: #000000; } /* Changed to dark text */

    /* Ensure dark text on light backgrounds for badges */
    .bg-primary, .bg-info, .bg-success, .bg-danger, .bg-warning { color: #000000 !important; } 

    .alert-primary { background-color: rgba(0, 152, 183, 0.1); color: #007a94; }
    .alert-success { background-color: rgba(56, 161, 105, 0.1); color: #2f855a; }
    .alert-danger { background-color: rgba(229, 62, 62, 0.1); color: #c53030; }
    .alert-warning { background-color: rgba(237, 137, 54, 0.1); color: #b7791f; }
    .alert-info { background-color: rgba(0, 131, 143, 0.1); color: #00676b; }

    .list-group-item { background-color: var(--list-bg); border-color: rgba(0, 0, 0, 0.05); }
    .list-group-item:hover { background-color: var(--list-hover-bg); }

    .modal-content { border-color: rgba(0, 0, 0, 0.05); }
    .modal-header { border-bottom-color: rgba(0, 0, 0, 0.05); }
    .modal-footer { border-top-color: rgba(0, 0, 0, 0.05); }

    .signature-pad-container { border-color: var(--input-border); background-color: rgba(0, 0, 0, 0.03); }
    /* Light mode overrides for signature pad */
    #signatureCanvas { /* No need for .light-mode prefix if inside html.light-mode block */
        border-color: #ccc; /* Original light mode color */
        background-color: #fff; /* Original light mode color */
    }
    #signatureCanvas.active { /* No need for .light-mode prefix */
        border-color: #007bff; /* Original light mode color */
    }
    .signature-preview { /* No need for .light-mode prefix */
        border-color: #eee; /* Original light mode color */
        background-color: #fff; /* Match canvas background */
    }
    /* Ensure container background is also light */
    .signature-pad-container { /* No need for .light-mode prefix */
         background-color: rgba(0, 0, 0, 0.03); /* Original light mode color */
         border-color: var(--input-border); /* Use light mode input border */
    }

    .footer {
        border-top-color: rgba(0, 0, 0, 0.05);
        color: #ffffff !important; /* White text in light mode footer */
    }
    .footer p { /* Ensure paragraphs within footer are also white */
        color: #ffffff !important; 
    }
    .login-container { border-color: rgba(0, 0, 0, 0.05); }
    .login-logo img { filter: brightness(0.9); }
    .theme-toggle { color: #ffffff; } /* White icon */
    .theme-toggle:hover { color: #e0e0e0; } /* Slightly off-white hover */

    .border-light { border-color: rgba(0, 0, 0, 0.05) !important; }

    /* Ensure table styles are correct in light mode too */
    .table th {
        color: var(--text-primary); /* Use light mode text primary */
    }
    .table td {
        background-color: transparent !important; /* Ensure no lingering dark mode bg */
        color: var(--text-secondary); /* Use light mode text secondary */
    }
    .table-borderless th {
        color: var(--text-primary);
    }
    .table-borderless td {
        background-color: transparent !important;
        color: var(--text-secondary);
    }
    .table td[colspan] {
        background-color: transparent !important;
        color: var(--text-secondary);
    }

    /* Reset signature filter in light mode */
    /* NOTE: Adjust selector if changed above */
    /* .card img { */
       /* filter: none; */
    /* } */
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablets (e.g., iPads in Portrait & Landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Example: Increase base font size slightly for better readability on larger tablets */
    body {
        font-size: 1.05rem; /* Adjust as needed */
    }

    /* Example: Adjust padding for main container */
    main.container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Example: Ensure forms are easily usable */
    .form-control,
    .form-select,
    .btn {
        padding: 0.6rem 1rem; /* Slightly larger touch targets */
        font-size: 1rem;
    }

    /* Example: Adjust dashboard card layout if needed */
    /* .dashboard-card { ... } */

    /* Example: Adjust table font size if needed */
    /* .table { font-size: 0.95rem; } */
}

/* Smaller Devices (Phones, smaller tablets in portrait) */
@media (max-width: 767px) { /* Changed from 768px to avoid overlap */
    .table-responsive {
        font-size: 0.9rem;
    }

    .dashboard-card {
        margin-bottom: 1rem;
    }

    .btn {
        padding: 0.375rem 0.75rem;
    }

    .card-body {
        padding: 1.25rem;
    }
}

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

@media print {
    body {
        background-color: white !important;
        color: black !important;
        padding-top: 0;
    }

    .card {
        background-color: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .card-header,
    .card-footer {
        background-color: #f8f9fa !important;
        border-color: #ddd !important;
    }

    .table th,
    .table td {
        border-color: #ddd !important;
    }

    header,
    footer,
    .no-print {
        display: none !important;
    }

    .print-break-after { page-break-after: always; }
    .print-break-before { page-break-before: always; }
    .print-no-break { page-break-inside: avoid; }

    a { color: #000 !important; text-decoration: none !important; }

    .badge {
        border: 1px solid #000 !important;
        color: #000 !important;
        background-color: transparent !important;
    }
}