/* assets/app.css */
/* Mobile-first, RTL-friendly, Bootstrap-compatible polish */

:root{
  --app-bg: #f5f7fb;
  --card-bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, 0.08);
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --shadow-sm: 0 6px 18px rgba(15,23,42,.07);
  --radius: 18px;
  --radius-sm: 14px;
}

/* Base */
html, body { height: 100%; }
body{
  background: radial-gradient(1200px 400px at 50% -100px, rgba(59,130,246,.10), transparent 60%),
              radial-gradient(900px 380px at 90% 0px, rgba(16,185,129,.08), transparent 55%),
              var(--app-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container, .container-fluid { padding-left: 14px; padding-right: 14px; }

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

/* Cards */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card .card-body{ padding: 18px; }
@media (min-width: 992px){
  .card .card-body{ padding: 22px; }
}

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

/* Buttons */
.btn{
  border-radius: 14px;
  padding: .62rem .9rem;
  font-weight: 700;
  letter-spacing: -.1px;
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary, .btn-success, .btn-danger{
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
}
.btn-outline-secondary, .btn-outline-primary{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
}
.btn-sm{ padding: .45rem .7rem; border-radius: 12px; }

/* Page header row */
.d-flex.align-items-center.justify-content-between.mb-3{
  gap: 10px;
}
.d-flex.align-items-center.justify-content-between.mb-3 h4{
  margin: 0;
  font-size: 1.15rem;
}
@media (max-width: 576px){
  .d-flex.align-items-center.justify-content-between.mb-3{
    flex-direction: column;
    align-items: stretch !important;
  }
  .d-flex.align-items-center.justify-content-between.mb-3 a,
  .d-flex.align-items-center.justify-content-between.mb-3 button{
    width: 100%;
  }
}

/* Forms */
.form-label{ font-weight: 700; color: #111827; }
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: .66rem .85rem;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.12) !important;
}
.form-text{ color: var(--muted); }

/* Tables - make them mobile friendly */
.table{
  margin: 0;
}
.table thead th{
  font-size: .86rem;
  color: #334155;
  border-bottom: 1px solid var(--border);
  background: rgba(248,250,252,.9);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table td, .table th{
  vertical-align: middle;
  border-color: var(--border);
}
.table-hover tbody tr:hover{
  background: rgba(59,130,246,.05);
}

/* Responsive table wrapper */
.table-responsive{
  border-radius: 16px;
}

/* On small screens, keep table scrollable but nicer */
@media (max-width: 768px){
  .table-responsive{
    border: 1px solid var(--border);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(6px);
  }
  .table thead th{ font-size: .82rem; }
  .table td{ font-size: .92rem; }
  .badge{ font-size: .75rem; padding: .45em .7em; border-radius: 999px; }
}

/* Badges */
.badge{ border-radius: 999px; padding: .45em .8em; }

/* Make action column buttons not wrap */
td[style*="white-space:nowrap"] .btn{ white-space: nowrap; }

/* Leaflet map polish */
#map{
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(15,23,42,.10);
}

/* Sticky bottom action bar for forms (mobile) */
@media (max-width: 576px){
  .form-actions-sticky{
    position: sticky;
    bottom: 10px;
    z-index: 10;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
  }
  .form-actions-sticky .btn{ width: 100%; }
}

/* Navbar/header (if you use it in header.php) */
.navbar{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand{
  font-weight: 900;
  letter-spacing: -.2px;
}

/* ----------------------------------
PERSONS TABLE -> MOBILE STACK
---------------------------------- */

@media (max-width: 768px){

  #personsTable thead{
    display:none;
  }

  #personsTable,
  #personsTable tbody,
  #personsTable tr,
  #personsTable td{
    display:block;
    width:100%;
  }

  #personsTable tr{
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;
    box-shadow:0 8px 18px rgba(0,0,0,0.06);
  }

  #personsTable td{
    border:none;
    padding:6px 0;
  }

  #personsTable td::before{
    display:block;
    font-weight:700;
    font-size:12px;
    color:#6b7280;
    margin-bottom:4px;
  }

  /* labels */

  #personsTable td:nth-child(1)::before{
    content:"إسم المقيم الكامل";
  }

  #personsTable td:nth-child(2)::before{
    content:"رقم الهاتف";
  }

  #personsTable td:nth-child(3)::before{
    content:"إرفاق هوية / جواز";
  }

  #personsTable td:nth-child(4)::before{
    content:"نوع المستند";
  }

  #personsTable td:nth-child(5)::before{
    content:"";
  }

  #personsTable input,
  #personsTable select{
    width:100%;
  }

  #personsTable .btn{
    width:100%;
    margin-top:6px;
  }

}