/* =========================================================
   ISP360 STAFF & PERMISSIONS
   PREMIUM ENTERPRISE V2
   ========================================================= */

:root{
  --staff-ink:#162d40;
  --staff-muted:#6f8395;
  --staff-border:#dfe7ee;
  --staff-bg:#f2f5f8;
  --staff-navy:#102f43;
  --staff-navy-2:#174861;
  --staff-teal:#0f8b83;
  --staff-teal-soft:#e9f7f5;
}

body{
  background:
    radial-gradient(circle at 90% 0%,rgba(32,145,145,.06),transparent 28%),
    #f2f5f8 !important;
  color:var(--staff-ink) !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
}

.main{
  margin-left:var(--sidebar-width) !important;
  width:auto !important;
  max-width:none !important;
  padding:26px !important;
}

/* ---------------------------------------------------------
   Main top header
   --------------------------------------------------------- */

.header{
  min-height:86px !important;
  margin:0 0 18px !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.header h1{
  margin:0 !important;
  color:#17364b !important;
  font-size:31px !important;
  font-weight:760 !important;
  line-height:1.08 !important;
  letter-spacing:-.8px !important;
}

.header p{
  margin-top:8px !important;
  color:#71869a !important;
  font-size:13px !important;
}

.userbox{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:44px !important;
  padding:6px 7px 6px 14px !important;
  border:1px solid #dce6ec !important;
  border-radius:30px !important;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(25,59,80,.06) !important;
  color:#334e63 !important;
  font-size:12px !important;
  font-weight:750 !important;
}

.userbox:before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#16a085;
  box-shadow:0 0 0 4px rgba(22,160,133,.12);
}

.logout{
  min-height:33px !important;
  margin:0 !important;
  padding:7px 13px !important;
  border:0 !important;
  border-radius:22px !important;
  background:#173c51 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:750 !important;
}

/* ---------------------------------------------------------
   Premium hero
   --------------------------------------------------------- */

.staff-v2-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(360px,.9fr);
  gap:28px;
  align-items:center;
  overflow:hidden;
  min-height:190px;
  margin-bottom:20px;
  padding:29px 31px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 30%,rgba(42,192,183,.28),transparent 28%),
    radial-gradient(circle at 68% 110%,rgba(55,117,156,.36),transparent 35%),
    linear-gradient(120deg,#102f43 0%,#173d54 55%,#18576a 100%);
  box-shadow:0 13px 34px rgba(17,52,73,.16);
  color:#fff;
}

.staff-v2-hero:after{
  content:"";
  position:absolute;
  right:-90px;
  top:-125px;
  width:310px;
  height:310px;
  border:50px solid rgba(255,255,255,.035);
  border-radius:50%;
  pointer-events:none;
}

.staff-v2-hero-copy{
  position:relative;
  z-index:2;
}

.staff-v2-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:20px;
  background:rgba(255,255,255,.07);
  color:#bfeae6;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.4px;
}

.staff-v2-hero h2{
  margin:14px 0 8px !important;
  color:#fff !important;
  font-size:29px !important;
  font-weight:760 !important;
  line-height:1.08 !important;
  letter-spacing:-.7px !important;
}

.staff-v2-hero p{
  max-width:610px;
  margin:0 !important;
  color:#c8d8e2 !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

.staff-v2-security{
  position:relative;
  z-index:2;
  display:grid;
  gap:9px;
}

.staff-v2-security-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:47px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(5px);
}

.staff-v2-security-item strong{
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:750;
}

.staff-v2-security-item small{
  display:block;
  margin-top:2px;
  color:#aec5d2;
  font-size:9px;
}

.staff-v2-dot{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:#3bd2b9;
  box-shadow:0 0 0 5px rgba(59,210,185,.13);
}

.staff-v2-shield{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 auto;
  border-radius:8px;
  background:rgba(56,211,190,.14);
  color:#74e3d2;
  font-size:13px;
  font-weight:800;
}

/* ---------------------------------------------------------
   Message
   --------------------------------------------------------- */

.message{
  margin-bottom:15px !important;
  padding:11px 14px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:650 !important;
}

.message.ok{
  border:1px solid #bee5d3 !important;
  background:#edf9f3 !important;
  color:#176846 !important;
}

.message.err{
  border:1px solid #efc8c8 !important;
  background:#fff1f1 !important;
  color:#9c3434 !important;
}

/* ---------------------------------------------------------
   Segmented navigation
   --------------------------------------------------------- */

.tabs{
  display:inline-flex !important;
  gap:4px !important;
  margin:0 0 17px !important;
  padding:4px !important;
  border:1px solid #dce6ec !important;
  border-radius:12px !important;
  background:#e9eff3 !important;
  box-shadow:inset 0 1px 2px rgba(20,45,60,.03) !important;
}

.tab{
  min-height:39px !important;
  padding:9px 17px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#63798b !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:750 !important;
  transition:.16s ease !important;
}

.tab:hover{
  color:#173b50 !important;
}

.tab.active{
  background:#fff !important;
  color:#173b50 !important;
  box-shadow:0 3px 9px rgba(22,55,73,.09) !important;
}

/* ---------------------------------------------------------
   Panels
   --------------------------------------------------------- */

.panel{
  margin-bottom:19px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid var(--staff-border) !important;
  border-radius:17px !important;
  background:#fff !important;
  box-shadow:0 6px 21px rgba(25,58,77,.045) !important;
}

.panel-head{
  min-height:70px;
  margin:0 !important;
  padding:17px 20px !important;
  border-bottom:1px solid #edf1f4 !important;
  background:
    linear-gradient(180deg,#fff,#fcfdfe) !important;
}

.panel h2{
  margin:0 !important;
  color:#19384d !important;
  font-size:16px !important;
  font-weight:760 !important;
}

.panel h2:before{
  content:"";
  display:inline-block;
  width:4px;
  height:17px;
  margin-right:9px;
  border-radius:4px;
  background:linear-gradient(#168f88,#44b9ad);
  vertical-align:-3px;
}

.panel-head p{
  color:#7a8e9f !important;
  font-size:11px !important;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn{
  min-height:37px !important;
  padding:8px 12px !important;
  border:1px solid #173f55 !important;
  border-radius:8px !important;
  background:#173f55 !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:750 !important;
  box-shadow:0 2px 5px rgba(15,47,66,.08) !important;
  transition:.15s ease !important;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.btn.small{
  min-height:31px !important;
  padding:6px 9px !important;
  font-size:9px !important;
}

.btn.gray{
  border-color:#667a8b !important;
  background:#667a8b !important;
}

.btn.red{
  border-color:#c95252 !important;
  background:#c95252 !important;
}

.btn.green{
  border-color:#0c8a75 !important;
  background:#0c8a75 !important;
}

/* ---------------------------------------------------------
   New user form
   --------------------------------------------------------- */

#createBox{
  margin:18px 20px 19px !important;
  padding:20px !important;
  border:1px solid #dae6ea !important;
  border-radius:14px !important;
  background:
    linear-gradient(135deg,#f8fbfc,#f4f9fa) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}

#createBox:before{
  content:"CREATE STAFF ACCOUNT";
  display:block;
  margin-bottom:15px;
  color:#668092;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.2px;
}

.form-grid{
  gap:14px !important;
}

.field label{
  margin-bottom:6px !important;
  color:#536c7e !important;
  font-size:10px !important;
  font-weight:760 !important;
  letter-spacing:.15px;
}

.field input,
.field select{
  min-height:41px !important;
  padding:10px 12px !important;
  border:1px solid #d2dfe6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#213d51 !important;
  font:inherit !important;
  font-size:12px !important;
  outline:none !important;
  transition:.15s ease !important;
}

.field input:focus,
.field select:focus{
  border-color:#3aa89f !important;
  box-shadow:0 0 0 3px rgba(58,168,159,.11) !important;
}

/* ---------------------------------------------------------
   Staff table
   --------------------------------------------------------- */

.panel > div[style*="overflow-x"]{
  padding:0 !important;
}

table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:12px !important;
}

thead{
  background:#f6f9fb;
}

th{
  padding:12px 15px !important;
  border-bottom:1px solid #e5edf2 !important;
  background:#f6f9fb !important;
  color:#698093 !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

td{
  padding:14px 15px !important;
  border-bottom:1px solid #edf2f5 !important;
  color:#2d485b !important;
  font-size:11px !important;
  vertical-align:middle !important;
}

tbody tr{
  transition:.14s ease;
}

tbody tr:hover{
  background:#f8fbfc !important;
}

tbody tr:last-child td{
  border-bottom:0 !important;
}

td:first-child{
  color:#183a50 !important;
  font-weight:730 !important;
}

td:nth-child(2){
  color:#567084 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-size:10px !important;
}

.badge{
  display:inline-flex !important;
  align-items:center !important;
  min-height:25px !important;
  padding:5px 9px !important;
  border-radius:20px !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.35px !important;
}

.badge.active{
  background:#e8f7ef !important;
  color:#18704e !important;
}

.badge.active:before{
  content:"";
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#27a66f;
}

.badge.inactive{
  background:#fff0f0 !important;
  color:#a13e3e !important;
}

.badge.inactive:before{
  content:"";
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#d35b5b;
}

.actions{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:nowrap !important;
}

/* ---------------------------------------------------------
   Role management
   --------------------------------------------------------- */

#roleCards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:18px 20px 20px !important;
}

.role-card{
  position:relative;
  min-height:105px;
  margin:0 !important;
  padding:17px 17px 15px !important;
  overflow:hidden;
  border:1px solid #dfe7ed !important;
  border-radius:13px !important;
  background:
    linear-gradient(145deg,#fff,#fafcfd) !important;
  box-shadow:0 3px 11px rgba(24,56,74,.035);
  transition:.17s ease !important;
}

.role-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#cbd8df;
  transition:.17s ease;
}

.role-card:hover{
  transform:translateY(-2px);
  border-color:#90b9b5 !important;
  background:#fcfefe !important;
  box-shadow:0 7px 17px rgba(24,56,74,.07);
}

.role-card:hover:before{
  background:#41a89f;
}

.role-card.selected{
  border:1px solid #38a89e !important;
  background:
    linear-gradient(145deg,#eff9f7,#f8fcfb) !important;
  box-shadow:
    0 0 0 2px rgba(56,168,158,.09),
    0 7px 18px rgba(30,112,106,.07) !important;
}

.role-card.selected:before{
  background:#159187;
}

.role-card.selected:after{
  content:"SELECTED";
  position:absolute;
  right:12px;
  top:12px;
  padding:4px 7px;
  border-radius:12px;
  background:#daf2ef;
  color:#15766d;
  font-size:7px;
  font-weight:850;
  letter-spacing:.7px;
}

.role-name{
  padding-right:54px;
  color:#193a50 !important;
  font-size:13px !important;
  font-weight:780 !important;
}

.role-desc{
  margin-top:7px !important;
  color:#778b9b !important;
  font-size:10px !important;
  line-height:1.5 !important;
}

/* ---------------------------------------------------------
   Permission matrix
   --------------------------------------------------------- */

#permissionPanel{
  overflow:visible !important;
}

.permissions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:18px 20px 21px !important;
}

.permission-group{
  position:relative;
  overflow:hidden;
  padding:15px !important;
  border:1px solid #e0e8ed !important;
  border-radius:12px !important;
  background:#f9fbfc !important;
}

.permission-group:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:
    linear-gradient(90deg,#168f87,#6ec8bf);
}

.permission-group h3{
  margin:1px 0 11px !important;
  color:#28495d !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.55px !important;
  text-transform:uppercase !important;
}

.permission-item{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:31px;
  margin:3px 0 !important;
  padding:6px 8px !important;
  border-radius:7px;
  color:#536d7f !important;
  font-size:10px !important;
  transition:.12s ease;
}

.permission-item:hover{
  background:#eef5f6;
}

.permission-item input[type="checkbox"]{
  width:15px;
  height:15px;
  flex:0 0 auto;
  accent-color:#118b81;
}

.permission-item span{
  line-height:1.3;
}

/* ---------------------------------------------------------
   Empty states
   --------------------------------------------------------- */

.empty{
  padding:38px !important;
  color:#8193a1 !important;
  text-align:center !important;
  font-size:11px !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media(max-width:1180px){
  .staff-v2-hero{
    grid-template-columns:1fr;
  }

  .staff-v2-security{
    grid-template-columns:repeat(3,1fr);
  }

  #roleCards,
  .permissions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:820px){
  .main{
    margin-left:0 !important;
    width:100% !important;
    padding:16px !important;
  }

  .header{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .header h1{
    font-size:27px !important;
  }

  .userbox{
    width:100%;
    justify-content:space-between;
  }

  .staff-v2-hero{
    padding:23px;
  }

  .staff-v2-security{
    grid-template-columns:1fr;
  }

  .tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100%;
  }

  .tab{
    width:100%;
  }

  .panel-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .panel-head > .btn{
    width:100%;
  }

  .form-grid,
  #roleCards,
  .permissions{
    grid-template-columns:1fr !important;
  }

  .full{
    grid-column:auto !important;
  }
}

@media(max-width:540px){
  .staff-v2-hero{
    min-height:0;
    padding:21px 18px;
    border-radius:16px;
  }

  .staff-v2-hero h2{
    font-size:24px !important;
  }

  .tabs{
    grid-template-columns:1fr !important;
  }

  #createBox{
    margin:14px !important;
    padding:15px !important;
  }

  th,
  td{
    padding:11px 12px !important;
  }
}