/* =========================================================
   RANDEXX PRO — Calm Enterprise Admin UI
   Drop-in replacement for randexx-theme.css
   Goals:
   - Clean, professional, readable
   - No jumpy hover transforms
   - Subtle accents (brand color only)
   - Works with: vc-shell, vc-sidebar, vc-main, vc-header, vc-content,
                 vc-card, vc-kpi, vc-nav-link, modals, tables.
   ========================================================= */

/* =========================
   1) TOKENS / BASE
   ========================= */
:root{
  --brand1:#1677ff;
  --brand2:#1677ff; /* keep single accent -> calmer */
  --brand3:#1677ff;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xl: 22px;

  --ease: cubic-bezier(.2,0,.2,1);

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 22px rgba(0,0,0,.08);

  --ring: 0 0 0 4px rgba(22,119,255,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   2) LIGHT / DARK SYSTEM
   ========================= */
body{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#fbfcff;
  --text:#0b1020;
  --muted:#6b7280;
  --border:rgba(15,23,42,.10);
  --border-2:rgba(15,23,42,.14);
  --glass: rgba(255,255,255,.78);
}

body.dark,
body.rx-dark,
body.brd-dark{
  --bg:#070b14;
  --surface:#0c1220;
  --surface-2:#0f172a;
  --text:rgba(231,236,245,.92);
  --muted:rgba(231,236,245,.64);
  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.14);
  --glass: rgba(12,18,32,.78);
}

/* =========================
   3) BACKGROUND — calm, no animations
   ========================= */
body{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(22,119,255,.08), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(22,119,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

/* Remove heavy overlay grid/noise from old theme */
body::before, body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}
body::before{
  opacity: .06;
  background:
    linear-gradient(to right, rgba(15,23,42,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px;
}
body::after{
  opacity: .02;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body.dark::before,
body.rx-dark::before,
body.brd-dark::before{
  opacity: .10;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 110px 110px, 110px 110px;
}
body.dark::after,
body.rx-dark::after,
body.brd-dark::after{
  opacity: .03;
  mix-blend-mode: screen;
}

/* keep content above overlays */
.vc-shell, .vc-sidebar, .vc-main, .vc-header, .vc-content,
main, .container, .container-fluid{
  position: relative;
  z-index: 1;
}

/* =========================
   4) LAYOUT
   ========================= */
.vc-shell{ display:flex; min-height:100vh; }
.vc-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.vc-content{ padding: 18px 18px 26px; }

/* =========================
   5) SIDEBAR — professional
   ========================= */
.vc-sidebar{
  width: 280px;
  padding: 14px;
  color:#e9edf7;
  background: linear-gradient(180deg,#0b1428,#091226);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 12px 0 28px rgba(0,0,0,.20);
  position: sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

/* Remove animated blob glow */
.vc-sidebar::after{ content:none; }

/* Brand block */
.vc-side-brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 10px 10px 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.vc-side-logo{
  width:44px;
  height:44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .15s var(--ease); /* keep subtle logo hover */
}
.vc-side-logo:hover{ transform: scale(1.03); } /* allowed */

.vc-side-title{ font-weight: 800; letter-spacing:.2px; line-height:1.1; }
.vc-side-sub{ font-size:12px; opacity:.75; margin-top:2px; }

.vc-side-user{ margin-top:12px; padding: 10px; border-radius: var(--radius); background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.vc-side-username{ font-weight: 750; }
.vc-side-role{ font-size: 12px; opacity:.72; margin-top:2px; }

.vc-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.32rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:#e9edf7;
  font-size:.85rem;
  margin-top:10px;
}

/* Nav */
.vc-nav{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  flex:1;
}

.vc-nav-section{
  margin-top: 12px;
  margin-bottom: 6px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing:.12em;
  text-transform: uppercase;
  opacity:.60;
  font-weight: 800;
}

.vc-nav-link{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color:#e9edf7;
  border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.vc-nav-link i{ width:20px; text-align:center; opacity:.92; }
.vc-nav-link span{ font-weight: 650; font-size: 13px; }

/* NO movement, NO glow */
.vc-nav-link:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

.vc-nav-link.active{
  background: rgba(22,119,255,.18);
  border-color: rgba(22,119,255,.35);
  color:#ffffff !important;
}
.vc-nav-link.active::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background: var(--brand1); }

.vc-nav-sep{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 10px 6px;
}

/* =========================
   6) HEADER — clean
   ========================= */
.vc-header{
  height: 66px;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: sticky;
  top:0;
  z-index: 120;

  background: var(--glass);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
}

.vc-header-left, .vc-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.vc-header-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.vc-toggle{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: var(--shadow-1);
}
body.dark .vc-toggle,
body.rx-dark .vc-toggle,
body.brd-dark .vc-toggle{
  background: var(--surface);
}

.vc-header-logo img{
  width:38px;
  height:38px;
  border-radius: 12px;
  object-fit: cover;
  border:1px solid var(--border);
}
.vc-header-title{ font-weight: 800; line-height:1.1; }
.vc-header-sub{ font-size:12px; color: var(--muted); margin-top:2px; }

.vc-header-lang a{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 10px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.vc-header-lang a:hover{ border-color: var(--border-2); }
.vc-header-lang a.active{
  border-color: rgba(22,119,255,.45);
  background: rgba(22,119,255,.10);
}

/* Notifications button */
.rx-notif{
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-1);
  position:relative;
}
.rx-dot{
  position:absolute;
  top:8px;
  right:8px;
  min-width: 16px;
  height: 16px;
  border-radius:999px;
  background: var(--brand1);
  color:#fff;
  font-size:10px;
  display:grid;
  place-items:center;
}

/* User dropdown */
.vc-user-dropdown{ position:relative; }
.vc-user-btn{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: var(--shadow-1);
  color: var(--text);
}
.vc-user-avatar{
  width:32px;
  height:32px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(22,119,255,.12);
  color: var(--brand1);
  font-weight: 800;
}
.vc-user-text{ line-height:1.05; }
.vc-user-name{ font-weight: 750; font-size: 13px; }
.vc-user-role{ font-size: 12px; color: var(--muted); margin-top:2px; }

.vc-user-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  padding: 8px;
  z-index: 200;
}
.vc-user-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration:none;
  color: var(--text);
  font-weight: 650;
}
.vc-user-menu a:hover{ background: rgba(15,23,42,.05); }
body.dark .vc-user-menu a:hover,
body.rx-dark .vc-user-menu a:hover,
body.brd-dark .vc-user-menu a:hover{
  background: rgba(255,255,255,.06);
}
.vc-menu-divider{ height:1px; background: var(--border); margin: 8px 4px; }

/* =========================
   7) CARDS — stable, readable
   ========================= */
.vc-card, .cardx, .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.vc-card:hover, .cardx:hover, .card:hover{
  /* no movement */
  border-color: var(--border-2);
}

.card-h{
  padding: 14px 16px;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.card-b{ padding: 16px; }

/* KPI — no glow */
.vc-kpi{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-1);
}
.vc-kpi .label{ color: var(--muted); font-weight: 700; font-size: 12px; }
.vc-kpi .value{ font-size: 26px; font-weight: 800; margin-top: 6px; }

/* =========================
   8) TABLES — clean
   ========================= */
.table, .table-sm{
  border-color: var(--border);
}
.table thead th{
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  border-bottom-color: var(--border);
}
.table tbody tr:hover{
  background: rgba(22,119,255,.04);
}

.table-sm tbody tr{
  border-top:1px solid var(--border);
}
.table-sm tbody tr:hover{
  background: rgba(22,119,255,.04);
}

/* Selected row highlight */
.table-sm tbody tr.active-row{
  background: rgba(22,119,255,.08);
  box-shadow: inset 3px 0 0 var(--brand1);
}

/* =========================
   9) BUTTONS — enterprise
   ========================= */
.btn.vc-btn-primary{
  border: 1px solid rgba(22,119,255,.35);
  color:#fff;
  font-weight: 800;
  background: var(--brand1);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  transition: filter .15s var(--ease), background .15s var(--ease);
}
.btn.vc-btn-primary:hover{
  filter: brightness(0.96);
}

/* Bootstrap outline buttons more consistent */
.btn-outline-primary, .btn-outline-light, .btn-secondary, .btn-outline-secondary{
  border-radius: 12px;
  font-weight: 750;
}

/* =========================
   10) FORMS — clean focus ring
   ========================= */
.form-control, .form-select, textarea{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: rgba(22,119,255,.45);
  box-shadow: var(--ring);
  outline: none;
}

/* =========================
   11) SPLIT LAYOUT (clinics/users pages)
   ========================= */
.split-wrap{ display:flex; gap:18px; align-items:stretch; }
.split-left{
  width:46%;
  min-width:380px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.split-right{
  flex:1;
  min-width:420px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.img-thumb{
  width:46px;
  height:46px;
  border-radius: 12px;
  object-fit:cover;
  border:1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}
.cover-thumb{
  width:100%;
  height:160px;
  border-radius: var(--radius);
  object-fit:cover;
  border:1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
}

.actionbar{
  position:sticky;
  top:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.actionbar .btn{
  border-radius: 12px;
  font-weight: 800;
  padding: .55rem .85rem;
}

/* Pills — no gradient hover */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.85rem;
  font-weight:700;
  background: var(--surface-2);
  color: var(--text);
}

/* =========================
   12) MODALS — consistent
   ========================= */
.modal-content{
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
body.dark .modal-content,
body.rx-dark .modal-content,
body.brd-dark .modal-content{
  background: var(--surface);
}

/* =========================
   13) IMPERSONATION BAR — calm warning
   ========================= */
.vc-impersonation-bar{
  background: rgba(245,158,11,.16);
  border-bottom: 1px solid rgba(245,158,11,.28);
  color: var(--text);
  padding: 10px 18px;
  font-weight: 750;
}
.vc-impersonation-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  max-width:1600px;
  margin:0 auto;
}

/* =========================
   14) MINI SIDEBAR SUPPORT
   ========================= */
body.rx-mini .vc-sidebar{ width: 88px; }
body.rx-mini .vc-nav-link span,
body.rx-mini .vc-side-brandtext,
body.rx-mini .vc-side-user{ display:none; }
body.rx-mini .vc-nav-link{ justify-content:center; }
body.rx-mini .vc-nav-link i{ width:auto; }

/* =========================
   15) RESPONSIVE
   ========================= */
@media (max-width: 992px){
  .vc-sidebar{ position:fixed; left:0; top:0; transform: translateX(-100%); transition: transform .2s var(--ease); z-index:200; }
  body.rx-mini .vc-sidebar{ transform: translateX(0); width:280px; }
  .split-wrap{ flex-direction:column; }
  .split-left, .split-right{ width:100%; min-width:0; }
  .actionbar{ position:relative; top:auto; }
}