/* =========================================================
   SETTINGS FEATURE STYLES
   Namespaced with "settings-" / "ext-" prefixes so nothing
   collides with sessions.css or upload.css.
   Swap the color variables below for your existing tokens
   from shared/layout.css if you already have them.
========================================================= */

:root{
  --settings-navy:        #132a52;
  --settings-navy-dark:   #0e2140;
  --settings-blue-tint:   #eef2fc;
  --settings-pill-bg:     #eaf0fd;
  --settings-pill-text:   #2646a6;
  --settings-text:        #16213a;
  --settings-text-muted:  #6b7484;
  --settings-border:      #e6e8ee;
}

/* ---- left sub-nav (inside session-col) ---- */
.settings-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:8px;
}

.settings-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  color:var(--settings-text-muted);
  font-size:14.5px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, color .15s;
}

.settings-nav-item svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.settings-nav-item:hover{
  background:#f7f8fb;
}

.settings-nav-item.active{
  background:var(--settings-blue-tint);
  color:#2f5bd7;
}

/* ---- right content area (inside main-col) ---- */
.settings-content-panel{
  display:none;
  padding:4px;
}

.settings-content-panel.active{
  display:block;
}

.settings-content-panel h2{
  font-size:22px;
  margin:0 0 6px;
  font-weight:700;
  color:var(--settings-text);
}

.settings-subtext{
  color:var(--settings-text-muted);
  font-size:14.5px;
  margin:0 0 24px;
}

/* ---- extension card ---- */
.ext-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  border:1px solid var(--settings-border);
  border-radius:14px;
  padding:22px 24px;
  max-width:920px;
  background:#fff;
}

.ext-icon{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--settings-blue-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.ext-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--settings-navy);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ext-body{
  flex:1;
  min-width:0;
}

.ext-body h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  color:var(--settings-text);
}

.ext-body p{
  margin:0 0 14px;
  color:var(--settings-text-muted);
  font-size:14px;
  line-height:1.5;
  max-width:520px;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--settings-pill-bg);
  color:var(--settings-pill-text);
  font-size:12.5px;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
}

.pill svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ext-cta{
  flex-shrink:0;
}

.btn-install{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--settings-navy);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:11px 22px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s;
}

.btn-install:hover{
  background:var(--settings-navy-dark);
}

.btn-install svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---- team panel (empty state, shown only if no form present) ---- */
.team-empty{
  border-radius:14px;
  padding:40px;
  max-width:920px;
  text-align:center;
  color:var(--settings-text-muted);
  font-size:14px;
}

/* ---- invite form ---- */
.invite-form{
  max-width:1180px;
  margin-bottom:32px;
}

.form-row{
  display:flex;
  gap:18px;
  margin-bottom:16px;
}

.field{
  flex:1;
  min-width:0;
}

.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--settings-text);
  margin-bottom:6px;
}

.field .req{
  color:#c0392b;
  margin-left:2px;
}

.field input,
.field select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--settings-border);
  background:#f7f9fc;
  border-radius:10px;
  padding:13px 14px;
  font-size:14.5px;
  color:var(--settings-text);
  font-family:inherit;
  transition:border-color .15s, background .15s;
}

.field input::placeholder{
  color:#9aa2b1;
}

.field input:focus,
.field select:focus{
  outline:none;
  border-color:#2f5bd7;
  background:#fff;
}

.mobile-input{
  display:flex;
  align-items:center;
  border:1px solid var(--settings-border);
  background:#f7f9fc;
  border-radius:10px;
  padding:0 14px;
  transition:border-color .15s, background .15s;
}

.mobile-input:focus-within{
  border-color:#2f5bd7;
  background:#fff;
}

.mobile-prefix{
  color:var(--settings-text-muted);
  font-size:14.5px;
  padding-right:8px;
  border-right:1px solid var(--settings-border);
  margin-right:8px;
}

.mobile-input input{
  border:none;
  background:transparent;
  padding:13px 0;
  flex:1;
  min-width:0;
}

.mobile-input input:focus{
  outline:none;
}

.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:38px;
  cursor:pointer;
}

.form-row-cta{
  align-items:flex-end;
}

.field-role{
  flex:1;
}

.btn-send-invite{
  flex-shrink:0;
  background:var(--settings-navy);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:13px 24px;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
  height:47px;
}

.btn-send-invite:hover{
  background:var(--settings-navy-dark);
}


 
/* ---- invite table ---- */
.invite-table{
  width:100%;
  max-width:1180px;
  border-collapse:collapse;
  font-size:14px;
}

.invite-table thead th{
  text-align:left;
  background:var(--settings-blue-tint);
  color:var(--settings-navy);
  font-weight:700;
  font-size:13.5px;
  padding:14px 20px;
}

.invite-table thead th.col-actions,
.invite-table td.col-actions{
  text-align:right;
}

.invite-table tbody td{
  padding:22px 20px;
  border-bottom:1px solid var(--settings-border);
  color:var(--settings-text);
  vertical-align:middle;
}

.invite-table tbody tr:last-child td{
  border-bottom:none;
}

.status-pill{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
}

.status-pending{
  background:#fbe9d0;
  color:#a5690a;
}

.status-accepted{
  background:#dcf3e3;
  color:#1e7e42;
}

.status-revoked{
  background:#f3dcdc;
  color:#a52020;
}

.col-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.row-action{
  color:#2f5bd7;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}

.row-action:hover{
  text-decoration:underline;
}

.row-action-danger{
  color:#c0392b;
}

/* ---- responsive ---- */
@media (max-width: 720px){
  .ext-card{
    flex-direction:column;
  }
  .ext-cta{
    width:100%;
  }
  .btn-install{
    width:100%;
    justify-content:center;
  }
  .form-row{
    flex-direction:column;
  }
  .invite-table{
    display:block;
    overflow-x:auto;
  }
}