/* ============================================================
   Backup Monitor — app.css
   ============================================================ */

/* ---- Design tokens ---- */
:root, [data-theme="light"] {
  --color-bg:             #f4f3ef;
  --color-surface:        #f9f8f5;
  --color-surface-2:      #ffffff;
  --color-surface-offset: #ece9e4;
  --color-divider:        #dcd9d5;
  --color-border:         #d0cdc7;
  --color-text:           #1e1c17;
  --color-text-muted:     #6b6a66;
  --color-text-faint:     #b0aea9;
  --color-text-inverse:   #f9f8f4;
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-primary-highlight: #cedcd8;
  --color-success:        #2d6b14;
  --color-success-hover:  #1e4f0b;
  --color-success-hl:     #d2dfca;
  --color-warning:        #964219;
  --color-warning-hl:     #ddd0c6;
  --color-error:          #a12c2c;
  --color-error-hover:    #7d1e1e;
  --color-error-hl:       #e0cece;
  --color-overdue:        #8a4a00;
  --color-overdue-hl:     #e8d8c3;
  --color-unknown:        #5a5957;
  --color-unknown-hl:     #e0dedb;
  --color-running:        #005f9e;
  --color-running-hl:     #cce0f0;
  --sidebar-w:            220px;
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full:9999px;
  --shadow-sm:  0 1px 3px oklch(0.2 0.01 80/0.07);
  --shadow-md:  0 4px 14px oklch(0.2 0.01 80/0.09);
  --shadow-lg:  0 12px 32px oklch(0.2 0.01 80/0.12);
  --trans:      180ms cubic-bezier(0.16,1,0.3,1);
  --text-xs:    clamp(0.75rem,  0.7rem  + 0.2vw, 0.8125rem);
  --text-sm:    clamp(0.8125rem,0.75rem + 0.3vw, 0.9375rem);
  --text-base:  clamp(0.9375rem,0.875rem+ 0.3vw, 1rem);
  --text-lg:    clamp(1rem,     0.9rem  + 0.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem,  1rem    + 1vw,   1.5rem);
}

[data-theme="dark"], .dark {
  --color-bg:             #141312;
  --color-surface:        #1a1917;
  --color-surface-2:      #1f1e1c;
  --color-surface-offset: #242220;
  --color-divider:        #2a2825;
  --color-border:         #343230;
  --color-text:           #d0cfcd;
  --color-text-muted:     #7a7876;
  --color-text-faint:     #4e4c4a;
  --color-text-inverse:   #1e1c17;
  --color-primary:        #4f98a3;
  --color-primary-hover:  #3a818b;
  --color-primary-highlight: #1e3437;
  --color-success:        #5fa83c;
  --color-success-hover:  #448a26;
  --color-success-hl:     #1e3218;
  --color-warning:        #c87340;
  --color-warning-hl:     #3b2917;
  --color-error:          #d05050;
  --color-error-hover:    #b43636;
  --color-error-hl:       #3b1818;
  --color-overdue:        #d08030;
  --color-overdue-hl:     #3b2710;
  --color-unknown:        #7a7876;
  --color-unknown-hl:     #242220;
  --color-running:        #4a9fe0;
  --color-running-hl:     #0e2640;
  --shadow-sm:  0 1px 3px oklch(0 0 0/0.3);
  --shadow-md:  0 4px 14px oklch(0 0 0/0.4);
  --shadow-lg:  0 12px 32px oklch(0 0 0/0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#141312;--color-surface:#1a1917;--color-surface-2:#1f1e1c;
    --color-surface-offset:#242220;--color-divider:#2a2825;--color-border:#343230;
    --color-text:#d0cfcd;--color-text-muted:#7a7876;--color-text-faint:#4e4c4a;
    --color-primary:#4f98a3;--color-primary-hover:#3a818b;--color-primary-highlight:#1e3437;
    --color-success:#5fa83c;--color-success-hl:#1e3218;
    --color-warning:#c87340;--color-warning-hl:#3b2917;
    --color-error:#d05050;--color-error-hl:#3b1818;
    --color-overdue:#d08030;--color-overdue-hl:#3b2710;
    --color-unknown:#7a7876;--color-unknown-hl:#242220;
    --color-running:#4a9fe0;--color-running-hl:#0e2640;
    --shadow-sm:0 1px 3px oklch(0 0 0/0.3);--shadow-md:0 4px 14px oklch(0 0 0/0.4);
  }
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;font-family:'Satoshi',system-ui,sans-serif;font-size:var(--text-base);
     color:var(--color-text);background:var(--color-bg);line-height:1.6}
img,svg{display:block;max-width:100%}
input,button,select,textarea{font:inherit;color:inherit}
a{color:var(--color-primary);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--color-primary-hover)}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}

/* ---- Layout ---- */
.app-layout{display:flex;min-height:100dvh}

.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;overflow-y:auto;
  z-index:100;transition:transform var(--trans);
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-logo{
  display:flex;align-items:center;gap:0.75rem;
  padding:1.25rem 1rem 1rem;
  border-bottom:1px solid var(--color-border);
}
.sidebar-logo-text{font-size:var(--text-base);font-weight:700;letter-spacing:-0.02em}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0.75rem 0.5rem;flex:1}
.nav-item{
  display:flex;align-items:center;gap:0.625rem;
  padding:0.5rem 0.75rem;border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);
  transition:background var(--trans),color var(--trans);
  position:relative;
}
.nav-item:hover{background:var(--color-surface-offset);color:var(--color-text)}
.nav-item.active{background:var(--color-primary-highlight);color:var(--color-primary);font-weight:600}
.nav-item svg{flex-shrink:0;opacity:0.7}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--color-error);color:#fff;
  font-size:0.65rem;font-weight:700;padding:1px 6px;border-radius:var(--radius-full);
  min-width:18px;text-align:center;line-height:1.6;
}
.sidebar-footer{
  padding:0.75rem;border-top:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:0.5rem;
}
.user-info{display:flex;align-items:center;gap:0.5rem;padding:0 0.25rem}
.user-name{font-size:var(--text-sm);font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-actions{display:flex;gap:0.5rem;padding:0 0.25rem}
.main-content{flex:1;min-width:0;display:flex;flex-direction:column}
.page-header{
  padding:1.25rem 1.5rem 1rem;
  border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--color-surface);
  position:sticky;top:0;z-index:50;
}
.page-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-0.02em}
.page-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:1px}
.page-header-actions{margin-left:auto;display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.page-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}
.hamburger{
  display:none;position:fixed;top:1rem;left:1rem;z-index:200;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:0.5rem;box-shadow:var(--shadow-md);
}
.sidebar-overlay{display:none;position:fixed;inset:0;background:oklch(0 0 0/0.4);z-index:99}
@media(max-width:768px){
  .hamburger{display:flex}
  .sidebar{position:fixed;left:0;top:0;height:100dvh;transform:translateX(-100%);z-index:100}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .page-header{padding-top:3.5rem}
}

/* ---- KPI Cards ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem}
.kpi-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:1rem;
  display:flex;flex-direction:column;gap:0.25rem;
  transition:box-shadow var(--trans);
}
.kpi-card:hover{box-shadow:var(--shadow-md)}
.kpi-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
           letter-spacing:0.06em;color:var(--color-text-muted)}
.kpi-value{font-size:var(--text-xl);font-weight:700;
           font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.kpi-card.kpi-ok      .kpi-value{color:var(--color-success)}
.kpi-card.kpi-warning .kpi-value{color:var(--color-warning)}
.kpi-card.kpi-overdue .kpi-value{color:var(--color-overdue)}
.kpi-card.kpi-failed  .kpi-value{color:var(--color-error)}
.kpi-card.kpi-total   .kpi-value{color:var(--color-text)}
.kpi-card.kpi-unknown .kpi-value{color:var(--color-unknown)}

/* ---- Cards y Tablas ---- */
.card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;
}
.card-header{
  padding:0.875rem 1rem;border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
}
.card-title{font-size:var(--text-base);font-weight:700}
.card-actions{margin-left:auto;display:flex;gap:0.5rem;align-items:center}
.table-wrap{overflow-x:auto}
table{font-size:var(--text-sm)}
thead th{
  padding:0.625rem 0.875rem;
  background:var(--color-surface-offset);
  font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--color-text-muted);
  white-space:nowrap;border-bottom:1px solid var(--color-border);text-align:left;
}
tbody tr{border-bottom:1px solid var(--color-divider);transition:background var(--trans)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--color-surface-offset)}
tbody td{padding:0.625rem 0.875rem;vertical-align:middle;font-variant-numeric:tabular-nums}
.cell-bold{font-weight:600}
.cell-muted{color:var(--color-text-muted);font-size:var(--text-xs)}
tr.row-failed  td:first-child{border-left:3px solid var(--color-error)}
tr.row-overdue td:first-child{border-left:3px solid var(--color-overdue)}
tr.row-warning td:first-child{border-left:3px solid var(--color-warning)}
/* ---- Badges ---- */
.badge{
  display:inline-flex;align-items:center;padding:2px 8px;
  border-radius:var(--radius-full);font-size:var(--text-xs);
  font-weight:700;white-space:nowrap;letter-spacing:0.03em;
}
.badge-ok          {background:var(--color-success-hl);color:var(--color-success)}
.badge-warning     {background:var(--color-warning-hl);color:var(--color-warning)}
.badge-overdue     {background:var(--color-overdue-hl);color:var(--color-overdue)}
.badge-failed      {background:var(--color-error-hl);color:var(--color-error)}
.badge-unknown     {background:var(--color-unknown-hl);color:var(--color-unknown)}
.badge-running     {background:var(--color-running-hl);color:var(--color-running)}
.badge-source      {background:var(--color-primary-highlight);color:var(--color-primary)}
.badge-full        {background:var(--color-primary-highlight);color:var(--color-primary)}
.badge-differential{background:var(--color-warning-hl);color:var(--color-warning)}
.badge-incremental {background:var(--color-running-hl);color:var(--color-running)}
.badge-admin       {background:var(--color-error-hl);color:var(--color-error)}
.badge-operator    {background:var(--color-warning-hl);color:var(--color-warning)}
.badge-viewer      {background:var(--color-unknown-hl);color:var(--color-unknown)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:0.375rem;
  padding:0.45rem 0.875rem;border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;
  transition:background var(--trans),color var(--trans),box-shadow var(--trans);
  border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover);color:var(--color-text-inverse)}
.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-sm{padding:0.3rem 0.625rem;font-size:var(--text-xs)}
.btn-icon{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--radius-md);
  color:var(--color-text-muted);
  transition:background var(--trans),color var(--trans);
}
.btn-icon:hover{background:var(--color-surface-offset);color:var(--color-text)}
.w-full{width:100%}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.25rem}
@media(max-width:500px){.form-grid{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:0.375rem}
.form-label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.form-hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.form-control{
  padding:0.45rem 0.75rem;border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text);font-size:var(--text-sm);
  transition:border-color var(--trans),box-shadow var(--trans);
  width:100%;
}
.form-control:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
  outline:none;
}
select.form-control{cursor:pointer}
.form-actions{padding:0 1.25rem 1.25rem;display:flex;gap:0.5rem;justify-content:flex-end}

/* ---- Filters bar ---- */
.filters{
  display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;
  padding:0.75rem;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
}
.filters .form-control{width:auto;min-width:150px}

/* ---- Modals ---- */
.modal-backdrop{
  display:none;position:fixed;inset:0;z-index:300;
  background:oklch(0 0 0/0.55);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:1rem;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  width:100%;max-width:560px;max-height:90dvh;overflow-y:auto;
}
.modal-header{
  padding:1rem 1.25rem;border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;gap:0.75rem;
}
.modal-title{font-size:var(--text-base);font-weight:700;flex:1}
.modal-footer{
  padding:1rem 1.25rem;border-top:1px solid var(--color-border);
  display:flex;gap:0.5rem;justify-content:flex-end;
}

/* ---- Alerts / Toasts ---- */
.alert{
  padding:0.75rem 1rem;border-radius:var(--radius-md);
  font-size:var(--text-sm);border-left:3px solid;
}
.alert-success{background:var(--color-success-hl);color:var(--color-success);border-color:var(--color-success)}
.alert-error  {background:var(--color-error-hl);color:var(--color-error);border-color:var(--color-error)}
.toast-container{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:999;
  display:flex;flex-direction:column;gap:0.5rem;
}
.toast{
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:0.75rem 1rem;
  font-size:var(--text-sm);box-shadow:var(--shadow-lg);
  animation:slideIn 0.2s ease;min-width:220px;
}
@keyframes slideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- Empty state ---- */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:3rem 2rem;
  color:var(--color-text-muted);gap:0.75rem;
}
.empty-state svg{color:var(--color-text-faint)}
.empty-state h3{font-size:var(--text-base);font-weight:700;color:var(--color-text)}
.empty-state p{font-size:var(--text-sm);max-width:36ch}

/* ---- Login ---- */
.login-wrapper{
  min-height:100dvh;display:flex;align-items:center;
  justify-content:center;padding:1rem;background:var(--color-bg);
}
.login-card{
  width:100%;max-width:360px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-lg);
}
.login-logo{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.75rem}
.login-title{font-size:var(--text-lg);font-weight:700;letter-spacing:-0.02em}

/* ---- Utilidades ---- */
.text-xs   {font-size:var(--text-xs)}
.text-sm   {font-size:var(--text-sm)}
.text-muted{color:var(--color-text-muted)}
.text-error{color:var(--color-error)}
.flex      {display:flex}
.gap-2     {gap:0.5rem}
.items-center{align-items:center}
code{font-family:ui-monospace,monospace;font-size:0.92em}