/* ═══════════════════════════════════════════════════════════════
   ORÇAMENTO MASTER — DESIGN SYSTEM v2.1 (RESPONSIVO)
   Premium SaaS UI · Stripe/Linear/Vercel inspired
   Breakpoints: xs(0) → sm(576px) → md(768px) → lg(992px) → xl(1200px) → xxl(1400px)
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --primary: #1a4d8c;
  --primary-dark: #143d70;
  --primary-light: #e8f1fb;
  --primary-50: #f0f6fd;
  --primary-100: #dbe8f9;
  --accent: #10b981;
  --accent-dark: #059669;
  --accent-light: #ecfdf5;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-dark: #d97706;
  --warning-light: #fffbeb;
  --orange: #f97316;
  --orange-dark: #ea580c;
  --info: #3b82f6;
  --gray-25: #fcfcfd;
  --gray-50: #f8fafc;
  --gray-75: #f1f5f9;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow: 0 4px 12px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.02);
  --shadow-md: 0 8px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.08);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --transition: .15s cubic-bezier(.4,0,.2,1);
  --transition-slow: .25s cubic-bezier(.4,0,.2,1);
  --sb-width: 260px;

  /* Tipografia fluida */
  --fs-saas-body: clamp(0.875rem, 1.5vw, 1rem);
  --fs-saas-h1: clamp(1rem, 2.2vw, 1.375rem);
  --fs-saas-h2: clamp(0.95rem, 1.8vw, 1.125rem);
  --fs-saas-label: clamp(0.6rem, 1vw, 0.67rem);
  --fs-saas-input: clamp(0.77rem, 1.2vw, 0.82rem);
  --fs-saas-btn: clamp(0.72rem, 1.1vw, 0.78rem);
  --fs-saas-table: clamp(0.66rem, 1.1vw, 0.78rem);
  --fs-saas-th: clamp(0.55rem, 0.9vw, 0.65rem);
  --fs-saas-badge: clamp(0.6rem, 1vw, 0.65rem);
}

/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-saas-body);
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -.01em;
}
h1{font-size:var(--fs-saas-h1)}h2{font-size:var(--fs-saas-h2)}h3{font-size:1rem}

a{color:var(--primary);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary-dark)}

img{max-width:100%;height:auto;display:block}

:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── Layout ──────────────────────────────────────────────────── */
.saas-wrap{
  margin-left: var(--sb-width, 260px);
  padding: 1.75rem 2rem;
  min-height: 100vh;
  transition: margin-left var(--transition-slow);
}

.saas-container{
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* ── Page Header ─────────────────────────────────────────────── */
.saas-page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1.25rem;
}

.saas-page-header h1{
  font-size:var(--fs-saas-h1);
  font-weight:700;
  color:var(--gray-900);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.saas-page-header h1 i{font-size:1.15rem;color:var(--primary);opacity:.8}

.saas-header-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.saas-alert{
  padding:.65rem .9rem;
  border-radius: var(--radius);
  margin-bottom:.75rem;
  font-size:.8rem;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:.5rem;
  border:1px solid transparent;
}
.saas-alert i{flex-shrink:0}
.saas-alert-success{background:var(--accent-light);color:#065f46;border-color:#a7f3d0}
.saas-alert-error{background:var(--danger-light);color:#991b1b;border-color:#fecaca}
.saas-alert-warning{background:var(--warning-light);color:#92400e;border-color:#fde68a}
.saas-alert-info{background:var(--primary-50);color:#1e40af;border-color:#bfdbfe}

/* ── Cards ───────────────────────────────────────────────────── */
.saas-card{
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1rem;
  transition: box-shadow var(--transition-slow);
}
.saas-card:hover{box-shadow: var(--shadow-sm)}

.saas-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.85rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--gray-100);
  gap:.5rem;
  flex-wrap:wrap;
}

.saas-card-header h1,.saas-card-header h2,.saas-card-title{
  font-size:.8rem;
  font-weight:700;
  color:var(--gray-600);
  text-transform:uppercase;
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.saas-card-header h1 i,.saas-card-header h2 i{font-size:.75rem;color:var(--primary)}

/* ── Form Grid (12 colunas) ──────────────────────────────────── */
.saas-form-row{display:grid;grid-template-columns:repeat(12,1fr);gap:.75rem;margin-bottom:.75rem}
.saas-col-1{grid-column:span 1}.saas-col-2{grid-column:span 2}
.saas-col-3{grid-column:span 3}.saas-col-4{grid-column:span 4}
.saas-col-5{grid-column:span 5}.saas-col-6{grid-column:span 6}
.saas-col-7{grid-column:span 7}.saas-col-8{grid-column:span 8}
.saas-col-9{grid-column:span 9}.saas-col-10{grid-column:span 10}
.saas-col-11{grid-column:span 11}.saas-col-12{grid-column:span 12}

/* ── Form Elements ───────────────────────────────────────────── */
.saas-form-group{display:flex;flex-direction:column}

.saas-label{
  display:block;
  font-size:var(--fs-saas-label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--gray-500);
  margin-bottom:.25rem;
}

.saas-input,.saas-select,.saas-textarea{
  width:100%;
  padding:.5rem .7rem;
  border:1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size:var(--fs-saas-input);
  font-family:var(--font-sans);
  background:var(--gray-50);
  color:var(--gray-800);
  transition:all var(--transition);
  line-height:1.45;
}
.saas-input:hover,.saas-select:hover,.saas-textarea:hover{border-color:var(--gray-300)}
.saas-input:focus,.saas-select:focus,.saas-textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--white);
  box-shadow:0 0 0 3px rgba(26,77,140,.08);
}
.saas-input::placeholder{color:var(--gray-400)}

/* ── Date Input Fix ──────────────────────────────────────────── */
.saas-input[type="date"] {
  color-scheme: light;
  background: #fff;
  color: var(--gray-800);
  min-height: 38px;
}
.saas-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  filter: invert(0);
}
.saas-input[type="date"]::-webkit-datetime-edit {
  color: var(--gray-800);
}
.saas-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--gray-800);
}

.saas-textarea{resize:vertical;min-height:80px}
.saas-form-row .form-group{margin-bottom:0}

/* ── Buttons ─────────────────────────────────────────────────── */
.saas-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.5rem .95rem;
  font-size:var(--fs-saas-btn);
  font-weight:600;
  font-family:var(--font-sans);
  border:1.5px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:all var(--transition);
  line-height:1;
  letter-spacing:-.01em;
}
.saas-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.saas-btn:active{transform:translateY(0)}
.saas-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.saas-btn-primary{background:var(--primary);color:var(--white);border-color:var(--primary)}
.saas-btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 4px 14px rgba(26,77,140,.25)}

.saas-btn-success{background:var(--accent);color:var(--white);border-color:var(--accent)}
.saas-btn-success:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 4px 14px rgba(16,185,129,.25)}

.saas-btn-danger{background:var(--danger);color:var(--white);border-color:var(--danger)}
.saas-btn-danger:hover{background:var(--danger-dark);border-color:var(--danger-dark);box-shadow:0 4px 14px rgba(239,68,68,.25)}

.saas-btn-info{background:var(--info);color:var(--white);border-color:var(--info)}
.saas-btn-warning{background:var(--warning);color:var(--white);border-color:var(--warning)}
.saas-btn-orange{background:var(--orange);color:var(--white);border-color:var(--orange)}

.saas-btn-secondary{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-200)}
.saas-btn-secondary:hover{background:var(--gray-200);border-color:var(--gray-300)}

.saas-btn-outline{background:transparent;color:var(--primary);border-color:var(--gray-300)}
.saas-btn-outline:hover{background:var(--primary-50);border-color:var(--primary);color:var(--primary)}

.saas-btn-sm{padding:.3rem .6rem;font-size:.68rem;border-radius:var(--radius-xs)}
.saas-btn-xs{padding:.2rem .45rem;font-size:.62rem;border-radius:var(--radius-xs)}
.saas-btn-full{height:100%;min-height:2.35rem}

/* ── Tables ──────────────────────────────────────────────────── */
.saas-table-container{overflow-x:auto;border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.saas-table{width:100%;border-collapse:collapse;font-size:var(--fs-saas-table)}
.saas-table thead th{
  text-align:left;
  padding:.55rem .75rem;
  background:var(--gray-50);
  color:var(--gray-500);
  font-size:var(--fs-saas-th);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.5px;
  border-bottom:1.5px solid var(--gray-200);
  white-space:nowrap;
}
.saas-table tbody td{
  padding:.5rem .75rem;
  border-bottom:1px solid var(--gray-100);
  color:var(--gray-700);
  vertical-align:middle;
}
.saas-table tbody tr{transition:background var(--transition)}
.saas-table tbody tr:hover{background:var(--gray-50)}
.saas-table tbody tr:last-child td{border-bottom:none}
.saas-table .saas-actions{white-space:nowrap;text-align:center}

/* ── Table: Card stacking no mobile ─────────────────────────────── */
@media (max-width: 767px) {
  .saas-table-card-stack {
    min-width: 0;
  }
  .saas-table-card-stack thead {
    display: none;
  }
  .saas-table-card-stack tbody tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: .75rem;
    background: var(--white);
    box-shadow: var(--shadow-xs);
  }
  .saas-table-card-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: .72rem;
    text-align: right;
    gap: .5rem;
  }
  .saas-table-card-stack tbody td:last-child { border-bottom: none; }
  .saas-table-card-stack tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--primary);
    font-size: .62rem;
    text-transform: uppercase;
    text-align: left;
    flex-shrink: 0;
  }
}

/* ── Search ──────────────────────────────────────────────────── */
.saas-search-box{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.saas-search-box input{flex:1;min-width:200px}

/* ── Pagination ──────────────────────────────────────────────── */
.saas-pagination{
  display:flex;
  justify-content:center;
  gap:.25rem;
  margin-top:.75rem;
  flex-wrap:wrap;
}
.saas-pagination a,.saas-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0 .5rem;
  border:1.5px solid var(--gray-200);
  color:var(--gray-600);
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-size:.73rem;
  font-weight:500;
  transition:all var(--transition);
  background:var(--white);
}
.saas-pagination a:hover{background:var(--gray-50);border-color:var(--gray-300)}
.saas-pagination a.active,.saas-pagination span.active{background:var(--primary);color:var(--white);border-color:var(--primary)}

/* ── Section Divider ─────────────────────────────────────────── */
.saas-section-title{
  font-size:.75rem;
  color:var(--gray-400);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
  padding:.5rem 0 .25rem;
  margin-bottom:.5rem;
  border-bottom:1px solid var(--gray-100);
}

/* ── Empty State ─────────────────────────────────────────────── */
.saas-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--gray-400);
}
.saas-empty i{font-size:2.5rem;display:block;margin-bottom:.5rem;opacity:.35}
.saas-empty span{font-size:.8rem}

/* ── Badges ──────────────────────────────────────────────────── */
.saas-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.18rem .55rem;
  border-radius:999px;
  font-size:var(--fs-saas-badge);
  font-weight:600;
  letter-spacing:.2px;
}
.saas-badge-success{background:var(--accent-light);color:#065f46}
.saas-badge-danger{background:var(--danger-light);color:#991b1b}
.saas-badge-warning{background:var(--warning-light);color:#92400e}
.saas-badge-info{background:var(--primary-50);color:#1e40af}
.saas-badge-neutral{background:var(--gray-100);color:var(--gray-600)}

/* ── Dropdown/Fold Card ──────────────────────────────────────── */
.fold-card{border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.fold-card summary{
  padding:.6rem .9rem;
  font-weight:600;
  font-size:.78rem;
  cursor:pointer;
  background:var(--gray-50);
  color:var(--gray-600);
  user-select:none;
  transition:background var(--transition);
}
.fold-card summary:hover{background:var(--gray-100)}
.fold-card .fold-content{padding:.75rem .9rem;border-top:1px solid var(--gray-100)}

/* ── Info Card ───────────────────────────────────────────────── */
.info-card{
  background:var(--primary-50);
  border:1px solid #bfdbfe;
  border-radius:var(--radius-md);
  padding:.75rem 1rem;
  font-size:.82rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.info-card i{color:var(--primary)}

/* ── KPI Grid ────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.kpi-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kpi-card .kpi-label {
  font-size: var(--fs-saas-label);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-500);
  font-weight: 600;
}
.kpi-card .kpi-value {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--primary);
}
.kpi-card .kpi-sub {
  font-size: .72rem;
  color: var(--gray-400);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO - MOBILE-FIRST
   ═══════════════════════════════════════════════════════════════ */

/* ── xs (0px+) - MOBILE BASE ──────────────────────────────────── */
@media (max-width: 767px) {
  .saas-wrap{margin-left:0;padding:.85rem}
  .saas-container{max-width:100%}

  /* Form grid: 1 coluna */
  .saas-form-row{grid-template-columns:1fr}
  .saas-form-row [class*="saas-col-"]{grid-column:span 1!important}

  /* Page header: empilhar */
  .saas-page-header{flex-direction:column;align-items:flex-start}
  .saas-header-actions{width:100%}

  /* Cards */
  .saas-card{padding:.85rem;border-radius:var(--radius-md)}
  .saas-card-header{flex-direction:column;gap:.4rem;align-items:flex-start}

  /* Table */
  .saas-table{font-size:.66rem}
  .saas-table thead th{font-size:.55rem;padding:.35rem .45rem}
  .saas-table tbody td{padding:.35rem .45rem}
  .saas-table-container{margin:0 -.5rem;padding:0 .5rem}

  /* Buttons: mínimo 44px para touch */
  .saas-btn{font-size:.72rem;padding:.45rem .75rem;min-height:44px}
  .saas-btn-sm{padding:.25rem .45rem;font-size:.62rem;min-height:36px}

  /* Search */
  .saas-search-box{flex-direction:column}
  .saas-search-box input{min-width:0;min-height:44px}

  /* Inputs: tamanho touch */
  .saas-input,.saas-select,.saas-textarea{min-height:44px}

  /* KPI */
  .kpi-grid{grid-template-columns:1fr}

  /* Section title */
  .saas-section-title{font-size:.65rem}

  /* Empty state */
  .saas-empty{padding:2rem .75rem}
  .saas-empty i{font-size:1.8rem}

  /* Pagination */
  .saas-pagination a,.saas-pagination span{min-width:1.7rem;height:1.7rem;font-size:.62rem}
}

@media (max-width: 379px) {
  .saas-wrap{padding:.65rem}
  .saas-card{padding:.7rem;border-radius:var(--radius)}
  .saas-page-header h1{font-size:1rem}
  .saas-label{font-size:.6rem}
  .saas-input,.saas-select,.saas-textarea{font-size:.77rem;padding:.4rem .55rem}
}

/* ── sm (576px+) - SMARTPHONE GRANDE ──────────────────────────── */
@media (min-width: 576px) {
  .saas-form-row{grid-template-columns:repeat(2,1fr)}
  .saas-form-row [class*="saas-col-"]{grid-column:span 2!important}

  .kpi-grid{grid-template-columns:repeat(2,1fr)}

  .saas-search-box{flex-direction:row}
  .saas-search-box input{min-width:160px}
  .saas-wrap{padding:1.25rem}
}

/* ── md (768px+) - TABLET ─────────────────────────────────────── */
@media (min-width: 768px) {
  .saas-wrap{margin-left:var(--sb-width,260px);padding:1.5rem 1.5rem 2rem}
  .saas-container{max-width:100%}

  /* Form grid: restaurar 12 colunas parcial */
  .saas-form-row{grid-template-columns:repeat(12,1fr)}
  .saas-form-row .saas-col-3{grid-column:span 4}
  .saas-form-row .saas-col-4{grid-column:span 6}
  .saas-form-row .saas-col-5{grid-column:span 6}
  .saas-form-row .saas-col-7{grid-column:span 8}
  .saas-form-row .saas-col-8{grid-column:span 6}
  .saas-form-row .saas-col-9{grid-column:span 6}

  /* Page header: restaurar flex row */
  .saas-page-header{flex-direction:row;align-items:center}
  .saas-header-actions{width:auto}

  /* Cards */
  .saas-card{padding:1.25rem 1.5rem}
  .saas-card-header{flex-direction:row;align-items:center}

  /* Table */
  .saas-table{font-size:.73rem}
  .saas-table thead th{font-size:.62rem;padding:.45rem .6rem}
  .saas-table tbody td{padding:.45rem .6rem}

  /* KPI */
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── lg (992px+) - NOTEBOOK ───────────────────────────────────── */
@media (min-width: 992px) {
  .saas-wrap{padding:1.75rem 2rem}
  .saas-container{max-width:1320px}

  /* Form grid: layout completo */
  .saas-form-row .saas-col-3{grid-column:span 3}
  .saas-form-row .saas-col-4{grid-column:span 4}
  .saas-form-row .saas-col-5{grid-column:span 5}
  .saas-form-row .saas-col-6{grid-column:span 6}
  .saas-form-row .saas-col-7{grid-column:span 7}
  .saas-form-row .saas-col-8{grid-column:span 8}
  .saas-form-row .saas-col-9{grid-column:span 9}

  /* Table */
  .saas-table{font-size:var(--fs-saas-table)}
  .saas-table thead th{font-size:var(--fs-saas-th);padding:.55rem .75rem}
  .saas-table tbody td{padding:.5rem .75rem}

  /* KPI */
  .kpi-grid{grid-template-columns:repeat(4,1fr)}

  .saas-btn{min-height:auto}
  .saas-input,.saas-select,.saas-textarea{min-height:auto}
}

/* ── xl (1200px+) - DESKTOP ───────────────────────────────────── */
@media (min-width: 1200px) {
  .saas-container{max-width:1320px}
}

/* ── xxl (1400px+) - MONITOR GRANDE ────────────────────────────── */
@media (min-width: 1400px) {
  .saas-container{max-width:1320px}
}

/* ── Tablet Landscape ────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  .saas-form-row{grid-template-columns:repeat(12,1fr)}
  .saas-form-row .saas-col-3{grid-column:span 4}
  .saas-form-row .saas-col-4{grid-column:span 6}
  .saas-form-row .saas-col-6{grid-column:span 6}
  .saas-form-row .saas-col-8{grid-column:span 8}
  .saas-form-row .saas-col-9{grid-column:span 9}
}