/* ============================================================
   Schedax - Enterprise Premium UI Stylesheet
   Version: 1.0.0
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ── */
:root {
    /* Brand Colors */
    --ta-navy: #1e3a5f;
    --ta-navy-dark: #0f2544;
    --ta-royal: #2563eb;
    --ta-royal-dark: #1d4ed8;
    --ta-sky: #3b82f6;
    --ta-indigo: #4f46e5;

    /* Neutrals */
    --ta-white: #ffffff;
    --ta-platinum: #f1f5f9;
    --ta-surface: #f8fafc;
    --ta-border: #e2e8f0;
    --ta-border-strong: #cbd5e1;
    --ta-text: #0f172a;
    --ta-text-secondary: #475569;
    --ta-muted: #94a3b8;

    /* Semantic Colors */
    --ta-success: #10b981;
    --ta-success-bg: #d1fae5;
    --ta-success-text: #065f46;
    --ta-warning: #f59e0b;
    --ta-warning-bg: #fef3c7;
    --ta-warning-text: #92400e;
    --ta-danger: #ef4444;
    --ta-danger-bg: #fee2e2;
    --ta-danger-text: #991b1b;
    --ta-info: #3b82f6;
    --ta-info-bg: #dbeafe;
    --ta-info-text: #1e40af;

    /* Spacing */
    --ta-sidebar-w: 260px;
    --ta-header-h: 64px;
    --ta-radius-sm: 8px;
    --ta-radius: 12px;
    --ta-radius-lg: 16px;
    --ta-radius-xl: 24px;

    /* Shadows */
    --ta-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ta-shadow: 0 1px 4px rgba(0,0,0,0.08);
    --ta-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --ta-shadow-lg: 0 10px 40px rgba(0,0,0,0.14);
    --ta-shadow-xl: 0 25px 60px rgba(0,0,0,0.18);

    /* Animation */
    --ta-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode ──
   Intentionally NOT flipping colors: the pages hardcode light backgrounds and
   dark text, so a partial dark-mode flip made overlays unreadable. The app is
   light-themed; keep it consistent regardless of the OS color scheme. */

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ta-text);
    background: var(--ta-surface);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--ta-text);
}

/* ── PrimeFaces Overrides ── */

/* DataTable */
.ui-datatable .ui-datatable-header {
    background: var(--ta-white) !important;
    border: none !important;
    border-bottom: 1px solid var(--ta-border) !important;
    padding: 16px 24px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--ta-text) !important;
}

.ui-datatable thead th {
    background: var(--ta-surface) !important;
    border-bottom: 1px solid var(--ta-border) !important;
    border-top: none !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--ta-muted) !important;
}

.ui-datatable tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--ta-border) !important;
    border-top: none !important;
    font-size: 14px !important;
    color: var(--ta-text) !important;
}

.ui-datatable tbody tr:hover td {
    background: var(--ta-surface) !important;
}

.ui-datatable .ui-datatable-even td { background: var(--ta-white) !important; }
.ui-datatable .ui-datatable-odd td { background: var(--ta-white) !important; }

/* Paginator */
.ui-paginator {
    background: var(--ta-white) !important;
    border: none !important;
    border-top: 1px solid var(--ta-border) !important;
    padding: 12px 16px !important;
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--ta-royal) !important;
    color: white !important;
    border-radius: 8px !important;
    border: none !important;
}

/* InputText */
.ui-inputtext {
    border: 1.5px solid var(--ta-border) !important;
    border-radius: var(--ta-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--ta-text) !important;
    background: var(--ta-white) !important;
    transition: var(--ta-transition) !important;
    font-family: inherit !important;
}

.ui-inputtext:focus {
    border-color: var(--ta-royal) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;
    outline: none !important;
}

/* Buttons */
.ui-button {
    border-radius: var(--ta-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: var(--ta-transition) !important;
    cursor: pointer !important;
}

.ui-button-primary, .ui-button.ui-state-default {
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-royal)) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
}

.ui-button-primary:hover {
    box-shadow: 0 4px 16px rgba(37,99,235,0.40) !important;
    transform: translateY(-1px) !important;
}

/* Dialog */
.ui-dialog {
    border-radius: var(--ta-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--ta-shadow-xl) !important;
    border: none !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-royal)) !important;
    color: white !important;
    padding: 16px 24px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: rgba(255,255,255,0.7) !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    color: white !important;
    background: rgba(255,255,255,0.1) !important;
}

/* SelectOneMenu */
.ui-selectonemenu {
    border: 1.5px solid var(--ta-border) !important;
    border-radius: var(--ta-radius-sm) !important;
    background: var(--ta-white) !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    background: transparent !important;
    border: none !important;
    color: var(--ta-muted) !important;
}

.ui-selectonemenu-panel {
    border-radius: var(--ta-radius-sm) !important;
    box-shadow: var(--ta-shadow-md) !important;
    border: 1px solid var(--ta-border) !important;
}

.ui-selectonemenu-item.ui-state-highlight {
    background: var(--ta-royal) !important;
    color: white !important;
}

/* Growl / Toast */
.ui-growl {
    top: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
}

/* Severity class lands on .ui-growl-item-container as "ui-growl-<severity>"
   (confirmed from org.primefaces:primefaces components.js Growl widget —
   renderMessage() builds class="...ui-growl-" + severity, NOT "ui-growl-message-<severity>").
   Text color is repeated on the descendant selector because .ui-growl-title / the
   detail <p> sit two levels deep and some ui-state-highlight base rules can win
   the cascade on specificity ties otherwise. */
.ui-growl-item-container {
    border-radius: var(--ta-radius) !important;
    box-shadow: var(--ta-shadow-md) !important;
    border: none !important;
    opacity: 1 !important;
}

.ui-growl-item-container.ui-growl-info {
    background: #eff6ff !important;
    border-left: 4px solid var(--ta-royal) !important;
}
.ui-growl-item-container.ui-growl-info,
.ui-growl-item-container.ui-growl-info .ui-growl-title,
.ui-growl-item-container.ui-growl-info .ui-growl-message p {
    color: var(--ta-info-text) !important;
}

.ui-growl-item-container.ui-growl-error {
    background: var(--ta-danger-bg) !important;
    border-left: 4px solid var(--ta-danger) !important;
}
.ui-growl-item-container.ui-growl-error,
.ui-growl-item-container.ui-growl-error .ui-growl-title,
.ui-growl-item-container.ui-growl-error .ui-growl-message p {
    color: var(--ta-danger-text) !important;
}

.ui-growl-item-container.ui-growl-warn {
    background: var(--ta-warning-bg) !important;
    border-left: 4px solid var(--ta-warning) !important;
}
.ui-growl-item-container.ui-growl-warn,
.ui-growl-item-container.ui-growl-warn .ui-growl-title,
.ui-growl-item-container.ui-growl-warn .ui-growl-message p {
    color: var(--ta-warning-text) !important;
}

/* DatePicker */
.ui-datepicker {
    border-radius: var(--ta-radius) !important;
    box-shadow: var(--ta-shadow-md) !important;
    border: 1px solid var(--ta-border) !important;
}

.ui-datepicker .ui-datepicker-header {
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-royal)) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ta-radius) var(--ta-radius) 0 0 !important;
}

.ui-datepicker td span.ui-state-active {
    background: var(--ta-royal) !important;
    color: white !important;
    border-radius: 50% !important;
}

/* Checkbox — DataTable row-selection checkboxes only ever had a ".ui-state-active"
   (checked) override here, nothing for the default unchecked box, so its appearance came
   entirely from whatever the base theme happened to provide. On the Approval Center table
   this showed up as invisible checkboxes: present in the DOM, selection worked, zero visual
   affordance -- the same class of bug already seen with p:toggleSwitch. Style both states
   explicitly instead of leaving one to the base theme. */
.ui-chkbox-box {
    border: 1.5px solid var(--ta-border) !important;
    background: var(--ta-white) !important;
    border-radius: 4px !important;
    width: 20px !important;
    height: 20px !important;
}

.ui-chkbox-box .ui-chkbox-icon {
    color: white !important;
}

.ui-chkbox-box.ui-state-active {
    background: var(--ta-royal) !important;
    border-color: var(--ta-royal) !important;
}

/* Panel */
.ui-panel {
    border-radius: var(--ta-radius-lg) !important;
    border: 1px solid var(--ta-border) !important;
    box-shadow: var(--ta-shadow) !important;
}

.ui-panel .ui-panel-titlebar {
    background: var(--ta-white) !important;
    border-bottom: 1px solid var(--ta-border) !important;
    border-radius: var(--ta-radius-lg) var(--ta-radius-lg) 0 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ta-text) !important;
    padding: 16px 20px !important;
}

/* ── Skeleton Loaders ── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shine 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Utility Classes ── */
.ta-flex { display: flex; }
.ta-flex-center { display: flex; align-items: center; justify-content: center; }
.ta-gap-8 { gap: 8px; }
.ta-gap-12 { gap: 12px; }
.ta-gap-16 { gap: 16px; }
.ta-gap-24 { gap: 24px; }
.ta-mb-16 { margin-bottom: 16px; }
.ta-mb-24 { margin-bottom: 24px; }
.ta-text-sm { font-size: 13px; }
.ta-text-muted { color: var(--ta-muted); }
.ta-font-bold { font-weight: 700; }
.ta-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-slide-in { animation: slideInLeft 0.3s ease forwards; }

/* ============================================================
   Visual refresh — app-wide polish
   ============================================================ */

/* ── Custom scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: #c7d0dd transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* Sidebar uses a light-on-dark scrollbar */
.ta-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    background-clip: content-box;
}

/* ── Primary / outlined buttons (used across admin pages) ── */
.ui-button.ta-btn-primary {
    background: linear-gradient(135deg, var(--ta-navy), var(--ta-royal)) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(37,99,235,0.30) !important;
    letter-spacing: 0.2px !important;
}

.ui-button.ta-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(37,99,235,0.42) !important;
}

.ui-button.ta-btn-primary:active { transform: translateY(0) !important; }

.ui-button.p-button-outlined,
.ui-button.ui-button-outlined {
    background: var(--ta-white) !important;
    border: 1.5px solid var(--ta-border) !important;
    color: var(--ta-text-secondary) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.ui-button.p-button-outlined:hover,
.ui-button.ui-button-outlined:hover {
    border-color: var(--ta-royal) !important;
    color: var(--ta-royal) !important;
    background: rgba(37,99,235,0.04) !important;
}

/* ── Buttons: unified rounding + smooth press ── */
.ui-button { border-radius: 10px !important; }
.ui-button:active { transform: translateY(0) !important; }

/* ── DataTable polish: smooth row hover + soft borders ── */
.ui-datatable tbody td { transition: background 0.15s ease !important; }
.ui-datatable tbody tr:hover td { background: #f6f9ff !important; }
.ui-datatable thead th:first-child { border-top-left-radius: 12px; }
.ui-datatable thead th:last-child { border-top-right-radius: 12px; }

/* ── Inputs: a touch more padding + smoother focus ── */
.ui-inputtext { border-radius: 10px !important; }
.ui-selectonemenu { border-radius: 10px !important; transition: var(--ta-transition) !important; }
.ui-selectonemenu.ui-state-focus,
.ui-selectonemenu:focus-within {
    border-color: var(--ta-royal) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10) !important;
}

/* ── Badges: subtle depth ── */
.badge { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03); }

/* ── Card title accent bar ── */
.ta-card-title { position: relative; padding-left: 14px; }
.ta-card-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--ta-royal), var(--ta-navy));
}

/* ── Dialog content breathing room ── */
.ui-dialog .ui-dialog-content { padding: 24px !important; }

/* ============================================================
   Opaque overlays — fix see-through dropdowns, dialogs & panels
   The PrimeFaces theme is "none", so overlay panels ship without a
   background color and render transparent (page text bleeds through).
   Force solid backgrounds on every floating surface. Hardcoded #fff
   (not a var) so it stays opaque regardless of color scheme.
   ============================================================ */

/* Modal backdrop dims the page behind dialogs */
.ui-widget-overlay,
.ui-dialog-mask {
    background: rgba(15, 23, 42, 0.50) !important;
}

/* Dialogs (incl. confirm dialogs) */
.ui-dialog,
.ui-confirm-dialog {
    background: #ffffff !important;
}
.ui-dialog .ui-dialog-content {
    background: #ffffff !important;
    color: var(--ta-text) !important;
}
.ui-dialog .ui-dialog-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--ta-border) !important;
    padding: 14px 24px !important;
}

/* Dropdown / select / autocomplete / multiselect panels */
.ui-selectonemenu-panel,
.ui-selectonemenu-items-wrapper,
.ui-selectcheckboxmenu-panel,
.ui-multiselect-panel,
.ui-autocomplete-panel,
.ui-overlaypanel,
.ui-overlaypanel-content,
.ui-datepicker:not(.ui-datepicker-inline),
.ui-menu,
.ui-contextmenu,
.ui-tieredmenu,
.ui-tieredmenu .ui-menu-list {
    background: #ffffff !important;
    box-shadow: var(--ta-shadow-lg) !important;
    border: 1px solid var(--ta-border) !important;
    backdrop-filter: none !important;
}

/* Items inside those panels */
.ui-selectonemenu-item,
.ui-autocomplete-item,
.ui-multiselect-item,
.ui-menuitem-link,
.ui-menu .ui-menuitem {
    background: #ffffff !important;
    color: var(--ta-text) !important;
    padding: 9px 14px !important;
}
.ui-selectonemenu-item:hover,
.ui-autocomplete-item:hover,
.ui-multiselect-item:hover,
.ui-menuitem-link:hover {
    background: var(--ta-surface) !important;
    color: var(--ta-navy) !important;
}
.ui-selectonemenu-item.ui-state-highlight,
.ui-autocomplete-item.ui-state-highlight,
.ui-multiselect-item.ui-state-highlight {
    background: var(--ta-royal) !important;
    color: #ffffff !important;
}

/* Filter box inside dropdown panels */
.ui-selectonemenu-filter-container,
.ui-multiselect-filter-container {
    background: #ffffff !important;
    padding: 8px !important;
    border-bottom: 1px solid var(--ta-border) !important;
}
.ui-selectonemenu-filter-container .ui-inputfield,
.ui-multiselect-filter-container .ui-inputfield {
    width: 100% !important;
}

/* Date picker calendar surface stays white (header keeps its gradient) */
.ui-datepicker,
.ui-datepicker .ui-datepicker-calendar,
.ui-datepicker .ui-datepicker-group {
    background: #ffffff !important;
}

/* Tooltips: solid dark for contrast */
.ui-tooltip .ui-tooltip-text {
    background: #1e293b !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    box-shadow: var(--ta-shadow-md) !important;
}

/* ── Responsive ── */
@media print {
    .ta-sidebar, .ta-header { display: none !important; }
    .ta-main { margin-left: 0 !important; }
    .ta-content { padding: 0 !important; }
}

/* ── PrimeFaces dialogs: constrain to viewport on small screens ── */
@media (max-width: 680px) {
    .ui-dialog,
    .p-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
    }
    /* Reset the JSF-rendered inline style that sets a fixed pixel width */
    .ui-dialog .ui-dialog-content,
    .p-dialog .p-dialog-content {
        max-height: 80vh;
        overflow-y: auto;
    }
    /* Two-column form rows collapse to one */
    .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── DataTable horizontal scroll on small screens ── */
.ui-datatable-tablewrapper,
.p-datatable-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── PrimeFlex grid columns: allow shrinking below content's natural width ──
   Flex items default to min-width:auto, not 0 -- so a wide child (e.g. a DataTable held to
   a 540px min-width on mobile, below) stretches the whole column, and therefore the page,
   wider than the viewport instead of scrolling within its own contained wrapper. Without
   this, every page that puts a p:dataTable inside a PrimeFlex .grid column (Time Clock,
   Punch History, etc.) is one wide table away from the same horizontal-overflow bug. */
.grid > [class*="col-"] {
    min-width: 0;
}

/* ── Tables: allow cells to wrap on mobile ── */
@media (max-width: 768px) {
    .ui-datatable table,
    .p-datatable table {
        min-width: 540px;
    }
}

/* ── Buttons: minimum touch target ── */
.p-button,
.ui-button,
.ta-btn-primary,
button {
    min-height: 36px;
}

/* ── Input fields: prevent iOS zoom (font-size must be >= 16px on focus) ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select,
    .ui-inputtext,
    .p-inputtext {
        font-size: 16px !important;
    }
}

/* ── Tab bars: scroll horizontally instead of squeezing/wrapping labels
   when there are more tabs than a phone screen can show at once ── */
@media (max-width: 768px) {
    .ui-tabs-nav,
    .p-tabview-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .ui-tabs-nav > li,
    .p-tabview-nav > li {
        flex: 0 0 auto !important;
    }
}