/* PeopleFlow theme layer - one calm, consistent look on top of the page styles.
   Loaded last. Tailwind's CDN injects its own styles at run time, so rules that must beat a
   utility class use !important. Keep this file the single place for look-and-feel changes. */

:root {
    --ui-bg: #F5F6F8;
    --ui-card: #FFFFFF;
    --ui-line: #E4E7EC;
    --ui-line-strong: #D0D5DD;
    --ui-text: #101828;
    --ui-soft: #667085;
    --ui-faint: #667085;
    --ui-accent: #4F46E5;
    --ui-accent-hover: #4338CA;
    --ui-accent-soft: #EEF2FF;
    --ui-radius: 12px;
    --ui-radius-sm: 8px;
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ui-side: #0B1220;
    --ui-side-line: rgba(148, 163, 184, 0.12);
}

/* ── Base type ── */
html body { background: var(--ui-bg) !important; color: var(--ui-text); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
html body .text-textmain { color: var(--ui-text) !important; }
html body .text-textsoft { color: var(--ui-soft) !important; }
html body .bg-appbg { background-color: #F9FAFB !important; }
html body .border-stroke { border-color: var(--ui-line) !important; }

/* Small uppercase labels: quieter, less spaced out. */
#mainContent .uppercase { letter-spacing: 0.05em !important; }
/* Only labels that use the plain soft colour get quieter; coloured labels (tiles, chips) keep their own colour. */
#mainContent p.uppercase.text-textsoft, #mainContent span.uppercase.text-textsoft { color: var(--ui-faint) !important; }
#mainContent .text-\[10px\].uppercase, #mainContent .text-\[11px\].uppercase, #mainContent .text-xs.uppercase { font-size: 11px !important; font-weight: 600 !important; }

/* Headings: smaller, tighter. */
#mainContent h2 { font-size: 20px !important; line-height: 1.3 !important; letter-spacing: -0.01em; }
#mainContent h3 { font-size: 17px !important; line-height: 1.35 !important; letter-spacing: -0.005em; font-weight: 650 !important; }
#mainContent h4 { font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; }
#mainContent .text-\[2\.1rem\], #mainContent .text-\[1\.85rem\], #mainContent .text-\[1\.7rem\], #mainContent .text-3xl, #mainContent .text-2xl { font-size: 22px !important; line-height: 1.25 !important; }

/* ── Top bar ── */
#mainContent > header { background: rgba(255, 255, 255, 0.92) !important; border-color: var(--ui-line) !important; }
#mainContent > header > div { padding-top: 10px !important; padding-bottom: 10px !important; }
#pageEyebrow { font-size: 11px !important; letter-spacing: 0.05em !important; color: var(--ui-faint) !important; }
#pageTitle { font-size: 18px !important; font-weight: 650 !important; letter-spacing: -0.01em; }
#mainContent > header .rounded-2xl { border-radius: 10px !important; }
#mainContent > header button.h-11, #mainContent > header a.h-11 { height: 38px !important; width: 38px !important; }
#mainContent > header .h-11.w-11.rounded-full { height: 32px !important; width: 32px !important; font-size: 12px; }
#mainContent > header .px-4.py-2\.5 { padding: 4px 10px 4px 6px !important; }
#searchInput { padding-top: 8px !important; padding-bottom: 8px !important; border-radius: 10px !important; background: #F9FAFB !important; }

/* ── Page area ── */
.workspace-shell { max-width: 1440px !important; padding-top: 20px !important; }
.workspace-shell > .app-view.space-y-5 > * + *, .workspace-shell > .app-view.space-y-4 > * + * { margin-top: 16px !important; }

/* One card style everywhere: white, thin border, small radius, barely-there shadow. */
#mainContent .panel-card,
#mainContent .prem-card,
#mainContent .kpi-stat-card,
#mainContent .dash-header-new,
#mainContent .att-hero,
#mainContent .pr-hero,
#mainContent .mf-card,
#mainContent section[class*="rounded-[2"],
#mainContent div[class*="rounded-[2"].border {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
}
#mainContent .panel-card:hover, #mainContent .kpi-stat-card:hover, #mainContent .prem-card:hover { transform: none !important; box-shadow: var(--ui-shadow) !important; }

/* Gradient banners and glow blobs -> plain cards. */
#mainContent [class*="bg-[linear-gradient"],
#mainContent [class*="bg-gradient-to"]:not(.mf-result):not([class*="from-cyan-50"]) { background-image: none !important; background-color: var(--ui-card) !important; }
#mainContent [class*="bg-[linear-gradient"].text-white, #mainContent [class*="bg-gradient-to"].text-white { background-color: #111827 !important; }
#mainContent .blur-3xl, #mainContent .blur-2xl, #mainContent .att-glow-a, #mainContent .att-glow-b, #mainContent .pr-glow-a, #mainContent .pr-glow-b,
#mainContent .pr-hero::before, #mainContent .pr-hero::after, #mainContent .att-hero::before, #mainContent .att-hero::after,
#mainContent .dashboard-hero::before, #mainContent .dashboard-hero::after { display: none !important; }

/* Radius scale: 8 / 10 / 12 only. */
#mainContent .rounded-\[26px\], #mainContent .rounded-\[24px\], #mainContent .rounded-\[22px\], #mainContent .rounded-\[20px\], #mainContent .rounded-\[18px\], #mainContent .rounded-3xl { border-radius: var(--ui-radius) !important; }
#mainContent .rounded-\[16px\], #mainContent .rounded-\[14px\], #mainContent .rounded-2xl { border-radius: 10px !important; }
#mainContent .rounded-\[12px\], #mainContent .rounded-\[11px\], #mainContent .rounded-\[10px\], #mainContent .rounded-xl { border-radius: var(--ui-radius-sm) !important; }
.fixed.inset-0 > form, .fixed.inset-0 > div > form, .fixed.inset-0 > div[class*="rounded-[24px]"], .fixed.inset-0 > div[class*="max-w"] { border-radius: 14px !important; }

/* Card padding: a little tighter. */
#mainContent .p-6 { padding: 20px !important; }
#mainContent .px-6.py-6 { padding: 20px 22px !important; }
#mainContent .px-6.py-5 { padding: 16px 20px !important; }

/* ── Buttons ── */
#mainContent button, .fixed.inset-0 button { letter-spacing: 0; }
#mainContent .bg-primary, .fixed.inset-0 .bg-primary { background-color: var(--ui-accent) !important; }
#mainContent .bg-primary:hover, .fixed.inset-0 .bg-primary:hover, #mainContent .hover\:bg-indigo-700:hover { background-color: var(--ui-accent-hover) !important; }
#mainContent .text-primary { color: var(--ui-accent) !important; }
#mainContent button.py-2\.5, #mainContent a.py-2\.5, .fixed.inset-0 button.py-2\.5 { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13px !important; }
#mainContent button.py-3, .fixed.inset-0 button.py-3 { padding-top: 9px !important; padding-bottom: 9px !important; font-size: 13.5px !important; }
#mainContent .shadow-md, #mainContent .shadow-lg, #mainContent .shadow-indigo-200 { box-shadow: none !important; }
#mainContent .hover\:-translate-y-0\.5:hover, #mainContent [class*="hover:-translate-y"]:hover { transform: none !important; }
.action-btn-primary, .action-btn-secondary { border-radius: var(--ui-radius-sm) !important; padding: 8px 14px !important; font-size: 13px !important; box-shadow: none !important; }
.action-btn-primary { background: var(--ui-accent) !important; }

/* ── Inputs ── */
#mainContent input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(#searchInput),
#mainContent select, #mainContent textarea,
.fixed.inset-0 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fixed.inset-0 select, .fixed.inset-0 textarea {
    border-color: var(--ui-line-strong) !important;
    background-color: #FFFFFF !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 13.5px !important;
}
#mainContent input.py-3, #mainContent select.py-3, .fixed.inset-0 input.py-3, .fixed.inset-0 select.py-3 { padding-top: 9px !important; padding-bottom: 9px !important; }
#mainContent input:focus, #mainContent select:focus, #mainContent textarea:focus,
.fixed.inset-0 input:focus, .fixed.inset-0 select:focus, .fixed.inset-0 textarea:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important; outline: none !important; }

/* ── Tables: compact rows, quiet headers ── */
#mainContent table { font-size: 13.5px; }
#mainContent thead { background: #F9FAFB !important; }
#mainContent thead th { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: var(--ui-soft) !important; padding-top: 10px !important; padding-bottom: 10px !important; white-space: nowrap; }
#mainContent tbody td.py-4, #mainContent tbody td.py-3\.5 { padding-top: 10px !important; padding-bottom: 10px !important; }
#mainContent tbody tr:hover { background-color: #F9FAFB; }

/* KPI numbers: still bold, not shouting. */
#mainContent .kpi-stat-card p.text-\[2\.1rem\], #mainContent .text-\[2\.1rem\] { font-size: 26px !important; }
#mainContent .kpi-accent { display: none !important; }

/* Status chips. */
#mainContent .live-pill, #mainContent .stat-chip, #mainContent .att-stat-chip, #mainContent .att-live-badge { border-radius: 999px !important; box-shadow: none !important; font-size: 12px; }

/* ── Sidebar ── */
#appSidebar { background: var(--ui-side) !important; border-right-color: var(--ui-side-line) !important; }
#appSidebar .sticky.top-0 { background: var(--ui-side) !important; padding-bottom: 12px !important; }
#appSidebar nav { font-size: 13.5px; }
#appSidebar .menu-link, #appSidebar .menu-button { min-height: 34px !important; padding-top: 6px !important; padding-bottom: 6px !important; border-radius: 8px !important; color: #A5B0C2 !important; }
#appSidebar .menu-text { font-size: 13.5px !important; font-weight: 500 !important; }
#appSidebar .menu-link i, #appSidebar .menu-button i { width: 16px !important; height: 16px !important; opacity: 0.85; }
#appSidebar .menu-link:hover, #appSidebar .menu-button:hover { background: rgba(148, 163, 184, 0.10) !important; color: #E5E7EB !important; }
#appSidebar .menu-active, #appSidebar .menu-link.menu-active { background: rgba(99, 102, 241, 0.22) !important; color: #FFFFFF !important; }
#appSidebar .menu-active::before { top: 7px !important; bottom: 7px !important; background: #818CF8 !important; }
#appSidebar .submenu a { font-size: 13px !important; padding-top: 5px !important; padding-bottom: 5px !important; color: #A5B0C2; }
#appSidebar .submenu a:hover { color: #FFFFFF; }
#appSidebar .nav-group-label { padding: 14px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5B677A; }
.sidebar-collapsed #appSidebar .nav-group-label { visibility: hidden; height: 10px; padding: 0; }

/* Modals: same card language. */
.fixed.inset-0 form .border-b, .fixed.inset-0 form .border-t { border-color: var(--ui-line) !important; }
.fixed.inset-0[class*="bg-slate-950"] { background-color: rgba(16, 24, 40, 0.45) !important; }

/* Mobile: comfortable side gutter, no sideways page scroll. */
@media (max-width: 640px) {
    .workspace-shell { padding-left: 12px !important; padding-right: 12px !important; }
    #mainContent h2 { font-size: 18px !important; }
}

/* Phone and tablet (below 1024px, where the sidebar becomes a drawer): touch-friendly controls. */
@media (max-width: 1023px) {
    /* Header: the right-hand controls wrap instead of running off the screen; the user chip keeps only its avatar. */
    header.sticky .flex.flex-1.items-center.justify-end { flex-wrap: wrap; gap: 8px; min-width: 0; }
    header.sticky .flex.min-w-0.items-center.gap-3.rounded-2xl { padding: 0; border: 0; background: transparent; }
    header.sticky .flex.min-w-0.items-center.gap-3.rounded-2xl > .min-w-0 { display: none; }
    /* Fields at 16px so iOS does not zoom in on focus. */
    /* :not(#_) adds an id's weight so this beats the desktop #mainContent input sizes and the DO look's .text-sm. */
    html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea):not(#_):not(#__) { font-size: 16px !important; }
    /* Touch targets at least 44px. Cells inside data tables and the attendance grid keep their size. */
    button:not(table button):not(.feat-switch), [role="button"]:not(table [role="button"]), #appSidebar .menu-link,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(table input), select:not(table select) { min-height: 44px; }
    button:not(table button):not(.feat-switch) { min-width: 44px; }
    html body #appSidebar :is(.menu-link, .menu-button):not(#_) { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Settings > Features: iOS-style switch (grey off, green on) */
.feat-switch { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s; }
.feat-switch:checked { background: #10b981; }
.feat-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.feat-switch:checked::after { transform: translateX(16px); }
.feat-switch:disabled { opacity: .5; cursor: not-allowed; }

/* Salary form: pay-type and manual PF / ESIC fields hide with the hidden attribute, which .block would override. */
#salarySection [hidden] { display: none !important; }

/* Tabs for pages that share one sidebar link (see VIEW_PAGE_GROUPS in app.js). */
.view-page-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--fl-line, #E4E7EC); margin-top: -4px; }
.view-page-tabs::-webkit-scrollbar { display: none; }
.view-page-tabs[hidden] { display: none; }
.view-page-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--fl-soft, #667085); white-space: nowrap; transition: color .12s; }
.view-page-tabs a[aria-current="page"] { color: var(--fl-iris-ink, #4331C9); border-bottom-color: var(--fl-iris, #5B48F0); }
.view-page-tabs a:focus-visible { outline: 2px solid var(--fl-iris, #5B48F0); outline-offset: -2px; border-radius: 6px; }
@media (hover: hover) { .view-page-tabs a:not([aria-current]):hover { color: var(--fl-text, #101828); } }
@media (max-width: 1023px) { .view-page-tabs a { min-height: 44px; } }