/* Common styles for admin templates */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0b1021; color: #F5F5F5; min-height: 100vh; display: flex; scrollbar-gutter: stable; }
.sidebar { width: 260px; background: #0e1530; border-right: 1px solid rgba(212,175,55,0.12); padding: 24px 16px; position: sticky; top: 0; height: 100vh; flex-shrink: 0; overflow-y: auto; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: .6px; background: linear-gradient(135deg, #D4AF37, #FFD700); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; }
.project { font-size: 12px; color: #94A3B8; margin-bottom: 26px; }
.nav { display: flex; flex-direction: column; gap: 8px; }
.nav a, .nav button { display: block; padding: 12px 14px; color: #94A3B8; text-decoration: none; border: 1px solid transparent; border-radius: 10px; transition: .2s; font-weight: 600; }
.nav a:hover, .nav a.active, .nav button:hover { color: #0A1128; background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%); }
.nav a i, .nav button i { margin-right: 10px; width: 20px; text-align: center; }
.content { flex: 1; padding: 24px; min-width: 0; overflow-x: auto; }
.card { background: rgba(30,27,75,.35); border:1px solid rgba(212,175,55,.18); border-radius:16px; padding:20px; margin-bottom:18px; }
.card-title { font-size:18px; font-weight:800; margin-bottom:10px; }
.table-wrapper { overflow-x:auto; border-radius:12px; background: rgba(10,17,40,.35); border:1px solid rgba(212,175,55,.15); overflow-y:hidden; }
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; }
.info-item { background: rgba(10,17,40,.4); border:1px solid rgba(212,175,55,.2); border-radius:12px; padding:16px; }
.info-label { font-size:12px; color:#94A3B8; text-transform: uppercase; letter-spacing:.5px; margin-bottom:6px; }
.info-value { font-size:20px; color:#D4AF37; font-weight:800; }
.btn { background: linear-gradient(135deg, #059669 0%, #10B981 100%); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; }
input, select { background: rgba(10,17,40,.6); color:#F5F5F5; border:1px solid rgba(212,175,55,.3); padding:6px 8px; border-radius:6px; font-size:13px; }
table input, table select { padding:4px 6px; font-size:12px; }

table { width:100%; border-collapse: collapse; }
th, td { padding:8px 6px; text-align:left; font-size:13px; }
thead th { font-size:12px; text-transform: uppercase; letter-spacing:.6px; color:#D4AF37; border-bottom:1px solid rgba(212,175,55,.35); }
tbody tr { border-bottom:1px solid rgba(212,175,55,.12); }

/* Shared form layout */
.form-container { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; background: rgba(10,17,40,.35); border:1px solid rgba(5,150,105,.2); border-radius:12px; padding:16px; }
.form-group { display:flex; flex-direction: column; gap:6px; }
.form-group label { font-size:12px; color:#94A3B8; text-transform: uppercase; letter-spacing:.5px; }
.tab-header { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn { background: rgba(255,255,255,0.08); border:1px solid rgba(212,175,55,0.25); color:#E2E8F0; padding:8px 16px; border-radius:8px; cursor:pointer; font-weight:600; transition:.2s; }
.tab-btn.active { background: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%); color:#0A1128; border-color:transparent; }
.tab-section { display:none; }
.tab-section.active { display:block; }
.tab-actions { margin:12px 0; display:flex; align-items:center; gap:12px; }
.tab-error { color:#f87171; font-size:13px; }
.payout-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(70px,1fr)); gap:4px; align-items:center; }
.payout-grid span { font-size:12px; color:#94A3B8; text-align:center; }
.table-list { margin-top:12px; }
.table-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.table-actions { display:flex; gap:8px; flex-wrap:wrap; }
.table-summary { color:#94A3B8; font-size:13px; margin-top:8px; }
.table-details { margin-top:10px; padding:10px 12px; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background: rgba(10,17,40,.4); }
.table-details table { width:100%; border-collapse:collapse; margin-top:6px; }
.table-details th, .table-details td { padding:6px; font-size:12px; text-align:left; }
.table-details th { color:#E2E8F0; }


/* Responsive breakpoints */
@media (max-width: 1200px) {
  .sidebar { width: 240px; }
  .content { padding: 20px; }
}

@media (max-width: 1024px) {
  .sidebar { width: 220px; }
  .nav a { padding: 10px 12px; }
  .content { padding: 18px; }
  .card-title { font-size: 16px; }
  th, td { padding:10px; }
}

@media (max-width: 840px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid rgba(212,175,55,0.12); }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nav a { padding: 8px 10px; font-size: 14px; }
  .content { width: 100%; padding: 16px; }
  .info-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
}

@media (max-width: 640px) {
  .brand { font-size: 16px; }
  .project { font-size: 11px; }
  .card { padding: 16px; }
  .btn { padding: 8px 12px; }
  table { font-size: 14px; }
  thead th { font-size: 11px; }
}

@media (max-width: 480px) {
  .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav a { white-space: nowrap; }
  th, td { padding: 8px; }
  .form-container { grid-template-columns: 1fr; }
}