/* assets/style.css - responsive base + protections for zoom/overflow */

/* load font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --primary:#2b2f6a;
  --accent:#9b6cff;
  --muted:#6b7280;
  --text:#222;
}

/* base reset */
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
/* Prevent unexpected horizontal overflow */
html, body { max-width:100%; overflow-x:hidden; }

/* main container centered and constrained so zoom won't create huge blank areas */
.container{max-width:1100px;margin:24px auto;padding:16px;}

/* Make images responsive (prevent logo overflow) */
img{max-width:100%;height:auto;display:block;}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--primary),#3b3f91);color:#fff;padding:18px 0;box-shadow:0 2px 6px rgba(16,24,56,0.08);}
.topbar-inner{max-width:60%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 12px;}
.logo{height:54px;width:auto;max-height:64px;}
.logo-placeholder{background:#fff;color:var(--primary);padding:8px 12px;border-radius:6px;font-weight:100;}
.nav{display:flex;align-items:center;gap:12px;}
.nav a, .dropbtn{color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px;font-size:15px;}
.dropbtn{background:transparent;border:none;cursor:pointer;font-size:15px;}
.dropdown{position:relative;}
.dropdown-content{display:none;position:absolute;right:0;background:var(--card);color:#111;min-width:200px;padding:8px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:30;}
.dropdown-content a{display:block;color:#111;padding:8px;border-radius:4px;text-decoration:none;}
.dropdown:hover .dropdown-content{display:block;}

/* Typography & spacing */
h1{font-size:18px;margin:6px 0 8px;color:var(--primary);}
.muted{color:var(--muted);font-size:15px}

/* Card */
.card{background:var(--card);padding:18px;border-radius:8px;box-shadow:0 8px 24px rgba(23,23,23,0.04);}

/* Forms: ensure inputs/buttons large enough to avoid mobile auto-zoom */
.form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0;padding:12px;background:var(--card);border-radius:8px;}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:14px;}
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea{
  padding:10px;border-radius:6px;border:1px solid #ddd;background:#fff;width:100%;
  /* critical: set minimum font size to avoid iOS Safari auto-zoom */
  font-size:16px;
}
button{background:var(--primary);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer;font-size:15px;}

/* Table */
.table-responsive{width:100%;overflow:auto;}
.table{width:100%;border-collapse:collapse;background:var(--card);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(23,23,23,0.04);margin-top:12px;}
.table thead{background:linear-gradient(90deg,var(--accent),#7a5cff);color:#fff;}
.table th,.table td{padding:12px;border-bottom:1px solid #f0f0f0;text-align:left;vertical-align:middle;}
.table tbody tr:nth-child(even){background:#fbfbfb;}
.table .actions{display:flex;gap:8px;}

/* Footer */
.footer{padding:18px;background:#fff;color:var(--muted);margin-top:24px;border-top:1px solid #eee;font-size:15px;text-align: center;}

/* Dashboard stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:12px;}
.stat-card{position:relative;border-radius:8px;color:#fff;padding:18px;overflow:hidden;min-height:96px;display:flex;align-items:center;justify-content:space-between;}
.stat-number{font-size:15px;font-weight:700;}
.stat-label{font-size:12px;opacity:0.95;margin-top:6px;text-transform:uppercase;letter-spacing:0.6px;}
.stat-icon{position:absolute;right:14px;top:12px;opacity:0.14;}
.stat-blue{background:linear-gradient(90deg,#2d9cff,#2b8dfd);}
.stat-green{background:linear-gradient(90deg,#16a34a,#2bb673);}
.stat-red{background:linear-gradient(90deg,#ef4444,#f06d6d);}
.stat-yellow{background:linear-gradient(90deg,#f59e0b,#f59e0b);}

/* Small screens adjust */
@media (max-width:800px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:500px){
  .stat-grid{grid-template-columns:1fr;}
  .table th,.table td{padding:10px;}
  .container{padding:12px;}
  /* ensure interactive elements easy to tap */
  .nav a{padding:8px;}
}