/* ================================
   NebuloX Console Theme (FULL)
   Static CSS (no Tailwind/Vite needed)
   ================================ */

:root{
  --nx-bg: #f5f6fa;
  --nx-card: #ffffff;
  --nx-border: rgba(0,0,0,.08);
  --nx-border-strong: rgba(0,0,0,.12);
  --nx-text: #111827;
  --nx-text-soft: #6b7280;

  --nx-accent: #6d28d9;
  --nx-accent-soft: rgba(109,40,217,.12);

  --nx-success-bg: #ecfdf5;
  --nx-success-border: #a7f3d0;
  --nx-success-text: #065f46;

  --nx-danger-bg: #fef2f2;
  --nx-danger-border: #fecaca;
  --nx-danger-text: #991b1b;
}

/* ================================
   Base / Reset
   ================================ */

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--nx-bg);
  color:var(--nx-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
               "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{
  box-sizing:border-box;
}

a{
  color:inherit;
}

hr{
  border:none;
  border-top:1px solid var(--nx-border);
  margin:16px 0;
}

/* ================================
   Layout system (fixed)
   ================================ */

.nx-body{
  min-height:100vh;
}

.nx-shell{
  min-height:100vh;
  display:flex;
  flex-direction:row;
}

/* Sidebar */
.nx-sidebar{
  width:260px;
  min-height:100vh;
  background:#fff;
  border-right:1px solid var(--nx-border);
  padding:16px;

  display:flex;
  flex-direction:column;
}

.nx-sidebar-head{
  padding:6px 4px 14px 4px;
  border-bottom:1px solid var(--nx-border);
  margin-bottom:12px;
}

.nx-brand{
  font-weight:900;
  letter-spacing:.08em;
}

.nx-brand-sub{
  font-size:12px;
  color:var(--nx-text-soft);
  margin-top:4px;
}

.nx-sidebar-section{
  font-size:12px;
  color:var(--nx-text-soft);
  font-weight:800;
  letter-spacing:.08em;
  margin:10px 4px 6px;
}

.nx-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nx-sidebar-foot{
  margin-top:auto; /* push to bottom */
  padding-top:12px;
  border-top:1px solid var(--nx-border);
}

/* Main */
.nx-main{
  flex:1;
  min-width:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Top bar */
.nx-topbar{
  background:#fff;
  border-bottom:1px solid var(--nx-border);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nx-topbar-title{
  font-size:18px;
  font-weight:800;
}

.nx-topbar-subtitle{
  font-size:13px;
  color:var(--nx-text-soft);
  margin-top:2px;
}

.nx-topbar-user{
  font-size:13px;
  color:var(--nx-text-soft);
}

/* Content */
.nx-content{
  padding:18px;
  flex:1;
}

/* ================================
   Navigation
   ================================ */

.nx-nav{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--nx-text);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:all .15s ease;
}

.nx-nav:hover{
  background:var(--nx-accent-soft);
}

.nx-nav-active{
  background:var(--nx-accent-soft);
  font-weight:800;
}

/* ================================
   Cards
   ================================ */

.nx-card{
  background:var(--nx-card);
  border:1px solid var(--nx-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  overflow:hidden;
}

.nx-card-header{
  padding:16px 18px;
  border-bottom:1px solid var(--nx-border);
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
}

.nx-card-body{
  padding:18px;
}

/* Stats (optional) */
.nx-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nx-stat-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--nx-text-soft);
  font-weight:800;
}

.nx-stat-value{
  font-size:22px;
  font-weight:900;
}

.nx-stat-sub{
  font-size:12px;
  color:var(--nx-text-soft);
}

/* ================================
   Forms
   ================================ */

.nx-label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:var(--nx-text-soft);
  margin-bottom:6px;
}

.nx-input,
.nx-select,
.nx-textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--nx-border-strong);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  transition:border .15s ease, box-shadow .15s ease;
}

.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus{
  outline:none;
  border-color:var(--nx-accent);
  box-shadow:0 0 0 3px rgba(109,40,217,.14);
}

/* ================================
   Buttons
   ================================ */

.nx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  text-decoration:none;
  user-select:none;
}

.nx-btn-primary{
  background:var(--nx-accent);
  color:#fff;
}

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

.nx-btn-secondary{
  background:#fff;
  border-color:var(--nx-border-strong);
  color:var(--nx-text);
}

.nx-btn-secondary:hover{
  background:#f9fafb;
}

.nx-btn-danger{
  background:#dc2626;
  color:#fff;
}

/* helpers */
.nx-w-full{width:100%}
.nx-mt-8{margin-top:8px}
.nx-mt-12{margin-top:12px}
.nx-mb-16{margin-bottom:16px}

/* ================================
   Alerts
   ================================ */

.nx-alert{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--nx-border);
  font-size:14px;
}

.nx-alert-success{
  background:var(--nx-success-bg);
  border-color:var(--nx-success-border);
  color:var(--nx-success-text);
}

.nx-alert-danger{
  background:var(--nx-danger-bg);
  border-color:var(--nx-danger-border);
  color:var(--nx-danger-text);
}

/* ================================
   Tables
   ================================ */

.nx-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

.nx-table thead th{
  text-align:left;
  padding:12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--nx-text-soft);
  border-bottom:1px solid var(--nx-border);
  background:#fafafa;
  font-weight:900;
}

.nx-table tbody td{
  padding:12px;
  border-bottom:1px solid var(--nx-border);
  vertical-align:middle;
}

.nx-table tbody tr:hover{
  background:#fafafa;
}

/* Scroll helper */
.nx-scroll{overflow:auto}

/* ================================
   Badges
   ================================ */

.nx-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid var(--nx-border);
  background:#fff;
}

.nx-badge-ok{
  background:#dcfce7;
  color:#166534;
  border-color:#86efac;
}

.nx-badge-bad{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}

/* ================================
   Lists / text helpers
   ================================ */

.nx-muted{
  color:var(--nx-text-soft);
  font-size:12px;
}

.nx-list{
  margin:0;
  padding-left:18px;
}

/* ================================
   Grids (no Tailwind)
   ================================ */

.nx-grid{
  display:grid;
  gap:16px;
}

.nx-grid-2{
  grid-template-columns:1fr;
}

@media (min-width: 1000px){
  .nx-grid-2{
    grid-template-columns:1fr 1fr;
  }
}

/* Form grid */
.nx-form-grid-2{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}

@media (min-width: 900px){
  .nx-form-grid-2{
    grid-template-columns:1fr 1fr;
  }
}

/* ================================
   Responsive: collapse sidebar
   (optional - keep visible by default)
   ================================ */

@media (max-width: 820px){
  .nx-sidebar{
    width:220px;
  }
}

/* ================================
   Topbar stacked buttons (mobile)
   Works with nebulox.blade.php
   ================================ */

/* Wrapper for right-side controls */
.nx-user-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Each dropdown anchor should be relative */
.nx-dd-wrap{
  position:relative;
  display:inline-flex;
}

/* Buttons on topbar */
.nx-topbtn{
  white-space:nowrap;
}

/* Dropdown base (if not already present in layout css) */
.nx-user-dropdown{
  display:none;
  position:absolute;
  right:0;
  top:44px;
  background:#fff;
  border:1px solid var(--nx-border-strong);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:8px;
  min-width:190px;
  z-index:60;
}

.nx-user-dropdown a,
.nx-user-dropdown button{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}

.nx-user-dropdown a:hover,
.nx-user-dropdown button:hover{
  background:#f3f4f6;
}

/* Mobile: stack buttons, full width, hide title */
@media (max-width: 640px){
  .nx-topbar{
    align-items:flex-start;
    gap:10px;
  }

  /* Hide title when stacked */
  .nx-topbar-title{
    display:none;
  }
  .nx-topbar-subtitle{
    display:none;
  }

  .nx-user-wrap{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:8px;
  }

  .nx-dd-wrap{
    width:100%;
  }

  .nx-topbtn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  /* Full-width dropdowns */
  .nx-user-dropdown{
    left:0;
    right:0;
    width:100%;
    min-width:0;
  }
}

/* ================================
   Small compatibility aliases
   ================================ */

/* Your blade uses nx-alert-ok; your CSS uses nx-alert-success */
.nx-alert-ok{
  background:var(--nx-success-bg);
  border-color:var(--nx-success-border);
  color:var(--nx-success-text);
}