/* =========================================================
   Stilato – Minimal “Apple-like / Liquid Glass” theme
   Loaded last (after app.css) so it can override the template.
   ========================================================= */

:root {
  --glass-bg: rgba(255, 255, 255, 0.70);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-strong: rgba(0, 0, 0, 0.12);
  --text: #0b0b0f;
  --muted: rgba(11, 11, 15, 0.60);
  --shadow: 0 16px 50px rgba(0, 0, 0, 0.10);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --radius: 18px;
  --radius-sm: 14px;
  --focus: rgba(0, 0, 0, 0.18);
}

/* -------- Base / background -------- */
html, body {
  height: 100%;
}

body.apple-glass {
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 10% 0%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 55%),
    radial-gradient(1000px 700px at 90% 10%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #f6f7fb 0%, #f2f3f7 40%, #eef0f4 100%);
}

/* If legacy classes are still present anywhere, neutralize the old image background. */
.bg-theme1,
.bg-theme,
.bg-theme2,
.bg-theme3,
.bg-theme4,
.bg-theme5,
.bg-theme6,
.bg-theme7,
.bg-theme8,
.bg-theme9 {
  background-image: none !important;
}

a {
  color: var(--text);
}

a:hover {
  color: #000;
}

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

/* -------- Cards / surfaces (glass) -------- */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  padding: 14px 16px;
}

.card-body {
  padding: 16px;
}

/* -------- Tables -------- */
.table {
  color: var(--text);
}

.table thead th {
  color: rgba(11, 11, 15, 0.75);
  font-weight: 600;
  border-bottom-color: rgba(0, 0, 0, 0.10);
}

.table td,
.table th {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.45);
}

/* -------- Inputs -------- */
.form-control,
.form-select,
.input-group-text {
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.10);
  border-radius: 12px;
}

.form-control::placeholder {
  color: rgba(11, 11, 15, 0.45);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

/* -------- Buttons (minimal) -------- */
.btn {
  border-radius: 12px;
}

.btn-primary {
  background: #0b0b0f;
  border-color: #0b0b0f;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #000;
  border-color: #000;
}

.btn-outline-primary {
  color: #0b0b0f;
  border-color: rgba(0, 0, 0, 0.18);
}

.btn-outline-primary:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0b0b0f;
  border-color: rgba(0, 0, 0, 0.22);
}

.btn-light {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.10);
}

.btn-outline-secondary {
  color: rgba(11, 11, 15, 0.75);
  border-color: rgba(0, 0, 0, 0.14);
}

.btn-outline-secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.18);
}

.btn-outline-danger {
  border-color: rgba(220, 53, 69, 0.35);
}

/* -------- Badges -------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
}

.badge.bg-success {
  background: rgba(25, 135, 84, 0.14) !important;
  color: #198754 !important;
  border: 1px solid rgba(25, 135, 84, 0.18);
}

.badge.bg-warning {
  background: rgba(255, 193, 7, 0.18) !important;
  color: rgba(11, 11, 15, 0.85) !important;
  border: 1px solid rgba(255, 193, 7, 0.22);
}

.badge.bg-info {
  background: rgba(13, 202, 240, 0.18) !important;
  color: rgba(11, 11, 15, 0.85) !important;
  border: 1px solid rgba(13, 202, 240, 0.22);
}

.badge.bg-secondary {
  background: rgba(0, 0, 0, 0.08) !important;
  color: rgba(11, 11, 15, 0.70) !important;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

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

.alert-danger {
  background: rgba(220, 53, 69, 0.10);
  color: rgba(11, 11, 15, 0.92);
  border-color: rgba(220, 53, 69, 0.18);
}

.alert-info {
  background: rgba(13, 110, 253, 0.08);
  color: rgba(11, 11, 15, 0.92);
  border-color: rgba(13, 110, 253, 0.14);
}

/* -------- Sidebar / topbar (template-specific selectors) --------
   We keep this conservative: if a selector does not exist, it is ignored.
*/
.sidebar-wrapper,
.sidebar-header,
.topbar,
.header-wrapper,
.page-wrapper {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.sidebar-wrapper {
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.sidebar-wrapper .metismenu a,
.sidebar-wrapper a {
  color: rgba(11, 11, 15, 0.80) !important;
}

.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper a:hover {
  color: #000 !important;
}

/* Active item */
.sidebar-wrapper .metismenu .mm-active > a {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px;
}

/* -------- Auth pages -------- */
.auth-page,
.auth-page .wrapper,
.auth-page .authentication-body {
  color: var(--text);
  background: transparent;
}

.authentication-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.authentication-body .card {
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow);
}

/* FIX: sidebar logo size (kept) */
.sidebar-header .logo-icon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  max-width: 36px !important;
  max-height: 36px !important;
}

/* FIX: logo size in login (kept) */
.authentication-body .mb-3 img {
  max-width: 190px !important;
  height: auto !important;
  display: inline-block;
}