/* Backup Manager — design system based on template-based/theme.css */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --color-primary: #1b3a5c;
  --color-primary-hover: #2c5d8f;
  --color-primary-active: #14304c;
  --color-accent: #e8703a;
  --color-accent-hover: #d45f2b;
  --color-bg: #f5f7f9;
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-tint-primary: #e7eef4;
  --color-tint-accent: #fdece0;
  --color-text: #1a2733;
  --color-text-secondary: #5b6b78;
  --color-text-muted: #8a97a3;
  --color-text-on-primary: #fff;
  --color-border: #e2e5e9;
  --color-border-strong: #c9d0d6;
  --color-success: #2e8b57;
  --color-success-soft: #e3f3ea;
  --color-warning: #d9822b;
  --color-warning-soft: #fbebda;
  --color-danger: #c4432e;
  --color-danger-soft: #f9e4e0;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --sidebar-width: 260px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(26,39,51,.06);
  --shadow-md: 0 4px 12px rgba(26,39,51,.08);
  --shadow-lg: 0 14px 38px rgba(26,39,51,.14);
  --transition: 180ms cubic-bezier(.4,0,.2,1);
}

[data-theme='dark'] {
  --color-primary: #4c86bf; --color-primary-hover: #6aa0d6; --color-primary-active: #3a6c9e;
  --color-accent: #e8703a; --color-accent-hover: #f08752;
  --color-bg: #10161c; --color-surface: #182029; --color-surface-raised: #1e2732;
  --color-tint-primary: #1a2733; --color-tint-accent: #2e2119;
  --color-text: #eaeef2; --color-text-secondary: #a6b2bd; --color-text-muted: #6e7b87;
  --color-text-on-primary: #0e1418; --color-border: #2a343e; --color-border-strong: #3a454f;
  --color-success: #4fb077; --color-success-soft: #17291f;
  --color-warning: #e0a050; --color-warning-soft: #2e2415;
  --color-danger: #dd6a54; --color-danger-soft: #2e1b17;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text); font: 15px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Application shell */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--color-surface); border-right: 1px solid var(--color-border); }
.sidebar-header { padding: 28px 24px 23px; border-bottom: 1px solid var(--color-border); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.logo-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-accent); color: #fff; font-size: 18px; }
.logo-text { color: var(--color-primary); }.logo-text::first-letter { color: var(--color-accent); }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 18px 12px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; transition: background var(--transition), color var(--transition), transform var(--transition); }
.nav-item:hover { background: var(--color-tint-primary); color: var(--color-primary); transform: translateX(2px); }
.nav-item.active { background: var(--color-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-sm); }
.nav-icon { width: 22px; text-align: center; font-size: 16px; }.nav-logout { margin-top: auto; }.nav-item.text-danger { color: var(--color-danger); }.nav-item.text-danger:hover { background: var(--color-danger-soft); }
.sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--color-border); }.version { color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.main-content { min-height: 100vh; margin-left: var(--sidebar-width); padding: 0 42px 44px; }
.topbar { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 36px; border-bottom: 1px solid var(--color-border); }
.eyebrow { margin: 0 0 1px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.topbar-title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }.system-status { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }.system-status > span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-soft); }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 13px; font-weight: 600; }.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Sections */
.section { display: none; animation: section-in .22s ease; }.section.active { display: block; } @keyframes section-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }.section-header h1 { font-size: 29px; line-height: 1.2; }.section-subtitle { width: 100%; margin: -12px 0 0; color: var(--color-text-secondary); }.header-filters { display: flex; gap: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }.stat-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 112px; padding: 20px; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }.stat-card::before { position:absolute; top:0; left:0; width:4px; height:100%; content:''; background:var(--color-primary); }.stat-success::before { background:var(--color-success); }.stat-danger::before { background:var(--color-danger); }.stat-info::before { background:var(--color-accent); }.stat-warning::before { background:var(--color-warning); }.stat-total::before { background:var(--color-primary-hover); }.stat-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--color-tint-primary); font-size:20px; }.stat-info { display:flex; flex-direction:column; }.stat-value { font:700 24px/1.2 var(--font-display); }.stat-label { margin-top:4px; color:var(--color-text-secondary); font-size:13px; }
.card { overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }.card-header { display:flex; align-items:center; min-height:57px; padding:16px 24px; background:var(--color-primary); color:var(--color-text-on-primary); }.card-header h2 { color:inherit; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }.card-body { padding:24px; }

/* Tables, status and actions */
.table-container { overflow-x:auto; } table { width:100%; border-collapse:collapse; } thead th { padding:11px 14px; color:var(--color-text-muted); border-bottom:1px solid var(--color-border); font-size:11px; font-weight:700; letter-spacing:.06em; text-align:left; text-transform:uppercase; white-space:nowrap; } tbody td { padding:14px; border-bottom:1px solid var(--color-border); font-size:14px; vertical-align:middle; } tbody tr { transition:background var(--transition); } tbody tr:hover { background:var(--color-tint-primary); } tbody tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }.badge-success { background:var(--color-success-soft); color:var(--color-success); }.badge-danger { background:var(--color-danger-soft); color:var(--color-danger); }.badge-warning { background:var(--color-warning-soft); color:var(--color-warning); }.badge-info { background:var(--color-tint-primary); color:var(--color-primary); }.badge-neutral { background:var(--color-bg); color:var(--color-text-secondary); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border:1px solid transparent; border-radius:999px; background:transparent; font-size:13px; font-weight:700; transition:background var(--transition), transform var(--transition), border-color var(--transition); white-space:nowrap; }.btn:active { transform:translateY(1px); }.btn-primary { background:var(--color-primary); color:var(--color-text-on-primary); }.btn-primary:hover { background:var(--color-primary-hover); }.btn-accent { background:var(--color-accent); color:#fff; }.btn-accent:hover { background:var(--color-accent-hover); }.btn-danger { color:var(--color-danger); background:var(--color-danger-soft); }.btn-ghost { border-color:var(--color-border); color:var(--color-text-secondary); }.btn-ghost:hover { border-color:var(--color-primary); color:var(--color-primary); }.btn-sm { padding:6px 11px; font-size:12px; }.btn-block { width:100%; }.btn-icon { display:inline-grid; place-items:center; width:33px; height:33px; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text-secondary); }.btn-icon:hover { border-color:var(--color-primary); color:var(--color-primary); }.action-btns { display:flex; gap:6px; }

/* Forms and modals */
.form-group { margin-bottom:18px; }.form-group label { display:block; margin-bottom:6px; color:var(--color-text-secondary); font-size:13px; font-weight:700; }.form-input { width:100%; padding:10px 12px; border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); outline:0; background:var(--color-surface-raised); color:var(--color-text); font-size:14px; transition:border var(--transition), box-shadow var(--transition); }.form-input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-tint-primary); }.form-input::placeholder { color:var(--color-text-muted); }.form-input-sm { width:auto; min-width:150px; padding:7px 10px; font-size:13px; }.form-row { display:flex; gap:14px; }.flex-1 { flex:1; }.form-hint { display:block; margin-top:6px; color:var(--color-text-muted); font-size:12px; }.form-hint code { padding:1px 5px; border-radius:4px; background:var(--color-bg); }
.modal-overlay { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(17,29,39,.48); backdrop-filter:blur(4px); }.modal-overlay.show { display:flex; }.modal { width:100%; max-width:520px; max-height:85vh; overflow:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); animation:modal-in .2s ease; } @keyframes modal-in { from {opacity:0; transform:scale(.97) translateY(8px)} to {opacity:1; transform:none} }.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--color-border); }.modal-header h2 { font-size:18px; }.modal-close { border:0; background:transparent; color:var(--color-text-muted); font-size:26px; line-height:1; }.modal-close:hover { color:var(--color-primary); }.modal-body { padding:24px; }.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--color-border); }

.backup-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }.backup-option-card { padding:26px; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-bg); text-align:center; transition:border var(--transition), transform var(--transition); }.backup-option-card:hover { border-color:var(--color-primary); transform:translateY(-2px); }.backup-option-icon { margin-bottom:12px; font-size:38px; }.backup-option-card h3 { font-size:17px; }.backup-option-card p { margin:8px 0 18px; color:var(--color-text-secondary); font-size:13px; }.tables-checklist { max-height:200px; overflow:auto; margin-top:8px; padding:8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); }.table-check-item,.select-all-tables { display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13px; cursor:pointer; }.table-check-item:hover { background:var(--color-tint-primary); border-radius:var(--radius-xs); }.select-all-tables { margin-bottom:4px; border-bottom:1px solid var(--color-border); font-weight:700; color:var(--color-primary); }.tables-checklist input,.toggle input { accent-color:var(--color-primary); }.cron-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.toggle { position:relative; display:inline-block; width:42px; height:23px; }.toggle input { width:0; height:0; opacity:0; }.toggle-slider { position:absolute; inset:0; border-radius:99px; background:var(--color-border-strong); transition:var(--transition); }.toggle-slider::before { position:absolute; bottom:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; content:''; transition:transform var(--transition); }.toggle input:checked + .toggle-slider { background:var(--color-primary); }.toggle input:checked + .toggle-slider::before { transform:translateX(19px); }
.toast-container { position:fixed; top:20px; right:20px; z-index:150; display:flex; flex-direction:column; gap:10px; }.toast { display:flex; align-items:center; gap:10px; min-width:280px; padding:13px 16px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); box-shadow:var(--shadow-lg); animation:toast-in .2s ease; }.toast::before { position:absolute; bottom:0; left:0; width:100%; height:3px; content:''; background:var(--color-primary); animation:toast-progress 4s linear forwards; }.toast-success::before { background:var(--color-success); }.toast-error::before { background:var(--color-danger); }.toast-info::before { background:var(--color-primary); } @keyframes toast-in { from {opacity:0; transform:translateX(16px)} to {opacity:1; transform:none} } @keyframes toastOut { to {opacity:0; transform:translateX(16px)} } @keyframes toast-progress { to {width:0} }
.loading-overlay { position:fixed; inset:0; z-index:120; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(16,22,28,.58); backdrop-filter:blur(4px); }.loading-overlay.show { display:flex; }.spinner { width:42px; height:42px; border:3px solid var(--color-border); border-top-color:var(--color-accent); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg) } }.loading-overlay p { color:#fff; }
.text-muted { color:var(--color-text-muted); font-size:14px; }.text-success { color:var(--color-success); }.text-danger { color:var(--color-danger); }.mt-sm { margin-top:8px; }.mt-md { margin-top:16px; }.mt-lg { margin-top:28px; }.mb-sm { margin-bottom:8px; }.mb-md { margin-bottom:16px; }.empty-state { padding:48px 20px; text-align:center; color:var(--color-text-muted); }.empty-state-icon { margin-bottom:12px; font-size:42px; opacity:.65; } ::-webkit-scrollbar { width:7px; height:7px; } ::-webkit-scrollbar-thumb { border-radius:9px; background:var(--color-border-strong); }
@media (max-width: 860px) { .sidebar { width:220px; } .main-content { margin-left:220px; padding:0 24px 32px; } .topbar { margin-bottom:26px; } .system-status { display:none; } }
@media (max-width: 680px) { .sidebar { position:static; width:100%; height:auto; }.sidebar-header,.sidebar-footer { display:none; }.sidebar-nav { flex-direction:row; overflow:auto; padding:10px; }.nav-item { flex:0 0 auto; }.nav-item span:last-child { display:none; }.nav-logout { margin-top:0; }.main-content { margin:0; padding:0 16px 24px; }.topbar { min-height:72px; margin-bottom:22px; }.topbar-title { font-size:14px; }.theme-toggle span:last-child { display:none; }.section-header h1 { font-size:24px; }.stats-grid { grid-template-columns:1fr 1fr; }.backup-action-grid { grid-template-columns:1fr; }.form-row { flex-direction:column; gap:0; }.header-filters { width:100%; }.form-input-sm { flex:1; min-width:0; }.card-body { padding:16px; } }