/* Global reset - Resets margin, padding, and sets box-sizing for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and layout styles - Sets font, background gradient, and padding for the page */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 20px;
}

/* Container - Centers the content with max width */
.container {
    max-width: 1600px;
    margin: 0 auto;
}

/* Header styles - Layout for the top header section */
header {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: -4.5px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

/* Header main - Flex container for title and status items on the same row */
.header-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
}

/* Main heading - Styles for the h1 title */
h1 {
    font-size: 26px;
    color: #2c3e50;
    margin: 0;
    letter-spacing: -0.5px;
}

/* IPC Circle Logo - Pure CSS corporate branding */
.ipc-logo {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #c0007b 0%, #761899 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    margin-right: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    user-select: none;
}

/* Auth section - Layout for authentication buttons and status */
.auth-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Auth status - Base styles for login/logout status badges */
.auth-status {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

/* Auth status logged out - Red background for logged out state */
.auth-status.logged-out {
    background: #f8d7da;
    color: #721c24;
}

/* Auth status logged in - Green background for logged in state */
.auth-status.logged-in {
    background: #d4edda;
    color: #155724;
}

/* Button base styles - Default button appearance and behavior */
button {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

/* Primary button - Blue button for main actions */
.btn-primary {
    background: #3498db;
    color: white;
}

/* Primary button hover - Darker blue on hover */
.btn-primary:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

/* Primary button disabled - Gray for disabled state */
.btn-primary:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

/* Danger button - Red button for destructive actions */
.btn-danger {
    background: #e74c3c;
    color: white;
}

/* Danger button hover - Darker red on hover */
.btn-danger:hover {
    background: #c0392b;
}

/* Secondary button - Gray button for secondary actions */
.btn-secondary {
    background: #6c7a89;
    color: white;
}

/* Secondary button hover - Darker gray on hover */
.btn-secondary:hover {
    background: #5d6975;
}

/* Time info - Flex container for time display elements */
.time-info {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 2px 8px;
    border-radius: 8px;
    gap: 0;
    font-size: 13px;
    color: #4a6078;
    border: 1px solid #e1e8f0;
}

/* Time badge - Now a segment within the unified status bar */
.time-badge {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Divider for unified status bar */
.time-badge:not(:last-child) {
    border-right: 1px solid #e1e8f0;
}

/* Timezone badge - Container for timezone toggle */
.timezone-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Timezone label - Harmonized with the rest of the status bar */
.tz-label {
    font-size: 13px;
    font-weight: 500;
    color: #4a6078;
    min-width: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Timezone badge break switch slider - Custom slider for timezone toggle */
.timezone-badge .break-switch-slider {
    background: #d5dbe3;
}

/* Timezone badge checked break switch - Active state for timezone toggle */
.timezone-badge .break-switch-input:checked+.break-switch-slider {
    background: #8ea0b4;
}

/* View tabs - Segmented Control with custom white border */
.view-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px;
    border-radius: 10px;
    border: 4px solid white;
}

/* View tab button - Clean and compact */
.view-tab-btn {
    padding: 6px 16px;
    border: none;
    background: transparent;
    color: #5d6d7e;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect for tabs */
.view-tab-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.03);
    color: #2c3e50;
}

/* Active view tab button - "Elevated" look */
.view-tab-btn.active {
    background: white;
    color: #3498db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
}

/* Hidden view panel - Hides inactive panels */
.view-panel.hidden {
    display: none;
}

/* Main content grid - Layout for main content areas */
.main-content {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* Assign ticket card - Max width for ticket assignment card */
.assign-ticket-card {
    max-width: 560px;
}

/* Media query for tablets - Adjusts grid for medium screens */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    }

    .assign-ticket-card {
        max-width: 520px;
    }
}

/* Media query for mobile - Single column layout for small screens */
@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .assign-ticket-card {
        max-width: none;
    }
}

/* Card base styles - White cards with shadow */
.card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Card heading - Blue underline for card titles */
.card h2 {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* Form group - Spacing for form elements */
.form-group {
    margin-bottom: 15px;
}

/* Label styles - Bold labels for inputs */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #2c3e50;
    font-size: 14px;
}

/* Text input base - Styled text inputs */
input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #bdc3c7;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

/* Text input focus - Blue border and shadow on focus */
input[type="text"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Text input disabled - Gray background for disabled inputs */
input[type="text"]:disabled {
    background: #ecf0f1;
    cursor: not-allowed;
}

/* Button group - Grid layout for action buttons */
.button-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}

/* Action button in group - Base styles for buttons in group */
.button-group .action-btn {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    line-height: 1.1;
}

/* Action button hover - Slight lift on hover */
.button-group .action-btn:hover {
    transform: translateY(-1px);
}

/* Mail action button - Gray gradient for mail actions */
.btn-mail-action {
    background: linear-gradient(180deg, #6f7f92 0%, #5e6f82 100%);
    color: white;
}

/* Mail action button hover - Lighter gray on hover */
.btn-mail-action:hover {
    background: linear-gradient(180deg, #657587 0%, #556678 100%);
}

/* Reset action button - Red gradient for reset actions */
.btn-reset-action {
    background: linear-gradient(180deg, #f06a57 0%, #e74c3c 100%);
    color: white;
}

/* Reset action button hover - Lighter red on hover */
.btn-reset-action:hover {
    background: linear-gradient(180deg, #e95d49 0%, #d84334 100%);
}

/* Next person card - Highlighted card for next person assignment */
.next-person {
    background: #f0f8ff;
    border: 2px solid #3498db;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Next person label - Small uppercase label */
.next-person-label {
    font-size: 12px;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* Next person name - Large blue name display */
.next-person-name {
    font-size: 24px;
    font-weight: 700;
    color: #3498db;
}

/* Next person role - Small gray role text */
.next-person-role {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 5px;
}

/* Balance info - Yellow warning for balance information */
.balance-info {
    font-size: 11px;
    color: #e67e22;
    margin-top: 8px;
    padding: 8px;
    background: #fff3cd;
    border-radius: 4px;
    font-weight: 600;
}

/* Rules info - Blue info box for rules */
.rules-info {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #35506b;
    background: #eef6ff;
    border: 1px solid #cfe4ff;
    border-radius: 6px;
    padding: 8px 10px;
}

/* Status bar - Gray bar for status messages */
.status-bar {
    background: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #2c3e50;
}

/* Sync status - Blue status for sync information */
.sync-status {
    font-size: 12px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    background: #e8f4f8;
    color: #0c5f8b;
}

/* Loading spinner - Animated loading indicator */
.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spin animation - Rotates the loading spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Team Grid - Force side-by-side turn columns */
.team-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
}

/* Team columns children - Prevents shrinking */
.team-columns>* {
    min-width: 0;
}

/* Team column - Bordered container for each shift */
.team-column {
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 15px;
    background: #f8fbfd;
    min-height: 400px;
}

/* Team column heading - Blue underline for column titles */
.team-column h3 {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
}

/* Team list - Vertical list of team members */
.team-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Team member item - Draggable member card */
.team-member-item {
    background: white;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    cursor: move;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Team member item hover - Shadow and lift on hover */
.team-member-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Dragging team member - Semi-transparent during drag */
.team-member-item.dragging {
    opacity: 0.5;
    background: #ecf0f1;
}

/* On break team member - Yellow background for break */
.team-member-item.on-break {
    opacity: 0.6;
    background: #fff3cd;
}

/* NC locked team member - Orange border for locked NC */
.team-member-item.nc-locked {
    border: 2px solid #e67e22;
}

/* NC slot team member - Light orange background for NC slot */
.team-member-item.nc-slot {
    background: #fff7ec;
}

/* Member drag handle - Grab cursor for drag indicator */
.member-drag-handle {
    cursor: grab;
    color: #95a5a6;
    font-size: 18px;
    user-select: none;
}

/* Active drag handle - Grabbing cursor when dragging */
.member-drag-handle:active {
    cursor: grabbing;
}

/* Member info - Flex container for member details */
.member-info {
    flex: 1;
    min-width: 0;
}

/* Member name - Bold name with ellipsis overflow */
.member-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Member name row - Flex row for name and badges */
.member-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    margin-bottom: 2px;
    min-width: 0;
}

/* Member tickets - Small text for ticket count */
.member-tickets {
    font-size: 11px;
    color: #4f6478;
    margin-top: 3px;
    font-weight: 600;
}

/* Member controls - Container for control buttons */
.member-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* NC badge - Orange badge for NC status */
/* NC badge - Premium Corner Tag Style */
.nc-badge {
    position: absolute;
    background: #f1c40f;
    color: #7f6000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
    top: -8px;
    left: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 10;
    border: 1px solid rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    text-transform: uppercase;
}

/* Placeholder NC badge - Hidden placeholder */
.nc-badge.placeholder {
    visibility: hidden;
}

/* Off label - Small label for on/off states */
.off-label {
    font-size: 10px;
    font-weight: 700;
    color: #6c7a89;
    letter-spacing: 0.3px;
}

/* On state off label - Green for on */
.off-label.on {
    color: #2e7d32;
}

/* Off state off label - Brown for off */
.off-label.off {
    color: #8d6e63;
}

/* Break switch - Custom toggle switch, ensured vertical alignment */
.break-switch {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    width: 34px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    line-height: 1;
}

/* Break switch input - Hidden checkbox input */
.break-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Break switch slider - Visible slider background */
.break-switch-slider {
    position: absolute;
    inset: 0;
    background: #d0d7de;
    border-radius: 999px;
    transition: background 0.2s ease;
}

/* Break switch slider before - Slider knob */
.break-switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

/* Checked break switch slider - Green background when on */
.break-switch-input:checked+.break-switch-slider {
    background: #34c759;
}

/* Checked break switch slider before - Moves knob to right */
.break-switch-input:checked+.break-switch-slider::before {
    transform: translateX(14px);
}

/* Checkbox label - Small label for checkbox */
.checkbox-label {
    font-size: 10px;
    color: #7f8c8d;
    white-space: nowrap;
    cursor: pointer;
}

/* Tickets list - Scrollable list of tickets */
.tickets-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Ticket item - Individual ticket card */
.ticket-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    border-left: 4px solid #3498db;
}

/* Ticket number - Bold ticket number */
.ticket-number {
    font-weight: 700;
    color: #2c3e50;
    font-size: 14px;
}

/* Ticket UCN - Gray UCN text */
.ticket-ucn {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 3px;
}

/* Ticket assigned - Green assigned status */
.ticket-assigned {
    font-size: 12px;
    color: #27ae60;
    margin-top: 3px;
    font-weight: 600;
}

/* Empty state - Centered message for empty lists */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #95a5a6;
}

/* Empty state icon - Large icon for empty state */
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

/* Tickets table wrapper - Scrollable table container */
.tickets-table-wrapper {
    max-height: calc(100vh - 360px);
    overflow: auto;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
}

/* Logs table wrapper - Scrollable logs container */
.logs-table-wrapper {
    max-height: calc(100vh - 280px);
    overflow: auto;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
}

/* Table filters - Horizontal filter bar */
.table-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* Table filters children - Prevents shrinking */
.table-filters>* {
    flex: 0 0 auto;
}

/* Filter shift - Fixed width for shift filter */
.table-filters #filter-shift {
    width: 140px;
}

/* Filter name, customer, UCN - Fixed widths for text filters */
.table-filters #filter-name,
.table-filters #filter-customer,
.table-filters #filter-ucn {
    width: 190px;
}

/* Tickets table - Main table styles */
.tickets-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 940px;
    background: white;
}

/* Table headers and cells - Base padding and colors */
.tickets-table th,
.tickets-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf2f7;
    font-size: 12px;
    text-align: left;
    color: #2c3e50;
    white-space: nowrap;
}

/* Table headers - Sticky headers with background */
.tickets-table th {
    position: sticky;
    top: 0;
    background: #f5f9fd;
    font-weight: 700;
    z-index: 1;
}

/* Odd table rows - Alternating row colors */
.tickets-table tbody tr:nth-child(odd) {
    background: #f8fbff;
}

/* First cell in rows - Blue left border */
.tickets-table tbody tr td:first-child {
    border-left: 4px solid #3498db;
}

/* Table input and select - Styled form elements in table */
.table-input,
.table-select {
    width: 100%;
    border: 1px solid #cdd8e3;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: #2c3e50;
    background: white;
}

/* Focused table input/select - Blue border and shadow */
.table-input:focus,
.table-select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}

/* Saved cell - Green border for saved changes */
.cell-saved {
    border-color: #27ae60 !important;
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.18) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Notes cell - Minimum width for notes column */
.notes-cell {
    min-width: 210px;
}

/* Notes custom input - Margin for custom inputs in notes */
.notes-custom-input {
    margin-top: 6px;
}

/* Filter clear button - Button to clear filters */
.filter-clear-btn {
    padding: 8px 12px;
    border: 1px solid #bcd1e6;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
    color: #35506b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* Filter clear button hover - Lighter background on hover */
.filter-clear-btn:hover {
    background: linear-gradient(180deg, #eff6fe 0%, #e2ecf7 100%);
}

/* Table filters input/select - Specific height for filter inputs */
.table-filters .table-input,
.table-filters .table-select {
    height: 34px;
    border-radius: 8px;
}