/* UREA RANCH — Custom Styles v2 */
* { box-sizing: border-box; }

body { font-family: 'Inter', sans-serif; transition: background-color .3s, color .3s; }

/* ────────────────────────────────
   CSS Variables — Light / Dark
   ──────────────────────────────── */
:root {
    --bg:        #f8fafc;
    --surface:   #ffffff;
    --border:    #e2e8f0;
    --text:      #1e293b;
    --text-muted:#64748b;
    --text-light:#94a3b8;
    --input-bg:  #ffffff;
    --table-alt: #f8fafc;
    --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --card-hover-shadow: 0 4px 16px rgba(0,0,0,.08);
}

html.dark {
    --bg:        #0f172a;
    --surface:   #1e293b;
    --border:    #334155;
    --text:      #f1f5f9;
    --text-muted:#94a3b8;
    --text-light:#64748b;
    --input-bg:  #1e293b;
    --table-alt: #162032;
    --card-shadow: 0 1px 3px rgba(0,0,0,.3);
    --card-hover-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* Apply vars */
body         { background: var(--bg); color: var(--text); }
.card        { background: var(--surface); border-color: var(--border); }
.stat-card   { background: var(--surface); border-color: var(--border); }
.data-table th { background: var(--table-alt); color: var(--text-muted); border-color: var(--border); }
.data-table td { color: var(--text); border-color: var(--border); }
.data-table tbody tr:hover { background: var(--table-alt); }
.input       { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.modal-box   { background: var(--surface); }
.page-title  { color: var(--text); }
.page-subtitle { color: var(--text-muted); }

/* Layout principal */
.main-layout    { display: flex; min-height: 100vh; }
.main-content   { margin-left: 256px; flex: 1; padding: 1.5rem; padding-top: 2rem; }
@media (max-width: 1023px) {
    .main-content { margin-left: 0; padding-top: 5rem; }
}

/* Cards */
.card {
    border-radius: 1rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border);
    transition: all .2s;
}
.card:hover { box-shadow: var(--card-hover-shadow); }

/* Stat cards */
.stat-card {
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    transition: all .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); }

/* Badges */
.badge-green  { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#dcfce7; color:#16a34a; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-yellow { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#fef9c3; color:#ca8a04; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-red    { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#fee2e2; color:#dc2626; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-blue   { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#dbeafe; color:#2563eb; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-gray   { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#f1f5f9; color:#64748b; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-purple { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#ede9fe; color:#7c3aed; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-orange { display:inline-flex; align-items:center; padding:.2rem .6rem; background:#ffedd5; color:#ea580c; border-radius:999px; font-size:.72rem; font-weight:600; }

html.dark .badge-gray { background:#334155; color:#94a3b8; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.1rem; border-radius:.75rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; border:none; }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.btn:active { transform:translateY(0); }
.btn-primary   { background:#15803d; color:white; }
.btn-primary:hover  { background:#16a34a; }
.btn-danger    { background:#dc2626; color:white; }
.btn-danger:hover   { background:#ef4444; }
.btn-secondary { background:#f1f5f9; color:#475569; }
.btn-secondary:hover { background:#e2e8f0; }
.btn-outline   { background:transparent; color:#475569; border:1.5px solid #e2e8f0; }
.btn-outline:hover  { background:#f8fafc; }
.btn-whatsapp  { background:#25d366; color:white; }
.btn-whatsapp:hover { background:#1ebe5a; }
.btn-sm { padding:.35rem .8rem; font-size:.75rem; }
.btn-lg { padding:.85rem 1.5rem; font-size:.9rem; }
html.dark .btn-secondary { background:#334155; color:#cbd5e1; }
html.dark .btn-secondary:hover { background:#475569; }
html.dark .btn-outline { border-color:#475569; color:#cbd5e1; }

/* Inputs */
.input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-size: .85rem;
    font-family: 'Inter', sans-serif;
    background: var(--input-bg);
    transition: all .2s;
    color: var(--text);
}
.input:focus { outline:none; border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.1); }
.input-label { display:block; font-size:.8rem; font-weight:500; color:var(--text-muted); margin-bottom:.4rem; }

/* Table */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
    font-size: .75rem; font-weight:600;
    text-transform: uppercase; letter-spacing:.05em;
    padding: .85rem 1rem; text-align:left;
    border-bottom: 1.5px solid var(--border);
}
.data-table td { padding:.9rem 1rem; border-bottom:1px solid var(--border); font-size:.85rem; }
.data-table tr:last-child td { border-bottom:none; }

/* Modal */
.modal-backdrop {
    position: fixed; inset:0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items:center; justify-content:center;
    padding: 1rem;
    opacity:0; transition: opacity .2s;
}
.modal-backdrop.open { opacity:1; }
.modal-box {
    border-radius: 1.25rem;
    padding: 1.75rem;
    width:100%; max-width:520px;
    max-height:90vh; overflow-y:auto;
    transform: scale(.95); transition: transform .2s;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-backdrop.open .modal-box { transform:scale(1); }

/* Toast */
.toast {
    display:flex; align-items:center; gap:.75rem;
    background:#1e293b; color:white;
    border-radius:.75rem;
    padding:.85rem 1.25rem;
    font-size:.83rem; font-weight:500;
    min-width:240px; max-width:360px;
    pointer-events:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    animation:slideInRight .3s ease;
}
.toast-success { border-left:3px solid #22c55e; }
.toast-error   { border-left:3px solid #ef4444; }
.toast-info    { border-left:3px solid #3b82f6; }
.toast-warn    { border-left:3px solid #f59e0b; }
@keyframes slideInRight { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeOut { to{opacity:0;transform:translateX(120%)} }
.toast.removing { animation:fadeOut .3s ease forwards; }

/* Spinner */
.spinner { width:1.2rem; height:1.2rem; border:2px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .6s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Loading overlay */
.loading-overlay { position:absolute; inset:0; background:rgba(255,255,255,.7); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; border-radius:inherit; z-index:10; }
html.dark .loading-overlay { background:rgba(15,23,42,.7); }

/* Produto card PDV */
.produto-card {
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:1rem; padding:1rem; cursor:pointer;
    transition:all .2s; text-align:center;
}
.produto-card:hover { border-color:#15803d; transform:translateY(-3px); box-shadow:0 8px 24px rgba(21,128,61,.12); }
.produto-card.favorito { border-color:#f59e0b; }
.produto-card.favorito:hover { border-color:#d97706; }
.produto-card.out-of-stock { opacity:.5; cursor:not-allowed; }

/* Carrinho PDV */
.cart-item { display:flex; align-items:center; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }

/* Global search */
.search-results {
    position:absolute; top:calc(100% + .5rem); left:0; right:0;
    background:var(--surface); border:1px solid var(--border);
    border-radius:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.15);
    z-index:200; max-height:360px; overflow-y:auto;
}
.search-result-item {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem; cursor:pointer; transition:background .15s;
    border-bottom:1px solid var(--border);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--table-alt); }

/* Dark mode toggle */
.dark-toggle { cursor:pointer; transition:all .2s; }
.dark-toggle:hover { opacity:.8; }

/* Page header */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.page-title  { font-size:1.4rem; font-weight:700; }
.page-subtitle { font-size:.83rem; margin-top:.1rem; }

/* Payment type selector */
.pay-type-btn {
    flex:1; text-align:center; padding:.6rem; border-radius:.6rem;
    border:1.5px solid var(--border); cursor:pointer; font-size:.8rem; font-weight:600;
    transition:all .15s; background:var(--surface); color:var(--text-muted);
}
.pay-type-btn.active-pago    { border-color:#22c55e; background:#f0fdf4; color:#16a34a; }
.pay-type-btn.active-fiado   { border-color:#f59e0b; background:#fffbeb; color:#d97706; }
.pay-type-btn.active-pendente{ border-color:#3b82f6; background:#eff6ff; color:#2563eb; }
html.dark .pay-type-btn.active-pago    { background:#14532d; }
html.dark .pay-type-btn.active-fiado   { background:#451a03; }
html.dark .pay-type-btn.active-pendente{ background:#1e3a5f; }

/* Devedor row highlight */
.row-vencido { background:rgba(239,68,68,.04); }
.row-hoje    { background:rgba(245,158,11,.05); }

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* Empty state */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-light); }
.empty-state i { font-size:2.5rem; margin-bottom:1rem; display:block; }

/* Notification dot */
.notif-dot { width:8px; height:8px; background:#ef4444; border-radius:50%; position:absolute; top:-2px; right:-2px; }

/* Fiado badge pulsante */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.badge-pulse { animation:pulse 2s infinite; }