/*
  Modern UI layer (non-breaking)
  - Keeps the current template HTML structure
  - Improves spacing, typography, cards, tables, forms, sidebar/topbar
  - Works alongside existing app.css + dark-theme.css
*/

:root{
  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-surface-2: #fbfbfe;
  --ui-border: rgba(15, 23, 42, .08);
  --ui-border-strong: rgba(15, 23, 42, .12);
  --ui-text: #0f172a;
  --ui-muted: rgba(15, 23, 42, .65);
  --ui-shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --ui-shadow-sm: 0 6px 16px rgba(2, 6, 23, .08);
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --ui-ring: 0 0 0 .25rem rgba(13, 110, 253, .16);
}

/* Base */
body{
  background: var(--ui-bg) !important;
  color: var(--ui-text);
}

/* Typography */
body, .btn, .form-control, .dropdown-menu{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.text-muted{ color: var(--ui-muted) !important; }

/* Topbar */
.topbar{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ui-border);
}

/* Sidebar */
.sidebar-wrapper{
  border-right: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
  backdrop-filter: blur(10px);
}

.sidebar-header{
  border-bottom: 1px solid var(--ui-border);
}

.sidebar-wrapper .logo-text{
  font-weight: 700;
  letter-spacing: .2px;
}

/* Menu items */
#menu a{
  border-radius: 12px;
  margin: 4px 10px;
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease;
}

#menu a:hover{
  background: rgba(13,110,253,.08);
  transform: translateY(-1px);
}

#menu li.active > a,
#menu li.mm-active > a{
  background: rgba(13,110,253,.12);
  box-shadow: 0 6px 14px rgba(13,110,253,.12);
}

/* Content wrapper (most templates use .page-wrapper / .page-content) */
.page-wrapper, .page-content{
  padding: 18px !important;
}

/* Cards */
.card{
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm);
}

.card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

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

.table thead th{
  font-weight: 700;
  color: rgba(15,23,42,.8);
  border-bottom: 1px solid var(--ui-border-strong) !important;
}

.table-hover tbody tr:hover{
  background: rgba(15,23,42,.03) !important;
}

/* Buttons */
.btn{
  border-radius: 12px !important;
  padding: .6rem .9rem;
}

.btn-primary{
  box-shadow: 0 10px 18px rgba(13,110,253,.18);
}

.btn-outline-secondary{
  border-color: var(--ui-border-strong) !important;
}

/* Forms */
.form-control, .form-select{
  border-radius: 12px !important;
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
}

.form-control:focus, .form-select:focus{
  box-shadow: var(--ui-ring) !important;
}

/* Modals */
.modal-content{
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}

/* Alerts */
.alert{
  border-radius: 14px !important;
  border: 1px solid var(--ui-border) !important;
}

/* Login page polish (uses bg-lock-screen + authentication-lock-screen) */
.bg-lock-screen{
  background: radial-gradient(1000px 600px at 20% 0%, rgba(13,110,253,.25), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(111,66,193,.22), transparent 55%),
              linear-gradient(180deg, #0b1220 0%, #0b1020 100%) !important;
}

.authentication-lock-screen .card{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.authentication-lock-screen .form-control{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

.authentication-lock-screen .form-control::placeholder{ color: rgba(255,255,255,.7) !important; }

.authentication-lock-screen .btn-white{
  border-radius: 14px !important;
  font-weight: 700;
}

/* Dark theme compatibility */
body.dark-theme, body.bg-dark{
  --ui-bg: #0b1220;
  --ui-surface: rgba(255,255,255,.06);
  --ui-surface-2: rgba(255,255,255,.04);
  --ui-border: rgba(255,255,255,.10);
  --ui-border-strong: rgba(255,255,255,.14);
  --ui-text: rgba(255,255,255,.92);
  --ui-muted: rgba(255,255,255,.70);
  --ui-shadow: 0 14px 40px rgba(0,0,0,.45);
  --ui-shadow-sm: 0 10px 22px rgba(0,0,0,.35);
}