/* MunaffShare UI (Light Theme)
   Goal: clean, modern, Bootstrap-like styling using core Bootstrap color tokens.
   - No outline buttons: all buttons are filled.
   - Soft light background (not pure white).
*/

:root{
  color-scheme: light;

  /* Bootstrap-ish core */
  --ms-primary: #0061FF;
  --ms-secondary: #6B7280;
  --ms-success: #16A34A;
  --ms-info: #0EA5E9;
  --ms-warning: #ffc107;
  --ms-danger: #dc3545;

  /* Surfaces */
  --ms-bg: #F7F9FC;
  --ms-bg-2: #EEF2F8;
  --ms-surface: #ffffff;
  --ms-surface-solid: #ffffff;
  --ms-border: rgba(17, 24, 39, 0.10);
  --ms-border-strong: rgba(17, 24, 39, 0.16);

  /* Text */
  --ms-ink: #0f172a;
  --ms-muted: rgba(15, 23, 42, 0.62);

  /* Effects */
  --ms-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
  --ms-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.08);
  --ms-radius: 14px;
  --ms-radius-sm: 12px;

  /* Typography */
  --ms-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{ height: 100%; }

body{
  background-color: var(--ms-bg);
  margin: 0;
  font-family: var(--ms-font);
  color: var(--ms-ink);
  /* Dropbox-like: clean, flat surface */
  background: var(--ms-bg);
  overflow-x: hidden;
}

a{ color: var(--ms-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

::selection{ background: rgba(13,110,253,0.18); }

/* Optional subtle grid (very light) */
.ms-bg-kids::before,
.ms-bg-admin::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,0.08) 1px, transparent 1px);
  background-size: 160px 160px;
  opacity: 0;
}

.ms-bg-kids, .ms-bg-admin{ min-height: 100vh; background: transparent; }

/* Navbar */
.ms-nav, .ms-nav-admin.navbar{
  background: #ffffff !important;
  border-bottom: 1px solid var(--ms-border) !important;
  backdrop-filter: none;
}

.navbar .container{ gap: 12px; }

.ms-brand-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
}

.ms-brand-logo img{
  height: 30px;
  width: auto;
  display: block;
}

/* Cards */
.ms-card, .card{
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  box-shadow: var(--ms-shadow-soft) !important;
}

/* Slight highlight for primary action card (Upload) */
.ms-card-highlight{
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(0,97,255,0.10), transparent 55%),
    var(--ms-surface) !important;
  border-color: rgba(0,97,255,0.24) !important;
  box-shadow:
    0 10px 24px rgba(0,97,255,0.10),
    var(--ms-shadow-soft) !important;
}

.ms-card-highlight .ms-btn-kids{
  box-shadow: 0 10px 22px rgba(0,97,255,0.18) !important;
}

/* Subtle appear animation (used for newly added rows) */
@keyframes ms-appear{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.ms-appear{
  animation: ms-appear 260ms ease-out both;
  will-change: opacity, transform;
}

.card-body{ color: var(--ms-ink); }

/* Headings */
h1,h2,h3,h4,h5,h6{ letter-spacing: -0.2px; }

.text-muted, .small.text-muted{ color: var(--ms-muted) !important; }

/* Badges / chips */
.badge{
  border-radius: 999px !important;
  padding: 6px 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.badge.text-bg-light{
  background: rgba(0,97,255,0.10) !important;
  color: rgba(0,97,255,0.95) !important;
  border: 1px solid rgba(0,97,255,0.18) !important;
}

/* Inputs */
.form-control, .form-control-lg, .form-select{
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid var(--ms-border) !important;
  color: var(--ms-ink) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.form-control::placeholder{ color: rgba(15,23,42,0.45) !important; }

.form-control:focus, .form-select:focus{
  border-color: rgba(13,110,253,0.45) !important;
  box-shadow: 0 0 0 4px rgba(13,110,253,0.14) !important;
}

/* Buttons: filled only (no outline look) */
.btn{
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.btn:focus, .btn:active{
  box-shadow: 0 0 0 4px rgba(13,110,253,0.14) !important;
}

/* Map existing ms button classes to Bootstrap-like fills */
.ms-btn-primary, .btn.ms-btn-primary{ background: var(--ms-primary) !important; color: #fff !important; }
.ms-btn-secondary, .btn.ms-btn-secondary{ background: var(--ms-info) !important; color: #052c33 !important; }
.ms-btn-neutral, .btn.ms-btn-neutral{ background: var(--ms-secondary) !important; color: #fff !important; }
.ms-btn-danger, .btn.ms-btn-danger{ background: var(--ms-danger) !important; color: #fff !important; }
.ms-btn-nav, .btn.ms-btn-nav{ background: var(--ms-primary) !important; color: #fff !important; padding: 8px 14px; }
.ms-btn-kids, .btn.ms-btn-kids{ background: var(--ms-primary) !important; color: #fff !important; }

.btn:hover{
  filter: brightness(0.98);
  transform: none;
  transition: transform 120ms ease, filter 120ms ease;
}

/* Remove any outline variants if used accidentally */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark{
  border: 0 !important;
}

/* Tables */
.table{
  color: var(--ms-ink) !important;
}

.table thead th{
  background: #F1F4F8;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,0.70);
  border-bottom: 1px solid var(--ms-border) !important;
}

.table tbody tr{
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.table tbody tr:hover{
  background: rgba(0,97,255,0.06);
}

.table td, .table th{ vertical-align: middle; }

/* Pagination */
.pagination .page-link{
  border-radius: 10px !important;
  border: 1px solid var(--ms-border) !important;
  color: rgba(15,23,42,0.75) !important;
  background: rgba(255,255,255,0.85) !important;
}

.pagination .page-item.active .page-link{
  background: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: #fff !important;
}

/* Scrollbar (subtle) */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.25) transparent;
}

*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(15,23,42,0.25); border-radius: 999px; }
*::-webkit-scrollbar-track{ background: transparent; }