/* --------------------------------------------------------------------
 * Mandatag
 * Internal Licensing, Entitlement & Administrative Control System
 * © Air Roofers SAS
 * --------------------------------------------------------------------
 * Author: Ignatus Chika Ujomor
 * Role: Software Architect & Systems Engineer
 * Profile: https://www.ujomor.com
 *
 * Signature:
 *   "Mandatag — where licensing stops being an afterthought."
 * --------------------------------------------------------------------
 * File: admin.css
 * Location: /public_html/Assets/
 *
 * FULL MERGE – ENTERPRISE STABLE
 *
 * Base: Original Stable UI
 * Merge: Sidebar width-stable collapse
 * Merge: Risk card structural polish
 *
 * ZERO REGRESSION GUARANTEED
 * No component removed
 * No selector removed
 * No behavioral contract altered
 * --------------------------------------------------------------------
 */

/* =========================================================
   1. ROOT VARIABLES
========================================================= */

:root {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --text: #1e293b;
  --primary: #0b1e3d;
  --border: rgba(0,0,0,0.06);
  --radius: 10px;
  --shadow: 0 4px 14px rgba(0,0,0,0.05);
}

*,
*::before,
*::after{
box-sizing:border-box;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --panel: #1e293b;
  --text: #f1f5f9;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 4px 14px rgba(0,0,0,0.4);
}

[data-theme="light"]{
  --panel:#ffffff;
  --text:#1e293b;
  --bg:#f4f6fb;
}

/* =========================================================
   2. BASE
========================================================= */

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);

  /* Hard mobile overflow protection */
  overflow-x:hidden;
  width:100%;
}

h1, h2, h3 { margin-top: 0; }
a { text-decoration: none; color: inherit; }

/* ===== MT-PATCH-HEADING-TOP-FIX-003 ===== */
.content > h1:first-child,
.content > h2:first-child,
.content > h3:first-child{
  margin-top:0;
}

/* ===== MT-PATCH-FIRST-CHILD-COLLAPSE-005 ===== */
.content > *:first-child {
  margin-top: 0 !important;
}



.dashboard-grid{
  margin-top:10px; /* from 14 */
}

/* =========================================================
   3. LAYOUT
========================================================= */

.layout {
  display: flex;
  flex-direction: column; /* mobile first */
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* ===== MT-PATCH-TOP-SPACING-NORMALIZATION-001 ===== */
/* ===== MT-AUTH-CONTENT-001 ===== */
.content{
  flex:1;
  padding:16px 30px 30px;
  min-width:0;

  display:flex;
  flex-direction:column;

  max-width:1600px;
  margin:0 auto;
}

/* Mobile safe padding */
@media (max-width:767px){
  .content{
    padding:16px;
  }
}

/* =========================================================
   4. TOPBAR
========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:1100;

  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 24px;
  background:var(--primary);
  color:#fff;

  box-sizing:border-box;
  min-width:0;

  backdrop-filter:blur(6px);
}

/* Prevent overflow on small screens */

.top-actions{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding-right:6px;
}

/* Ensure icons never clip screen edge */

.top-actions button,
.notif-bell,
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  border-radius:8px;
  position:relative;
}

/* Hover polish */

.top-actions button:hover,
.notif-bell:hover,
.theme-toggle:hover{
  background:rgba(255,255,255,0.08);
}

.menu-toggle,
.top-actions button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* =========================================================
   GLOBAL TOPBAR SEARCH
========================================================= */

.topbar-search{
  flex:1;
  display:flex;
  justify-content:center;
  padding:0 20px;
}

.topbar-search input{
  width:100%;
  max-width:420px;
  padding:9px 14px;
  border-radius:999px;
  border:none;
  font-size:14px;
  outline:none;
  transition:all .25s ease;

  background:rgba(255,255,255,.15);
  color:#fff;
}

.topbar-search input::placeholder{
  color:rgba(255,255,255,.7);
}

.topbar-search input:focus{
  background:#ffffff;
  color:#1e293b;
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
}

@media (max-width:768px){

  .topbar-search{
    padding:0 10px;
  }

  .topbar-search input{
    max-width:100%;
    font-size:13px;
  }

}

/* =========================================================
   5. SIDEBAR (MOBILE FIRST SAFE)
========================================================= */

.sidebar {
  display:none;
  flex-direction:column;
  padding:20px;
  background:var(--panel);
  border-right:1px solid var(--border);

  width:240px;
  flex:0 0 240px;

  transition:width .25s ease;
}

.sidebar.open { display:flex; }

/* =========================================================
   SIDEBAR LINKS
========================================================= */

.sidebar a .icon{
  font-size:18px;
  width:20px;
  text-align:center;
}

.sidebar a .label{
  display:inline-block;
}

/* ===== MT-AUTH-SIDEBAR-LINK-001 ===== */

.sidebar a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:8px;

  transition:
    background .18s ease,
    transform .08s ease,
    box-shadow .18s ease;
}

.sidebar a:hover{
  background:rgba(37,99,235,0.08);
  transform:translateX(2px);
}

.sidebar a.active{
  background:rgba(37,99,235,0.12);
  font-weight:600;
}

/* =========================================================
   COLLAPSED SIDEBAR (DESKTOP)
========================================================= */

@media (min-width:768px){

  body.sidebar-collapsed .sidebar{
    display:flex;
    width:60px;
    flex:0 0 60px;

    padding:20px 8px;
    overflow:hidden;

    transition:width .25s ease;
  }

  body.sidebar-collapsed .sidebar a{
    justify-content:center;
    align-items:center;
    padding:12px 0;
}

/* Icon-only pill mode */

body.sidebar-collapsed .sidebar a .icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(0,0,0,0.05);
    transition:all .2s ease;
}

/* Hover polish */

body.sidebar-collapsed .sidebar a:hover .icon{
    background:rgba(37,99,235,0.15);
}

/* Ensure ALL sidebar links hide label in collapse */
body.sidebar-collapsed .sidebar a .label{
    display:none !important;
}

/* Ensure icon remains centered */
body.sidebar-collapsed .sidebar a{
    justify-content:center !important;
}

body.sidebar-collapsed .sidebar a .icon-pill{
    margin:0 auto;
}

  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   MOBILE COLLAPSE ONLY
========================================================= */

@media (max-width:767px){

  body.sidebar-collapsed .sidebar{
    display:none;
  }

}

/* =========================================================
   COLLAPSED TOOLTIP
========================================================= */

body.sidebar-collapsed .sidebar a:hover::after{
  content:attr(data-label);
  position:absolute;
  left:70px;

  background:#111827;
  color:#fff;

  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  font-size:12px;
}


/* DESKTOP SAFE COLLAPSE */

/* =========================================================
   SIDEBAR MINI ICON MODE (ENTERPRISE SAFE)
   Keeps navigation visible when collapsed
   ---------------------------------------------------------
   Patch: Non-regressive
   Scope: Desktop collapsed sidebar only
========================================================= */

  body.sidebar-collapsed .sidebar a .icon{
  display:block;
  }

  body.sidebar-collapsed .sidebar a{
    display:flex;
    justify-content:center;
    align-items:center;
  }

/* =========================================================
   6. DASHBOARD GRID
========================================================= */

.dashboard-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;

  width:100%;
  align-items:stretch;

  margin-top:14px;
}

.metric-card{
  background:var(--panel);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* Enterprise dashboard hover polish */

.metric-card:hover{
  transform:translateY(-2px);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.08);

  border-color:
    rgba(0,0,0,0.08);
}


.metric-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  opacity: 0.7;
}

.metric-card .value{
  font-size:26px;
  font-weight:600;

  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  transition:transform .2s ease;
}

.metric-card:hover .value{
  transform:scale(1.03);
}

/* ===== MT-PATCH-HASH-FIX-018 START ===== */

.hash-value {
  white-space: normal !important;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.4;
  max-height: 80px;
  overflow-y: auto;
}

/* ===== MT-PATCH-HASH-FIX-018 END ===== */

/* =========================================================
   7. ALERTS & BADGES
========================================================= */

.alert-banner {
  background: #f59e0b;
  color: #fff;
  padding: 12px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
  animation: slideDown 0.3s ease;
}

.badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* stronger visual authority */
.badge-active { background:#16a34a;color:#fff; box-shadow:0 0 0 2px rgba(22,163,74,.2); }
.badge-suspended { background:#f59e0b;color:#111; }
.badge-revoked { background:#dc2626;color:#fff; }
.badge-expired { background:#475569;color:#fff; }

/* =========================================================
   8. TABLES
========================================================= */

.mt-table{
width:100%;
border-collapse:collapse;
font-size:14px;

/* Removed fixed min-width for mobile safety */
min-width:0;

background:var(--panel);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
}

.mt-table th,
.mt-table td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}

.mt-table th {
  background:rgba(0,0,0,0.03);
  font-weight:600;
}

/* actor */

.mt-table td:last-child,
.responsive-table td:last-child{
color:#334155;
}

/* Recent activity formatting */
.mt-table td:first-child{
font-family:monospace;
color:#64748b;
white-space:nowrap;
}

.mt-table td:nth-child(2){
font-weight:500;
}

/* ===== MT-PATCH-TABLE-HIERARCHY-008A ===== */

/* Row separation */
.mt-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.mt-table tbody tr:hover {
    background: #f8fafc;
}
/* Stronger hover focus */
/* ===== MT-AUTH-TABLE-HOVER-001 ===== */

/* Primary column (License ID) */
.mt-table td:nth-child(2) {
    font-weight: 600;
    color: #0f172a;
}

/* Secondary meta columns */
.mt-table td:nth-child(3),
.mt-table td:nth-child(4),
.mt-table td:nth-child(5) {
    color: #64748b;
    font-size: 13px;
}

/* Reduce vertical noise */
.mt-table td {
    padding: 10px 14px;
}

/* ============================================================
   Mandatag Admin Console Tables (Stripe / AWS style)
   Mobile-first responsive
============================================================ */

.responsive-table{width:100%;border-collapse:collapse;font-size:14px}
.responsive-table th{background:#f5f7fb;font-weight:600;text-align:left;padding:10px;border-bottom:1px solid #e5e7eb}
.responsive-table td{padding:10px;border-bottom:1px solid #f1f3f5}
.responsive-table tr:hover{background:#fafbff}
.responsive-table input{width:100%;font-size:13px;padding:4px 6px}
.responsive-table button{padding:4px 8px;font-size:12px}
@media(max-width:900px){
  .responsive-table{
    display:block;
    overflow-x:auto;
  }
}

.responsive-table td:nth-child(6){text-align:center}
.responsive-table td:last-child{white-space:nowrap}

.table-responsive{
overflow-x:auto;
border-radius:var(--radius);
box-shadow:var(--shadow);
background:var(--panel);
}

/* =========================================================
   PRODUCTS INLINE EDIT FIX (Scoped / Non-Duplicate)
   Prevent table overflow when multiple inputs exist
========================================================= */

.responsive-table td form.inline-form{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  max-width:100%;
}

.responsive-table td form.inline-form input{
  flex:1 1 120px;
  max-width:140px;
  min-width:90px;
}

.responsive-table td form.inline-form button{
  flex:0 0 auto;
}

.responsive-table td{
  vertical-align:top;
}

/* =========================================================
   9. LIVE FEED
========================================================= */

#live-feed li {
  padding:8px 0;
  border-bottom:1px solid var(--border);
  animation:slideDown 0.3s ease;
}

/* =========================================================
   10. FOOTER
========================================================= */

.mt-footer {
  padding:15px;
  text-align:center;
  font-size:13px;
  opacity:0.7;
}

/* =========================================================
   11. ANIMATIONS
========================================================= */

@keyframes slideDown {
  from { opacity:0; transform:translateY(-5px); }
  to { opacity:1; transform:translateY(0); }
}

/* =========================================================
   12. DESKTOP ENHANCEMENT
   Restores desktop sidebar + grid layout
========================================================= */

@media (min-width:768px){

  .layout {
    flex-direction:row;
  }

  .sidebar {
    display:flex;
    width:240px;
  }

  .content {
    flex:1;
    padding:30px;
    min-width:0;
  }

  .dashboard-grid {
    grid-template-columns:repeat(2,1fr);
  }

}

@media (min-width:1200px){
  .dashboard-grid { grid-template-columns:repeat(3,1fr); }
}


/* =========================================================
   13. REMAINING ORIGINAL COMPONENTS (FULLY PRESERVED)
========================================================= */

.integrity-banner {
  background:#e2e8f0;
  padding:14px;
  border-radius:var(--radius);
  margin-bottom:20px;
  font-weight:600;
}

.integrity-banner.red { background:#fee2e2; color:#b91c1c; }
.integrity-banner.yellow { background:#fef3c7; }
.integrity-banner.green { background:#dcfce7; }

/* =========================================================
   RISK CARD LAYOUT
========================================================= */

/* MT-PATCH-RISK-GAUGE-STABILITY-002 */

.mt-risk-gauge-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0; /* 🔥 prevents flex collapse */
}

.risk-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
min-height:150px;
padding:28px;
color:#ffffff;
}

/* left block */

.risk-left{
display:flex;
flex-direction:column;
gap:10px;
}

/* score */

.risk-score{
font-size:52px;
font-weight:700;
letter-spacing:-1px;
line-height:1;
display:flex;
align-items:center;
}

/* badge */

.risk-left .badge{
font-size:13px;
padding:6px 10px;
border-radius:8px;
}

/* right dial */

.risk-right{
display:flex;
align-items:center;
justify-content:center;
min-width:120px;
}

.risk-low{
background:linear-gradient(
135deg,
#16a34a 0%,
#22c55e 60%,
#4ade80 100%
);
}

.risk-medium{
background:linear-gradient(
135deg,
#f59e0b 0%,
#fbbf24 60%,
#fde68a 100%
);
}

.risk-high{
background:linear-gradient(
135deg,
#dc2626 0%,
#ef4444 60%,
#f87171 100%
);
}

.primary-btn {
  background:#0b1e3d;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:var(--radius);
  cursor:pointer;
}

@media(max-width:600px){

.risk-card{
  flex-direction:column;
  align-items:flex-start;
  }

  .risk-right{
  align-self:center;
  }

}

.primary-btn:hover { opacity:0.9; }

.metric-card canvas:not(#riskGauge) {
  margin-top:8px;
}

/* =========================================================
   PHASE 26 – OBSERVABILITY HARDENING GRID
   Balanced Risk + Intelligence Layout
========================================================= */

.risk-observability-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:32px;
  align-items:start;
  margin-top:20px;
  width:100%;
}

/* Right intelligence panel */
.risk-observability-grid > div:last-child{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

/* Mobile fallback */
@media (max-width:1024px){
  .risk-observability-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PHASE 27 – INTELLIGENCE EXPANSION LAYER
========================================================= */

.intelligence-console{
  background:var(--panel);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.intelligence-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.intelligence-header h4{
  margin:0;
  font-size:16px;
  font-weight:600;
}

.intel-status{
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  border-radius:999px;
}

.intel-status.low{
  background:#dcfce7;
  color:#166534;
}

.intel-status.medium{
  background:#fef3c7;
  color:#92400e;
}

.intel-status.high{
  background:#fee2e2;
  color:#991b1b;
}

.intelligence-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.intel-module{
  background:var(--bg);
  padding:18px;
  border-radius:10px;
  border-left:4px solid #2563eb;
  transition:all .2s ease;
}

.intel-module:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.ai-module{
  margin-top:20px;
  border-left:4px solid #7c3aed;
}

.ai-trend-indicator{
  margin-top:10px;
  font-weight:600;
  font-size:14px;
}

/* =========================================================
   14. MODALS & DRAWERS
========================================================= */

.modal,
.mt-modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .2s ease;
}

.modal.hidden,
.mt-modal.hidden { 
  display:none;
  opacity:0;
}

.mt-modal:not(.hidden){
    display:flex !important;
}

.mt-row-disabled {
    opacity: 0.45;
}

/* only disable checkbox, not entire row */
.mt-row-disabled input[type="checkbox"] {
    pointer-events: auto;
}

.mt-modal table {
    border-collapse: separate;
}

.modal-content {
  background:#fff;
  padding:25px;
  border-radius:10px;
  width:90%;
  max-width:400px;
}

.drawer {
  position:fixed;
  right:0;
  top:0;
  height:100%;
  width:300px;
  background:#fff;
  box-shadow:-5px 0 20px rgba(0,0,0,0.2);
  padding:20px;
  z-index:9999;
}

.drawer.hidden { display:none; }

/* =========================================================
   15. NOTIFICATIONS
========================================================= */

.notif-bell { position:relative; cursor:pointer; }

.notif-count{
  position:absolute;

  top:-4px;
  right:-4px;

  min-width:16px;
  height:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#dc2626;
  color:#fff;

  font-size:10px;
  font-weight:600;

  padding:0 4px;
  border-radius:10px;

  box-shadow:0 0 0 2px var(--primary);
}

.notif-panel {
  position:absolute;
  top:60px;
  right:20px;
  width:280px;
  max-height:300px;
  overflow-y:auto;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  padding:15px;
  z-index:9999;
}

.notif-panel.hidden { display:none; }

/* =========================================================
   16. TENANT ENTERPRISE OVERRIDE
========================================================= */

body[data-tenant="enterprise"] .risk-card {
  border:2px solid #0b1e3d;
}

body[data-tenant="enterprise"] .topbar {
  background:#111827;
}

/* ===========================
   LOGIN (Enterprise Gradient)
=========================== */

.mt-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg,  #3255B6 0%, #0B1E3D 100%);
}

.mt-login-card {
  background: #ffffff;
  /* Hard set instead of var(--panel) */
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.mt-login-card input {
  width: 100%;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: #fff;
  color: #1E293B;
}

.mt-login-card button:not(.pw-toggle) {
  width: 100%;
  padding: 14px;
  background: #0B1E3D;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.activation-dot{
  animation:mapPulse 2.4s infinite;
}

@keyframes mapPulse{
  0%{
    transform:scale(1);
    opacity:.9;
  }

  70%{
    transform:scale(1.8);
    opacity:.2;
  }

  100%{
    transform:scale(1);
    opacity:0;
  }
}

/* =========================================================
   17. METRIC LOADING SHIMMER
   Enterprise Observability UI Polish
========================================================= */

.metric-card.loading {
  position:relative;
  overflow:hidden;
}

.metric-card.loading::after{
  content:'';
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0) 100%
    );

  transform:translateX(-100%);
  animation:metricShimmer 1.3s infinite;

  pointer-events:none;
}

@keyframes metricShimmer{
  100%{
    transform:translateX(100%);
  }
}

.mt-success{
padding:12px 16px;
background:#e6ffed;
border:1px solid #b7f5c6;
color:#0f5132;
border-radius:6px;
margin-bottom:20px;
font-weight:600;
}

/* =========================================================
   Product Admin Form Layout
========================================================= */

.mt-form{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
align-items:center;
}

.mt-form input,
.mt-form select{
width:100%;
padding:8px 10px;
font-size:14px;
border:1px solid #cbd5e1;
border-radius:6px;
}

.mt-form button{
grid-column:span 2;
padding:10px;
font-weight:600;
}

/* ==========================================================
   Mandatag Sidebar Menu Improvements
   Mobile-First, Enterprise UX Polish Layer
   (Non-regressive enhancement)
========================================================== */

/* ----------------------------------------
   BASE LINK IMPROVEMENTS
----------------------------------------- */



/* left active indicator bar */

.sidebar a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:4px;
  background:#2563eb;
}

/* ----------------------------------------
   ICON PILL ENHANCEMENT
----------------------------------------- */

.sidebar a:hover .icon-pill{
  background:#e0e7ff;
  transform:scale(1.05);
}

.sidebar a.active .icon-pill{
  background:#dbeafe;
}

/* ----------------------------------------
   SUBMENU STRUCTURE
----------------------------------------- */

.submenu{
  padding-left:26px;
  position:relative;
  transition:all .18s ease;
}

/* vertical guide line */

.submenu:before{
  content:"";
  position:absolute;
  left:14px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(0,0,0,0.06);
}

/* smoother indent hover */

.submenu:hover{
  padding-left:30px;
}

/* ----------------------------------------
   GROUP STYLING
----------------------------------------- */

.menu-group{
  margin-bottom:12px;
  padding-bottom:4px;
}

.menu-group-title{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.05em;

  margin:18px 14px 8px;
  padding-top:6px;

  opacity:.75;
  transition:
    opacity .2s ease,
    letter-spacing .2s ease;
}

.menu-group-title:hover{
  opacity:1;
  letter-spacing:.08em;
}

/* arrow polish */

.menu-arrow{
  font-size:11px;
  opacity:.6;
  transition:transform .2s ease;
}

.menu-group.collapsed .menu-arrow{
  transform:rotate(-90deg);
}

/* ----------------------------------------
   GROUP COLOR ACCENTS (expanded coverage)
----------------------------------------- */

.menu-group[data-group="core"] .menu-group-title{
  color:#2563eb;
}

.menu-group[data-group="activation intelligence"] .menu-group-title{
  color:#7c3aed;
}

.menu-group[data-group="licensing"] .menu-group-title{
  color:#16a34a;
}

.menu-group[data-group="usage & metrics"] .menu-group-title{
  color:#0ea5e9;
}

.menu-group[data-group="security & iam"] .menu-group-title{
  color:#dc2626;
}

.menu-group[data-group="infrastructure"] .menu-group-title{
  color:#f59e0b;
}

.menu-group[data-group="developer"] .menu-group-title{
  color:#475569;
}

.menu-group[data-group="governance"] .menu-group-title{
  color:#0f766e;
}

/* subtle group divider */

.menu-group{
  border-left:3px solid transparent;
  padding-left:6px;
}

.menu-group[data-group]{
  border-left-color:rgba(37,99,235,0.15);
}

/* ----------------------------------------
   COLLAPSE BEHAVIOR
----------------------------------------- */

.menu-group.collapsed .submenu{
  display:none;
}

/* ----------------------------------------
   COLLAPSED SIDEBAR MODE (Desktop)
----------------------------------------- */

body.sidebar-collapsed .sidebar a.active .icon{
  background:rgba(37,99,235,0.25);
  box-shadow:0 0 0 2px rgba(37,99,235,0.25);
}

/* ----------------------------------------
   MOBILE REFINEMENTS
----------------------------------------- */

@media (max-width:768px){

  .menu-group-title{
    margin:14px 10px 6px;
  }

  .submenu{
    padding-left:22px;
  }

  .submenu:before{
    left:12px;
  }

}

/* ==========================================================
   PHASE 2 – ENTERPRISE NAV INTELLIGENCE LAYER
   Non-regressive animated & accessibility enhancements
========================================================== */

/* ----------------------------------------
   SMOOTH COLLAPSIBLE SUBMENU
----------------------------------------- */

.submenu-children{
  overflow:hidden;
  transition:
    max-height .25s ease,
    opacity .2s ease;
  max-height:500px;
  opacity:1;
}

.submenu-children.collapsed{
  max-height:0;
  opacity:0;
}

/* ----------------------------------------
   ACTIVE GROUP VISUAL EMPHASIS
----------------------------------------- */

.menu-group:has(.sidebar a.active){
  background:rgba(37,99,235,0.04);
  border-radius:10px;
  padding-top:4px;
  padding-bottom:4px;
}

/* fallback safe highlight if :has unsupported */
.menu-group .sidebar a.active{
  position:relative;
}

/* ----------------------------------------
   COLLAPSED MODE TOOLTIP ENHANCEMENT
----------------------------------------- */

body.sidebar-collapsed .sidebar a:hover::after{
  content:attr(data-label);
  position:absolute;
  left:70px;
  top:50%;
  transform:translateY(-50%);
  background:#0f172a;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  white-space:nowrap;
  font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  animation:fadeInTooltip .15s ease;
}

@keyframes fadeInTooltip{
  from{opacity:0; transform:translateY(-50%) translateX(-4px);}
  to{opacity:1; transform:translateY(-50%) translateX(0);}
}

/* ----------------------------------------
   TOUCH FEEDBACK (Mobile polish)
----------------------------------------- */

@media (max-width:768px){

  .sidebar a:active{
    transform:scale(.98);
    background:rgba(37,99,235,0.12);
  }

}

/* ----------------------------------------
   DARK MODE NAV REFINEMENT
----------------------------------------- */

[data-theme="dark"] .sidebar{
  background:#111827;
  border-right:1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] .sidebar a:hover{
  background:rgba(255,255,255,.06);
}

[data-theme="dark"] .sidebar a.active{
  background:rgba(37,99,235,.25);
  color:#ffffff;
}

[data-theme="dark"] .menu-group-title{
  opacity:.85;
}

/* ----------------------------------------
   ACCESSIBILITY – FOCUS VISIBLE
----------------------------------------- */

.sidebar a:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
  border-radius:8px;
}

/* ----------------------------------------
   MICRO DEPTH LAYERING
----------------------------------------- */

.sidebar{
  backdrop-filter:saturate(120%);
}

.menu-group-title{
  transition:transform .15s ease;
}

.menu-group-title:hover{
  transform:translateX(2px);
}

/* ----------------------------------------
   ANIMATED ICON SOFT GLOW
----------------------------------------- */

.sidebar a.active .icon-pill{
  box-shadow:
    0 0 0 2px rgba(37,99,235,.2),
    0 4px 12px rgba(37,99,235,.2);
}

/* ----------------------------------------
   REDUCE MOTION SAFETY
----------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .submenu-children,
  .sidebar a,
  .menu-group-title,
  .icon-pill{
    transition:none !important;
  }

}

/* =========================================================
   Mandatag Command Palette — Unified Styles
========================================================= */

/* ===== Overlay ===== */
#mt-command{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:120px;
  z-index:9999;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);

  animation:fadeOverlay .15s ease;
}

@keyframes fadeOverlay{
  from{opacity:0;}
  to{opacity:1;}
}

/* ===== Command Box ===== */
.mt-command-box{
  width:600px;
  max-width:90%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;

  transform:translateY(-10px);
  animation:dropIn .18s ease forwards;
}

@keyframes dropIn{
  to{transform:translateY(0);}
}

/* ===== Input ===== */
#mt-command-input{
  width:100%;
  border:none;
  border-bottom:1px solid #eee;
  padding:16px;
  font-size:16px;
  outline:none;
}

/* ===== Results Container ===== */
#mt-command-results{
  max-height:400px;
  overflow:auto;
}

/* ===== Command Items (UNIFIED) ===== */
.mt-command-item{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:12px 16px;
  font-size:14px;
  cursor:pointer;

  transition:background .12s ease;
}

.mt-command-item small{
  opacity:.5;
  font-size:12px;
}

/* States */
.mt-command-item:hover{
  background:#f3f4f6;
}

.mt-command-item.active{
  background:#eef2ff;
}

/* ===== Search Suggestions ===== */
#globalSearchSuggestions{
  background:#ffffff;
  color:#0f172a;
}

.mt-search-item{
  padding:10px 14px;
  cursor:pointer;
  color:#0f172a;
  background:#ffffff;
  border-bottom:1px solid #f1f5f9;
}

.mt-search-item:hover{
  background:#f1f5f9;
}

.mt-search-item small{
  color:#64748b;
}

/* ===== Dark Mode ===== */
body.dark #globalSearchSuggestions{
  background:#1e293b;
  color:#f1f5f9;
}

body.dark .mt-search-item{
  background:#1e293b;
  color:#f1f5f9;
}

body.dark .mt-search-item:hover{
  background:#334155;
}

/* ===== Navigation Intelligence ===== */
.nav-intel-section{
  margin-top:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  padding-bottom:6px;
}

.nav-intel-link{
  display:block;
  font-size:13px;
  opacity:.8;
  padding:4px 10px;
}

.nav-intel-link:hover{
  opacity:1;
}

/* ===== Sidebar ===== */
.sidebar .active{
  background:rgba(255,255,255,.06);
  border-radius:6px;
}
/* ==========================================================
   Mandatag Enterprise Table System
   Stripe / AWS Admin Console Style
========================================================== */

.mt-table-card{
background:#ffffff;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.06);
overflow:hidden;
margin-top:12px;
}

/* horizontal scroll for mobile */

.mt-table-scroll{
overflow-x:auto;
}

/* header */

.mt-table thead{
background:#f8fafc;
}

.mt-table th{
text-align:left;
padding:12px 16px;
font-weight:600;
font-size:13px;
color:#475569;
border-bottom:1px solid #e2e8f0;
}

/* cells */

.mt-table td{
padding:12px 16px;
border-bottom:1px solid #f1f5f9;
color:#334155;
}

/* zebra */

.mt-table tbody tr:nth-child(even){
background:#fcfcfd;
}

/* hover */

/* ===== MT-PATCH-EMPTY-STATE-AUTHORITY-008 ===== */

.mt-empty{
    text-align:center;
    padding:40px;
    color:#94a3b8;
    font-size:14px;
    font-style:italic;
    opacity:.9;
}

.mt-empty::before{
    content:"—";
    display:block;
    font-size:20px;
    margin-bottom:6px;
    opacity:.4;
}

/* mobile */

@media (max-width:768px){

.mt-table th,
.mt-table td{
padding:10px 12px;
font-size:13px;
}

}

/* ==========================================================
   Mandatag Activity Timeline
========================================================== */

.activity-feed{
background:#ffffff;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.06);
padding:12px;
margin-top:12px;
}

/* event row */

.activity-item{
display:flex;
gap:12px;
padding:12px;
border-bottom:1px solid #f1f5f9;
}

.activity-item:last-child{
border-bottom:none;
}

/* icon */

.activity-icon{
font-size:18px;
width:24px;
}

/* content */

.activity-content{
flex:1;
}

/* header */

.activity-header{
display:flex;
justify-content:space-between;
font-size:14px;
font-weight:600;
color:#334155;
}

/* time */

.activity-time{
font-size:12px;
color:#64748b;
}

/* actor */

.activity-actor{
font-size:13px;
color:#64748b;
margin-top:3px;
}

/* event types */

.activity-item.success{
border-left:3px solid #16a34a;
}

.activity-item.activation{
border-left:3px solid #2563eb;
}

.activity-item.error{
border-left:3px solid #dc2626;
}

.activity-item.info{
border-left:3px solid #64748b;
}

/* mobile */

@media (max-width:768px){

.activity-header{
flex-direction:column;
gap:4px;
}

}

/* =========================================================
   MOBILE SIDEBAR OVERLAY (UNIFIED ENGINE)
========================================================= */

@media (max-width:767px){

  .sidebar{
    position:fixed;
    top:60px;
    left:0;
    bottom:0;
    width:240px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:1001;
  }

  .sidebar.open{
    transform:translateX(0);
  }

  body.sidebar-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1000;
  }

}

/* ============================================
   Developer Tools Enterprise Tabs
============================================ */

.dev-tabs-wrapper {
    position: relative;
    margin-bottom: 22px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Scroll gradient fade */
.dev-tabs-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg));
}

/* ===== MT-AUTH-DEV-TABS-001 ===== */

.dev-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
}

.dev-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 999px;

    background: #f1f5f9;
    font-size: 14px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: all .18s ease;
}

.dev-tab:hover {
    background: #e2e8f0;
}

.dev-tab.active {
    background: #2563eb;
    color: #fff;
}

/* Active icon color */
.dev-tab.active svg {
    stroke: #ffffff;
}

/* Smooth horizontal scroll */
.dev-tabs-wrapper {
    scrollbar-width: none;
}

.dev-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.icon-primary svg {
    stroke: #2563eb;
}

.icon-success svg {
    stroke: #16a34a;
}

.icon-warning svg {
    stroke: #f59e0b;
}

.icon-danger svg {
    stroke: #dc2626;
}

.icon-muted svg {
    stroke: #64748b;
}

.icon-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f1f5f9;
    transition: all 0.25s ease;

    /* Ensure SVG visibility */
    flex-shrink: 0;
}

.icon-pill svg {
    width: 20px;
    height: 20px;
    display: block;
}

.icon-pill svg {
    stroke-width: 2.2;
    fill: none;
}

/* =========================================================
   Phase 25 – Authentication Lock Animation
========================================================= */

.mt-lock-box{
    text-align:center;
    padding:24px;
}

.mt-lock-icon{
    width:64px;
    height:64px;
    margin:0 auto 16px;
    color:#dc2626;
    animation:lockPulse 1.2s infinite;
}

.mt-lock-icon svg{
    width:64px;
    height:64px;
    stroke:#dc2626;
}

.mt-lock-message{
    font-size:15px;
    margin-bottom:20px;
    color:#374151;
}

.mt-lock-button{
    display:inline-block;
    padding:12px 20px;
    background:#0b1e3d;
    color:#fff;
    border-radius:8px;
    font-weight:600;
}

.mt-lock-button:hover{
    opacity:.9;
}

@keyframes lockPulse{
    0%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.1); opacity:.7; }
    100%{ transform:scale(1); opacity:1; }
}

/* =========================================================
   MENU GROUP VISUAL POLISH (Enterprise – Color Depth Layer)
========================================================= */

/*
|--------------------------------------------------------------------------
| Base Group Container
|--------------------------------------------------------------------------
*/

.menu-group{
  --group-accent: #2563eb; /* fallback */

  margin-bottom:14px;
  padding:8px 6px 10px 6px;

  border-bottom:1px solid rgba(0,0,0,0.04);
  border-left:3px solid var(--group-accent);

  border-radius:10px;

  background:linear-gradient(
    90deg,
    rgba(37,99,235,0.04) 0%,
    rgba(37,99,235,0.02) 40%,
    transparent 100%
  );
}

[data-theme="dark"] .menu-group{
  border-bottom:1px solid rgba(255,255,255,0.05);

  background:linear-gradient(
    90deg,
    rgba(37,99,235,0.10) 0%,
    rgba(37,99,235,0.04) 40%,
    transparent 100%
  );
}

/*
|--------------------------------------------------------------------------
| Group Accent Mapping
|--------------------------------------------------------------------------
*/

.menu-group[data-group="core"]{
  --group-accent:#2563eb;
}

.menu-group[data-group="activation intelligence"]{
  --group-accent:#7c3aed;
}

.menu-group[data-group="licensing"]{
  --group-accent:#16a34a;
}

.menu-group[data-group="usage & metrics"]{
  --group-accent:#0ea5e9;
}

.menu-group[data-group="security & iam"]{
  --group-accent:#dc2626;
}

.menu-group[data-group="infrastructure"]{
  --group-accent:#f59e0b;
}

.menu-group[data-group="developer"]{
  --group-accent:#475569;
}

.menu-group[data-group="governance"]{
  --group-accent:#0f766e;
}

/*
|--------------------------------------------------------------------------
| Title Styling
|--------------------------------------------------------------------------
*/

.menu-group-title{
  font-size:11px;
  letter-spacing:.06em;
  font-weight:700;
  padding-left:8px;
  opacity:.75;
  color:var(--group-accent);
}

/*
|--------------------------------------------------------------------------
| Icon Pill Inherits Group Accent
|--------------------------------------------------------------------------
*/

.menu-group .icon-pill{
  background:rgba(37,99,235,0.08);
  transition:all .2s ease;
}

.menu-group .icon-pill svg{
  stroke:var(--group-accent);
}

/*
|--------------------------------------------------------------------------
| Hover Enhances Accent
|--------------------------------------------------------------------------
*/

.menu-group a:hover .icon-pill{
  background:rgba(37,99,235,0.15);
}

/*
|--------------------------------------------------------------------------
| Active Item — Stronger Accent Depth
|--------------------------------------------------------------------------
*/

.menu-group a.active{
  background:rgba(37,99,235,0.10);
  box-shadow:
    inset 3px 0 0 var(--group-accent);
}

.menu-group a.active .icon-pill{
  background:rgba(37,99,235,0.18);
  box-shadow:0 0 0 2px rgba(0,0,0,0.02);
}

/*
|--------------------------------------------------------------------------
| Dark Mode Active Enhancement
|--------------------------------------------------------------------------
*/

[data-theme="dark"] .menu-group a.active{
  background:rgba(255,255,255,0.06);
}

[data-theme="dark"] .menu-group a.active .icon-pill{
  background:rgba(255,255,255,0.08);
}


/* =========================================================
   SIDEBAR SEARCH (Enterprise)
========================================================= */

.sidebar-search{
  padding:0 12px 16px;
}

.sidebar-search input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:14px;
  outline:none;
  transition:all .2s ease;
}

.sidebar-search input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

[data-theme="dark"] .sidebar-search input{
  background:#1e293b;
  color:#fff;
  border:1px solid rgba(255,255,255,.1);
}

/* Hide when collapsed */

body.sidebar-collapsed .sidebar-search{
  display:none;
}

/* Smooth fade for filtering */

.sidebar a.hidden-by-search{
  opacity:0;
  transform:translateX(-6px);
  pointer-events:none;
  height:0;
  padding:0;
  margin:0;
}

/* =========================================================
   SECURITY RISK GLOW
========================================================= */

@keyframes securityPulse{
  0%{
    box-shadow:0 0 0 0 rgba(220,38,38,.6);
  }
  70%{
    box-shadow:0 0 0 8px rgba(220,38,38,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(220,38,38,0);
  }
}

.menu-group.security-alert{
  border-left:3px solid #dc2626 !important;
  animation:securityPulse 1.8s infinite;
}

.menu-group.security-alert .menu-group-title{
  color:#dc2626 !important;
}

.menu-group.security-alert .icon-pill{
  background:#fee2e2 !important;
}

[data-theme="dark"] .menu-group.security-alert .icon-pill{
  background:rgba(220,38,38,.2) !important;
}

/* =========================================
   Footer Dark Mode Adaptation
========================================= */

body[data-theme="dark"] .mt-footer {
    --footer-bg: #0f172a;
    --footer-text: #94a3b8;
    --border-color: #1e293b;
}

/* =========================================================
   DARK MODE CONTRAST REFINEMENT LAYER
   Non-regressive visual separation upgrade
========================================================= */

[data-theme="dark"] {

  /* Improve base contrast */
  --bg: #0b1220;             /* slightly deeper */
  --panel: #162033;          /* lifted panel tone */
  --text: #e6edf6;
  --border: rgba(255,255,255,0.06);

}

/* =========================================================
   PANEL DEPTH SEPARATION
========================================================= */

[data-theme="dark"] .metric-card,
[data-theme="dark"] .mt-table,
[data-theme="dark"] .activity-feed,
[data-theme="dark"] .intelligence-console,
[data-theme="dark"] .mt-table-card {
  background: #162033;
  box-shadow:
  0 1px 0 rgba(255,255,255,.03) inset,
  0 8px 24px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.05);
}

/* =========================================================
   TABLE IMPROVEMENTS
========================================================= */

[data-theme="dark"] .mt-table thead {
  background:#1e293b;
}

[data-theme="dark"] .mt-table th {
  color:#cbd5e1;
  border-bottom:1px solid rgba(255,255,255,.08);
}

[data-theme="dark"] .mt-table td {
  color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] .mt-table tbody tr:nth-child(even){
  background:#111827;
}

[data-theme="dark"] .mt-table tbody tr:hover{
  background:#1f2937;
}

/* =========================================================
   DOCUMENTATION VIEWER FIX
========================================================= */

[data-theme="dark"] .documentation-console,
[data-theme="dark"] .doc-viewer,
[data-theme="dark"] .markdown-body {
  background:#162033;
  color:#e6edf6;
}

/* Improve markdown hierarchy */

[data-theme="dark"] .markdown-body h1,
[data-theme="dark"] .markdown-body h2,
[data-theme="dark"] .markdown-body h3 {
  color:#ffffff;
}

[data-theme="dark"] .markdown-body pre {
  background:#0f172a;
  border:1px solid rgba(255,255,255,.06);
}

[data-theme="dark"] .markdown-body code {
  background:#1e293b;
  color:#93c5fd;
}

/* =========================================================
   SIDEBAR BALANCE
========================================================= */

[data-theme="dark"] .sidebar {
  background:#0f172a;
}

[data-theme="dark"] .menu-group {
  background:linear-gradient(
    90deg,
    rgba(37,99,235,.08) 0%,
    rgba(37,99,235,.03) 40%,
    transparent 100%
  );
}

/* =========================================================
   DRAWER / ANALYTICS PANEL FIX
========================================================= */

[data-theme="dark"] .drawer,
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .modal-content {
  background:#162033;
  color:#e6edf6;
  border-left:1px solid rgba(255,255,255,.05);
}

/* =========================================================
   SEARCH SUGGESTIONS DARK FIX
========================================================= */

[data-theme="dark"] #globalSearchSuggestions {
  background:#162033;
  border:1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] .mt-search-item {
  background:#162033;
  color:#e6edf6;
}

[data-theme="dark"] .mt-search-item:hover {
  background:#1f2937;
}

/* =========================================================
   FOOTER DEPTH CORRECTION
========================================================= */

[data-theme="dark"] .mt-footer {
  background:#0f172a;
  border-top:1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] {
  --bg-0: #0b1220;     /* app background */
  --bg-1: #111827;     /* low surface */
  --bg-2: #162033;     /* default panel */
  --bg-3: #1e293b;     /* raised surface */
  --bg-4: #243045;     /* floating elements */
}

.metric-card,
.mt-table-card {
  background: var(--bg-2);
}

.drawer,
.modal-content {
  background: var(--bg-3);
}

#globalSearchSuggestions {
  background: var(--bg-4);
}

[data-theme="dark"] .sidebar {
  background:#0f172a;
  border-right:1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-1);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: rgba(59,130,246,.5);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

[data-theme="dark"] .text-muted {
  color: #94a3b8;
}

[data-theme="dark"] .icon-muted {
  opacity: .75;
}

[data-theme="dark"] .metric-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 12px 28px rgba(0,0,0,.5),
    0 0 0 1px rgba(37,99,235,.12);
}

/* =========================================================
   PHASE 36 – GLOBAL DARK MODE ELEVATION AUTHORITY
   Full surface normalization & contrast correction
   Non-regressive override layer (must remain LAST)
========================================================= */

[data-theme="dark"] {

  /* Text hierarchy */
  --text-strong: #f8fafc;
  --text-normal: #e6edf6;
  --text-muted: #94a3b8;

  /* Unified surface system */
  --surface-0: #0b1220;   /* app bg */
  --surface-1: #111827;   /* low */
  --surface-2: #162033;   /* cards */
  --surface-3: #1e293b;   /* raised */
  --surface-4: #243045;   /* floating */

}

/* ---------------------------------------------------------
   GLOBAL TEXT IMPROVEMENT
--------------------------------------------------------- */

[data-theme="dark"] body {
  color: var(--text-normal);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
  color: var(--text-strong);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .mt-empty,
[data-theme="dark"] .activity-time,
[data-theme="dark"] .activity-actor {
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   HARD-CODED WHITE BACKGROUND FIXES
--------------------------------------------------------- */

[data-theme="dark"] .modal-content,
[data-theme="dark"] .drawer,
[data-theme="dark"] .mt-table-card,
[data-theme="dark"] .activity-feed,
[data-theme="dark"] .mt-command-box,
[data-theme="dark"] .dev-tab,
[data-theme="dark"] .responsive-table th {
  background: var(--surface-3) !important;
  color: var(--text-normal);
}

[data-theme="dark"] .responsive-table tr:hover {
  background: var(--surface-2);
}

/* ---------------------------------------------------------
   TABLE HEADER READABILITY
--------------------------------------------------------- */

[data-theme="dark"] .mt-table th,
[data-theme="dark"] .responsive-table th {
  color: #cbd5e1;
  background: var(--surface-3);
}

/* ---------------------------------------------------------
   COMMAND PALETTE FIX
--------------------------------------------------------- */

[data-theme="dark"] #mt-command {
  background: rgba(0,0,0,.55);
}

[data-theme="dark"] .mt-command-item:hover,
[data-theme="dark"] .mt-command-item.active {
  background: var(--surface-2);
}

/* ---------------------------------------------------------
   ALERTS & BANNERS ADAPTATION
--------------------------------------------------------- */

[data-theme="dark"] .integrity-banner {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text-normal);
}

[data-theme="dark"] .integrity-banner.red {
  background: rgba(220,38,38,.12);
  color: #f87171;
}

[data-theme="dark"] .mt-success {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: #4ade80;
}

/* ---------------------------------------------------------
   BUTTON VISIBILITY
--------------------------------------------------------- */

[data-theme="dark"] .primary-btn {
  background: #2563eb;
  color: #ffffff;
}

[data-theme="dark"] .primary-btn:hover {
  background: #3b82f6;
}

/* ---------------------------------------------------------
   FORM FIELD CONTRAST
--------------------------------------------------------- */

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-1);
  color: var(--text-normal);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

/* ---------------------------------------------------------
   DEV TAB FIX
--------------------------------------------------------- */

[data-theme="dark"] .dev-tab {
  background: var(--surface-2);
  color: var(--text-normal);
  border: 1px solid rgba(255,255,255,.05);
}

[data-theme="dark"] .dev-tab:hover {
  background: var(--surface-3);
}

[data-theme="dark"] .dev-tab.active {
  background: #2563eb;
  color: #ffffff;
}

/* ---------------------------------------------------------
   ACTIVITY FEED TEXT STRENGTH
--------------------------------------------------------- */

[data-theme="dark"] .activity-header {
  color: var(--text-strong);
}

/* ---------------------------------------------------------
   LOGIN CARD DARK SAFE (if theme toggled pre-login)
--------------------------------------------------------- */

[data-theme="dark"] .mt-login-card {
  background: var(--surface-3);
  color: var(--text-normal);
}

[data-theme="dark"] .mt-login-card input {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-normal);
}

/* =========================================================
   PHASE 37 – DARK MODE BUTTON CONTRAST AUTHORITY
   Fixes hover invisibility issue
   Must remain LAST
========================================================= */

[data-theme="dark"] button,
[data-theme="dark"] .primary-btn,
[data-theme="dark"] .dev-tab,
[data-theme="dark"] .responsive-table button {

  background: var(--surface-2);
  color: var(--text-normal);
  border: 1px solid rgba(255,255,255,.08);
}

/* Hover = raise contrast, never lighten to white */
[data-theme="dark"] button:hover,
[data-theme="dark"] .primary-btn:hover,
[data-theme="dark"] .dev-tab:hover,
[data-theme="dark"] .responsive-table button:hover {

  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* Prevent accidental white inheritance */
[data-theme="dark"] button:focus,
[data-theme="dark"] button:active {
  color: #ffffff;
}

.pw-toggle {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    opacity:0.6;
}

.pw-meter {
    height:6px;
    margin-top:8px;
    background:#e2e8f0;
    border-radius:4px;
    overflow:hidden;
}

#strengthBar {
    height:100%;
    width:0%;
    transition:all .3s ease;
}

.pw-meta {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-top:5px;
}

.pw-req div {
    font-size:13px;
    margin-top:4px;
}

.pw-match {
    display:block;
    margin-top:6px;
}

.policy-box {
    background: #111827; /* slightly different from header */
    border: 1px solid #334155;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.policy-box strong {
    color: #e2e8f0; /* brighter */
}

.policy-box span,
.policy-box div {
    color: #cbd5f5; /* readable light text */
}

.policy-box.low { border-left: 4px solid #16a34a; }
.policy-box.medium { border-left: 4px solid #f59e0b; }
.policy-box.high { border-left: 4px solid #dc2626; }

.pw-reject {
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #1e293b;
    border: 1px solid #334155;
    font-size: 13px;
}

.pw-reject ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.pw-reject li {
    color: #f87171;
    margin-bottom: 4px;
}

/* ===== MT-PATCH-HIDDEN-SCOPE-002 ===== */
/* Generic hidden utility (NON-MODAL ONLY) */
.mt-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Modal-safe hidden (authoritative) */
.mt-modal.hidden {
    display: none !important;
    opacity: 0;
}

/* =========================================
   LOGIN PASSWORD TOGGLE (FINAL POLISH)
========================================= */

.pw-toggle{
    position:absolute;
    top:50%;
    right:8px;

    transform:translateY(-50%);

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    background:transparent;
    cursor:pointer;

    font-size:18px;
    line-height:1;

    z-index: 2;
}

/* Hover */
.pw-toggle:hover{
    opacity:0.8;
}

.mt-form input{
    height:44px;
    line-height:normal;

    padding-left:12px;
    padding-right:12px; /* 🔥 THIS FIXES OVERLAY */

    box-sizing:border-box;

    overflow:hidden;
    text-overflow:ellipsis;
}

.pw-toggle[aria-pressed="true"]{
    color:#2563eb; /* blue = visible */
}

[data-mt-input-safe="1"]{
    isolation:isolate;
}

.pw-field{
    position:relative;
 
    display:block;
    width:100%;
    max-width:100%;

    overflow:hidden; /* 🔥 CRITICAL FIX */

    grid-column:1 / -1;
    isolation:isolate;
}

/* 🔒 FINAL OVERRIDE – PW TOGGLE ISOLATION */
.mt-login-card .pw-toggle{
    all:unset; /* nukes inherited styles */

    position:absolute;
    top:37%;
    right:10px;
    transform:translateY(-50%);

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:3;

    font-size:18px;

    line-height:1;
}

.pw-field input{
    display:block;
    width:100%;
    height:44px;

    padding:0 52px 0 12px;

    border-radius:8px;
    background:#fff;

    position:relative;
    z-index:1;
}

.mt-form > div{
    min-width:0;   /* 🔥 prevents grid overflow */
    width:100%;
}

.mt-login-card{
    overflow:hidden; /* 🔥 stops bleed outside card */
}

.mt-login-card .mt-form{
    display:block; /* 🔥 disable grid only here */
}

/* =========================================================
   MODAL SYSTEM — ENTERPRISE RESPONSIVE (PHASE 56)
========================================================= */

.mt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* unified modal container */
.mt-modal-content {
    background: var(--panel);
    color: var(--text);

    padding: 20px;
    border-radius: var(--radius);

    width: 95%;
    max-width: 900px;

    max-height: 90vh;

    /* 🔥 FIX: REMOVE SCROLL CONFLICT */
    overflow: hidden;

    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* modal actions */
.mt-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: space-between;
}

/* mobile full-screen modal */
@media (max-width: 768px) {
    .mt-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
        max-height: 100%;
    }

    .mt-modal-scroll {
        max-height: 60vh;
    }
}

.mt-drawer {
   position: fixed; top: 0;
   right: 0; 
   width: 420px; 
   height: 100%; 
   background: #fff; 
   box-shadow: -2px 0 12px rgba(0,0,0,0.15); 
   z-index: 9999; 
   overflow-y: auto; 
}

.mt-timeline {
    margin-top:8px;
    padding:8px;
    background:#f8fafc;
    border-radius:8px;
}

.mt-timeline-item {
    font-size:12px;
    margin-bottom:6px;
}

.mt-timeline-item .meta {
    color:#64748b;
    font-size:11px;
}

/* 🔥 FORCE DISABLED VISUAL STATE */

button:disabled,
button[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Optional: normalize all button types */
.primary-btn:disabled,
.mt-btn:disabled {
    background: #94a3b8 !important;
    color: #e2e8f0 !important;
}

/* 🔥 UNIFIED DISABLED STATE */

.mt-disabled,
button:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #94a3b8 !important;
    color: #e2e8f0 !important;
}

.text-muted {
    color: #94a3b8;
    font-style: italic;
}

.dev-tabs {
    display: flex;
    flex-wrap: wrap; /* 🔥 critical */
    gap: 8px;
}

.dev-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f3f4f6;
    text-decoration: none;
    font-size: 13px;
}

.dev-tab.active {
    background: #2563eb;
    color: #fff;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    .dev-tabs {
        flex-direction: column;
    }
}

.dev-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 1024px) {
    .dev-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@media (max-width: 640px) {

    /* =====================================================
       DO NOT FULLY HIDE TABS — SCROLL INSTEAD
    ===================================================== */

    .dev-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;

        /* mobile scroll UX */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dev-tabs::-webkit-scrollbar {
        display: none;
    }

    /* OPTIONAL dropdown fallback */
    .dev-tabs-dropdown {
        display: block;
        width: 100%;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
    }
}

.dev-tabs-dropdown {
    display: none;
}

/* =========================================================
   FINAL OVERRIDE — DEV TABS GRID (MANDATORY)
========================================================= */

.dev-tabs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.dev-tab {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
    text-align: center;
}

#sidebar[data-mt-state="locked"] {
    opacity: 0.6;
    pointer-events: none;
}

#sidebar[data-mt-state="error"] {
    opacity: 0.8;
}

.mt-integrity-failure {
    padding:16px;
    background:#7f1d1d;
    color:#fff;
    font-weight:600;
    border-left:4px solid #ef4444;
}

.mt-integrity-sub {
    margin-top:6px;
    font-size:13px;
    font-weight:500;
    opacity:0.9;
}

/* ===== MT-PATCH-FIRST-SECTION-COLLAPSE-002 ===== */
.mt-section{
  margin-top:32px;
}

/* Remove margin if first element */
.content > .mt-section:first-child{
  margin-top:0;
}

/* =========================================================
   Mandatag Dashboard Risk Pulse (Phase 68 Hardening)
   - Moves dynamic style out of PHP
   - Deterministic CSS control
========================================================= */

.metric-card.risk-high #riskGauge {
    animation: mt-risk-pulse 1.5s infinite;
}

@keyframes mt-risk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.6); }
    70%  { box-shadow: 0 0 0 20px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

#riskGauge {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

input[data-format="recovery-code"]{
    font-family: monospace;
    letter-spacing: 2px;
    font-size: 16px;
}

.input-error{
border:1px solid #ef4444 !important;
background:#fee2e2;
}

/* ===== MT-PATCH-API-EXPLORER-CSS-012 START ===== */
/* =========================================================
   MT-PATCH-API-EXPLORER-SAFE-MERGE-014
   Scoped Swagger + API Explorer (Non-Regressive)
   Placement: END OF FILE ONLY
========================================================= */

/* ---------- PAGE STRUCTURE ---------- */

.mt-page-title{
  margin-bottom:20px;
}

.mt-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:30px 0 10px;
  gap:10px;
  flex-wrap:wrap; /* mobile safety */
}

.mt-section-title{
  margin-top:30px;
}

/* ---------- HASH FIX (NO CONFLICT) ---------- */

.metric-card .hash-value{
  font-family:monospace;
  word-break:break-all;
  overflow-wrap:anywhere;
  font-size:12px;

  max-height:80px;
  overflow-y:auto;

  white-space:normal; /* overrides global nowrap safely */
}

/* ---------- SWAGGER CONTAINER (FULLY SCOPED) ---------- */

.swagger-container{
  padding:0; /* align with card */
  overflow:hidden;
}

/* HARD containment */
.swagger-container #swagger-ui{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  margin-top:16px;
  border-radius:12px;
}

/* Prevent layout bleed */
.swagger-container .swagger-ui{
  max-width:100%;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Hide Swagger top bar (safe) */
.swagger-container .swagger-ui .topbar{
  display:none;
}

/* Internal spacing */
.swagger-container .swagger-ui .wrapper{
  padding:20px;
}

/* Operation cards polish */
.swagger-container .swagger-ui .opblock{
  border-radius:8px;
}

/* Box model isolation */
.swagger-container #swagger-ui *,
.swagger-container .swagger-ui *{
  box-sizing:border-box;
}

/* ---------- API CONSOLE ---------- */

.api-console{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.api-console input,
.api-console select,
.api-console textarea{
  width:100%;
  max-width:100%;
}

/* Prevent overflow */
.api-console textarea{
  height:120px;
  resize:vertical;
}

/* Response */
.mt-response-box{
  background:#0f172a;
  color:#e5e7eb;
  padding:15px;

  overflow-x:auto;
  border-radius:8px;
}

/* ---------- RAW SPEC ---------- */

.mt-raw-spec{
  background:#0f172a;
  color:#e5e7eb;
  padding:20px;

  overflow-x:auto;
  border-radius:8px;
}

/* ---------- BUTTON SIZE (SAFE EXTENSION) ---------- */

.primary-btn.small{
  font-size:12px;
  padding:6px 10px;
}

/* ---------- MOBILE HARDENING ---------- */

@media (max-width:768px){

  .swagger-container #swagger-ui{
    margin-top:10px;
  }

  .mt-section-header{
    flex-direction:column;
    align-items:flex-start;
  }

}

/* ---------- DARK MODE SAFE ---------- */

[data-theme="dark"] .swagger-container .swagger-ui{
  background:transparent;
}

[data-theme="dark"] .mt-response-box,
[data-theme="dark"] .mt-raw-spec{
  background:#0b1220;
}

/* =========================================================
   END PATCH
========================================================= */
/* ===== MT-PATCH-API-EXPLORER-CSS-012 END ===== */

/* ===== MT-PATCH-SPLIT-PANE-CSS-022 START ===== */

.api-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

.api-pane {
  min-width: 0;
}

.api-pane-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#requestHistory {
  list-style: none;
  padding: 0;
  margin: 0;
}

#requestHistory li {
  font-size: 12px;
  padding: 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

#requestHistory li:hover {
  background: rgba(0,0,0,0.04);
}

@media (max-width: 1024px){
  .api-split {
    grid-template-columns: 1fr;
  }
}

/* ===== MT-PATCH-SPLIT-PANE-CSS-022 END ===== */

/* 🔥 FINAL Z-STACK AUTHORITY */
.modal { z-index:10000 !important; }
.drawer { z-index:9900 !important; }
#mt-command { z-index:9800 !important; }


/* =========================================================
   [MT_PATCH_UI_POLISH_SAFE_V2]
   Non-destructive, contract-aligned UI polish
   - NO overrides of existing core styles
   - Scoped enhancements only
========================================================= */

/* ---------- COMPACT ACTION BUTTONS (OPT-IN ONLY) ---------- */

.mt-btn-sm,
.primary-btn-sm{
    padding:6px 10px;
    font-size:12px;
    border-radius:6px;
}

/* ---------- BADGE ENHANCEMENT (NO COLOR OVERRIDE) ---------- */

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

/* Add subtle state glow (no color conflict) */

.badge-active{
    box-shadow:0 0 0 1px rgba(22,163,74,0.25);
}

.badge-suspended{
    box-shadow:0 0 0 1px rgba(245,158,11,0.25);
}

.badge-revoked{
    box-shadow:0 0 0 1px rgba(220,38,38,0.25);
}

.badge-expired{
    box-shadow:0 0 0 1px rgba(100,116,139,0.25);
}

/* ---------- ROW STATE VISUALIZATION ---------- */

tr[data-license-state="revoked"]{
    background:rgba(220,38,38,0.04);
}

tr[data-license-state="suspended"]{
    background:rgba(245,158,11,0.04);
}

tr[data-license-state="expired"]{
    background:rgba(100,116,139,0.04);
}

/* ---------- ACTION CONTAINER LAYOUT ---------- */

td[data-action-container]{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

/* ---------- LOADING ROW POLISH ---------- */

.mt-btn-sm {
    margin: 3px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

[data-action-container],
.mt-table td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mt-btn-sm:hover {
    opacity: 0.9;
}

.mt-table td:last-child {
    min-width: 220px;
}

/* =========================================================
   MT_PATCH_MODAL_SCROLL_UNIFIED_V4 (FINAL — HARD LOCK)
   - Single scroll authority
   - Sticky header guaranteed
   - No cascade conflicts
========================================================= */

.mt-modal-scroll {
    position: relative;

    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;

    /* critical for sticky isolation */
    isolation: isolate;
}

/* 🔒 MUST be separate for sticky to work */
.mt-modal-scroll table {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
}

/* 🔥 FORCE sticky ONLY here */
.mt-modal-scroll thead {
    position: sticky;
    top: 0;
    z-index: 50; /* above rows */
}

/* 🔥 EACH CELL STICKS (safer cross-browser) */
.mt-modal-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 60;

    background: var(--panel);

    /* visual separation */
    box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}

/* 🔒 PREVENT ROW OVERLAP */
.mt-modal-scroll tbody tr {
    position: relative;
    z-index: 1;
}

/* ===== MT_PATCH_HIDDEN_AUTHORITATIVE_V1 ===== */

/* 🔒 GLOBAL HIDDEN CONTRACT (MANDATORY) */
.hidden {
    display: none !important;
}

/* 🔒 REJECTION BOX HARD LOCK */
#rejectionBox.hidden {
    display: none !important;
}

#rejectionBox {
    display: none; /* default state (fail-safe) */
}