/*!
 * MunaffShare Bootstrap-lite v3 (self-hosted)
 * Purpose: provide the Bootstrap 5-ish layout + utility classes used by MunaffShare
 * without any external CDN dependencies.
 * Includes: reboot, container/grid, spacing utilities used, buttons, forms, cards, tables,
 * navbar, badges, alerts, pagination, modal.
 */

:root{
  --bs-body-font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: #0f172a;
  --bs-body-bg: #fff;

  --bs-primary: #0061FF;
  --bs-secondary: #6B7280;
  --bs-success: #16A34A;
  --bs-info: #0EA5E9;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;

  --bs-border-color: rgba(17, 24, 39, 0.14);
  --bs-border-radius: .75rem;
  --bs-border-radius-pill: 50rem;

  --bs-box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);

  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;

  --bs-link-color: var(--bs-primary);
}

*,*::before,*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

img{ max-width: 100%; height: auto; }
button, input, select, textarea{ font: inherit; }

/* Links */
a{ color: var(--bs-link-color); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Typography helpers */
.h4, h4{ font-size: 1.5rem; margin: 0 0 .5rem; }
.h5, h5{ font-size: 1.25rem; margin: 0 0 .5rem; }
.fw-semibold{ font-weight: 600 !important; }
.small, small{ font-size: .875em; }
.text-muted{ color: rgba(15,23,42,.62) !important; }
.text-center{ text-align: center !important; }
.text-end{ text-align: right !important; }
.text-nowrap{ white-space: nowrap !important; }
.link-primary{ color: var(--bs-primary) !important; }

/* Display + flex utilities */
.d-flex{ display: flex !important; }
.d-grid{ display: grid !important; }
.flex-wrap{ flex-wrap: wrap !important; }
.align-items-center{ align-items: center !important; }
.justify-content-between{ justify-content: space-between !important; }
.justify-content-center{ justify-content: center !important; }
.justify-content-end{ justify-content: flex-end !important; }
.gap-2{ gap: .5rem !important; }
.gap-3{ gap: 1rem !important; }

/* Width */
.w-100{ width: 100% !important; }

/* Spacing utilities (only what MunaffShare uses) */
.mb-0{ margin-bottom: 0 !important; }
.mb-1{ margin-bottom: .25rem !important; }
.mb-2{ margin-bottom: .5rem !important; }
.mb-3{ margin-bottom: 1rem !important; }
.mb-4{ margin-bottom: 1.5rem !important; }

.mt-2{ margin-top: .5rem !important; }
.mt-3{ margin-top: 1rem !important; }

.me-2{ margin-right: .5rem !important; }

.p-4{ padding: 1.5rem !important; }
.py-2{ padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4{ padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

/* Border + shadow */
.border-0{ border: 0 !important; }
.shadow-sm{ box-shadow: var(--bs-box-shadow-sm) !important; }
.rounded-pill{ border-radius: var(--bs-border-radius-pill) !important; }

/* ---------- Grid system (subset) ---------- */
.container{
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px){ .container{ max-width: 540px; } }
@media (min-width: 768px){ .container{ max-width: 720px; } }
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }

.row{
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > *{
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

/* gutters */
.g-2{ --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }

/* columns used */
.col-12{ flex: 0 0 auto; width: 100%; }
.col-6{ flex: 0 0 auto; width: 50%; }

@media (min-width: 768px){
  .col-md-2{ flex: 0 0 auto; width: 16.6666667%; }
  .col-md-6{ flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px){
  .col-lg-5{ flex: 0 0 auto; width: 41.6666667%; }
}

/* VStack */
.vstack{ display: flex !important; flex-direction: column !important; align-self: stretch !important; }

/* ---------- Navbar ---------- */
.navbar{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
}
.navbar-brand{ display: inline-flex; align-items: center; font-weight: 700; }
.navbar-expand-lg .navbar-nav{ flex-direction: row; }

/* ---------- Cards ---------- */
.card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.card-body{ flex: 1 1 auto; padding: 1rem; }

/* ---------- Forms ---------- */
.form-label{ margin-bottom: .25rem; display:block; }
.form-control, .form-control-lg{
  display:block;
  width:100%;
  padding:.5rem .75rem;
  border:1px solid var(--bs-border-color);
  border-radius: .75rem;
  background:#fff;
}
.form-control-lg{ padding:.75rem 1rem; font-size: 1.1rem; }
.form-control:focus, .form-control-lg:focus{
  outline: 0;
  border-color: rgba(0,97,255,.45);
  box-shadow: 0 0 0 4px rgba(0,97,255,.14);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none !important;
}
.btn:disabled, .btn.disabled{ opacity:.65; cursor:not-allowed; }
.btn-sm{ padding: .25rem .6rem; font-weight: 700; }
.btn-lg{ padding: .75rem 1rem; font-size: 1.1rem; }

.btn-primary{ background: var(--bs-primary); color:#fff; }
.btn-primary:hover{ filter: brightness(.95); }

.btn-danger{ background: var(--bs-danger); color:#fff; }
.btn-danger:hover{ filter: brightness(.95); }

.btn-light{ background: #fff; color: var(--bs-body-color); border-color: var(--bs-border-color); }
.btn-light:hover{ background: #f7f7f7; }

/* ---------- Badges ---------- */
.badge{
  display:inline-block;
  padding:.35rem .65rem;
  font-size:.85em;
  font-weight:700;
  line-height:1;
  border-radius: var(--bs-border-radius-pill);
}
.text-bg-light{
  background: rgba(0,97,255,.10) !important;
  color: rgba(0,97,255,.95) !important;
  border: 1px solid rgba(0,97,255,.18) !important;
}

/* ---------- Alerts ---------- */
.alert{
  position: relative;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
}
.alert-danger{
  color: #842029;
  background: #f8d7da;
  border-color: #f5c2c7;
}

/* ---------- Tables ---------- */
.table{
  width:100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.table th, .table td{
  padding:.65rem .75rem;
  border-top: 1px solid rgba(17,24,39,.10);
  vertical-align: middle;
}
.table thead th{
  border-bottom: 1px solid rgba(17,24,39,.12);
  color: rgba(15,23,42,.72);
  font-weight: 800;
  background: rgba(15,23,42,.04);
}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;
  padding-left: 0;
  list-style:none;
  gap:.25rem;
}
.page-link{
  display:block;
  padding:.35rem .65rem;
  border:1px solid rgba(17,24,39,.12);
  border-radius: 999px;
  background:#fff;
  color: var(--bs-primary);
  text-decoration:none;
}
.page-item.disabled .page-link{
  opacity:.55;
  pointer-events:none;
}
.page-link:hover{ background: rgba(0,97,255,.06); }

/* ---------- Modal ---------- */
.modal{
  position: fixed;
  top: 0; left: 0;
  z-index: 1055;
  display: none;
  width: 100%; height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal.show{ display:block; }
.modal-dialog{
  position: relative;
  width: auto;
  margin: 1.75rem auto;
  pointer-events: none;
  max-width: 500px;
}
@media (min-width: 992px){
  .modal-dialog{ max-width: 800px; }
}
.modal-dialog-centered{
  display:flex;
  align-items:center;
  min-height: calc(100% - 3.5rem);
}
.modal-content{
  position: relative;
  display:flex;
  flex-direction: column;
  width:100%;
  pointer-events: auto;
  background-color:#fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: var(--bs-border-radius);
  outline: 0;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid rgba(17,24,39,.10);
}
.modal-title{ margin:0; line-height:1.25; font-weight: 800; }
.modal-body{ position:relative; flex:1 1 auto; padding: 1rem; }
.modal-footer{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  justify-content:flex-end;
  padding: .75rem 1rem;
  border-top: 1px solid rgba(17,24,39,.10);
}
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,.45);
}

/* Close button */
.btn-close{
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  background: transparent;
  opacity: .6;
  cursor: pointer;
}
.btn-close:hover{ opacity: .85; }