/* ============================================================
   Alugar Casa — Design System
   Base: Apple Human Interface Guidelines
   Aplicado sobre o Bootstrap 5.3 (usa data-bs-theme p/ dark nativo)
   ============================================================ */

/* ---------- Tokens (tema claro) ---------- */
:root{
  --accent:#007AFF;
  --accent-press:#0063CC;
  --accent-tint:rgba(0,122,255,.12);

  --green:#34C759; --orange:#FF9500; --red:#FF3B30; --purple:#AF52DE; --indigo:#5856D6;

  --bg:#F2F2F7;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-nav:#FBFBFD;
  --fill:rgba(120,120,128,.12);
  --fill-2:rgba(120,120,128,.08);

  --label:#1C1C1E;
  --label-2:rgba(60,60,67,.60);
  --label-3:rgba(60,60,67,.30);
  --separator:rgba(60,60,67,.14);

  --shadow-1:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.05);
  --shadow-2:0 4px 16px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-pop:0 12px 40px rgba(0,0,0,.16);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --sidebar-w:256px;

  --material:saturate(180%) blur(20px);
  --topbar-bg:rgba(251,251,253,.72);
  --sidebar-bg:rgba(251,251,253,.80);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,system-ui,sans-serif;
}
/* Dark automático (SO) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#0A84FF; --accent-press:#409CFF; --accent-tint:rgba(10,132,255,.24);
    --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2; --indigo:#5E5CE6;
    --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-nav:#161618;
    --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.16);
    --label:#FFFFFF; --label-2:rgba(235,235,245,.60); --label-3:rgba(235,235,245,.30);
    --separator:rgba(84,84,88,.55);
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.5); --shadow-pop:0 16px 48px rgba(0,0,0,.6);
    --topbar-bg:rgba(22,22,24,.72); --sidebar-bg:rgba(22,22,24,.80);
  }
}
/* Forçado claro */
:root[data-theme="light"]{
  --accent:#007AFF; --accent-press:#0063CC; --accent-tint:rgba(0,122,255,.12);
  --green:#34C759; --orange:#FF9500; --red:#FF3B30; --purple:#AF52DE; --indigo:#5856D6;
  --bg:#F2F2F7; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-nav:#FBFBFD;
  --fill:rgba(120,120,128,.12); --fill-2:rgba(120,120,128,.08);
  --label:#1C1C1E; --label-2:rgba(60,60,67,.60); --label-3:rgba(60,60,67,.30);
  --separator:rgba(60,60,67,.14);
  --shadow-1:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.05); --shadow-2:0 4px 16px rgba(0,0,0,.08); --shadow-pop:0 12px 40px rgba(0,0,0,.16);
  --topbar-bg:rgba(251,251,253,.72); --sidebar-bg:rgba(251,251,253,.80);
}
/* Forçado escuro */
:root[data-theme="dark"]{
  --accent:#0A84FF; --accent-press:#409CFF; --accent-tint:rgba(10,132,255,.24);
  --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2; --indigo:#5E5CE6;
  --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-nav:#161618;
  --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.16);
  --label:#FFFFFF; --label-2:rgba(235,235,245,.60); --label-3:rgba(235,235,245,.30);
  --separator:rgba(84,84,88,.55);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.5); --shadow-pop:0 16px 48px rgba(0,0,0,.6);
  --topbar-bg:rgba(22,22,24,.72); --sidebar-bg:rgba(22,22,24,.80);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--label);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}
a{color:var(--accent)}
h1,h2,h3,h4,h5{letter-spacing:-.02em}
.text-muted-2{color:var(--label-2)!important}
.req::after{content:" *";color:var(--red)}

/* ---------- Estrutura painel ---------- */
.app-wrapper{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:1030;
  background:var(--sidebar-bg);-webkit-backdrop-filter:var(--material);backdrop-filter:var(--material);
  border-right:.5px solid var(--separator);transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.sidebar-brand{
  display:flex;align-items:center;gap:.6rem;padding:1.05rem 1.25rem;font-weight:700;font-size:1.02rem;
  color:var(--label);border-bottom:.5px solid var(--separator);letter-spacing:-.02em;
}
.sidebar-brand i{
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--indigo));
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:1rem;
}
.sidebar-nav{padding:.5rem .6rem 2rem}
.sidebar-nav a{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;margin:1px 0;border-radius:9px;
  color:var(--label);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .12s;
}
.sidebar-nav a i{color:var(--label-2);width:20px;text-align:center;font-size:1rem;transition:color .12s}
.sidebar-nav a:hover{background:var(--fill-2)}
.sidebar-nav a.active{background:var(--accent-tint);color:var(--accent)}
.sidebar-nav a.active i{color:var(--accent)}
.nav-section{padding:.95rem .7rem .3rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--label-3);font-weight:700}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;position:sticky;top:0;z-index:1020;
  background:var(--topbar-bg);-webkit-backdrop-filter:var(--material);backdrop-filter:var(--material);
  border-bottom:.5px solid var(--separator);
}
.btn-icon{
  background:none;border:none;font-size:1.2rem;color:var(--label-2);cursor:pointer;
  padding:.3rem .5rem;border-radius:9px;text-decoration:none;transition:.12s;line-height:1;
}
.btn-icon:hover{background:var(--fill);color:var(--label)}
.global-search{
  flex:1;max-width:460px;display:flex;align-items:center;gap:.5rem;background:var(--fill);
  border-radius:10px;padding:.45rem .8rem;color:var(--label-2);transition:.15s;
}
.global-search:focus-within{background:var(--surface);box-shadow:0 0 0 4px var(--accent-tint),var(--shadow-1)}
.global-search input{border:none;background:none;outline:none;width:100%;font-size:.9rem;color:var(--label);font-family:inherit}
.topbar-right{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.user-menu{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;color:var(--label);font-size:.9rem;font-weight:500}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--indigo));color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem}

.content{padding:1.75rem;max-width:1360px;width:100%}

/* ---------- Cabeçalho de página ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-head h1{font-size:1.7rem;margin:0;font-weight:700;letter-spacing:-.025em}
.quick-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}

/* ---------- Cards / superfícies ---------- */
.card{
  background:var(--surface);border:.5px solid var(--separator);border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-1);color:var(--label);
}
.card-header,.card-footer{background:transparent;border-color:var(--separator)}
.card-title{font-weight:600;letter-spacing:-.01em}

/* ---------- Indicadores (stat cards) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--surface);border:.5px solid var(--separator);border-radius:var(--r-lg);
  padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--shadow-1);
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.stat-card .label{font-size:.8rem;color:var(--label-2)}
.stat-card .value{font-size:1.65rem;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-card .icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;background:var(--accent-tint);color:var(--accent);margin-bottom:.2rem}
.stat-card.warn .icon{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.stat-card.danger .icon{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.stat-card.ok .icon{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}

/* ---------- Botões (mapeando Bootstrap → HIG) ---------- */
.btn{
  --bs-btn-font-weight:600;border-radius:11px;font-size:.95rem;padding:.5rem 1.1rem;letter-spacing:-.01em;
  border:none;transition:transform .12s ease,background .15s,box-shadow .15s,color .15s;
}
.btn:active{transform:scale(.97)}
.btn-sm{border-radius:9px;font-size:.85rem;padding:.35rem .75rem}
.btn-lg{border-radius:13px;padding:.7rem 1.3rem}

.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-press);border-color:var(--accent-press);color:#fff;box-shadow:0 0 0 4px var(--accent-tint)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.94);color:#fff}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(.94);color:#fff}

.btn-outline-primary{background:var(--accent-tint);border:none;color:var(--accent)}
.btn-outline-primary:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.btn-outline-secondary{background:var(--fill);border:none;color:var(--label)}
.btn-outline-secondary:hover{background:color-mix(in srgb,var(--label-2) 22%,transparent);color:var(--label)}
.btn-outline-danger{background:color-mix(in srgb,var(--red) 12%,transparent);border:none;color:var(--red)}
.btn-outline-danger:hover{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--red)}
.btn-outline-success{background:color-mix(in srgb,var(--green) 14%,transparent);border:none;color:var(--green)}
.btn-outline-success:hover{background:color-mix(in srgb,var(--green) 24%,transparent);color:var(--green)}
.btn-link{color:var(--accent);text-decoration:none;font-weight:600}

/* ---------- Formulários ---------- */
.form-control,.form-select{
  background:var(--fill-2);border:1px solid transparent;border-radius:11px;color:var(--label);
  font-size:.95rem;padding:.55rem .8rem;transition:.15s;font-family:inherit;
}
.form-control::placeholder{color:var(--label-3)}
.form-control:focus,.form-select:focus{
  background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);color:var(--label);
}
.form-control:disabled,.form-select:disabled{background:var(--fill);opacity:.7}
.form-label{font-size:.82rem;font-weight:600;color:var(--label-2);margin-bottom:.3rem}
.form-check-input{border-radius:6px;border-color:var(--label-3)}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.form-switch .form-check-input{width:2.6em;height:1.5em;border-radius:100px;background-color:var(--fill);border:none}
.form-switch .form-check-input:checked{background-color:var(--green)}
.input-group-text{background:var(--fill);border:none;color:var(--label-2);border-radius:11px}

/* ---------- Tabelas → estilo lista agrupada ---------- */
.table{--bs-table-bg:transparent;color:var(--label);margin:0;border-color:var(--separator)}
.card>.table-responsive,.card .table-responsive{border-radius:var(--r-lg);overflow:hidden}
.table>thead{background:transparent}
.table>thead th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--label-2);
  border-bottom:.5px solid var(--separator);padding:.7rem 1rem;
}
.table>tbody td{border-color:var(--separator);padding:.8rem 1rem;vertical-align:middle}
.table.table-hover>tbody>tr:hover>*{background:var(--fill-2)}
.table-light,.table>thead.table-light{--bs-table-bg:transparent;--bs-table-color:var(--label-2)}

/* ---------- Badges → pills de estado ---------- */
.badge{font-weight:600;font-size:.72rem;padding:.34em .7em;border-radius:100px;letter-spacing:0}
.badge.text-bg-success{background:color-mix(in srgb,var(--green) 16%,transparent)!important;color:var(--green)!important}
.badge.text-bg-warning{background:color-mix(in srgb,var(--orange) 18%,transparent)!important;color:var(--orange)!important}
.badge.text-bg-danger{background:color-mix(in srgb,var(--red) 16%,transparent)!important;color:var(--red)!important}
.badge.text-bg-info{background:var(--accent-tint)!important;color:var(--accent)!important}
.badge.text-bg-secondary,.badge.text-bg-light{background:var(--fill)!important;color:var(--label-2)!important}
.badge.text-bg-dark{background:color-mix(in srgb,var(--label) 82%,transparent)!important;color:var(--surface)!important}

/* ---------- Alertas ---------- */
.alert{border:none;border-radius:var(--r-md);font-size:.9rem;padding:.8rem 1rem}
.alert-success{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.alert-danger{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.alert-warning{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.alert-info{background:var(--accent-tint);color:var(--accent)}

/* ---------- Listas / dropdown / modal ---------- */
.list-group{border-radius:var(--r-md);overflow:hidden}
.list-group-item{background:var(--surface);border-color:var(--separator);color:var(--label)}
.list-group-item-action:hover{background:var(--fill-2)}
.dropdown-menu{
  background:var(--surface);border:.5px solid var(--separator);border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);padding:.35rem;--bs-dropdown-link-color:var(--label);
}
.dropdown-item{border-radius:8px;font-size:.9rem;color:var(--label);padding:.45rem .7rem}
.dropdown-item:hover{background:var(--fill)}
.dropdown-item.active,.dropdown-item:active{background:var(--accent);color:#fff}
.dropdown-divider{border-color:var(--separator)}
.modal-content{background:var(--surface);border:.5px solid var(--separator);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
.modal-header,.modal-footer{border-color:var(--separator)}

/* ---------- Paginação / tabs ---------- */
.page-link{color:var(--accent);border:none;border-radius:9px!important;margin:0 2px;background:transparent}
.page-item.active .page-link{background:var(--accent);color:#fff}
.page-link:hover{background:var(--fill)}
.nav-tabs{border-color:var(--separator)}
.nav-tabs .nav-link{color:var(--label-2);border:none;border-radius:9px 9px 0 0}
.nav-tabs .nav-link.active{color:var(--accent);background:transparent;border-bottom:2px solid var(--accent)}

/* ---------- Seletor de tema ---------- */
.theme-menu{min-width:180px}
.theme-menu .dropdown-item.on{color:var(--accent);font-weight:600}
.theme-menu .dropdown-item.on::after{content:"✓";float:right}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:1rem}
.kanban-col{min-width:240px;max-width:240px;background:var(--fill-2);border-radius:var(--r-lg);display:flex;flex-direction:column}
.kanban-head{padding:.7rem .9rem;font-size:.8rem;font-weight:700;border-bottom:.5px solid var(--separator);color:var(--label)}
.kanban-body{padding:.5rem;min-height:60px;flex:1;display:flex;flex-direction:column;gap:.5rem}
.kanban-card{background:var(--surface);border:.5px solid var(--separator);border-radius:11px;padding:.6rem .7rem;cursor:grab;font-size:.85rem;box-shadow:var(--shadow-1);transition:.15s}
.kanban-card:hover{box-shadow:var(--shadow-2)}
.kanban-card.dragging{opacity:.5}
.kanban-body.over{outline:2px dashed var(--accent);outline-offset:-4px;border-radius:var(--r-md)}

/* ---------- Login / público ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem;
  background:
    radial-gradient(1200px 600px at 15% -10%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
    radial-gradient(1000px 700px at 110% 20%,color-mix(in srgb,var(--indigo) 60%,transparent),transparent 55%),
    linear-gradient(160deg,#0b1020,#141a2e);}
.auth-card{
  background:var(--surface);border:.5px solid var(--separator);border-radius:var(--r-xl);
  padding:2.4rem;width:100%;max-width:420px;box-shadow:var(--shadow-pop);
}
.auth-card h1{font-size:1.5rem;margin:0 0 .3rem;font-weight:700;letter-spacing:-.03em}
.auth-card .sub{color:var(--label-2);margin-bottom:1.6rem;font-size:.92rem}

/* ---------- Responsivo ---------- */
@media(max-width:992px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
}

/* ---------- Reduz movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}