/* =========================================================
   Baresys - Premium App UI
   ========================================================= */

:root{
  color-scheme: dark;
  --bg:#101419;
  --bg-2:#151b22;
  --surface:#1d252d;
  --surface-2:#232d36;
  --surface-3:#2b3641;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.18);
  --text:#f4f7f9;
  --muted:#b8c3cc;
  --muted-2:#8996a1;
  --brand:#2ec4b6;
  --brand-2:#4f9cf9;
  --success:#24c17a;
  --warning:#f7c948;
  --danger:#ff5c77;
  --shadow:0 18px 48px rgba(0,0,0,.30);
  --shadow-soft:0 10px 28px rgba(0,0,0,.20);
  --radius:8px;
  --radius-lg:8px;
}

*{ letter-spacing:0; }
html{ min-height:100%; }

body.app-body{
  min-height:100vh;
  background:
    linear-gradient(120deg, rgba(46,196,182,.12), transparent 34%),
    linear-gradient(240deg, rgba(79,156,249,.10), transparent 32%),
    linear-gradient(180deg, #101419 0%, #141a20 48%, #0f1318 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;
}

body.app-body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}

a{ color:#7fc7ff; text-decoration:none; }
a:hover{ color:#b7ddff; }
h1,h2,h3,h4,h5,h6,.fw-semibold,.fw-bold{ color:var(--text) !important; }
.small-muted,.text-muted{ color:var(--muted) !important; }
.money,.metric-value{ font-variant-numeric: tabular-nums; }
.container,.container-fluid{ position:relative; }
.container{ max-width:1180px; }

.nav-glass{
  background:rgba(16,20,25,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:0 8px 28px rgba(0,0,0,.20);
}
.brand-mark{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  color:#061a18;
  background:linear-gradient(135deg, var(--brand), #a6f7de);
  box-shadow:0 10px 24px rgba(46,196,182,.25);
}
.nav-glass .navbar-nav{ gap:.2rem; }
.nav-glass .nav-link{
  color:rgba(244,247,249,.82) !important;
  border:1px solid transparent;
  border-radius:8px;
  padding:.58rem .72rem;
  font-weight:700;
}
.nav-glass .nav-link i{ color:rgba(46,196,182,.95); }
.nav-glass .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff !important; }
.nav-glass .nav-link.active{
  background:rgba(46,196,182,.12);
  border-color:rgba(46,196,182,.28);
  color:#fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-glass .navbar-toggler{ border-radius:8px; border:1px solid var(--line-strong); padding:.45rem .6rem; }
.nav-glass .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(46,196,182,.18); }
.nav-glass.navbar-dark .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.96)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.7' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.user-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  max-width:280px;
  padding:.45rem .7rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:.86rem;
  white-space:nowrap;
}
.user-chip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.user-chip strong{ color:#9eeadf; font-size:.72rem; }

.card,.panel-card,.modal-content,.hover-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(35,45,54,.94), rgba(25,32,39,.94));
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.045);
  color:var(--text);
}
.panel-card,.card{ overflow:hidden; }
.hover-card{ transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.hover-card:hover{ transform:translateY(-2px); border-color:rgba(46,196,182,.36); box-shadow:var(--shadow), 0 0 0 1px rgba(46,196,182,.10); }
.section-shell{ padding-block:1.35rem; }
.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.55rem;
  color:#9eeadf;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
}
.page-title{ margin:0; font-size:2.05rem; font-weight:900; }
.page-subtitle{ max-width:680px; margin:.35rem 0 0; color:var(--muted); }
.metric-strip{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; }
.metric-card{ min-height:86px; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.045); }
.metric-label{ color:var(--muted-2); font-size:.75rem; font-weight:800; text-transform:uppercase; }
.metric-value{ margin-top:.25rem; color:var(--text); font-size:1.35rem; font-weight:900; }

.btn{ border-radius:8px; font-weight:800; }
.btn-sm{ border-radius:7px; }
.btn-round{ border-radius:8px !important; }
.btn-primary{
  background:linear-gradient(135deg, var(--brand), #6de6c9) !important;
  border-color:rgba(166,247,222,.55) !important;
  color:#061816 !important;
  box-shadow:0 12px 28px rgba(46,196,182,.24);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-success{ background:linear-gradient(135deg, #22c55e, #7ee3a6) !important; border-color:rgba(126,227,166,.55) !important; color:#06150c !important; }
.btn-outline-light{ border-color:var(--line-strong) !important; color:rgba(244,247,249,.9) !important; background:rgba(255,255,255,.035); }
.btn-outline-light:hover{ background:rgba(255,255,255,.09) !important; border-color:rgba(255,255,255,.28) !important; color:#fff !important; }
.badge-soft{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid rgba(46,196,182,.24); border-radius:999px; background:rgba(46,196,182,.10); color:#dffdf8; font-weight:800; }

.form-label{ color:var(--muted); font-weight:800; }
.form-control,.form-select{ min-height:44px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.06); color:var(--text); }
.form-control:focus,.form-select:focus{ background:rgba(255,255,255,.08); border-color:rgba(46,196,182,.55); box-shadow:0 0 0 .22rem rgba(46,196,182,.16); color:var(--text); }
.form-control::placeholder{ color:rgba(184,195,204,.62); }
.form-select option{ color:#111; }
.alert{ border-radius:8px; border:0; }
.table{ color:var(--text); }
.table thead th{ color:var(--muted) !important; font-size:.76rem; font-weight:900; text-transform:uppercase; }
.table-dark{ --bs-table-bg:transparent; --bs-table-striped-bg:rgba(255,255,255,.035); --bs-table-hover-bg:rgba(46,196,182,.08); --bs-table-color:var(--text); }
.table-dark td,.table-dark th{ border-color:var(--line) !important; }
.modal-backdrop.show{ opacity:.68; }
.modal-glass,.modal-content{ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.modal-header,.modal-footer{ border-color:var(--line) !important; }

.login-shell{ min-height:calc(100vh - 80px); display:grid; align-items:center; padding-block:2rem; }
.login-hero{ padding:2rem; }
.login-brand{ display:inline-flex; align-items:center; gap:.75rem; margin-bottom:1.4rem; font-weight:900; font-size:1.15rem; }
.login-brand .brand-mark{ width:42px; height:42px; }
.login-title{ max-width:560px; font-size:3.35rem; line-height:1.02; font-weight:950; }
.login-copy{ max-width:560px; color:var(--muted); font-size:1.05rem; }
.feature-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem; }
.feature-item{ min-height:82px; padding:.95rem; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.045); }
.feature-item i{ color:var(--brand); font-size:1.25rem; }
.feature-item strong{ display:block; margin-top:.4rem; color:var(--text); }
.feature-item span{ display:block; color:var(--muted); font-size:.88rem; }
.login-card{ padding:1.5rem; box-shadow:var(--shadow); }
.trust-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }

.calls-item{ padding:.8rem .9rem; border-radius:8px; background:rgba(255,255,255,.055); border:1px solid var(--line); }
.calls-item.new{ border-color:rgba(255,92,119,.45); background:rgba(255,92,119,.13); }
.calls-item.seen{ border-color:rgba(247,201,72,.38); background:rgba(247,201,72,.10); }
hr.border-white{ border-color:var(--line) !important; }
.app-footer{ border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.app-footer a{ color:#9eeadf; }
.app-footer span{ color:var(--muted-2); font-size:12px; }

@media (max-width: 991.98px){
  .nav-user{ align-items:flex-start !important; margin-top:.75rem; }
  .user-chip{ max-width:100%; }
  .metric-strip{ grid-template-columns:1fr; }
}
@media (max-width: 575.98px){
  .section-shell{ padding-block:1rem; }
  .feature-grid{ grid-template-columns:1fr; }
  .login-hero{ padding:1rem .25rem; }
  .login-card{ padding:1.1rem; }
  .page-title{ font-size:1.45rem; }
  .login-title{ font-size:2.1rem; }
}