/* Backup Manager — Universal UI Kit / Design System */
:root {
    --uiHeaderHeight: 56px;
    --uiControlHeight: 38px;
    --uiRadius: 8px;
    --uiTransition: 220ms ease;
}
html, body { background: var(--bg); color: var(--ink); }
body { font-size: 14px; line-height: 1.5; }
.skipLink { position: fixed; top: 8px; left: 8px; z-index: 5000; transform: translateY(-160%); padding: 9px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--uiRadius); box-shadow: var(--shadowCard); font-weight: 700; }
.skipLink:focus { transform: translateY(0); }
.backupManagerTopbar { position: sticky; top: 0; z-index: 80; min-height: var(--uiHeaderHeight); display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 9px 36px; background: var(--card); border-bottom: 1px solid transparent; transition: box-shadow var(--uiTransition), border-color var(--uiTransition); }
.backupManagerTopbar.isScrolled { border-color: var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.backupManagerTopbarTitle { min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.backupManagerTopbarMeta { color: var(--ink2); font-size: 12px; }
.backupManagerTopbarActions { display: flex; align-items: center; gap: 6px; }
.uiIconButton, .mobileMenuButton { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--uiRadius); background: var(--card); color: var(--ink); cursor: pointer; }
.uiIconButton:hover, .mobileMenuButton:hover { background: var(--surfaceHoverColor); border-color: var(--borderHoverColor); }
.uiIconButton:focus-visible, .mobileMenuButton:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primaryColor); outline-offset: 2px; }
.mobileMenuButton { display: none; }
.uiScrollProgress { position: fixed; top: 0; left: 0; width: 0; height: 3px; z-index: 6000; background: var(--primaryColor); pointer-events: none; }
.uiScrollTop { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadowCard); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--uiTransition), transform var(--uiTransition), visibility var(--uiTransition); }
.uiScrollTop.isVisible { opacity: 1; visibility: visible; transform: none; }
.uiSearchDialog, .uiConfirmDialog { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: start center; padding: 10vh 20px 20px; background: rgba(13,17,23,.46); }
.uiSearchDialog[hidden], .uiConfirmDialog[hidden] { display: none; }
.uiDialogPanel { width: min(680px, 100%); max-height: 76vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.20); }
.uiDialogHeader { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.uiDialogHeader input { flex: 1; min-width: 0; height: 40px; }
.uiDialogBody { padding: 8px; }
.uiSearchItem { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 7px; text-decoration: none; color: var(--ink); }
.uiSearchItem:hover, .uiSearchItem.isActive { background: var(--surfaceHoverColor); }
.uiSearchItem small { display: block; color: var(--ink2); }
.uiDialogFooter { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 11px; }
.uiConfirmBody { padding: 20px; }
.uiConfirmActions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }
.uiCookieBanner { position: fixed; left: 20px; right: 20px; bottom: 18px; z-index: 2500; display: flex; align-items: center; gap: 16px; padding: 13px 15px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--uiRadius); box-shadow: var(--shadowHover); }
.uiCookieBanner[hidden] { display: none; }
.uiCookieText { flex: 1; color: var(--ink2); font-size: 12px; }
.uiCookieActions { display: flex; gap: 7px; }
.uiSkeleton { position: relative; overflow: hidden; min-height: 14px; border-radius: 5px; background: var(--surfaceHoverColor); }
.uiSkeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: uiSkeleton 1.2s infinite; }
@keyframes uiSkeleton { to { transform: translateX(100%); } }
.uiSpinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--primaryColor); border-radius: 50%; animation: uiSpin .7s linear infinite; }
@keyframes uiSpin { to { transform: rotate(360deg); } }
.btn, button, input, select, textarea { transition: border-color var(--uiTransition), background var(--uiTransition), color var(--uiTransition), box-shadow var(--uiTransition); }
.btn { min-height: 36px; }
.btnPrimary { background: var(--primaryColor); border-color: var(--primaryColor); color: #fff; }
.btnPrimary:hover { background: var(--primaryDarkColor); border-color: var(--primaryDarkColor); }
.btnSecondary { background: var(--card); border-color: var(--line); color: var(--ink); }
.btnSecondary:hover { background: var(--surfaceHoverColor); }
.btnSuccess { background: var(--successColor); border-color: var(--successColor); color: #fff; }
.btnWarning { background: var(--warningColor); border-color: var(--warningColor); color: #fff; }
.btnDanger { background: var(--dangerColor); border-color: var(--dangerColor); color: #fff; }
.statusSuccess, .statusBadge.statusSuccess { color: var(--successColor); background: var(--successSoftColor); border-color: var(--successBorderColor); }
.statusWarning, .statusBadge.statusWarning { color: var(--warningColor); background: var(--warningSoftColor); border-color: var(--warningBorderColor); }
.statusDanger, .statusBadge.statusDanger { color: var(--dangerColor); background: var(--dangerSoftColor); border-color: var(--dangerBorderColor); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) { .backupManagerTopbar { padding-left: 24px; padding-right: 24px; } .mobileMenuButton { display: inline-grid; } .backupManagerSidebar { transform: translateX(-100%); transition: transform var(--uiTransition); } .backupManagerApp.mobileNavOpen .backupManagerSidebar { transform: translateX(0); } .backupManagerApp.mobileNavOpen::after { content: ''; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.35); } .backupManagerMain { margin-left: 0; } .backupManagerApp.sidebarCollapsed .backupManagerMain { margin-left: 0; } .backupManagerApp.sidebarCollapsed .backupManagerSidebar { transform: translateX(-100%); } }
@media (max-width: 640px) { .backupManagerMainInner { padding: 20px 16px 40px; } .backupManagerTopbar { margin-bottom: 18px; padding-left: 16px; padding-right: 16px; } .backupManagerTopbarMeta { display: none; } .uiCookieBanner { left: 10px; right: 10px; bottom: 10px; flex-direction: column; align-items: stretch; } .uiCookieActions { justify-content: flex-end; } .uiScrollTop { right: 12px; bottom: 12px; } }
:root[data-theme="dark"] .backupManagerSidebar { background: var(--side); border-color: var(--line); }
:root[data-theme="dark"] .backupManagerSidebar .backupManagerBrandName, :root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem, :root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem i { color: var(--ink); }
:root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem.active { background: var(--surfaceHoverColor); color: var(--ink); box-shadow: inset 3px 0 var(--primaryColor); }
:root[data-theme="dark"] .surfaceCard, :root[data-theme="dark"] .projectFilterPanel, :root[data-theme="dark"] .projectTableCard, :root[data-theme="dark"] .modalCard, :root[data-theme="dark"] .settingsPanel, :root[data-theme="dark"] .settingsCard { background: var(--card); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surfaceMutedColor); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] table, :root[data-theme="dark"] .dataTable, :root[data-theme="dark"] .projectTable { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] th { background: var(--surfaceMutedColor); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] td { color: var(--secondaryTextColor); border-color: var(--line); }
:root[data-theme="dark"] tbody tr:hover td { background: var(--surfaceHoverColor); }

/* Shell alignment and master palette */
.backupManagerSidebar { background: var(--side); border-right-color: var(--line); }
.backupManagerSidebar .backupManagerBrandName, .backupManagerSidebar .backupManagerNavItem, .backupManagerSidebar .backupManagerNavItem i, .backupManagerSidebar .backupManagerSidebarCollapse { color: #fff; }
.backupManagerSidebar .backupManagerBrandSubtitle, .backupManagerSidebar .backupManagerNavigationLabel { color: rgba(255,255,255,.62); }
.backupManagerSidebar .backupManagerNavItem:hover { background: rgba(255,255,255,.08); color: #fff; }
.backupManagerSidebar .backupManagerNavItem.active, .backupManagerSidebar .backupManagerNavItem.active:hover { background: #fff; color: #212529; box-shadow: inset 3px 0 0 #212529; }
.backupManagerSidebar .backupManagerNavItem.active i { color: #212529; }
.backupManagerBrandLogo { background: var(--primaryColor); background-image: none; box-shadow: none; }
.backupManagerSidebarCollapse { background: transparent; border-color: rgba(255,255,255,.22); }
.backupManagerSidebarCollapse:hover { background: rgba(255,255,255,.10); }
.pageHeaderTitle, .cardTitle, .settingsPage h1, .settingsPage h2, .settingsPage h3 { color: var(--ink); }
.pageHeaderDescription, .cardDescription, .text-muted { color: var(--ink2) !important; }

:root[data-theme="dark"] { --primaryColor: #536779; --primaryDarkColor: #6f879d; --primaryLightColor: #30363d; --primarySoftColor: #252b32; }
:root[data-theme="dark"] .backupManagerSidebar .backupManagerBrandName, :root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem, :root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem i, :root[data-theme="dark"] .backupManagerSidebar .backupManagerSidebarCollapse { color: #e1e1e1; }
:root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem.active, :root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem.active:hover { background: #1e1e1e; color: #e1e1e1; box-shadow: inset 3px 0 0 #e1e1e1; }
:root[data-theme="dark"] .backupManagerSidebar .backupManagerNavItem.active i { color: #e1e1e1; }

@media print {
    .backupManagerSidebar, .backupManagerTopbar, .uiScrollProgress, .uiScrollTop, .uiCookieBanner, .uiSearchDialog, .uiConfirmDialog, button, .btn { display: none !important; }
    .backupManagerMain { margin-left: 0 !important; }
    .backupManagerMainInner { max-width: none !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    .surfaceCard, .projectTableCard, .projectFilterPanel { box-shadow: none !important; break-inside: avoid; }
}

/* =========================================================
   Backup Manager UI repairs — presentation only
   ========================================================= */
.profileResultsContainer { display: grid; gap: 16px; min-width: 0; }
.profileResultCard { min-width: 0; overflow: hidden; border: 1px solid var(--borderColor, #d9e0e7); border-radius: 12px; background: var(--surfaceColor, #fff); box-shadow: var(--shadowSmall, 0 2px 8px rgba(20,35,50,.06)); }
.profileResultHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--borderColor, #d9e0e7); }
.profileNameCell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profileNameCell strong { overflow-wrap: anywhere; color: var(--mainTextColor, #17212b); font-size: 14px; }
.profileNameCell small { color: var(--mutedTextColor, #6b7c8c); font-size: 11px; }
.profileResultHeader .badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.profileResultMeta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borderColor, #d9e0e7); border-bottom: 1px solid var(--borderColor, #d9e0e7); }
.profileResultMeta > div { min-width: 0; padding: 13px 15px; background: var(--surfaceMutedColor, #f8fafc); }
.profileResultMeta span, .profileSectionTitle, .profileMetric span { color: var(--mutedTextColor, #6b7c8c); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.profileResultMeta strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--mainTextColor, #17212b); font-size: 12px; line-height: 1.4; }
.profileComparison { padding: 15px 18px 17px; }
.profileSectionTitle { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.profileSectionTitle i { color: var(--primaryColor, #536779); font-size: 14px; }
.profileComparisonGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.profileMetric { min-width: 0; padding: 10px 11px; border: 1px solid var(--borderColor, #d9e0e7); border-radius: 8px; background: var(--surfaceMutedColor, #f8fafc); }
.profileMetric span { display: block; overflow-wrap: anywhere; font-size: 9px; line-height: 1.3; }
.profileMetric strong { display: block; margin-top: 5px; color: var(--mainTextColor, #17212b); font-size: 15px; }
.profileTablesDetails { margin: 0 18px 18px; border: 1px solid var(--borderColor, #d9e0e7); border-radius: 9px; overflow: hidden; }
.profileTablesDetails summary { display: flex; align-items: center; gap: 8px; padding: 11px 13px; cursor: pointer; color: var(--primaryDarkColor, #344f66); font-size: 12px; font-weight: 750; list-style-position: inside; }
.profileTablesDetails summary:hover { background: var(--surfaceMutedColor, #f8fafc); }
.profileTablesWrapper { overflow-x: auto; border-top: 1px solid var(--borderColor, #d9e0e7); }
.profileResultsTable { min-width: 420px; }
.profileResultsTable th { background: var(--surfaceMutedColor, #f8fafc); font-size: 10px; }
.profileResultsTable td { font-size: 12px; }

/* Password fields: preserve reveal/copy handlers and improve hit areas. */
.projectPasswordField { gap: 8px; }
.projectPasswordField input { min-height: 40px; padding-right: 52px; }
.projectPasswordToggle { right: 6px; width: 36px; min-width: 36px; height: 32px; min-height: 32px; display: grid; place-items: center; padding: 0; font-size: 14px; line-height: 1; }
.projectPasswordToggle i { font-size: 14px; }
.projectDatabasePasswordActions { gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.projectDatabasePasswordActions .btn { min-height: 34px; padding: 0 11px; }
.backupPasswordField { padding-right: 50px; }
.backupPasswordToggle { right: 5px; width: 34px; height: 34px; }

/* Project/task action menus: anchored, unclipped, and comfortable to click. */
.projectTable, .projectTaskTable { overflow: visible; }
.projectTable td:last-child, .projectTaskTable td:last-child { position: relative; overflow: visible; }
.universalActionMenu { position: relative; z-index: 5; }
.universalActionTrigger { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer; }
.universalActionList { z-index: 100; min-width: 156px; padding: 6px; border-radius: 10px; box-shadow: 0 12px 28px rgba(20,35,50,.16); }
.universalActionList .btn, .universalActionList a { display: flex; align-items: center; gap: 8px; min-height: 36px; border-radius: 7px; cursor: pointer; }
.universalActionList [data-wizard-task-delete], .universalActionList .projectActionDelete { color: var(--dangerColor, #b42318); }
.universalActionList [data-wizard-task-delete]:hover, .universalActionList .projectActionDelete:hover { background: var(--dangerSoftColor, #fff1f0); color: var(--dangerColor, #b42318); }
.projectTable .projectActionMenuPanel { z-index: 100; }

/* Task list, empty state, and generated add/edit/view modal. */
.projectTaskTableWrap { width: 100%; overflow-x: auto; border: 1px solid var(--borderColor, #d9e0e7); border-radius: 10px; }
.projectTaskTable { width: 100%; min-width: 680px; border-collapse: collapse; }
.projectTaskTable th { padding: 11px 13px; background: var(--surfaceMutedColor, #f8fafc); color: var(--mutedTextColor, #6b7c8c); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.projectTaskTable td { padding: 13px; border-top: 1px solid var(--borderColor, #d9e0e7); color: var(--mainTextColor, #17212b); font-size: 12px; vertical-align: middle; }
.projectTaskTable tbody tr:hover td { background: var(--surfaceMutedColor, #f8fafc); }
.projectTaskTable td:first-child { min-width: 230px; }
.projectTaskTable td:first-child strong, .projectTaskTable td:first-child small { display: block; }
.projectTaskTable td:first-child strong { font-size: 12px; }
.projectTaskTable td:first-child small { margin-top: 4px; color: var(--mutedTextColor, #6b7c8c); font-size: 11px; line-height: 1.45; }
.projectTaskTable td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.projectTaskModal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(15,23,42,.48); overflow-y: auto; }
.projectTaskModalDialog { width: min(680px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow-y: auto; padding: 22px; border: 1px solid var(--borderColor, #d9e0e7); border-radius: 14px; background: var(--surfaceColor, #fff); box-shadow: 0 22px 60px rgba(15,23,42,.22); }
.projectTaskModalDialog .projectSectionHeading { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borderColor, #d9e0e7); }
.projectTaskModalDialog .formGroup { display: block; min-width: 0; margin: 0 0 15px; }
.projectTaskModalDialog .projectInfoGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; }
.projectTaskModalDialog .formControl { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.projectTaskModalDialog textarea.formControl { min-height: 110px; resize: vertical; }
.projectTaskModalDialog input[type='range'].formControl { min-height: 34px; padding: 0; }
.projectTaskModalActions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--borderColor, #d9e0e7); }
.projectTaskModalActions [role='status'] { margin-right: auto; color: var(--dangerColor, #b42318); font-size: 11px; }

/* Wizard sizing and navigation: use the available width without overflow. */
.projectManagementWizardPage, .projectWizard, .projectWizardForm, .projectWizardPanel { min-width: 0; max-width: 100%; }
.projectWizard { overflow: visible; }
.projectWizardSteps { overflow: hidden; }
.projectWizardPanel { overflow: visible; }
.projectWizardNavigation { position: relative; z-index: 2; flex-wrap: wrap; }
.projectWizardNavigation .btn { min-height: 38px; }

@media (max-width: 820px) {
    .profileResultMeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profileComparisonGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .profileResultHeader { flex-direction: column; }
    .profileResultMeta { grid-template-columns: 1fr; }
    .profileComparisonGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .projectTaskModal { align-items: start; padding: 12px; }
    .projectTaskModalDialog { max-height: calc(100vh - 24px); padding: 16px; }
    .projectTaskModalDialog .projectInfoGrid { grid-template-columns: 1fr; gap: 0; }
    .projectTaskModalActions { flex-wrap: wrap; }
    .projectTaskModalActions .btn { flex: 1 1 auto; }
}