/* =========================================================
   FALCON DESIGN SYSTEM — exact tokens from uploaded CSS
   Nunito · Bootstrap 5.1.3 body bg #f8fafc · Falcon colors
   ========================================================= */
:root {
  /* Falcon brand palette */
  --fc-primary:    #2c7be5;
  --fc-primary-d:  #1a68d1;
  --fc-success:    #00d27a;
  --fc-info:       #27bcfd;
  --fc-warning:    #f5803e;
  --fc-danger:     #e63757;
  --fc-secondary:  #748194;
  --fc-dark:       #0b1727;
  --fc-light:      #f9fafd;
  /* Layout */
  --fc-body-bg:    #f8fafc;
  --fc-card-bg:    #ffffff;
  --fc-border:     #d8e2ef;
  --fc-border-l:   #edf2f9;
  /* Text */
  --fc-text:       #344050;
  --fc-muted:      #748194;
  --fc-light-text: #9da9bb;
  /* Shadows — from Falcon source */
  --fc-shadow:     0 7px 14px rgba(0,0,0,.05),0 3px 6px rgba(0,0,0,.07);
  --fc-shadow-sm:  0 0 0 1px rgba(43,45,80,.1),0 2px 5px rgba(43,45,80,.08);
  --fc-shadow-lg:  0 1rem 4rem rgba(0,0,0,.175);
  /* Sidebar */
  --fc-sb-width:   256px;
  --fc-sb-bg:      #0b1727;
  --fc-topbar-h:   58px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13.5px;scroll-behavior:smooth}
body{
  font-family:'Nunito',sans-serif;
  font-size:.9rem;
  font-weight:400;
  line-height:1.6;
  color:var(--fc-text);
  background:var(--fc-body-bg);
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--fc-border);border-radius:3px}

/* ── App shell ──────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ──────────────────────────────────────── */
.sidebar{
  width:var(--fc-sb-width);background:var(--fc-sb-bg);
  display:flex;flex-direction:column;flex-shrink:0;
  overflow:hidden;position:relative;z-index:100
}
.sb-brand{
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px
}
.sb-brand-mark{
  width:30px;height:30px;border-radius:6px;flex-shrink:0;
  background:linear-gradient(135deg,#2c7be5,#27bcfd);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff
}
.sb-brand-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1}
.sb-brand-tag{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:1px}
.sb-nav{flex:1;overflow-y:auto;padding:10px 0}
.sb-section{
  padding:12px 20px 3px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.28);font-weight:700
}
.sb-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 20px;cursor:pointer;
  color:rgba(255,255,255,.58);font-size:13px;font-weight:500;
  border-left:3px solid transparent;
  transition:color .15s,background .15s;user-select:none
}
.sb-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.sb-link.active{color:#fff;background:rgba(44,123,229,.15);border-left-color:var(--fc-primary)}
.sb-link i{font-size:16px;width:20px;flex-shrink:0}
.sb-badge{
  margin-left:auto;background:var(--fc-danger);color:#fff;
  border-radius:12px;font-size:10px;padding:2px 7px;font-weight:700
}
.sb-badge.w{background:var(--fc-warning)}
.sb-user{
  padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px
}
.sb-av{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--fc-primary),var(--fc-info));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff
}
.sb-uname{font-size:12px;font-weight:700;color:#fff}
.sb-urole{font-size:10px;color:rgba(255,255,255,.38);margin-top:1px}

/* ── Main area ──────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── Topbar ─────────────────────────────────────── */
.topbar{
  height:var(--fc-topbar-h);background:var(--fc-card-bg);
  border-bottom:1px solid var(--fc-border-l);
  padding:0 22px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0
}
.topbar-title{font-size:15.5px;font-weight:700;color:var(--fc-dark);letter-spacing:-.2px}
.topbar-actions{display:flex;align-items:center;gap:8px;position:relative}

/* ── Content area ───────────────────────────────── */
.content{flex:1;overflow-y:auto;padding:22px}
.page{display:none;animation:fadeUp .18s ease}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastIn{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}

/* ── Cards — Falcon style ───────────────────────── */
/* Bootstrap-compatible: bg-white, border, rounded, shadow-sm */
.card{
  background:var(--fc-card-bg);border:1px solid var(--fc-border-l);
  border-radius:.375rem;box-shadow:var(--fc-shadow-sm);
  margin-bottom:1.25rem;overflow:hidden
}
.card-header{
  padding:.75rem 1.25rem;border-bottom:1px solid var(--fc-border-l);
  display:flex;align-items:center;justify-content:space-between;
  background:transparent
}
.card-title{
  margin:0;font-size:.85rem;font-weight:700;color:var(--fc-dark);
  display:flex;align-items:center;gap:7px
}
.card-title>i{font-size:15px;color:var(--fc-primary)}
.card-body{padding:1.25rem}
.card-body-0{padding:0}

/* ── Buttons — Bootstrap 5 compatible + Falcon soft ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:.375rem .9rem;border-radius:.25rem;
  font-size:.85rem;font-weight:600;line-height:1.6;
  cursor:pointer;border:1px solid transparent;
  font-family:'Nunito',sans-serif;
  transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap
}
.btn i{font-size:14px}
.btn-primary{background:var(--fc-primary);color:#fff;border-color:var(--fc-primary)}
.btn-primary:hover{background:var(--fc-primary-d);border-color:var(--fc-primary-d);box-shadow:0 4px 11px rgba(44,123,229,.35)}
.btn-outline-primary{background:transparent;color:var(--fc-primary);border-color:var(--fc-primary)}
.btn-outline-primary:hover{background:var(--fc-primary);color:#fff}
.btn-light{background:#edf2f9;color:var(--fc-text);border-color:#edf2f9}
.btn-light:hover{background:#dce9f8;border-color:#dce9f8}
.btn-danger{background:var(--fc-danger);color:#fff;border-color:var(--fc-danger)}
.btn-danger:hover{background:#cc2d49;border-color:#cc2d49}
.btn-sm{padding:.25rem .6rem;font-size:.78rem}
.btn-sm i{font-size:13px}
.btn-icon-sq{width:32px;height:32px;padding:0;justify-content:center}

/* ── Falcon soft badges ─────────────────────────── */
/* Falcon's badge-soft-* pattern: light bg tint + colored text */
.badge{
  display:inline-flex;align-items:center;
  padding:.3em .65em;border-radius:.25rem;
  font-size:.73em;font-weight:700;line-height:1;letter-spacing:.02em
}
.badge-soft-success{color:#00864e;background:rgba(0,210,122,.15)}
.badge-soft-danger {color:#c4152e;background:rgba(230,55,87,.14)}
.badge-soft-warning{color:#c05b1a;background:rgba(245,128,62,.14)}
.badge-soft-info   {color:#006ba1;background:rgba(39,188,253,.14)}
.badge-soft-primary{color:var(--fc-primary);background:rgba(44,123,229,.11)}
.badge-soft-secondary{color:#4a5568;background:rgba(116,129,148,.11)}
.badge-soft-dark   {color:var(--fc-dark);background:rgba(11,23,39,.09)}

/* ── Tables ─────────────────────────────────────── */
.table-responsive{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  padding:.6rem 1rem;font-size:.7rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  color:var(--fc-muted);border-bottom:1px solid var(--fc-border-l);
  text-align:left;background:var(--fc-light);white-space:nowrap
}
tbody td{
  padding:.65rem 1rem;font-size:.85rem;
  border-bottom:1px solid var(--fc-border-l);
  vertical-align:middle;color:var(--fc-text)
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#f9fafd}
.td-strong{font-weight:600;color:var(--fc-dark)}
.td-sub{font-size:.72rem;color:var(--fc-muted);margin-top:2px}
.td-mono{font-family:'SFMono-Regular',Consolas,monospace;font-size:.73rem;color:var(--fc-muted)}

/* ── Forms ──────────────────────────────────────── */
/* Matches Bootstrap 5.1.3 form-control from the uploaded CSS */
.form-group{display:flex;flex-direction:column;gap:4px}
.form-label{
  font-size:.75rem;font-weight:700;color:var(--fc-text);
  margin-bottom:.25rem;display:block
}
.form-control{
  display:block;width:100%;padding:.375rem .75rem;
  font-size:.9rem;font-weight:400;line-height:1.6;
  color:#212529;background:var(--fc-body-bg);
  border:1px solid #ced4da;border-radius:.25rem;
  font-family:'Nunito',sans-serif;
  transition:border-color .15s,box-shadow .15s;outline:none
}
.form-control:focus{
  border-color:#86b7fe;
  box-shadow:0 0 0 .25rem rgba(13,110,253,.25)
}
.form-control::placeholder{color:#6c757d;opacity:1}
.form-hint{font-size:.72rem;color:var(--fc-muted);margin-top:2px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.grid-full{grid-column:1/-1}

/* ── Grid helpers ───────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* ── Stat cards (Falcon ecommerce widget style) ── */
.stat-card{
  background:var(--fc-card-bg);border:1px solid var(--fc-border-l);
  border-radius:.375rem;box-shadow:var(--fc-shadow-sm);
  padding:1.1rem 1.2rem;cursor:pointer;
  transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--fc-shadow)}
.sc-icon{
  width:40px;height:40px;border-radius:.5rem;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:.75rem
}
.sc-value{
  font-size:1.75rem;font-weight:800;line-height:1;
  letter-spacing:-.5px;margin-bottom:.25rem;color:var(--fc-dark)
}
.sc-label{font-size:.75rem;font-weight:600;color:var(--fc-muted)}
.sc-hint{font-size:.7rem;color:var(--fc-light-text);margin-top:.2rem;display:flex;align-items:center;gap:3px}
.sc-pill{
  position:absolute;top:14px;right:14px;
  padding:.2rem .55rem;border-radius:20px;font-size:.65rem;font-weight:700;
  pointer-events:none
}

/* ── Falcon wizard stepper ──────────────────────── */
.wiz-stepper{display:flex;align-items:center;padding:1.2rem 1.2rem 0;margin-bottom:0}
.wiz-step-wrap{display:flex;align-items:center;flex:1}
.wiz-circle{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;transition:all .3s
}
.wiz-circle.done  {background:var(--fc-success);color:#fff}
.wiz-circle.active{background:var(--fc-primary);color:#fff;box-shadow:0 0 0 4px rgba(44,123,229,.2)}
.wiz-circle.pend  {background:var(--fc-border-l);color:var(--fc-muted)}
.wiz-info{margin-left:8px}
.wiz-name{font-size:.78rem;font-weight:700}
.wiz-name.active{color:var(--fc-primary)}
.wiz-name.done  {color:var(--fc-success)}
.wiz-name.pend  {color:var(--fc-muted)}
.wiz-desc{font-size:.68rem;color:var(--fc-light-text)}
.wiz-line{flex:1;height:1px;background:var(--fc-border-l);margin:0 8px;transition:background .3s}
.wiz-line.done{background:var(--fc-success)}

/* ── Falcon tabs (2px bottom border style) ──────── */
.f-tabs{display:flex;border-bottom:2px solid var(--fc-border-l);margin-bottom:1.25rem}
.f-tab{
  padding:.6rem 1.1rem;font-size:.85rem;font-weight:600;
  cursor:pointer;color:var(--fc-muted);
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:color .15s,border-color .15s
}
.f-tab:hover{color:var(--fc-text)}
.f-tab.active{color:var(--fc-primary);border-bottom-color:var(--fc-primary)}

/* ── Alerts — Bootstrap 5.1.3 soft style ───────── */
/* Matches the alert-* classes in the uploaded bootstrap CSS */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:.75rem 1rem;border-radius:.25rem;
  margin-bottom:1rem;font-size:.82rem;line-height:1.5
}
.alert i{font-size:15px;flex-shrink:0;margin-top:1px}
.alert-warning{background:rgba(245,128,62,.09);border:1px solid rgba(245,128,62,.28);color:#7c3410}
.alert-info   {background:rgba(39,188,253,.09);border:1px solid rgba(39,188,253,.24);color:#005e8a}
.alert-success{background:rgba(0,210,122,.09);border:1px solid rgba(0,210,122,.24);color:#007242}

/* ── Slide-in panel ─────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(11,23,39,.48);z-index:500;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.panel{
  background:var(--fc-card-bg);width:540px;max-width:95vw;height:100vh;
  margin-left:auto;overflow-y:auto;border-left:1px solid var(--fc-border-l);
  display:flex;flex-direction:column;animation:slideIn .2s ease;
  box-shadow:var(--fc-shadow-lg)
}
.panel-sm{width:420px}
.panel-hdr{
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--fc-border-l);
  display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0
}
.panel-title{font-size:1rem;font-weight:800;color:var(--fc-dark);letter-spacing:-.2px}
.panel-sub{font-size:.72rem;color:var(--fc-muted);margin-top:2px}
.panel-body{padding:1.2rem 1.3rem;flex:1;overflow-y:auto}
.panel-footer{
  padding:.85rem 1.3rem;border-top:1px solid var(--fc-border-l);
  display:flex;gap:8px;flex-shrink:0;background:var(--fc-light)
}

/* ── Context breadcrumb strip ───────────────────── */
.ctx-strip{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  padding:.55rem .9rem;background:var(--fc-light);
  border:1px solid var(--fc-border-l);border-radius:.25rem;
  margin-bottom:1rem;font-size:.78rem;color:var(--fc-muted)
}
.ctx-strip strong{color:var(--fc-text);font-weight:700}
.ctx-dot{color:var(--fc-border)}

/* ── Detail rows ────────────────────────────────── */
.detail-row{display:flex;padding:.55rem 0;border-bottom:1px solid var(--fc-border-l);gap:10px;align-items:flex-start}
.detail-row:last-child{border-bottom:none}
.detail-key{font-size:.75rem;color:var(--fc-muted);width:150px;flex-shrink:0;padding-top:1px;font-weight:600}
.detail-val{font-size:.85rem;color:var(--fc-text);flex:1}

/* ── Timeline ───────────────────────────────────── */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:10px;padding-bottom:1rem;position:relative}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;position:relative;z-index:1}
.tl-line{position:absolute;left:4px;top:13px;bottom:0;width:1px;background:var(--fc-border-l)}
.tl-item:last-child .tl-line{display:none}
.tl-text{font-size:.8rem;font-weight:600;color:var(--fc-dark)}
.tl-meta{font-size:.72rem;color:var(--fc-muted);margin-top:2px}

/* ── Avatars ────────────────────────────────────── */
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.av-primary{background:rgba(44,123,229,.14);color:var(--fc-primary)}
.av-success{background:rgba(0,210,122,.14);color:#00864e}
.av-warning{background:rgba(245,128,62,.14);color:#c05b1a}
.av-danger {background:rgba(230,55,87,.14);color:#c4152e}
.av-info   {background:rgba(39,188,253,.14);color:#006ba1}

/* ── Progress bar ───────────────────────────────── */
.progress{height:5px;border-radius:3px;background:#edf2f9;overflow:hidden;margin-top:4px}
.progress-fill{height:100%;border-radius:3px;transition:width .5s}

/* ── Renewal preview box ────────────────────────── */
.renew-preview{
  background:var(--fc-light);border:1px solid var(--fc-border-l);
  border-radius:.25rem;padding:.8rem 1rem;margin:1rem 0
}
.rp-row{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;font-size:.8rem}
.rp-key{color:var(--fc-muted);font-weight:600}
.rp-val{font-weight:700;color:var(--fc-dark)}

/* ── Filter bar ─────────────────────────────────── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.1rem;align-items:center}
.filter-bar select,.filter-bar input{min-width:140px;width:auto;padding:.3rem .6rem;font-size:.82rem}

/* ── Success screen ─────────────────────────────── */
.success-screen{display:flex;flex-direction:column;align-items:center;padding:3rem 1.5rem;text-align:center}
.success-ico{
  width:70px;height:70px;border-radius:50%;
  background:rgba(0,210,122,.12);display:flex;align-items:center;justify-content:center;
  font-size:30px;color:var(--fc-success);margin-bottom:1.25rem;
  animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)
}
.success-title{font-size:1.35rem;font-weight:800;color:var(--fc-dark);margin-bottom:.5rem;letter-spacing:-.3px}
.success-sub{color:var(--fc-muted);font-size:.85rem;max-width:340px;line-height:1.6;margin-bottom:1.5rem}
.license-key{
  background:var(--fc-light);border:1px solid var(--fc-border);
  border-radius:.25rem;padding:.7rem 1.25rem;
  font-family:'SFMono-Regular',monospace;font-size:.85rem;
  color:var(--fc-primary);text-align:center;margin-bottom:1.5rem;
  font-weight:600;letter-spacing:.5px
}

/* ── Modal ──────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,23,39,.52);z-index:600;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--fc-card-bg);border-radius:.375rem;
  width:460px;max-width:95vw;padding:1.5rem;
  box-shadow:var(--fc-shadow-lg);animation:popIn .18s ease
}
.modal-title{
  font-size:1rem;font-weight:800;color:var(--fc-dark);
  margin-bottom:1.1rem;display:flex;align-items:center;justify-content:space-between
}

/* ── Notification dropdown ──────────────────────── */
.notif-drop{
  display:none;position:absolute;right:0;top:calc(100% + 8px);
  width:290px;background:var(--fc-card-bg);border:1px solid var(--fc-border-l);
  border-radius:.375rem;box-shadow:var(--fc-shadow);z-index:400;overflow:hidden
}
.notif-hdr{padding:.65rem 1rem;font-size:.78rem;font-weight:700;border-bottom:1px solid var(--fc-border-l);display:flex;align-items:center;justify-content:space-between}
.notif-item{padding:.6rem 1rem;border-bottom:1px solid rgba(0,0,0,.04);font-size:.78rem;display:flex;gap:9px;align-items:flex-start;cursor:pointer;transition:background .12s}
.notif-item:hover{background:var(--fc-light)}
.notif-item:last-child{border-bottom:none}
.notif-ico{font-size:15px;flex-shrink:0;margin-top:1px}
.notif-time{font-size:.68rem;color:var(--fc-light-text);margin-top:2px}

/* ── Role permission card ───────────────────────── */
.role-card{background:var(--fc-light);border:1px solid var(--fc-border-l);border-radius:.25rem;padding:1.1rem}
.rc-title{font-size:.9rem;font-weight:800;margin-bottom:.25rem}
.rc-sub  {font-size:.72rem;color:var(--fc-muted);margin-bottom:.8rem}
.perm-line{display:flex;align-items:center;gap:7px;font-size:.8rem;padding:.2rem 0;color:var(--fc-text)}
.perm-line.yes i{color:var(--fc-success);font-size:14px}
.perm-line.no{color:var(--fc-muted)}
.perm-line.no i{color:var(--fc-border);font-size:14px}

/* ── Section header ─────────────────────────────── */
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}

/* ── Chart containers ───────────────────────────── */
.chart-wrap{height:195px;position:relative}
.chart-wrap-sm{height:150px;position:relative}

/* ── Falcon plan card top-border accent ─────────── */
.plan-card-accent{border-top:3px solid var(--fc-primary);border-radius:.375rem .375rem 0 0;margin:-1px -1px 0}

/* ── Divider ────────────────────────────────────── */
.fc-divider{height:1px;background:var(--fc-border-l);margin:1rem 0}