@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap");

:root {
  --ez-graphite: #263035;
  --ez-cream: #f6f3ea;
  --ez-olive: #5e6b2c;
  --ez-gold: #b8975a;
  --ez-ok-fg: #3c4719; --ez-ok-bg: #e1e8c6;
  --ez-late-fg: #6b2e1f; --ez-late-bg: #f1dad3;
  --ez-warn-fg: #5e4713; --ez-warn-bg: #f3e7c9;
  --ez-muted-fg: #4b4f42; --ez-muted-bg: #ece7d6;
}

body, button, input, select, textarea { font-family: "Jost", system-ui, sans-serif; }
h1, h2, h3, .ez-serif { font-family: "Cormorant Garamond", Georgia, serif; }
h1 { font-weight: 600; letter-spacing: .01em; }

/* fundo creme nas áreas de conteúdo */
html:not(.dark) body, html:not(.dark) #main, html:not(.dark) main { background-color: var(--ez-cream); }

/* menu lateral em grafite */
#nav-sidebar, #nav-sidebar-inner, #nav-sidebar-apps { background-color: var(--ez-graphite) !important; border-color: rgba(184, 151, 90, .3) !important; }
#nav-sidebar, #nav-sidebar * { color: #e9e4d3; }
#nav-sidebar h2 { font-family: "Jost", system-ui, sans-serif !important; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ez-gold) !important; font-weight: 600; }
#nav-sidebar h2 * { color: var(--ez-gold) !important; }
#nav-sidebar h2:hover, #nav-sidebar h2:hover * { color: #fff !important; }
#nav-sidebar ol a { border-radius: 8px; color: #e9e4d3 !important; }
#nav-sidebar ol a:hover { background-color: rgba(255, 255, 255, .08) !important; color: #fff !important; }
#nav-sidebar ol a[class*="bg-"], #nav-sidebar ol a[aria-current="page"] { background-color: var(--ez-olive) !important; color: #fff !important; }
#nav-sidebar ol a[class*="bg-"] *, #nav-sidebar ol a[aria-current="page"] * { color: #fff !important; }
#nav-sidebar input { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .18) !important; color: #fff !important; }
#nav-sidebar input::placeholder { color: #b9b4a4 !important; }
#nav-sidebar kbd, #nav-sidebar [class*="border-base"] { border-color: rgba(255, 255, 255, .18) !important; background: transparent !important; }
/* wordmark no estilo da logo: caixa alta, fina e bem espaçada */
#nav-sidebar #site-name, #nav-sidebar #site-name * { font-family: "Jost", system-ui, sans-serif !important; font-size: 1.3rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 300; color: #f6f3ea !important; }
#nav-sidebar img { border-radius: 8px; }

/* estados em texto, com cor */
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.chip-ok { color: var(--ez-ok-fg); background: var(--ez-ok-bg); }
.chip-late { color: var(--ez-late-fg); background: var(--ez-late-bg); }
.chip-warn { color: var(--ez-warn-fg); background: var(--ez-warn-bg); }
.chip-muted { color: var(--ez-muted-fg); background: var(--ez-muted-bg); }

/* páginas próprias */
.ez-page { display: grid; gap: 1.5rem; }
.ez-hello { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 600; color: var(--ez-graphite); margin: 0; }
.dark .ez-hello { color: var(--ez-cream); }
.ez-sub { color: var(--ez-muted-fg); margin: 0; }
.ez-rule { height: 2px; background: var(--ez-gold); border: 0; width: 64px; margin: .5rem 0 0; }
.ez-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ez-card { background: #fff; border: 1px solid #e7e1cf; border-top: 3px solid var(--ez-gold); border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(38, 48, 53, .05); }
.dark .ez-card { background: #2e373c; border-color: #3a4247; }
.ez-card .label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #6f7468; }
.ez-card .value { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.1rem; font-weight: 600; color: var(--ez-graphite); line-height: 1.15; }
.dark .ez-card .value { color: var(--ez-cream); }
.ez-card .note { font-size: .82rem; color: #6f7468; }
.ez-panel { background: #fff; border: 1px solid #e7e1cf; border-radius: 12px; padding: 1.25rem; }
.dark .ez-panel { background: #2e373c; border-color: #3a4247; }
.ez-panel h2 { margin: 0 0 .75rem; font-size: 1.35rem; color: var(--ez-graphite); }
.dark .ez-panel h2 { color: var(--ez-cream); }
.ez-two { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.ez-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ez-table th { background: var(--ez-graphite); color: var(--ez-cream); text-align: left; padding: .55rem .75rem; font-weight: 500; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.ez-table td { padding: .55rem .75rem; border-bottom: 1px solid #ece7d6; }
.dark .ez-table td { border-color: #3a4247; }
.ez-table .num, .ez-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ez-table tr.total td { font-weight: 600; background: var(--ez-muted-bg); color: var(--ez-graphite); }
.table-wrap { overflow-x: auto; border-radius: 10px; }

.bars { display: grid; gap: .65rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 120px; gap: .75rem; align-items: center; font-size: .85rem; }
.bar-track { background: var(--ez-muted-bg); border-radius: 6px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--ez-olive); border-radius: 6px; min-width: 2px; }
.bar-fill.out { background: var(--ez-gold); }
.bar-row .v { text-align: right; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 1.25rem; font-size: .8rem; color: #4b4f42; margin-top: .75rem; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.ez-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.ez-filters label { display: grid; gap: 4px; font-size: .78rem; color: #6f7468; }
.ez-filters input, .ez-filters select, .ez-form input:not([type=checkbox]), .ez-form select, .ez-form textarea {
  border: 1px solid #d9d3bf; border-radius: 8px; padding: .45rem .65rem; background: #fff; color: #263035; min-width: 160px; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid transparent; font-weight: 500; cursor: pointer; text-decoration: none; font-size: .9rem; }
.btn-primary { background: var(--ez-olive); color: #fff; }
.btn-primary:hover { background: #4a5523; }
.btn-ghost { background: transparent; border-color: #d9d3bf; color: var(--ez-graphite); }
.dark .btn-ghost { color: var(--ez-cream); border-color: #4b4f42; }
.btn-gold { background: var(--ez-gold); color: #fff; }
.ez-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ez-form { display: grid; gap: 1rem; max-width: 640px; }
.ez-form .field { display: grid; gap: 4px; }
.ez-form .field label { font-size: .85rem; color: #4b4f42; font-weight: 500; }
.ez-form .errorlist { color: var(--ez-late-fg); background: var(--ez-late-bg); border-radius: 8px; padding: .4rem .75rem; list-style: none; margin: 0; font-size: .85rem; }
.ez-form .help { font-size: .78rem; color: #6f7468; }
.ez-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ez-attention li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .85rem; border-radius: 10px; background: #faf8f2; border: 1px solid #ece7d6; text-decoration: none; color: var(--ez-graphite); }
.ez-attention li a:hover { border-color: var(--ez-gold); }
.ez-empty { color: #6f7468; font-style: italic; }

/* login */
body.login { background: linear-gradient(160deg, #263035 0%, #1b2327 100%) !important; }
.ez-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ez-login-card { width: 100%; max-width: 400px; background: var(--ez-cream); border-radius: 16px; padding: 2rem; border-top: 3px solid var(--ez-gold); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); color: var(--ez-graphite); }
.ez-login-logo { display: block; margin: 0 auto 1rem; width: 110px; height: 110px; border-radius: 14px; }
.ez-login-rule { width: 56px; height: 2px; background: var(--ez-gold); margin: 0 auto 1rem; border: 0; }
.ez-login-title { font-family: "Jost", system-ui, sans-serif; font-weight: 300; letter-spacing: .3em; text-transform: uppercase; font-size: 1.4rem; text-align: center; margin: 0; color: var(--ez-graphite); }
.ez-login-sub { text-align: center; color: #6f7468; margin: .25rem 0 1.5rem; }
.ez-login-card label { display: block; font-size: .8rem; color: #4b4f42; margin: 1rem 0 .3rem; font-weight: 500; }
.ez-login-card input[type=text], .ez-login-card input[type=password] { width: 100%; border: 1px solid #d9d3bf; border-radius: 8px; padding: .6rem .8rem; background: #fff; color: var(--ez-graphite); }
.ez-login-btn { width: 100%; margin-top: 1.5rem; padding: .7rem; border: 0; border-radius: 8px; background: var(--ez-olive); color: #fff; font-weight: 500; cursor: pointer; font-size: 1rem; }
.ez-login-btn:hover { background: #4a5523; }
.ez-login-error { background: var(--ez-late-bg); color: var(--ez-late-fg); border-radius: 8px; padding: .6rem .8rem; font-size: .85rem; margin: 0 0 .5rem; }

/* topo fixo em todas as telas */
#main > div:first-child { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 #ece7d6, 0 4px 12px rgba(38, 48, 53, .06); }
html:not(.dark) #main > div:first-child { background-color: #fff; }

/* logo no lugar do avatar do usuário, no rodapé do menu */
#nav-sidebar [x-data*="openUserLinks"] > div.cursor-pointer > div:first-child { background: #263035 url("../img/simbolo.png") center / cover no-repeat !important; color: transparent !important; font-size: 0 !important; height: 46px !important; width: 46px !important; min-width: 46px !important; border-radius: 10px; }
#nav-sidebar-inner > div:first-child a.bg-primary-600 { display: none; }

/* menu do usuário (admin) com fundo sólido */
#nav-sidebar nav.absolute { background: #2e373c !important; border: 1px solid rgba(184, 151, 90, .45) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 1 !important; }
#nav-sidebar nav.absolute a:hover { background: rgba(255, 255, 255, .08) !important; }
#nav-sidebar [x-data*="openUserLinks"] > div.cursor-pointer { background: transparent !important; }
#nav-sidebar [x-data*="openUserLinks"] > div.cursor-pointer:hover { background: rgba(255, 255, 255, .07) !important; }

.ez-login-hint { color: #6f7468; font-weight: 400; }
.ez-qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid #e7e1cf; }
.ez-qr svg { width: 100%; height: 100%; }
.ez-secret { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; background: #faf8f2; border: 1px dashed #d9d3bf; border-radius: 8px; padding: .5rem .75rem; word-break: break-all; }
.ez-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; font-family: ui-monospace, Consolas, monospace; }
.ez-codes span { background: #faf8f2; border: 1px solid #ece7d6; border-radius: 8px; padding: .4rem .6rem; text-align: center; }