@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --olive-950:#282818;--olive-800:#3a3a22;--olive-600:#5c5c38;--olive-400:#8a8a5c;
  --olive-200:#c8c8a0;--olive-100:#eaeade;--olive-50:#f3f3ec;
  --terra-900:#8a1a1e;--terra-600:#b84448;--terra-400:#d47074;--terra-200:#e8a8aa;--terra-50:#fdf0f0;
  --bg:#f5f5ef;--surface:#ffffff;--surface2:#f9f9f5;
  --border:rgba(0,0,0,.07);--border-md:rgba(0,0,0,.11);
  --text:#1e1e18;--text2:#5a5a52;--text3:#8a8a82;
  --green-text:#3a6b46;--green-bg:#eaf2ee;
  --amber-text:#7a6020;--amber-bg:#f5f0e4;
  --blue-text:#2a4a88;--blue-bg:#eaeff8;
  --red-text:#8a2828;--red-bg:#faeaea;
  --sidebar-w:220px;--topbar-h:58px;--r8:8px;--r12:12px;--r16:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* LAYOUT */
.ds-layout{display:flex;min-height:100vh}
.ds-main{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);flex:1;padding:28px;min-width:0}

/* SIDEBAR */
.ds-sidebar{width:var(--sidebar-w);background:var(--olive-950);position:fixed;top:0;left:0;height:100vh;z-index:200;display:flex;flex-direction:column;overflow-y:auto}
.ds-sidebar-brand{padding:18px 16px 14px;border-bottom:.5px solid rgba(255,255,255,.07);flex-shrink:0}
.ds-sidebar-logo{display:flex;align-items:center;gap:10px}
.ds-sidebar-icon{width:32px;height:32px;border-radius:var(--r8);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-sidebar-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.88);letter-spacing:-.1px}
.ds-sidebar-sub{font-size:10px;color:rgba(255,255,255,.28);margin-top:1px}
.ds-sidebar-nav{flex:1;padding:10px 0}
.ds-nav-section{font-size:9px;font-weight:500;letter-spacing:1.5px;color:rgba(255,255,255,.22);text-transform:uppercase;padding:10px 16px 3px}
.ds-nav-item a{display:flex;align-items:center;gap:9px;padding:7px 16px;font-size:12px;color:rgba(255,255,255,.45);border-left:2px solid transparent;transition:all .15s}
.ds-nav-item a i{font-size:15px;width:16px}
.ds-nav-item a:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.78)}
.ds-nav-item a.active{background:rgba(255,255,255,.07);color:rgba(255,255,255,.92);border-left-color:var(--terra-400)}
.ds-nav-badge{margin-left:auto;background:rgba(180,100,100,.3);color:rgba(230,180,180,.85);font-size:9px;padding:1px 6px;border-radius:10px}
.ds-sidebar-footer{padding:14px 16px;border-top:.5px solid rgba(255,255,255,.07);font-size:11px;color:rgba(255,255,255,.35);flex-shrink:0}
.ds-sidebar-footer strong{display:block;color:rgba(255,255,255,.65);font-size:12px;margin-bottom:1px}

/* TOPBAR */
.ds-topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);background:var(--surface);border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:199}
.ds-topbar-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.2px}
.ds-topbar-bread{font-size:10px;color:var(--text3);margin-top:1px}
.ds-topbar-right{display:flex;align-items:center;gap:8px}
.ds-topbar-search{background:var(--olive-50);border:.5px solid var(--olive-100);border-radius:var(--r8);padding:6px 12px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);cursor:text}
.ds-topbar-ic{width:32px;height:32px;border-radius:var(--r8);background:var(--surface2);border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:16px;position:relative}
.ds-topbar-ic.has-dot::after{content:'';position:absolute;top:6px;right:6px;width:5px;height:5px;background:var(--terra-400);border-radius:50%;border:1.5px solid var(--surface)}
.ds-topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--olive-100);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--olive-600)}

/* PAGE HEADER */
.ds-page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.ds-page-title{font-size:20px;font-weight:700;color:var(--olive-800);letter-spacing:-.4px}
.ds-page-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* KPI */
.ds-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:24px}
.ds-kpi{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r12);padding:16px}
.ds-kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ds-kpi-icon{width:32px;height:32px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:16px}
.ds-kpi-tag{font-size:9px;font-weight:500;padding:2px 7px;border-radius:10px}
.ds-kpi-val{font-size:26px;font-weight:700;color:var(--olive-800);letter-spacing:-.5px;line-height:1;margin-bottom:2px}
.ds-kpi-label{font-size:11px;color:var(--text3)}
.ds-kpi-delta{font-size:10px;color:var(--text3);margin-top:8px;display:flex;align-items:center;gap:3px}
.ds-kpi-delta.up{color:var(--green-text)}

/* CARD */
.ds-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r16);overflow:hidden}
.ds-card-header{padding:14px 18px;border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ds-card-title{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.1px}
.ds-card-sub{font-size:11px;color:var(--text3);margin-top:1px}
.ds-card-body{padding:18px}
.ds-section-head{background:var(--olive-50);border-bottom:.5px solid var(--olive-100);padding:9px 16px;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--olive-600)}

/* TABLE */
.ds-table-wrap{overflow-x:auto}
.ds-table{width:100%;border-collapse:collapse;font-size:12px}
.ds-table thead th{background:var(--surface2);padding:9px 16px;text-align:left;font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--text3);border-bottom:.5px solid var(--border);white-space:nowrap}
.ds-table tbody td{padding:11px 16px;border-bottom:.5px solid var(--border);vertical-align:middle}
.ds-table tbody tr:last-child td{border-bottom:none}
.ds-table tbody tr:hover td{background:var(--surface2)}

/* FILTER BAR */
.ds-filter-bar{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ds-filter-group{display:flex;flex-direction:column;gap:4px}
.ds-filter-label{font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.ds-input{background:var(--surface);border:.5px solid var(--border-md);border-radius:var(--r8);padding:7px 12px;font-size:12px;color:var(--text);outline:none;transition:border .15s}
.ds-input:focus{border-color:var(--olive-400)}
.ds-select{background:var(--surface);border:.5px solid var(--border-md);border-radius:var(--r8);padding:7px 12px;font-size:12px;color:var(--text);outline:none}

/* BUTTONS */
.ds-btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r8);font-family:inherit;font-weight:500;font-size:12px;padding:7px 14px;cursor:pointer;transition:all .15s;white-space:nowrap}
.ds-btn-primary{background:var(--olive-600);color:#fff}
.ds-btn-primary:hover{background:var(--olive-800)}
.ds-btn-secondary{background:var(--surface2);border:.5px solid var(--border-md);color:var(--text2)}
.ds-btn-secondary:hover{background:var(--olive-50)}
.ds-btn-danger{background:var(--terra-600);color:#fff}
.ds-btn-danger:hover{background:var(--terra-900)}
.ds-btn-ghost{background:transparent;border:.5px solid var(--border-md);color:var(--text2)}

/* CHIPS */
.ds-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:.5px solid var(--border);border-radius:var(--r8);padding:5px 10px;font-size:11px;color:var(--text2);cursor:pointer;transition:background .15s}
.ds-chip:hover{background:var(--olive-50)}
.ds-chip.active{background:var(--olive-600);color:#fff;border-color:var(--olive-600)}

/* BADGES */
.ds-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:500}
.ds-badge-green{background:var(--green-bg);color:var(--green-text)}
.ds-badge-amber{background:var(--amber-bg);color:var(--amber-text)}
.ds-badge-blue{background:var(--blue-bg);color:var(--blue-text)}
.ds-badge-red{background:var(--red-bg);color:var(--red-text)}
.ds-badge-olive{background:var(--olive-100);color:var(--olive-600)}

/* SEMAFOROS */
.ds-sema{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;flex-shrink:0}
.ds-sema-green{background:#7ab888}
.ds-sema-amber{background:#c8b060}
.ds-sema-red{background:#c07878}

/* AVATAR */
.ds-avatar{width:30px;height:30px;border-radius:50%;background:var(--olive-100);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--olive-600);flex-shrink:0}
.ds-avatar-lg{width:42px;height:42px;border-radius:50%;background:var(--olive-100);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--olive-600);flex-shrink:0}

/* PAGINACAO */
.ds-pagination{padding:11px 18px;display:flex;align-items:center;justify-content:space-between;border-top:.5px solid var(--border);font-size:11px;color:var(--text3)}
.ds-pg-links{display:flex;gap:4px}
.ds-pg-links a,.ds-pg-links span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r8);border:.5px solid var(--border);font-size:11px;color:var(--text2);text-decoration:none;transition:all .15s}
.ds-pg-links a:hover{background:var(--olive-50)}
.ds-pg-links .current{background:var(--olive-600);color:#fff;border-color:var(--olive-600)}
.ds-pg-links .disabled{opacity:.3;pointer-events:none}

/* FINANCEIRO */
.ds-fin-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:.5px solid var(--border);font-size:12px}
.ds-fin-row:last-child{border:none;padding-top:12px}
.ds-fin-credit{color:var(--green-text);font-weight:500}
.ds-fin-debit{color:var(--terra-600)}
.ds-fin-total{font-size:16px;font-weight:700;color:var(--olive-800)}

/* INDICADORES */
.ds-indic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ds-indic{background:var(--olive-50);border-radius:var(--r8);padding:12px;text-align:center}
.ds-indic-val{font-size:20px;font-weight:700;color:var(--olive-800);letter-spacing:-.4px;line-height:1}
.ds-indic-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-top:4px}

/* FLASH */
.ds-flash{padding:11px 16px;border-radius:var(--r8);font-size:12px;margin-bottom:16px}
.ds-flash-success{background:var(--green-bg);color:var(--green-text);border:.5px solid #c8e6d0}
.ds-flash-error{background:var(--red-bg);color:var(--red-text);border:.5px solid #f0c8c8}
.ds-flash-info{background:var(--blue-bg);color:var(--blue-text);border:.5px solid #c8d8f0}

/* ══ MODO PRODUTOR ══════════════════════════════════════════ */
.prod-layout{background:var(--bg);min-height:100vh}
.prod-topbar{background:var(--olive-950);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.prod-topbar-brand{display:flex;align-items:center;gap:10px}
.prod-topbar-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.prod-topbar-name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.1px}
.prod-topbar-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:1px}
.prod-topbar-user{display:flex;align-items:center;gap:8px}
.prod-topbar-uname{font-size:12px;color:rgba(255,255,255,.6);text-align:right}
.prod-topbar-av{width:34px;height:34px;border-radius:50%;background:var(--olive-100);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--olive-600)}
.prod-body{padding:20px 18px;max-width:600px;margin:0 auto}
.prod-greeting{margin-bottom:22px}
.prod-hi{font-size:22px;font-weight:700;color:var(--olive-800);letter-spacing:-.5px}
.prod-date{font-size:12px;color:var(--text3);margin-top:3px}
.prod-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.prod-kpi{background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.prod-kpi-val{font-size:26px;font-weight:700;color:var(--olive-800);letter-spacing:-.5px;line-height:1}
.prod-kpi-lbl{font-size:11px;color:var(--text3);margin-top:5px;line-height:1.3}
.prod-section-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.2px;margin-bottom:12px}
.prod-card{background:var(--surface);border:.5px solid var(--border);border-radius:14px;padding:18px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s;text-decoration:none;color:inherit}
.prod-card:hover{background:var(--olive-50);border-color:var(--olive-200)}
.prod-card:active{transform:scale(.99)}
.prod-card-left{display:flex;align-items:center;gap:14px}
.prod-card-icon{width:48px;height:48px;border-radius:12px;background:var(--olive-50);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px}
.prod-card-num{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.prod-card-farm{font-size:12px;color:var(--text2);margin-top:3px;font-weight:500}
.prod-card-date{font-size:11px;color:var(--text3);margin-top:1px}
.prod-card-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.prod-card-tag{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text2);background:var(--olive-50);border-radius:6px;padding:3px 7px}
.prod-card-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.prod-card-val-main{font-size:17px;font-weight:700;color:var(--green-text);text-align:right;letter-spacing:-.3px}
.prod-card-val-lbl{font-size:10px;color:var(--text3);text-align:right;margin-top:1px}
.prod-card-arrow{width:32px;height:32px;border-radius:8px;background:var(--olive-50);display:flex;align-items:center;justify-content:center;color:var(--olive-400);font-size:18px}
.prod-btn-lg{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:14px;font-family:inherit;font-size:15px;font-weight:600;padding:18px;cursor:pointer;transition:all .15s;margin-bottom:10px;letter-spacing:-.2px}
.prod-btn-lg-primary{background:var(--olive-600);color:#fff}
.prod-btn-lg-primary:hover{background:var(--olive-800)}
.prod-btn-lg-secondary{background:var(--surface);color:var(--olive-600);border:1.5px solid var(--olive-200)}
.prod-btn-lg-secondary:hover{background:var(--olive-50)}
.prod-help{background:var(--terra-50);border:.5px solid var(--terra-200);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;margin-top:10px;cursor:pointer}
.prod-help-ic{width:38px;height:38px;border-radius:10px;background:var(--terra-200);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.prod-help-title{font-size:13px;font-weight:600;color:var(--terra-900)}
.prod-help-sub{font-size:11px;color:var(--terra-600);margin-top:2px}

/* Acima de 640px o modo produtor continua com a mesma largura de celular, mas
   fica contido num "cartão" centralizado em vez de esticar a topbar na tela toda */
@media(min-width:640px){
  body:has(.prod-layout){background:var(--olive-100)}
  .prod-layout{max-width:430px;margin:32px auto;min-height:calc(100vh - 64px);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(40,40,24,.18);background:var(--bg)}
  .prod-topbar{position:static;border-radius:22px 22px 0 0}
}

/* AUTH */
.auth-wrap{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r16);padding:36px 32px;width:100%;max-width:400px}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo-mark{width:48px;height:48px;border-radius:14px;background:var(--olive-950);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px}
.auth-logo-name{font-size:18px;font-weight:700;color:var(--olive-800);letter-spacing:-.3px}
.auth-logo-sub{font-size:11px;color:var(--text3);margin-top:2px}
.auth-field{margin-bottom:14px}
.auth-label{font-size:11px;font-weight:500;color:var(--text2);margin-bottom:5px;display:block}
.auth-input{width:100%;background:var(--surface2);border:.5px solid var(--border-md);border-radius:var(--r8);padding:10px 14px;font-size:13px;color:var(--text);outline:none;transition:border .15s}
.auth-input:focus{border-color:var(--olive-400);background:var(--surface)}
.auth-btn{width:100%;background:var(--olive-600);color:#fff;border:none;border-radius:var(--r8);padding:12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;margin-top:6px}
.auth-btn:hover{background:var(--olive-800)}
.auth-link{font-size:11px;color:var(--olive-600);text-align:center;margin-top:14px;display:block}

/* UTILS */
.text-green{color:var(--green-text)}
.text-red{color:var(--terra-600)}
.text-muted{color:var(--text3)}
.text-olive{color:var(--olive-600)}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.d-flex{display:flex}.align-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}

/* RESPONSIVO */
@media(max-width:768px){
  .ds-sidebar{transform:translateX(-100%);transition:transform .25s}
  .ds-sidebar.open{transform:translateX(0)}
  .ds-main{margin-left:0;padding:16px}
  .ds-topbar{left:0;padding:0 16px}
  .ds-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .ds-table thead{display:none}
  .ds-table,.ds-table tbody,.ds-table tr,.ds-table td{display:block;width:100%}
  .ds-table td{padding:6px 14px;border:none}
  .ds-table td::before{content:attr(data-label);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text3);display:block;margin-bottom:2px}
  .ds-table tr{border-bottom:.5px solid var(--border);padding:10px 0}
  .prod-kpis{grid-template-columns:repeat(3,1fr)}
  .prod-card{flex-wrap:wrap}
}
@media(max-width:480px){
  .ds-kpi-grid{grid-template-columns:1fr 1fr}
  .prod-kpis{grid-template-columns:1fr 1fr}
  .prod-kpi:last-child{grid-column:span 2}
}
