/*
File: root/static/css/styles.css
------------------------------------
Main stylesheet for the application.

TABLE OF CONTENTS
-----------------
1. Global Styles
2. Utility Classes
3. Header and Navigation
4. Footer
5. Responsive Design
6. Page Styles
   6.1 Landing Page
   6.2 Login Page
7. Dashboard Styles
   7.1 General Styles
   7.2 Employee Dashboard
   7.3 Manager Dashboard
   7.4 General Manager Dashboard
   7.5 Admin Dashboard
   7.6 Superadmin Dashboard
8. Form Styles
9. Table Styles
10. Button Styles
11. Alert and Message Styles
12. Clickable Rows
13. Modal Styles
14. Admin Dashboard Table Row Hover
15. Ticket Submission
*/

/*=======================*/
/* 1. GLOBAL STYLES      */
/*=======================*/
:root {
    --primary-color: #007bff;
    --secondary-color: #0056b3;
    --font-color: #333;
    --background-light: #f4f4f4;
    --navbar-footer-color: #e0e0e0;
    --border-color: #ccc;
    --font-family: Arial, sans-serif;
    --spacing: 1rem;
    --transition: 0.25s ease-in-out;
    --admin-hover-color: rgba(54, 255, 54, 0.3);
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

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

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

/*=======================*/
/* UNIVERSAL TABLE ROW STYLES */
/*=======================*/

/* General table styling */
table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Reduce vertical spacing between rows */
    width: 100%;
    table-layout: auto;  /* Allow columns to adjust to their content */
    font-size: 0.9rem;    /* Slightly smaller font for compactness */
}

/* Reset inherited text color for table headers */
table thead {
    color: initial !important;
}

/* Column Header Styles */
table thead th {
    background-color: #f4f4f4;  /* Neutral light gray background */
    color: #000;                /* Black text for high contrast */
    text-align: left;
    padding: 8px 10px;          /* Consistent padding */
    font-size: 1rem;            /* Standard font size */
    font-weight: bold;
    border-bottom: 2px solid #ccc; /* Subtle bottom border */
    transition: none;
}

/* Hover State for Column Headers */
table thead th:hover {
    background-color: rgba(54, 255, 54, 0.1); /* Very light transparent green */
    color: var(--font-color);  /* Use your defined font color, if set */
}

/* Row Styling */
table tbody tr {
    background-color: #fff;               /* White background */
    border: 1px solid var(--border-color);  /* Subtle border */
    border-radius: 4px;                   /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Light shadow */
    overflow: hidden;
    height: auto;   /* Let rows adjust their height to content */
    padding: 0;
    margin: 0;
    transition: none;
}

/* Hover Effect for Rows */
table tbody tr:hover,
table tbody tr:hover + .collapse.show {
    background-color: rgba(54, 255, 54, 0.1) !important; /* Uniform light green hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);  /* Slightly elevated shadow */
}

/* Alternating Row Colors */
table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02); /* Very light gray for odd rows */
}

/* Expanded (collapsible) Row Styling */
table .collapse.show td {
    background-color: rgba(0, 0, 0, 0.03); /* Subtle light gray background */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 10px;           /* Consistent padding */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    line-height: 1.4;
    font-size: 0.9rem;
    white-space: normal;
    height: auto;            /* Allow expansion */
}

/* Prevent Shrinking/Expanding Issues During Collapse */
table tbody tr.collapsing,
table .collapse:not(.show) td {
    height: auto !important; /* Change from a fixed 50px to auto */
    margin: 0 !important;
    overflow: hidden;
}

/* Ensure cell content wraps naturally */
table th,
table td {
    word-wrap: break-word;       /* Legacy */
    overflow-wrap: break-word;   /* Standard */
    white-space: normal;         /* Allow text to wrap */
}

/*=======================*/
/* 2. UTILITY CLASSES    */
/*=======================*/
.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.width-80 {
    width: 80px;
}

.width-100 {
    width: 100px;
}

.width-150 {
    width: 150px;
}

.width-160 {
    width: 160px;
}

.width-200 {
    width: 200px;
}

.width-250 {
    width: 250px;
}

.width-300 {
    width: 300px;
}

/*=======================*/
/* 3. HEADER AND NAVIGATION */
/*=======================*/
.navbar {
    background-color: var(--navbar-footer-color);
    color: var(--font-color);
    padding: var(--spacing) 0;
    border-bottom: 1px solid var(--border-color);
    position: relative; /* Added to help position the dropdown */
}

.navbar-brand {
    color: var(--font-color);
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-nav .nav-link {
    color: var(--font-color);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color);
}

.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(51, 51, 51, 0.7)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*=======================*/
/* 4. FOOTER             */
/*=======================*/
.footer {
    background-color: var(--navbar-footer-color); /* Match navbar color */
    color: var(--font-color);
    text-align: center;
    padding: var(--spacing) 0;
    border-top: 1px solid var(--border-color);
}

/* Custom styles for error pages */
/*=======================*/
/* 1. Error Page Container */
/*=======================*/
.error-page-container {
    /* No background color to allow the inner box gradient to show */
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Padding for small screens */
}

/*=======================*/
/* 2. Inner Box with Gradient */
/*=======================*/
.error-page-inner {
    /* Gradient Background */
    background: linear-gradient(135deg, #2c3e50, #4ca1af);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    padding: 3rem; /* Increased padding for better spacing */
    border-radius: 20px; /* Increased border-radius for more rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    max-width: 800px;
    width: 100%;
    color: #f1f1f1; /* Set text color to light for contrast */
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box; /* Ensures padding is included in width calculations */
}

/* Animated Gradient Keyframes */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/*=======================*/
/* 3. Typography */
/*=======================*/
.error-page-inner h1,
.error-page-inner h2,
.error-page-inner h4,
.error-page-inner h5 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff; /* Ensure headings are fully white */
}

/*=======================*/
/* 4. Animated Error Icon */
/*=======================*/
.error-page-icon {
    color: #ffc107; /* Font Awesome warning color */
    animation: bounce 2s infinite;
    transition: color 0.3s ease, transform 0.3s ease;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Hover Effects for Animated Icon */
.error-page-icon:hover {
    color: #ffeb3b; /* Brighter yellow on hover */
    transform: scale(1.1);
}

/*=======================*/
/* 5. Debug Information */
/*=======================*/
.error-page-debug pre {
    max-height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
    font-family: 'Courier New', Courier, monospace;
    background-color: #333; /* Dark background for readability */
    color: #f1f1f1; /* Light text color */
    padding: 1rem;
    border-radius: 5px;
}

/*=======================*/
/* 6. Button Hover Effect */
/*=======================*/
.error-page-home-button .btn-primary {
    background-color: #1a73e8; /* Updated to match dark mode */
    border: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.error-page-home-button .btn-primary:hover {
    background-color: #185abc; /* Darker shade on hover */
    transform: scale(1.05);
}

/*=======================*/
/* 7. Responsive Adjustments */
/*=======================*/
@media (max-width: 576px) {
    .error-page-inner {
        padding: 2rem; /* Adjusted padding for smaller screens */
    }
    
    .error-page-icon {
        font-size: 3rem;
    }
}

/*=======================*/
/* 8. Additional Styling */
/*=======================*/
/* Footer Styling (optional) */
.error-page-footer {
    background-color: #f8f9fa;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Ensure the main content doesn't overlap with the fixed footer */
body {
    padding-bottom: 60px; /* Height of the footer */
}

/*=======================*/
/* 9. Tooltip Styling (optional) */
/*=======================*/
.error-page-tooltip {
    position: relative;
}

/*=======================*/
/* 10. Modal Styling (optional) */
/*=======================*/
/* Customize the session expiration modal */
#error-page-sessionExpirationModal .modal-content {
    background-color: #f8f9fa;
}

#error-page-sessionExpirationModal .modal-header,
#error-page-sessionExpirationModal .modal-footer {
    border: none;
}

#error-page-sessionExpirationModal .modal-title {
    font-family: 'Montserrat', sans-serif;
}

#error-page-sessionExpirationModal .btn-primary {
    background-color: #28a745;
    border: none;
}

#error-page-sessionExpirationModal .btn-primary:hover {
    background-color: #218838;
}

#error-page-sessionExpirationModal .btn-secondary {
    background-color: #6c757d;
    border: none;
}

#error-page-sessionExpirationModal .btn-secondary:hover {
    background-color: #5a6268;
}

/*=======================*/
/* 5. RESPONSIVE DESIGN  */
/*=======================*/
@media (max-width: 768px) {
    .navbar-nav {
        padding-top: 0.5rem;
    }

    .navbar-nav .nav-link {
        padding: 0.25rem 0;
    }

    .width-80, .width-100, .width-150, .width-160, .width-200, .width-250, .width-300 {
        width: 100%; /* Adjust widths for smaller screens */
    }
}

/*=======================*/
/* 6. PAGE STYLES        */
/*=======================*/

/* 6.1 Landing Page */
.landing-page__hero {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
}

.landing-page__logo {
    max-width: 200px;
    height: auto;
    margin-bottom: var(--spacing);
}

.landing-page__locations .location-card {
    margin-bottom: 2rem;
}

.landing-page__locations .location-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
	image-rendering: auto;
}

.landing-page__locations .address {
    white-space: pre-line;
}

.landing-page__apply {
    padding: 5rem 0;
    text-align: center;
}

.landing-page__default {
    padding: 5rem 0;
}

.landing-page__default .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
}

.landing-page__default .card-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.landing-page__default .card-text {
    font-size: 1rem;
}

.star-rating {
    font-size: 24px;
    cursor: pointer;
    display: inline-block;
}

.star-rating .fas {
    color: #ffc107;
}

.star-rating i {
    padding: 0 2px;
    transition: transform 0.2s ease-in-out; /* Smooth transition */
    cursor: pointer; /* Pointer cursor on hover */
}

.star-rating i:hover {
    transform: scale(1.2); /* Enlarge the star by 20% on hover */
}

/* 6.2 Login Page */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--background-light);
}

.login-page .form-container {
    width: 100%;
    max-width: 400px;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/*=======================*/
/* 7. DASHBOARD STYLES   */
/*=======================*/

/* 7.1 General Styles */
.dashboard {
    padding: var(--spacing);
}

.dashboard .nav-tabs {
    margin-bottom: var(--spacing);
}

.dashboard .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.dashboard .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
}

/* Common Styles for Dashboard Buttons */
.dashboard-container .fancy-btn {
    display: inline-block; /* Allows block-level properties without forcing a new line */
    border: 2px solid #0d6efd;
    background-color: transparent; /* Transparent background */
    color: #000000; /* Text color */
    cursor: default; /* Default cursor to indicate non-clickable */
    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
    user-select: none; /* Prevent text selection */
    border-radius: 0.25rem; /* Rounded corners */
    text-align: center; /* Centered text */
    padding: 0.5rem 1rem; /* Default padding */
    font-weight: normal; /* Normal text weight */
}

/* Larger Button for Dashboards */
.dashboard-container .dashboard-btn {
    font-size: 1.5rem; /* Larger font size (one step down) */
    padding: 0.75rem 1.5rem; /* Increased padding for larger size */
}

/* Smaller Button for NSN */
.dashboard-container .nsn-btn {
    font-size: 1rem; /* Smaller font size (two steps down) */
    padding: 0.5rem 1rem; /* Slightly smaller padding */
}

/* Hover Effects with 30% Opacity Background */
.dashboard-container .dashboard-btn:hover {
    background-color: rgba(54, 255, 54, 0.2); /* Green background */
    color: #000000; /* Black text on hover */
}

.dashboard-container .nsn-btn:hover {
    background-color: rgba(255, 247, 30, 0.2); /* Yellow background */
    color: #000000; /* Black text on hover */
}

/* 7.2 Employee Dashboard */
.employee-dashboard {
    background-color: #fff;
    padding: var(--spacing);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-dashboard__nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.employee-dashboard__nav-icon-container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    margin-bottom: 5px;
}

.employee-dashboard__nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* 7.3 Manager Dashboard */
.manager-dashboard {
    background-color: #fff;
    padding: var(--spacing);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.manager-dashboard__nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.manager-dashboard__nav-icon-container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    margin-bottom: 5px;
}

.manager-dashboard__nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* 7.4 General Manager Dashboard */
.gm-dashboard {
    background-color: #fff;
    padding: var(--spacing);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gm-dashboard__nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.gm-dashboard__nav-icon-container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    margin-bottom: 5px;
}

.gm-dashboard__nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Container to center the ticket section (heading + table) */
.ticket-section {
  text-align: center;
  margin-bottom: 20px;
}

/* Center the table within its section */
.ticket-section table {
  margin: 0 auto;
}

/* Style for the ticket headings */
.ticket-heading {
  display: inline-block;        /* shrink-wraps to its content */
  font-size: 1.7rem;            /* slightly reduced size */
  color: #000;                  /* default text: dark black */
  background-color: transparent;/* no background by default */
  padding: 4px 10px;            /* padding for a boxy look */
  border-radius: 4px;           /* rounded corners */
  border: 2px solid #0d6efd;    /* border */
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

/* Hover state: bright transparent orange background*/
.ticket-heading:hover {
  background-color: rgba(255, 140, 0, 0.1); /* bright orange, semi-transparent */
}

/*=======================*/
/* GM DASHBOARD REQUEST OFF STYLES */
/*=======================*/

/* Custom CSS to group Manage sub-tabs */
.manage-sub-tabs-container {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 0 0 5px 5px;
    margin-top: -1px; /* To overlap the border-top of sub-tabs */
}

.manage-sub-tabs {
    border-bottom: none;
}

.manage-sub-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    margin-right: 5px;
}

.manage-sub-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
    color: #0d6efd;
}

.manage-sub-tabs .nav-link:not(.active):hover {
    background-color: #e2e6ea;
}

.manage-sub-tabs .tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}

/* 7.5 Admin Dashboard */

/* Scoped CSS for "All NSNs" Cards Only */
#dashboard .all-nsns-card {
    background-color: rgba(255, 255, 255, 0.7); /* Default background color with 70% opacity */
    border: 1px solid rgba(0, 0, 0, 0.125); /* Light border to define edges */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow to lift card */
}

/* Make the titles inside cards bold */
#dashboard .all-nsns-card .card-body h6 {
    font-weight: bold;  /* Makes the titles bold */
}

/* Ensure the card text is not bold */
#dashboard .all-nsns-card .card-body p.card-text {
    font-weight: normal;  /* Ensures the text inside the card is not bold */
}

/* Specific transparent background colors for each card inside "All NSNs" */

/* Total Users (Yellow with 20% transparency) */
#dashboard .all-nsns-card.total-users {
    background-color: rgba(255, 255, 0, 0.05); /* Transparent Yellow */
}

/* Admins (Green with 20% transparency) */
#dashboard .all-nsns-card.admins {
    background-color: rgba(0, 128, 0, 0.05); /* Transparent Green */
}

/* GMs (Blue with 20% transparency) */
#dashboard .all-nsns-card.gms {
    background-color: rgba(0, 0, 255, 0.05); /* Transparent Blue */
}

/* Managers (Red with 20% transparency) */
#dashboard .all-nsns-card.managers {
    background-color: rgba(255, 0, 0, 0.05); /* Transparent Red */
}

/* Employees (Purple with 20% transparency) */
#dashboard .all-nsns-card.employees {
    background-color: rgba(128, 0, 128, 0.05); /* Transparent Purple */
}

/* Repair Team (Brown with 10% transparency) */
#dashboard .all-nsns-card.repair-team {
    background-color: rgba(139, 69, 19, 0.05); /* Transparent Brown */
}

/* Total Reviews (Green with 20% transparency) */
#dashboard .all-nsns-card.total-reviews {
    background-color: rgba(0, 128, 0, 0.05); /* Transparent Green */
}

/* Average Rating (Orange with 20% transparency) */
#dashboard .all-nsns-card.average-rating {
    background-color: rgba(255, 165, 0, 0.05); /* Transparent Orange */
}

/* Customer Complaints (Red with 35% transparency) */
#dashboard .all-nsns-card.customer-complaints {
    background-color: rgba(255, 0, 0, 0.05); /* Transparent Red */
}

/* Open Tickets (Green with 20% transparency) */
#dashboard .all-nsns-card.open-tickets {
    background-color: rgba(0, 128, 0, 0.05); /* Transparent Green */
}

/* Closed Tickets (Red with 10% transparency) */
#dashboard .all-nsns-card.closed-tickets {
    background-color: rgba(255, 0, 0, 0.05); /* Transparent Red */
}

/* Pending Vacation Requests (Orange with 20% transparency) */
#dashboard .all-nsns-card.pending-vacation-requests {
    background-color: rgba(255, 165, 0, 0.05); /* Transparent Orange */
}

/* Ensure text inside the cards remains visible */
#dashboard .all-nsns-card .card-text, #dashboard .all-nsns-card .card-title {
    color: #495057; /* Dark text for readability */
}

.admin-dashboard {
    background-color: #fff;
    padding: var(--spacing);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-dashboard__nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.admin-dashboard__nav-icon-container {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 50%;
    margin-bottom: 5px;
}

.admin-dashboard__nav-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Divider between Sections */
.divider {
    height: 2px;
    background-color: #dee2e6;
    margin: 2rem 0;
}

/* Table Column Widths */
.width-80 {
    width: 80px;
}

.width-100 {
    width: 100px;
}

.width-150 {
    width: 150px;
}

.width-160 {
    width: 160px;
}

.width-200 {
    width: 200px;
}

.width-250 {
    width: 250px;
}

.width-300 {
    width: 300px;
}

/* Table Column Specific Classes */
.rating-column {
    width: 160px;
    /* Additional styles if needed */
}

.title-column {
    width: 150px;
    /* Additional styles if needed */
}

.content-column {
    /* No fixed width to allow flexibility */
}

.date-column {
    width: 250px;
    /* Additional styles if needed */
}

.comm-table-title-column {
    width: 200px; /* Adjust as needed */
}

.comm-table-content-column {
    width: 300px; /* Adjust as needed */
}

.comm-table-details-content {
    padding: var(--spacing);
}

.comm-table-row {
    cursor: pointer;
}

.blackout-location-display {
    pointer-events: auto; /* Allow hover interactions */
    background-color: #ffffff; /* White background by default */
    border: 1px solid #0dcaf0 !important; /* Light blue border */
    color: #0dcaf0 !important; /* Force light blue text */
    border-radius: 0.25rem; /* Rounded corners */
    padding: 0.3rem 0.6rem; /* Padding for button-like appearance */
    font-size: 0.9rem; /* Slightly smaller text for elegance */
    transition: all 0.2s ease-in-out; /* Smooth hover effect */
    cursor: pointer; /* Pointer cursor for button-like feel */
}

.blackout-location-display:hover {
    background-color: #0dcaf0; /* Light gray background on hover */
    border-color: #0dcaf0; /* Keep the light blue border on hover */
    color: #000 !important;
}

/*=======================*/
/* 8. FORM STYLES        */
/*=======================*/
.form-control {
    margin-bottom: 1rem;
}

.form-label {
    font-weight: bold;
}

.form-select {
    margin-bottom: 1rem;
}

/*=======================*/
/* 9. TABLE STYLES       */
/*=======================*/
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table th {
    font-weight: bold;
}

.table-layout-fixed th {
    /* No additional styles; widths handled via classes */
}

/*=======================*/
/* 10. BUTTON STYLES     */
/*=======================*/
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

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

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary.active, .btn-outline-primary:active {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-outline-success {
    color: #28a745;
    border-color: #28a745;
}

.btn-outline-success.active, .btn-outline-success:active {
    background-color: #28a745;
    color: #fff;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger.active, .btn-outline-danger:active {
    background-color: #dc3545;
    color: #fff;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary.active, .btn-outline-secondary:active {
    background-color: #6c757d;
    color: #fff;
}

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

/*=======================*/
/* 11. ALERT AND MESSAGE STYLES */
/*=======================*/
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/*=======================*/
/* 12. CLICKABLE ROWS    */
/*=======================*/
.clickable {
    cursor: pointer;
}

.clickable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.clickable-row {
    cursor: pointer;
}

/*=======================*/
/* 13. MODAL STYLES      */
/*=======================*/
.modal-lg {
    max-width: 800px;
}

/*=======================*/
/* 14. ADMIN DASHBOARD TABLE ROW HOVER */
/*=======================*/

/* Apply transition to all table rows within admin-dashboard */
.admin-dashboard table.table-hover tbody tr {
    transition: background-color var(--transition);
    background-color: rgba(0, 0, 0, 0.05); /* Light gray for odd rows */
}

/* Define hover state with subtle transparent lime green */
.admin-dashboard table.table-hover tbody tr:hover {
    background-color: rgba(54, 255, 54, 0.1); /* Slightly transparent lime green */
}

/* Apply transition to clickable rows within admin-dashboard */
.admin-dashboard table.table-hover tbody tr.clickable-row {
    transition: background-color var(--transition);
}

/* Define hover state for clickable rows with subtle effect */
.admin-dashboard table.table-hover tbody tr.clickable-row:hover {
    background-color: rgba(54, 255, 54, 0.2); /* More visible hover effect for clickable rows */
}

/* Optional: Focus styles for accessibility */
.admin-dashboard table.table-hover tbody tr:focus-within {
    background-color: rgba(54, 255, 54, 0.1); /* Same subtle hover for focus state */
    outline: 2px solid #333; /* Example focus outline */
}

/* Events Calendar */

/* Calendar Container */
#eventsCalendar {
    max-width: 100%;
    width: 900px; /* Maximum width for larger screens */
    max-height: 80vh; /* Responsive height based on viewport */
    height: 80vh; /* Fallback for older browsers */
    margin: 40px auto;
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible; /* Allow inner elements to manage overflow */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

/* Time-grid Views (Week and Day) */
.fc-timegrid-container {
    max-height: 70vh; /* Adjust based on the container's height */
    height: 100%; /* Ensure it fills the parent container */
    overflow-y: auto; /* Enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Scrollbar Styling */
.fc-timegrid-container::-webkit-scrollbar {
    width: 8px;
}

.fc-timegrid-container::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 4px;
}

.fc-timegrid-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Grey out past dates */
.fc-past-date {
    background-color: #d3d3d3 !important;
    pointer-events: none;
    opacity: 0.6;
}

/* Highlight the current day */
.fc-current-day {
    background-color: #ffeb3b !important;
    border: 2px solid #fbc02d;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    #eventsCalendar {
        margin: 20px auto;
        height: 100vh; /* Full viewport height for better visibility */
    }

    .fc-timegrid-container {
        max-height: 60vh; /* Adjust for smaller screens */
    }

    .fc-toolbar-title {
        font-size: 1.2em;
    }

    /* Adjust font sizes for event titles and buttons */
    .fc-event {
        padding: 10px;
        font-size: 0.9em;
    }

    .fc-button {
        padding: 10px 15px;
        font-size: 1em;
    }
}

@media (orientation: landscape) {
    #eventsCalendar {
        max-height: 90vh; /* Adjust based on landscape layout */
    }

    .fc-timegrid-container {
        max-height: 80vh;
    }
}

#add_recurrence_summary,
#edit_recurrence_summary {
    font-style: italic;
}

/* Sets spacing constants so the hamburger sits just left of the theme tools with a tiny gap */
:root { --tt-btn: 2.25rem; --tt-gap: .5rem; --tt-right: .75rem; --tt-sep: .375rem; }

/* Centers the hamburger glyph box so the bars aren't shoved to the right */
.navbar .navbar-toggler-icon { display: block; width: 1.5rem; height: 1.5rem; margin: 0 auto; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }

/* Uses dark bars in light theme so the icon is visible */
html:not([data-theme="dark"]) .navbar .navbar-toggler-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox%3D%220 0 30 30%22 xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath stroke%3D%22rgba(17,24,39,0.9)%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 d%3D%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E'); }

/* Uses light bars in dark theme so the icon is readable on dark backgrounds */
html[data-theme="dark"] .navbar .navbar-toggler-icon { background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox%3D%220 0 30 30%22 xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath stroke%3D%22rgba(255,255,255,0.92)%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 d%3D%22M4 7h22M4 15h22M4 23h22%22/%3E%3C/svg%3E'); }

/* Softens the toggler border in dark theme for better affordance */
html[data-theme="dark"] .navbar .navbar-toggler { border-color: rgba(255,255,255,0.35); }

@media (max-width: 991.98px) {
  /* Reserves right-side space so content never sits under the fixed icons */
  .navbar { padding-right: calc(var(--tt-right) + (var(--tt-btn) * 2) + var(--tt-gap) + var(--tt-sep)); min-height: calc(var(--tt-right) + var(--tt-btn) + var(--tt-right)); z-index: 1100; }

  /* Pins the hamburger exactly to the left of the theme tools with a slight gap */
  .navbar .navbar-toggler { position: fixed; top: var(--tt-right); right: calc(var(--tt-right) + (var(--tt-btn) * 2) + var(--tt-gap) + var(--tt-sep)); width: var(--tt-btn); height: var(--tt-btn); padding: 0; margin: 0; display: grid; place-items: center; box-sizing: content-box; z-index: 2147483646; }

  /* Leaves brand and collapse in normal flow to avoid reordering quirks */
  .navbar .navbar-brand { order: 0; } .navbar .navbar-collapse { order: 0; }
}

/* Makes the external "View Ticket" link a larger, square hit area across all dashboards; everything inside this box behaves as the link. */
a.btn.btn-link[href*="/ticket/view_ticket/"] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; line-height: 1; border-radius: 0.25rem; }

/* Optional: slightly bump the external-link icon size inside that button for readability. */
a.btn.btn-link[href*="/ticket/view_ticket/"] i.fas.fa-external-link-alt { font-size: 1.05rem; }

/* Comment: Makes Model/Serial selector buttons pill-like and vertically centered in both light and dark themes. */
.unit-device-btn.btn-sm { display:inline-grid; place-items:center; text-align:left; border-radius:.5rem; }


/* ======================= Ticket Submission ======================= */

/* Comment: Hides elements that are gated by the ticket submission JS flow and only shown when prerequisites are met. */
.hidden{display:none!important;}

/* Comment: Adds consistent spacing for the dynamically injected Headset subtype selector group below the device selector. */
#headset-sub-group{margin-top:0.75rem;}

/* Comment: Adds spacing for the optional device search input shown above the device picker UI when enabled. */
#device-search-group{margin-top:0.5rem;}

/* Comment: Styles the A–Z index rail container used to jump within the device list. */
#device_az_index{display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;}

/* Comment: Styles each A–Z index link as a compact tappable target for fast navigation in the device list. */
#device_az_index a{display:inline-block;padding:0.15rem 0.35rem;border-radius:0.25rem;text-decoration:none;cursor:pointer;user-select:none;}

/* Comment: Provides a visible hover/focus affordance for A–Z index links without changing layout. */
#device_az_index a:hover,#device_az_index a:focus{text-decoration:underline;outline:none;}

/* Comment: Provides a scrollable container for the alphabetical device list so long device sets remain usable. */
#device_list{max-height:320px;overflow:auto;border:1px solid rgba(0,0,0,0.15);border-radius:0.35rem;padding:0.5rem;}

/* Comment: Styles each device row as a button-like list item to support click/tap selection when the picker is enabled. */
#device_list .device-item{display:block;width:100%;text-align:left;padding:0.45rem 0.6rem;margin:0;border:0;background:transparent;border-radius:0.3rem;cursor:pointer;}

/* Comment: Highlights device rows on hover/focus to make selection clear in the device picker UI. */
#device_list .device-item:hover,#device_list .device-item:focus{background:rgba(0,0,0,0.06);outline:none;}

/* Comment: Styles A–Z section headers inside the device list to make alphabetical grouping scannable. */
#device_list .device-letter{position:sticky;top:0;padding:0.35rem 0.1rem;font-weight:600;background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(0,0,0,0.08);}

/* Comment: Adds subtle separation between device items to improve readability without heavy borders. */
#device_list .device-item + .device-item{margin-top:0.15rem;}