/* Premium Shared Stylesheet */
/* Theme variables */
:root {
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.15);
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.15);
  --text-dark: #2d3748;
  --text-muted: #718096;
}

/* Client (green) theme */
body.theme-client {
  --grad-1: #10b981;
  --grad-2: #059669;
  --border-top: #10b981;
  --btn-shadow: rgba(16,185,129,0.4);
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Staff (purple) theme */
body.theme-staff {
  --grad-1: #667eea;
  --grad-2: #764ba2;
  --border-top: #667eea;
  --btn-shadow: rgba(102,126,234,0.45);
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Layout */
.main-content {
  padding: 72px 16px 16px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .main-content { padding: 80px 32px 32px; }
}

/* Action header card (hero-like) */
.action-card {
  display:flex; align-items:center; gap:24px; padding:24px; border-radius:20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  color:#fff; margin:0 auto 28px; position:relative; overflow:hidden;
  max-width:1040px; width:100%;
  border:1px solid rgba(255,255,255,0.25);
}
.action-card:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,0.18); }
.action-card:focus-within { box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 16px 44px rgba(0,0,0,0.18); }
.action-card::before{content:''; position:absolute; inset:0; background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.25), transparent 55%);} 
.action-card::after{content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%); transform:skewX(-20deg); opacity:0; transition:1s;}
.action-card:hover::after{ left:130%; opacity:0.15; }
.action-card .action-icon{
  width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  box-shadow: 0 8px 24px var(--btn-shadow);
}
.action-card .action-icon i{ font-size:28px; color:#fff; }
.action-card .action-text{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.action-card .action-title{ font-size:28px; font-weight:800; line-height:1.1; letter-spacing:.2px; }
.action-card .action-sub{ font-size:15px; font-weight:500; color: rgba(255,255,255,.92); max-width:520px; line-height:1.35; }
@media (min-width:1000px){ .action-card .action-title{ font-size:32px; } }
@media (min-width:900px){ .action-card .action-text{ flex:1; } .action-card .actions{ margin-left:auto; } }
@media (max-width:520px){ .action-card{ gap:14px; padding:18px; } .action-card .action-title{ font-size:22px; } .action-card .action-icon{ width:56px; height:56px; } }

/* Page-specific width tweaks */
body.page-clients .action-card { max-width: 880px; margin-bottom: 24px; }
body.page-clients .filter-box { max-width: 880px; margin-left: auto; margin-right: auto; }

/* OS number badge for headers */
.os-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
@media (max-width:520px){
  .os-number-badge { padding: 5px 10px; margin-left: 6px; }
}

/* Section title */
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
}
.section-title i {
  font-size: 24px;
  background: linear-gradient(135deg, #34d399 0%, var(--grad-1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Welcome card */
.welcome-card {
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-deep);
  border-top: 4px solid var(--border-top);
  text-align: center;
}
.welcome-card i {
  font-size: 64px;
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  display: block;
  animation: pulse 2s infinite;
}
.welcome-card h1 { font-size: 24px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; }
.welcome-card p { color: var(--text-muted); font-size: 15px; font-weight: 500; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  padding: 24px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: 0 10px 30px var(--btn-shadow);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #34d399 0%, var(--grad-1) 50%, var(--grad-2) 100%); }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px var(--btn-shadow); }
.stat-value { font-size: 36px; font-weight: 800; color: #fff; margin: 12px 0; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.stat-label { color: rgba(255,255,255,0.95); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-icon { font-size: 32px; color: rgba(255,255,255,0.9); margin-bottom: 8px; display: block; }
/* Dashboard status variants */
.stat-card.pendente { background: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); }
.stat-card.andamento { background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); }
.stat-card.concluida { background: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); }
.stat-card.total { background: linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); }
.stat-card .value { font-size:36px; font-weight:800; color:#fff; margin-bottom:6px; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.stat-card .label { font-size:13px; color:rgba(255,255,255,.95); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* OS list */
.os-item { background: #fff; border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-soft); border-top: 4px solid var(--border-top); transition: all .3s ease; }
.os-item:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.os-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.os-title i { color: var(--grad-1); }
.os-desc { color: var(--text-muted); margin-bottom: 12px; font-size: 14px; font-weight: 500; }

/* Badges */
.status-badge { display: inline-block; padding: 6px 14px; border-radius: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge-pendente { background: linear-gradient(135deg, #fed7d7 0%, #fc8181 100%); color: #c53030; }
.badge-andamento { background: linear-gradient(135deg, #bee3f8 0%, #63b3ed 100%); color: #2c5282; }
.badge-concluida { background: linear-gradient(135deg, #c6f6d5 0%, #48bb78 100%); color: #22543d; }
.badge-cancelada { background: linear-gradient(135deg, #fed7e2 0%, #f687b3 100%); color: #97266d; }

/* Buttons */
.btn { 
  position: relative; 
  overflow: hidden; 
  padding: 14px 24px; 
  border: none; 
  border-radius: 12px; 
  font-size: 15px; 
  font-weight: 700; 
  cursor: pointer; 
  text-decoration: none; 
  text-align: center; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 10px; 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  text-transform: none;
}
.btn::before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.3); 
  transform: translate(-50%, -50%); 
  transition: width 0.5s ease, height 0.5s ease; 
}
.btn:hover::before { width: 300px; height: 300px; }
.btn:active { transform: scale(0.97); }
.btn i { 
  font-size: 16px; 
  position: relative; 
  z-index: 1; 
}
.btn span { 
  position: relative; 
  z-index: 1; 
}
.btn-view, .btn-primary { 
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%); 
  color: #fff; 
  box-shadow: 0 4px 16px var(--btn-shadow);
  font-weight: 700;
}
.btn-view:hover, .btn-primary:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 8px 24px var(--btn-shadow); 
}
.btn-secondary { 
  background: #fff; 
  color: #475569; 
  border: 2px solid #e2e8f0; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-weight: 700;
}
.btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-block { width: 100%; display: inline-flex; }
.btn-success { 
  background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
  color: #fff; 
  box-shadow: 0 4px 16px rgba(16,185,129,0.4);
  font-weight: 700;
}
.btn-success:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16,185,129,0.5);
}
.btn-danger { 
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
  color: #fff; 
  box-shadow: 0 4px 16px rgba(239,68,68,0.4);
  font-weight: 700;
}
.btn-danger:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(239,68,68,0.5);
}

/* Loading state utilities (for buttons and links) */
.btn.btn-loading,
.btn-action.is-loading,
.page-btn.is-loading,
.pagination a.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.btn-loading::after,
.btn-action.is-loading::after,
.page-btn.is-loading::after,
.pagination a.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
  z-index: 2;
}
/* Ensure spinner is visible on pagination links by switching to gradient while loading */
.pagination a.is-loading { background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%); color: #fff !important; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Filter box (dashboard) */
.filter-box { background:#fff; border-radius:16px; padding:24px; margin-bottom:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); border-top:4px solid var(--border-top); box-sizing: border-box; }
.filter-box h3 { font-size:18px; color:#2d3748; margin-bottom:16px; font-weight:700; display:flex; align-items:center; gap:10px; }
.filter-box h3 i { font-size:20px; color:var(--grad-1); }
.filter-form { display:flex; flex-direction:column; gap:14px; }
.filter-form input,.filter-form select { width:100%; padding:14px 16px; border:2px solid #e2e8f0; border-radius:12px; font-size:15px; font-family:inherit; background:#f7fafc; transition:.3s; box-sizing: border-box; }
.filter-form input:focus,.filter-form select:focus { outline:none; border-color:var(--grad-1); background:#fff; box-shadow:0 0 0 4px rgba(0,0,0,.06); transform:translateY(-2px); }
.filter-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
/* Input with leading icon utility */
.input-with-icon { position: relative; width: 100%; box-sizing: border-box; }
.input-with-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; pointer-events: none; z-index: 1; }
.input-with-icon input { padding-left: 40px; width: 100%; box-sizing: border-box; }
/* Professional filter action buttons */
.btn-filter, .btn-clear { position:relative; overflow:hidden; border:none; font-weight:700; letter-spacing:.3px; }
.btn-filter {
  background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%);
  color:#fff;
  box-shadow:0 6px 18px var(--btn-shadow);
  border-radius:14px;
  padding:14px 20px;
  transition:.35s cubic-bezier(.4,0,.2,1);
  outline:none;
}
.btn-filter::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 70%); opacity:0; transition:.4s; }
.btn-filter:hover { transform:translateY(-3px); box-shadow:0 10px 28px var(--btn-shadow); }
.btn-filter:hover::after { opacity:1; }
.btn-filter:active { transform:scale(.97); }
.btn-filter:focus-visible { box-shadow:0 0 0 4px rgba(255,255,255,.5),0 6px 18px var(--btn-shadow); }

.btn-clear {
  background:linear-gradient(135deg,#94a3b8 0%,#64748b 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(100,116,139,.35);
  border-radius:14px;
  padding:14px 20px;
  transition:.35s cubic-bezier(.4,0,.2,1);
}
.btn-clear:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(100,116,139,.45); }
.btn-clear:active { transform:scale(.97); }
.btn-clear:focus-visible { box-shadow:0 0 0 4px rgba(100,116,139,.35),0 6px 20px rgba(100,116,139,.45); }

/* Compact single column on very small screens */
@media (max-width: 420px){
  .filter-buttons { grid-template-columns:1fr; }
}
/* Mobile refinements */
@media (max-width: 520px){
  .filter-box{ padding:18px; border-radius:14px; }
  .filter-form input, .filter-form select{ padding:13px 14px; font-size:14px; }
  .btn-filter, .btn-clear{ padding:13px 16px; font-size:14px; border-radius:12px; }
  .action-card{ padding:18px; gap:16px; }
  .action-card .action-title{ font-size:22px; }
}

/* Staff OS list (dashboard) */
.os-list { display:flex; flex-direction:column; gap:16px; }
.os-card { background:#fff; border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.15); position:relative; transition:.3s; border-top:4px solid var(--border-top); }
.os-card:hover { transform:translateY(-2px); box-shadow:0 15px 40px rgba(0,0,0,.2); }
.os-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.os-id { font-size:13px; color:#718096; font-weight:600; background:#f7fafc; padding:6px 12px; border-radius:8px; }
.status { padding:8px 16px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.status-pendente { background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%); color:#fff; }
.status-em-andamento { background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); color:#fff; }
.status-concluida { background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); color:#fff; }
.status-cancelada { background:linear-gradient(135deg,#fa709a 0%,#fee140 100%); color:#fff; }
.os-titulo { font-size:17px; font-weight:700; color:#2d3748; margin-bottom:10px; }
.os-cliente { font-size:14px; color:#4a5568; margin-bottom:6px; display:flex; align-items:center; gap:8px; font-weight:500; }
.os-cliente i { font-size:14px; color:var(--grad-1); }
.os-data { font-size:13px; color:#718096; display:flex; align-items:center; gap:6px; }
.os-data i { font-size:12px; color:var(--grad-1); }
.os-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:16px; border-top:2px solid #f7fafc; }
.btn-action { padding:12px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600; text-align:center; transition:.3s; box-shadow:0 4px 12px rgba(0,0,0,.1); position:relative; overflow:hidden; }
.btn-action::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .4s,height .4s; }
.btn-action:hover::before { width:200px; height:200px; }
.btn-action:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.btn-action:active { transform:scale(.98); }
.btn-edit { background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); color:#fff; }
.btn-delete { background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%); color:#fff; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.pagination a { padding:12px 20px; background:rgba(255,255,255,.95); color:#2d3748; text-decoration:none; border-radius:10px; font-weight:600; font-size:14px; transition:.3s; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.pagination a:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15); background:#fff; }
/* Accessible current page state */
.pagination a[aria-current="page"]{
  background: linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%);
  color:#fff;
  pointer-events: none;
  box-shadow: 0 8px 22px var(--btn-shadow);
  font-weight:800;
}

/* App shell (headers, nav, drawer) */
.app-header { position:fixed; top:0; left:0; right:0; height:56px; background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:1000; }
.app-header h1 { font-size:18px; font-weight:600; flex:1; text-align:center; }
.header-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; transition:background .2s; }
.header-icon:active { background:rgba(255,255,255,.2); }
.header-icon i { font-size:20px; }
.bottom-nav { 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 64px; 
  background: #fff; 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1); 
  z-index: 1000; 
  border-top: 1px solid #e0e0e0; 
}
.nav-item { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  padding: 8px; 
  text-decoration: none; 
  color: #757575; 
  font-size: 11px; 
  transition: all 0.2s; 
  gap: 4px;
  font-weight: 500;
}
.nav-item i { 
  font-size: 22px; 
  display: block;
  line-height: 1;
}
.nav-item span {
  display: block;
  text-align: center;
}
.nav-item.active { 
  color: var(--grad-1); 
  font-weight: 600;
}
.nav-item.active i {
  transform: scale(1.1);
}
.nav-item:active { 
  opacity: 0.6; 
  transform: scale(0.95);
}
.side-drawer { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:#fff; box-shadow:-4px 0 12px rgba(0,0,0,.15); z-index:1100; transition:right .3s ease; overflow-y:auto; }
.side-drawer.active { right:0; }
.drawer-header { background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); color:#fff; padding:24px 16px; }
.drawer-header h2 { font-size:20px; margin-bottom:4px; }
.drawer-header p { font-size:14px; opacity:.9; }
.drawer-menu { padding:8px 0; }
.drawer-item { display:flex; align-items:center; gap:16px; padding:16px 20px; color:#333; text-decoration:none; transition:background .2s; border-left:4px solid transparent; }
.drawer-item:active { background:#f5f5f5; }
.drawer-item.active { background:rgba(0,0,0,.05); border-left-color:var(--grad-1); color:var(--grad-1); font-weight:500; }
.drawer-item i { font-size:22px; width:24px; }
.drawer-divider { height:1px; background:#e0e0e0; margin:8px 0; }
.drawer-logout { display:flex; align-items:center; gap:16px; padding:16px 20px; color:#dc3545; text-decoration:none; }
.drawer-logout i { font-size:22px; width:24px; }
.drawer-logout:active { background:#ffebee; }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1050; }
.overlay.active { display:block; }
@media (min-width:769px){ .app-wrapper { max-width:480px; margin:0 auto; box-shadow:0 0 20px rgba(0,0,0,.1); } body.theme-staff, body.theme-client { background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); } }

/* Forms (staff) */
.page-header { background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); padding: 32px 28px; border-radius: 24px; text-align: center; margin-bottom: 32px; animation: fadeInDown .6s ease; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18), transparent 60%); }
.page-header i { font-size: 60px; background: linear-gradient(135deg, #fafafa 0%, #e9d8fd 50%, #d6bcfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: pulse 2s infinite; margin-bottom: 12px; }
.page-header h1 { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: .5px; }
.page-header p { color: rgba(255,255,255,.9); font-weight: 500; }

.form-card { background: rgba(255,255,255,0.95); border-radius: 24px; padding: 36px 32px; box-shadow: var(--shadow-deep); border-top: 4px solid var(--border-top); animation: slideUp .6s ease; }
.form-card, .form-card * { box-sizing: border-box; }
.form-card .input-group { min-width: 0; }
.form-card .input-group input,
.form-card .input-group select,
.form-card .input-group textarea { width: 100%; max-width: 100%; display: block; }
.alert { padding: 16px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); animation: slideInRight .4s ease; }
.alert-success { background: linear-gradient(135deg, #c6f6d5 0%, #48bb78 100%); color: #22543d; }
.alert-error { background: linear-gradient(135deg, #fed7d7 0%, #f56565 100%); color: #822727; }
.alert-info { background: linear-gradient(135deg, #bee3f8 0%, #63b3ed 100%); color: #1a365d; }

.input-group { margin-bottom: 22px; }
.input-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #2d3748; margin-bottom: 8px; }
.input-group input, .input-group select, .input-group textarea { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 14px; font-size: 15px; font-family: inherit; transition: .25s; background: #fff; }
.input-group textarea { min-height: 120px; resize: vertical; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--grad-1); box-shadow: 0 10px 30px rgba(0,0,0,0.12); transform: translateY(-2px); }
.input-help { font-size: 12px; color: #718096; margin-top: 6px; font-weight: 500; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }

/* Charts */
.charts-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 16px 0 8px; }
.chart-card { position: relative; background: rgba(255,255,255,0.95); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-soft); border-top: 4px solid var(--border-top); }
.chart-card canvas { width: 100%; height: 280px; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #718096; font-weight: 600; }
@media (min-width: 768px) { .charts-grid { grid-template-columns: 1fr 1fr; } }

/* Empty state */
.empty-state { text-align: center; padding: 60px 24px; background: rgba(255,255,255,0.95); border-radius: 16px; color: #718096; }
.empty-state i { font-size: 64px; color: rgba(16, 185, 129, 0.3); margin-bottom: 16px; }
.empty-state p { font-size: 16px; font-weight: 500; }

/* Staff listing */
.header-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; animation:fadeInDown .6s ease; }
.section-title .subtitle { opacity:.9; }
.staff-list { display:grid; gap:20px; animation:fadeInCards .8s ease; }
@media (min-width:768px){ .staff-list { grid-template-columns:repeat(2,1fr); gap:24px; } }
@media (min-width:1400px){ .staff-list { grid-template-columns:repeat(3,1fr); } }
.staff-card { 
	position:relative; 
	background:#fff; 
	border-radius:20px; 
	padding:28px 24px 24px; 
	box-shadow:0 4px 16px rgba(0,0,0,.1); 
	display:flex; 
	flex-direction:column; 
	gap:18px; 
	transition:.25s ease; 
	overflow:hidden;
	border:1px solid #e5e7eb;
}
.staff-card.wide { max-width: 820px; }
body.page-admins .staff-list { grid-template-columns:1fr; }
body.page-admins .staff-list { justify-items: stretch; }
body.page-admins .staff-card.wide { max-width:100%; width:100%; }
body.page-admins .staff-card.wide .staff-header { flex-wrap:wrap; }
body.page-admins .staff-card.wide .staff-avatar { width:84px; height:84px; min-width:84px; font-size:34px; }
@media (max-width:640px){
  body.page-admins .staff-card.wide .staff-header { flex-direction:row; }
}
.staff-list { justify-items: center; }
.staff-header-main { display:flex; flex-direction:column; gap:6px; }
.staff-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.16); border-color:#cbd5e1; }
.staff-header { display:flex; align-items:flex-start; gap:18px; }
.staff-avatar { 
	width:72px; 
	height:72px; 
	min-width:72px;
	border-radius:18px; 
	background:linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%); 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	color:#fff; 
	font-size:30px; 
	font-weight:800; 
	box-shadow:0 6px 18px var(--btn-shadow); 
	flex-shrink:0;
}
.staff-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.staff-nome {
  font-size:20px;
  font-weight:800;
  color:#1f2937;
  line-height:1.25;
  word-break:break-word;
  white-space:normal;
}
.staff-email {
  font-size:14px;
  color:#4b5563;
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.staff-email i { color:#94a3b8; font-size:13px; flex-shrink:0; }
.staff-meta { 
	display:flex; 
	flex-wrap:wrap; 
	gap:14px; 
	font-size:13px;
	padding-top:4px;
}
.staff-meta .meta-item { background:#f1f5f9; padding:6px 10px; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.meta-item { 
	font-weight:600; 
	color:#94a3b8; 
	display:flex; 
	align-items:center; 
	gap:6px; 
	letter-spacing:0;
	line-height:1.4;
}
.meta-item i { color:#a3a3a3; font-size:13px; }
.staff-actions { 
	display:grid; 
	grid-template-columns:repeat(2,1fr); 
	gap:12px; 
}
.btn-action { 
	position:relative; 
	overflow:hidden; 
	padding:13px 16px; 
	border-radius:12px; 
	text-decoration:none; 
	font-size:14px; 
	font-weight:700; 
	text-align:center; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	gap:8px; 
	transition:.25s ease; 
	letter-spacing:.3px; 
	box-shadow:0 3px 8px rgba(0,0,0,.12);
}
.btn-action:active { transform:scale(.97); }
.btn-edit { background:#60a5fa; color:#fff; }
.btn-edit:hover { background:#3b82f6; box-shadow:0 6px 16px rgba(59,130,246,.35); }
.btn-delete { background:#f87171; color:#fff; }
.btn-delete:hover { background:#ef4444; box-shadow:0 6px 16px rgba(239,68,68,.35); }
.btn-disabled { background:#e5e7eb; color:#9ca3af; cursor:not-allowed; font-weight:700; box-shadow:none; }
@media (max-width:520px){ 
	.staff-card { padding:22px 20px 20px; border-radius:18px; }
	.staff-avatar { width:64px; height:64px; min-width:64px; font-size:26px; border-radius:16px; }
	.staff-nome { font-size:17px; }
	.staff-email { font-size:13px; }
	.meta-item { font-size:12px; }
	.btn-action { padding:12px 14px; font-size:13px; gap:7px; }
}
.pagination-bar { display:flex; justify-content:space-between; align-items:center; margin-top:30px; padding:18px 22px; background:rgba(255,255,255,.85); border-radius:20px; box-shadow:0 14px 40px -10px rgba(0,0,0,.25); animation:fadeInDown .6s ease; }
.pagination-bar span { font-size:14px; font-weight:600; color:#2d3748; }
.page-btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:12px 18px; background:linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 100%); color:#fff; text-decoration:none; border-radius:14px; font-size:13px; font-weight:700; letter-spacing:.4px; box-shadow:0 10px 28px -6px rgba(0,0,0,.25); transition:.45s; }
.page-btn::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .55s,height .55s; }
.page-btn:hover::before { width:240px; height:240px; }
.page-btn:hover { transform:translateY(-2px); }
.page-btn.disabled { background:#e2e8f0; color:#718096; cursor:not-allowed; box-shadow:none; }

/* Generic separators & helpers */
.divider { margin:22px 0; border:0; border-top:2px solid #edf2f7; }
.required { color:#dc3545; }

/* Client OS listing (minhas_os) */
.os-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){ .os-grid { grid-template-columns:repeat(2,1fr); gap:20px; } }
.os-card { background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow-soft); border-top:4px solid var(--border-top); position:relative; transition:.3s; }
.os-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, var(--grad-1) 0%, #34d399 50%, var(--grad-1) 100%); border-radius:16px 16px 0 0; }
.os-card:hover { transform:translateY(-4px); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
.os-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.os-id { font-size:16px; font-weight:800; background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; flex-shrink:0; }
.os-id i { background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.os-status { padding:8px 16px; border-radius:12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; flex-shrink:0; }
.status-pendente { background:linear-gradient(135deg,#fed7d7 0%,#fc8181 100%); color:#c53030; }
.status-em-andamento { background:linear-gradient(135deg,#bee3f8 0%,#63b3ed 100%); color:#2c5282; }
.status-concluída, .status-concluida { background:linear-gradient(135deg,#c6f6d5 0%,#48bb78 100%); color:#22543d; }
.status-cancelada { background:linear-gradient(135deg,#fed7e2 0%,#f687b3 100%); color:#97266d; }
.status-aprovado { background:linear-gradient(135deg,#c6f6d5 0%,#48bb78 100%); color:#22543d; }
.status-rejeitado { background:linear-gradient(135deg,#fed7d7 0%,#f56565 100%); color:#822727; }
.os-title { font-size:16px; font-weight:700; color:var(--text-dark); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.os-title i { color:var(--grad-1); }
.os-desc { font-size:14px; color:var(--text-muted); font-weight:500; margin-bottom:12px; line-height:1.5; }
.os-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:#a0aec0; font-weight:600; }
.meta-item { display:flex; align-items:center; gap:6px; }
.meta-item i { font-size:14px; color:var(--grad-1); }

/* Perfil (password note) */
.password-note { background:linear-gradient(135deg,#fefcbf 0%,#faf089 100%); color:#744210; padding:16px 18px; border-radius:14px; font-size:14px; margin-bottom:18px; display:flex; align-items:flex-start; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }
.password-note i { font-size:18px; margin-top:2px; }

/* Products listing (staff/produtos) */
.products-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:20px; }
@media (min-width:768px){ .products-grid { grid-template-columns:repeat(2,1fr); gap:20px; } }
.product-card { background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow-soft); border-top:4px solid var(--border-top); transition:.3s; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 15px 40px rgba(0,0,0,.2); }
.product-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.product-name { font-size:17px; font-weight:800; color:var(--text-dark); }
.badge-produto { background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); color:#fff; }
.badge-servico { background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); color:#fff; }
.product-price { font-weight:800; font-size:20px; background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:8px; }
.product-desc { font-size:14px; color:var(--text-muted); margin-top:10px; line-height:1.5; }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:16px; border-top:2px solid #f7fafc; }

/* Tables (reports) */
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:14px 12px; text-align:left; border-bottom:1px solid #edf2f7; font-size:14px; }
.table thead th { background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%); font-weight:800; color:#4a5568; text-transform:uppercase; font-size:12px; letter-spacing:.5px; }
.table tbody tr { transition:.2s; }
.table tbody tr:hover { background:#f8fafc; }

/* Warning / info boxes */
.warning-box { background:linear-gradient(135deg,#fff3cd 0%,#ffe69c 100%); border-left:4px solid #f6ad55; border-radius:12px; padding:16px; margin-bottom:20px; display:flex; align-items:flex-start; gap:12px; box-shadow:0 4px 12px rgba(237,137,54,.2); color:#744210; }
.warning-box i { font-size:20px; margin-top:2px; }

/* Budgets (client orcamentos) */
.budget-card { background:#fff; border-radius:16px; padding:20px; box-shadow:var(--shadow-soft); border-top:4px solid var(--border-top); transition:.3s; }
.budget-card.pendente { border-top-color:#f6ad55; background:#fffbf5; }
.budget-card.aprovado { border-top-color:#48bb78; background:#f0fff4; }
.budget-card.rejeitado { border-top-color:#f56565; background:#fff5f5; }
.budget-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:12px; }
.budget-id { font-size:16px; font-weight:800; color:var(--text-dark); flex:1; display:flex; flex-direction:column; gap:4px; }
.budget-id i { color:var(--grad-1); margin-right:6px; }
.budget-value { font-size:28px; font-weight:800; color:#10b981; margin:12px 0; letter-spacing:-0.5px; }
.budget-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:#a0aec0; font-weight:600; margin-bottom:12px; }
.budget-meta i { color:var(--grad-1); margin-right:4px; }
.budget-obs { background:#f0f9ff; border-left:3px solid #3b82f6; padding:12px 14px; border-radius:10px; margin-bottom:14px; }
.budget-obs strong { color:#1e40af; font-size:13px; display:block; margin-bottom:6px; }
.budget-obs strong i { margin-right:6px; }
.budget-obs p { margin:0; color:#475569; font-size:13px; line-height:1.6; }
.budget-items { margin:12px 0; }
.items-header { font-size:14px; font-weight:700; color:#2d3748; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.items-header i { color:var(--grad-1); font-size:16px; }
.budget-item { background:#f8fafc; padding:12px 14px; border-radius:10px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; border:1px solid #e2e8f0; transition:all 0.2s; }
.budget-item:hover { background:#f1f5f9; border-color:#cbd5e1; transform:translateX(4px); }
.budget-item .name { flex:1; color:#2d3748; font-weight:600; display:flex; align-items:center; gap:6px; }
.budget-item .name i { color:#10b981; font-size:13px; }
.budget-item .qty { color:#64748b; font-size:13px; font-weight:600; background:#e2e8f0; padding:2px 8px; border-radius:6px; }
.budget-item .price { font-weight:700; color:#10b981; white-space:nowrap; font-size:15px; }

/* Timeline (client historico) */
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--grad-1) 0%, rgba(0,0,0,.08) 100%); }
.timeline-item { position:relative; margin-bottom:20px; }
.timeline-dot { position:absolute; left:-21px; top:8px; width:14px; height:14px; border-radius:50%; background:var(--grad-1); border:3px solid #fff; box-shadow:0 0 0 2px var(--grad-1); }
.timeline-card { background:#fff; border-radius:16px; padding:16px; box-shadow:var(--shadow-soft); border-top:4px solid var(--border-top); margin-left:8px; }

/* Animations */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInCards { 0%{opacity:0;transform:translateY(35px);}100%{opacity:1;transform:translateY(0);} }

/* ============================================
   MELHORIAS MOBILE ABRANGENTES
   ============================================ */

/* Mobile: Melhor espaçamento geral */
@media (max-width: 768px) {
	/* Improve compatibility with notch devices and touch behavior */
	html, body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	body { 
		/* Add safe-area paddings where supported */
		padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); /* Mais espaço para scroll */
		font-size: 15px; 
	}
    
	.main-content { 
		padding: calc(68px + env(safe-area-inset-top, 0px)) 12px calc(20px + env(safe-area-inset-bottom, 0px)); /* Mais compacto e seguro para notch */
	}
	
	/* Action card mobile */
	.action-card {
		flex-direction: column;
		text-align: center;
		padding: 20px 16px;
		gap: 12px;
	}
	
	.action-card .action-icon {
		width: 52px;
		height: 52px;
		margin: 0 auto;
	}
	
	.action-card .action-icon i {
		font-size: 24px;
	}
	
	.action-card .action-title {
		font-size: 20px;
		line-height: 1.2;
	}
	
	.action-card .action-sub {
		font-size: 13px;
		line-height: 1.4;
	}
	
	/* Stats grid mobile */
	.stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	
	.stat-card {
		padding: 14px 12px !important;
	}
	
	.stat-card .stat-icon,
	.stat-card-icon {
		font-size: 20px !important;
		margin-bottom: 6px !important;
	}
	
	.stat-card .stat-value,
	.stat-card-value {
		font-size: 24px !important;
	}
	
	.stat-card .stat-label,
	.stat-card-label {
		font-size: 10px !important;
		line-height: 1.2;
	}
	
	/* Filter box mobile */
	.filter-box {
		padding: 16px !important;
		margin-bottom: 20px !important;
	}
	
	.filter-box h3 {
		font-size: 16px !important;
		margin-bottom: 12px !important;
	}
	
	.filter-form {
		gap: 10px !important;
	}
	
	.filter-form input,
	.filter-form select {
		font-size: 14px !important;
		padding: 10px 12px !important;
		min-height: 44px; /* Touch target mínimo */
	}
	
	.filter-buttons {
		flex-direction: column !important;
		gap: 8px !important;
	}
	
	.filter-buttons .btn-filter,
	.filter-buttons .btn-clear {
		width: 100% !important;
		justify-content: center !important;
		padding: 12px 16px !important;
		font-size: 14px !important;
		min-height: 44px;
	}
	
	/* Cards de OS mobile */
	.os-card {
		padding: 14px !important;
		margin-bottom: 12px !important;
	}
	
	.os-card-header {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	
	.os-card-title {
		font-size: 15px !important;
	}
	
	.os-card-meta {
		flex-wrap: wrap;
		gap: 8px !important;
		font-size: 12px !important;
	}
	
	.os-card-actions {
		flex-direction: column !important;
		gap: 8px !important;
	}
	
	.os-card-actions .btn {
		width: 100% !important;
		padding: 10px 14px !important;
		font-size: 13px !important;
		min-height: 44px;
	}
	
	/* Budget cards mobile */
	.budget-card {
		padding: 0 !important;
		margin-bottom: 14px !important;
	}
	
	.budget-header {
		padding: 12px 14px !important;
		flex-wrap: wrap;
	}
	
	.budget-id {
		font-size: 14px !important;
	}
	
	.budget-card-content {
		padding: 14px !important;
	}
	
	.budget-value {
		font-size: 26px !important;
		margin: 10px 0 !important;
	}
	
	.budget-meta {
		flex-direction: column;
		gap: 6px !important;
		font-size: 12px !important;
	}
	
	.os-title {
		font-size: 13px !important;
		margin-bottom: 10px !important;
	}
	
	/* Tables mobile - scroll horizontal */
	.budget-items {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.items-table {
		min-width: 600px; /* Garante scroll */
		font-size: 12px !important;
	}
	
	.items-table th,
	.items-table td {
		padding: 8px 10px !important;
		font-size: 11px !important;
	}
	
	.items-header {
		font-size: 13px !important;
		padding: 10px 14px !important;
	}
	
	/* Form actions mobile */
	.form-actions {
		padding: 12px !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	
	.form-actions .btn {
		width: 100% !important;
		min-width: 0 !important;
		padding: 11px 16px !important;
		font-size: 13px !important;
		min-height: 44px !important;
	}
	
	/* Pagination mobile */
	.pagination {
		flex-wrap: wrap !important;
		gap: 6px !important;
		justify-content: center !important;
	}
	
	.pagination a {
		padding: 8px 12px !important;
		font-size: 13px !important;
		min-width: 36px;
		min-height: 36px;
	}
	
	/* Empty state mobile */
	.empty-state {
		padding: 30px 20px !important;
	}
	
	.empty-state i {
		font-size: 40px !important;
	}
	
	.empty-state p {
		font-size: 14px !important;
	}
	
	/* Alerts mobile */
	.alert {
		padding: 12px 14px !important;
		font-size: 13px !important;
		margin-bottom: 16px !important;
	}
	
	/* Modal/Dialog mobile */
	.modal-content,
	.dialog-content {
		width: 95% !important;
		max-width: 400px !important;
		padding: 20px 16px !important;
	}
	
	/* Reports tables mobile */
	.report-box {
		padding: 16px !important;
	}
	
	.table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.table {
		min-width: 600px;
		font-size: 13px !important;
	}
	
	.table th,
	.table td {
		padding: 10px 8px !important;
		font-size: 12px !important;
	}
	
	/* Timeline mobile */
	.timeline {
		padding-left: 20px !important;
	}
	
	.timeline-card {
		padding: 12px !important;
		margin-left: 4px !important;
		font-size: 13px !important;
	}
	
	.timeline-dot {
		left: -18px !important;
		width: 12px !important;
		height: 12px !important;
	}
}

/* Mobile extra pequeno (< 400px) */
@media (max-width: 400px) {
	.main-content {
		padding: 64px 10px 16px;
	}
	
	.stats-grid {
		grid-template-columns: 1fr !important; /* 1 coluna em telas muito pequenas */
	}
	
	.stat-card {
		padding: 16px 14px !important;
	}
	
	.action-card {
		padding: 16px 12px;
	}
	
	.budget-value {
		font-size: 22px !important;
	}
	
	.filter-form input,
	.filter-form select {
		font-size: 15px !important; /* Evita zoom no iOS */
	}
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
	/* Aumenta áreas de toque */
	button,
	.btn,
	a[role="button"],
	.pagination a {
		min-height: 44px;
		min-width: 44px;
	}
	
	/* Remove hover effects em touch devices */
	.os-card:hover,
	.budget-card:hover,
	.btn:hover {
		transform: none !important;
	}
	
	/* Feedback de toque */
	.btn:active,
	.os-card:active,
	.budget-card:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
	.main-content {
		padding-top: 60px;
	}
	
	.action-card {
		flex-direction: row;
		text-align: left;
	}
	
	.stats-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Dark mode support (se necessário no futuro) */
@media (prefers-color-scheme: dark) {
	/* Preparado para dark mode */
}