/* Global styles for Mobile Tracker - Blue primary (#0056b3) and dark yellow accents (#ffb400) */
/* Professional flat UI, responsive */

:root{
  --blue: #0056b3;
  --yellow: #ffb400;
  --bg-dark: #0b2338;
  --card-bg: #071528;
  --muted: #9bb2d6;
  --glass: rgba(255,255,255,0.03);
  --radius: 10px;
  --max-width: 1100px;
  --header-height: 68px;
  --fw-heading: 600;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg-dark) 0%, #021726 100%);
  color:#e6f0fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:24px;
}

/* container */
.container{
  max-width: var(--max-width);
  margin: 0 auto;
}

/* header */
.header{
  display:flex;
  align-items:center;
  gap:16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:12px 18px;
  border-radius: var(--radius);
  height: var(--header-height);
  box-shadow: 0 6px 18px rgba(2,10,30,0.6);
  margin-bottom:18px;
}

.logo{
  width:56px;height:56px;border-radius:10px;
  background: linear-gradient(180deg, var(--yellow), #e6a800);
  display:flex;align-items:center;justify-content:center;
  color:var(--bg-dark);font-weight:700;font-size:18px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.header-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.header-info .user{font-weight:700;color:var(--yellow);font-size:16px}
.header-info .meta{font-size:13px;color:var(--muted)}

/* actions */
.actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn-logout{background:transparent;color:var(--yellow);border:1px solid rgba(255,255,255,0.04)}

/* card styles */
.card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; box-shadow: 0 6px 20px rgba(2,10,30,0.6);}

/* form */
.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.input, input[type="text"], input[type="email"], input[type="password"]{
  padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);
  background:transparent;color:var(--muted);min-width:220px;
}
.input:focus, input:focus{outline:2px solid rgba(0,86,179,0.12);color:#fff}
.input.full{flex:1;min-width:0}

/* track button */
.btn-track{background:linear-gradient(90deg,var(--yellow),#e6a800);color:var(--bg-dark);padding:10px 16px;border-radius:8px;border:0;font-weight:700}

/* table */
.table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.table th, .table td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03)}
.table th{background:var(--blue);color:var(--yellow);font-weight:700}
.table td{background:transparent;color:#dfeaf8}

/* small utilities */
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}
.mt-12{margin-top:12px}
.mt-18{margin-top:18px}

/* responsive */
@media (max-width:800px){
  .form-row{flex-direction:column;align-items:stretch}
  .header{flex-direction:column;align-items:flex-start;height:auto;padding:14px;gap:10px}
  .logo{width:48px;height:48px}
  .header-info .user{font-size:15px}
}

/* admin tweaks */
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.input-small{width:120px;padding:8px;border-radius:6px}

/* messages */
.alert{padding:10px 12px;border-radius:8px;background:rgba(255,180,0,0.08);color:var(--yellow);margin-top:10px}
.alert-error{background:rgba(255,0,0,0.06);color:#ffb3b3}

/* footer */
.footer{margin-top:28px;color:var(--muted);font-size:13px;text-align:center}