/* public/assets/app.css */

/* ====== Base theme (works with Bootstrap) ====== */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, 0.10);

  --radius: 16px;
  --radius-sm: 12px;

  --shadow: 0 10px 25px rgba(15, 23, 42, 0.07);
  --shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.06);
}

html, body { height: 100%; }

body{
  background: var(--bg);
  color: var(--text);
}

/* ====== Typography ====== */
h1,h2,h3,h4,h5{
  letter-spacing: -0.01em;
}
.text-muted{ color: var(--muted) !important; }

/* ====== Layout ====== */
.container{
  max-width: 1100px;
}
@media (max-width: 576px){
  .container{ padding-left: 14px; padding-right: 14px; }
}

/* ====== Cards ====== */
.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.card-header, .card-footer{
  background: rgba(255,255,255,0.65) !important;
  border-color: var(--border) !important;
}
.card-body{ padding: 1rem; }
@media (max-width: 576px){
  .card-body{ padding: .9rem; }
}

/* ====== Buttons ====== */
.btn{
  border-radius: var(--radius-sm);
}
.btn-sm{
  border-radius: 10px;
}
.btn:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
}

/* ====== Forms ====== */
.form-control,
.form-select,
.input-group-text{
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
}
.form-control:focus,
.form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12) !important;
}

/* ====== Tables ====== */
.table{
  margin-bottom: 0;
}
.table thead th{
  font-size: .85rem;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border) !important;
}
.table td{
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: rgba(2, 6, 23, 0.02);
}
.table-responsive{
  border-radius: var(--radius);
}

/* ====== Alerts ====== */
.alert{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ====== Badges ====== */
.badge{
  border-radius: 999px;
  padding: .45em .7em;
  font-weight: 700;
}

/* ====== Navbar (Bootstrap) nicer look ====== */
.navbar{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px);
}
.navbar .nav-link{
  font-weight: 600;
  border-radius: 10px;
  padding: .45rem .65rem;
}
.navbar .nav-link:hover{
  background: rgba(13,110,253,0.08);
}

/* ====== Small utilities ====== */
.shadow-sm{
  box-shadow: var(--shadow-soft) !important;
}

/* Better “app” spacing */
.page-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.navbar-toggler{
  border-color: rgba(15,23,42,0.15);
}
.navbar-toggler-icon{
  filter: none;
}