/* ============================================================================
   Sayts Admin — layout e componentes (usa os tokens de sayts-theme.css)
   ========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; }

a { color: var(--sy-brand-blue); text-decoration: none; }
a:hover { color: #5EA2F8; }

/* --------------------------------------------------------------- Shell ---- */
.sy-shell { display: flex; min-height: 100vh; }

.sy-sidebar {
    width: 236px; flex: 0 0 236px;
    background: var(--sy-chrome);
    border-right: 1px solid var(--sy-border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.sy-sidebar-brand { padding: var(--sy-s5) var(--sy-s5) var(--sy-s4); }
.sy-logo {
    font-family: var(--sy-font-display); font-weight: 700; font-size: 20px;
    background: var(--sy-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sy-logo-sub { margin-left: 8px; color: var(--sy-text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }

.sy-nav { display: flex; flex-direction: column; padding: var(--sy-s2); gap: 2px; }
.sy-nav-group { color: var(--sy-text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: var(--sy-s4) var(--sy-s3) var(--sy-s2); }
.sy-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px var(--sy-s3); border-radius: var(--sy-r-control);
    color: var(--sy-text-2); font-weight: 500; font-size: 14px;
}
.sy-nav-item i { font-size: 16px; width: 18px; text-align: center; }
.sy-nav-item:hover { background: var(--sy-elevated); color: var(--sy-text-1); }
.sy-nav-item.active { background: var(--sy-tint-blue); color: var(--sy-text-1); }

.sy-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.sy-topbar {
    height: 56px; flex: 0 0 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--sy-s5);
    background: var(--sy-chrome); border-bottom: 1px solid var(--sy-border);
    position: sticky; top: 0; z-index: 5;
}
.sy-topbar-user { display: flex; align-items: center; gap: var(--sy-s3); }
.sy-user-email { color: var(--sy-text-2); font-size: 13px; }

.sy-content { padding: var(--sy-s5) var(--sy-s6); max-width: 1200px; width: 100%; }

/* ------------------------------------------------------------ Tipografia -- */
.sy-h1 { font-family: var(--sy-font-display); font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.sy-h2 { font-family: var(--sy-font-display); font-size: 18px; font-weight: 600; margin: 0 0 var(--sy-s3); }
.sy-subtle { color: var(--sy-text-2); margin: 0 0 var(--sy-s5); }
.sy-mono { font-family: var(--sy-font-mono); font-size: 12px; color: var(--sy-text-2); }
.sy-mt { margin-top: var(--sy-s5); }

/* ----------------------------------------------------------------- Cards -- */
.sy-card {
    background: var(--sy-card); border: 1px solid var(--sy-border);
    border-radius: var(--sy-r-card); padding: var(--sy-s5);
}
.sy-empty { text-align: center; color: var(--sy-text-2); padding: var(--sy-s6) var(--sy-s5); }
.sy-empty h2 { color: var(--sy-text-1); }
.sy-list { margin: 0; padding-left: var(--sy-s5); color: var(--sy-text-2); line-height: 1.9; }

/* ----------------------------------------------------------------- Stats -- */
.sy-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sy-s4); }
.sy-stat {
    background: var(--sy-card); border: 1px solid var(--sy-border);
    border-radius: var(--sy-r-card); padding: var(--sy-s5);
    display: flex; flex-direction: column; gap: var(--sy-s2);
}
.sy-stat-label { color: var(--sy-text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.sy-stat-value { font-family: var(--sy-font-display); font-size: 30px; font-weight: 700; }

/* ---------------------------------------------------------------- Tabela -- */
.sy-table-wrap { overflow-x: auto; }
.sy-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sy-table th {
    text-align: left; color: var(--sy-text-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
    padding: var(--sy-s2) var(--sy-s3); border-bottom: 1px solid var(--sy-border);
}
.sy-table td { padding: var(--sy-s3); border-bottom: 1px solid var(--sy-elevated); color: var(--sy-text-1); }
.sy-table tr:hover td { background: var(--sy-elevated); }

.sy-badge {
    display: inline-block; padding: 2px 10px; border-radius: var(--sy-r-pill);
    background: var(--sy-tint-violet); color: var(--sy-text-1); font-size: 12px; font-weight: 500;
}

/* --------------------------------------------------------------- Botões ---- */
.sy-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--sy-r-control);
    font-family: var(--sy-font-ui); font-weight: 600; font-size: 14px;
    border: 1px solid transparent; cursor: pointer; transition: filter .15s, background .15s;
}
.sy-btn:hover { filter: brightness(1.08); }
.sy-btn-sm { padding: 6px 12px; font-size: 13px; }
.sy-btn-block { width: 100%; margin-top: var(--sy-s4); }
.sy-btn-primary { background: var(--sy-brand-grad); color: #fff; }
.sy-btn-neutral { background: var(--sy-btn-neutral); color: var(--sy-text-1); border-color: var(--sy-border); }

/* --------------------------------------------------------------- Inputs ---- */
.sy-label { display: block; color: var(--sy-text-2); font-size: 13px; font-weight: 500; margin: var(--sy-s4) 0 6px; }
.sy-input {
    width: 100%; padding: 10px 12px;
    background: var(--sy-input); color: var(--sy-text-1);
    border: 1px solid var(--sy-border); border-radius: var(--sy-r-control);
    font-family: var(--sy-font-ui); font-size: 14px;
}
.sy-input::placeholder { color: var(--sy-text-3); }
.sy-input:focus { outline: none; border-color: var(--sy-brand-blue); box-shadow: var(--sy-focus-ring); }
.sy-field-error { display: block; color: var(--sy-danger); font-size: 12px; margin-top: 4px; }

/* --------------------------------------------------------------- Alertas -- */
.sy-alert { padding: 10px 14px; border-radius: var(--sy-r-control); font-size: 13px; margin-bottom: var(--sy-s3); }
.sy-alert-danger { background: var(--sy-tint-danger); color: #ffc9cb; border: 1px solid rgba(229,72,77,.4); }

/* ---------------------------------------------------------------- Login ---- */
.sy-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sy-s5); }
.sy-login-card {
    width: 100%; max-width: 380px;
    background: var(--sy-card); border: 1px solid var(--sy-border);
    border-radius: var(--sy-r-card); padding: var(--sy-s6);
}
.sy-login-brand { text-align: center; margin-bottom: var(--sy-s5); }
.sy-login-logo {
    display: block; font-family: var(--sy-font-display); font-weight: 700; font-size: 28px;
    background: var(--sy-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sy-login-tag { color: var(--sy-text-3); font-size: 13px; }

/* ------------------------------------------------------------------ Abas -- */
.sy-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sy-border); margin-bottom: var(--sy-s5); }
.sy-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 16px; color: var(--sy-text-2); font-weight: 600; font-size: 14px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sy-tab:hover { color: var(--sy-text-1); }
.sy-tab.active { color: var(--sy-text-1); border-bottom-color: var(--sy-brand-blue); }

/* -------------------------------------------------------------- Utilitário */
.sy-row { display: flex; gap: var(--sy-s3); align-items: flex-end; flex-wrap: wrap; }
.sy-grow { flex: 1 1 auto; }
.sy-money { font-family: var(--sy-font-mono); font-weight: 500; }
.sy-pos { color: var(--sy-success); }
.sy-neg { color: var(--sy-danger); }
.sy-textarea {
    width: 100%; padding: 10px 12px; background: var(--sy-input); color: var(--sy-text-1);
    border: 1px solid var(--sy-border); border-radius: var(--sy-r-control);
    font-family: var(--sy-font-ui); font-size: 14px; resize: vertical; min-height: 64px;
}
.sy-textarea:focus { outline: none; border-color: var(--sy-brand-blue); box-shadow: var(--sy-focus-ring); }
.sy-btn-danger { background: var(--sy-danger); color: #fff; }
.sy-btn-success { background: var(--sy-success); color: #06231a; }
.sy-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.sy-inline-actions { display: flex; gap: 8px; align-items: center; }
.sy-confirm-box { background: var(--sy-elevated); border: 1px solid var(--sy-border); border-radius: var(--sy-r-control); padding: var(--sy-s3); margin-top: var(--sy-s2); }
.sy-check { display: inline-flex; align-items: center; gap: 8px; color: var(--sy-text-2); font-size: 13px; margin: var(--sy-s2) 0; cursor: pointer; }
.sy-alert-success { background: var(--sy-tint-success); color: #9be9c0; border: 1px solid rgba(52,199,123,.4); }
.sy-alert-warning { background: var(--sy-tint-warning); color: #f0d190; border: 1px solid rgba(224,168,60,.4); }
.sy-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sy-s4); font-size: 13px; }
.sy-kv dt { color: var(--sy-text-3); }
.sy-kv dd { margin: 0; color: var(--sy-text-1); }
.sy-status { display:inline-block; padding: 2px 10px; border-radius: var(--sy-r-pill); font-size:12px; font-weight:500; }
.sy-status-pago { background: var(--sy-tint-success); color:#9be9c0; }
.sy-status-devolvido { background: var(--sy-tint-warning); color:#f0d190; }
.sy-status-outro { background: var(--sy-btn-neutral); color: var(--sy-text-2); }

/* ------------------------------------------------------------ Formulário -- */
.sy-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sy-s3) var(--sy-s4); }
.sy-form-grid .sy-col-span { grid-column: 1 / -1; }
select.sy-input { appearance: none; -webkit-appearance: none; }

/* ------------------------------------------------------------ Responsivo -- */
@media (max-width: 760px) {
    .sy-sidebar { display: none; }
    .sy-content { padding: var(--sy-s4); }
}