/* assets/css/style.css - modern responsive banking UI */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --brand:#0b74de;
  --accent:#0f1724;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --border:#e6eef8;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:0 6px 18px rgba(11,116,222,0.06);
  --shadow-lg:0 10px 28px rgba(11,116,222,0.08);
}

*{box-sizing:border-box}
body{
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--accent);
  margin:0;
  line-height:1.6;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:1rem}
main.container{padding:1.5rem;min-height:calc(100vh - 200px)}

/* Topbar Navigation */
.topbar{background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand{font-weight:700;color:var(--brand);text-decoration:none;font-size:1.1rem}
.nav-right{display:flex;gap:.5rem;align-items:center}
.nav-user{color:var(--muted);margin-right:.5rem;font-size:0.9rem}

/* Buttons */
.btn{
  display:inline-block;
  padding:.5rem .9rem;
  border-radius:6px;
  background:#eef6ff;
  color:var(--brand);
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-size:0.9rem;
  font-weight:500;
  transition:all 0.2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:#095cb8}
.btn.success{background:var(--success);color:#fff}
.btn.success:hover{background:#059669}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#dc2626}
.btn.warning{background:var(--warning);color:#fff}
.btn.warning:hover{background:#d97706}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* Page Sections */
section{
  background:var(--card);
  border-radius:10px;
  padding:1.5rem;
  box-shadow:var(--shadow-md);
  margin-bottom:1.5rem;
}
section h1{
  margin:0 0 1rem;
  font-size:1.5rem;
  color:var(--accent);
  font-weight:700;
}
section h2{
  margin:1.5rem 0 1rem;
  font-size:1.2rem;
  color:var(--accent);
  font-weight:600;
}

/* Controls & Actions */
.controls{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.page-header h1{margin:0}

/* Tables */
.table-wrapper{overflow-x:auto;margin-top:1rem}
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:8px;
  overflow:hidden;
  min-width:600px;
}
.table thead{background:#f8fbff}
.table th,.table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.table th{font-weight:600;color:var(--accent);font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px}
.table tbody tr{transition:background 0.15s ease}
.table tbody tr:hover{background:#fbfdff}
.table tbody tr:last-child td{border-bottom:none}
.table .actions{white-space:nowrap}
.table .actions .btn{padding:.35rem .6rem;font-size:0.85rem;margin-right:0.25rem}

/* Cards & Dashboard */
.dashboard .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.card{
  background:var(--card);
  padding:1.25rem;
  border-radius:10px;
  box-shadow:var(--shadow-md);
  transition:all 0.2s ease;
}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-title{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.card-value{font-size:1.8rem;font-weight:700;margin-top:.4rem;color:var(--brand)}

/* ATM Card Component */
.atm-card{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius:12px;
  padding:1.5rem;
  color:#fff;
  max-width:360px;
  box-shadow:0 8px 24px rgba(102,126,234,0.3);
  position:relative;
  overflow:hidden;
  aspect-ratio:1.586/1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.atm-card::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events:none;
}
.atm-card.blocked{
  background:linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  opacity:0.8;
}
.atm-card-header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.atm-card-chip{
  width:45px;
  height:35px;
  background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border-radius:6px;
  position:relative;
}
.atm-card-chip::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:70%;
  height:70%;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:3px;
}
.atm-card-type{font-size:0.75rem;font-weight:600;opacity:0.9;text-transform:uppercase;letter-spacing:1px}
.atm-card-number{
  font-size:1.3rem;
  letter-spacing:3px;
  font-family:'Courier New', monospace;
  font-weight:600;
  margin:1rem 0 0.5rem;
  position:relative;
  z-index:1;
}
.atm-card-footer{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1}
.atm-card-holder{flex:1}
.atm-card-label{font-size:0.65rem;text-transform:uppercase;opacity:0.7;margin-bottom:0.2rem;letter-spacing:0.5px}
.atm-card-value{font-size:0.9rem;font-weight:600;text-transform:uppercase}
.atm-card-expiry .atm-card-value{font-family:'Courier New', monospace;letter-spacing:1px}
.atm-card-status{
  position:absolute;
  top:1rem;
  right:1rem;
  background:rgba(239,68,68,0.9);
  color:#fff;
  padding:0.25rem 0.6rem;
  border-radius:4px;
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  z-index:2;
}
.atm-card-status.active{background:rgba(16,185,129,0.9)}

/* Forms */
.auth-card{
  max-width:760px;
  margin:2rem auto;
  padding:2rem;
  background:var(--card);
  border-radius:10px;
  box-shadow:var(--shadow-md);
}
.auth-card h1{margin:0 0 1.5rem;font-size:1.5rem;font-weight:700}
.form label{display:block;margin-bottom:.85rem;color:var(--muted);font-weight:500;font-size:0.9rem}
.form input, .form select, .form textarea{
  width:100%;
  padding:.65rem .85rem;
  border:1px solid var(--border);
  border-radius:6px;
  margin-top:.4rem;
  font-size:0.95rem;
  transition:border-color 0.2s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(11,116,222,0.1);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.form-actions{margin-top:1.5rem;display:flex;gap:0.5rem;justify-content:flex-end}

/* Alerts */
.alert{padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;border:1px solid;font-size:0.9rem}
.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

/* Utility Classes */
.small{font-size:.85rem;color:var(--muted)}
.text-muted{color:var(--muted)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.mb-1{margin-bottom:0.5rem}
.mb-2{margin-bottom:1rem}
.badge{
  display:inline-block;
  padding:0.25rem 0.6rem;
  border-radius:4px;
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
}
.badge-success{background:#d1fae5;color:#065f46}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-info{background:#dbeafe;color:#1e40af}

/* Footer */
.site-footer{
  padding:1.5rem 0;
  text-align:center;
  color:var(--muted);
  margin-top:3rem;
  border-top:1px solid var(--border);
  font-size:0.9rem;
}

/* Admin specific */
.admin-actions{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}

/* Responsive Design */
@media (max-width:768px){
  .topbar .container{flex-direction:column;align-items:flex-start;gap:0.5rem}
  .nav-right{margin-top:.5rem;width:100%;justify-content:flex-end}
  .form-grid{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start}
  section{padding:1rem}
  .auth-card{padding:1.5rem;margin:1rem auto}
  .dashboard .cards{grid-template-columns:1fr}
  .atm-card{max-width:100%}
  .table{font-size:0.85rem}
  .table th, .table td{padding:0.5rem}
}

@media (max-width:600px){
  .controls{flex-direction:column;align-items:stretch}
  .controls .btn{width:100%}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
}