/* =========================================================
   Swiss SaaS Unified Theme — FULL CODE (drop-in replacement)
   Paste this as your entire: css/swiss-saas.css
   Load AFTER Bootstrap + any legacy CSS so it overrides.
========================================================= */

:root{
  /* Base surfaces */
  --saas-bg:#f3f6fa;
  --saas-surface:#ffffff;

  /* Text */
  --saas-text:#1e293b;
  --saas-muted:#6b7280;
  --saas-head:#0f172a;
  --saas-head2:#1e293b;

  /* Brand (Swiss deep navy) */
  --saas-primary:white;
  --saas-primary-light:#14243a;

  /* Accent (construction green – premium tone) */
  --saas-accent:#1f7a3d;
  --saas-accent-soft:#e6f4ec;

  /* Borders */
  --saas-border:#e4e9f2;
  --saas-border2:#d8e0ec;

  /* Table header */
  --saas-thead:#f7f9fc;

  /* Elevation */
  --saas-shadowSoft:0 4px 14px rgba(15,23,42,.04);
  --saas-shadow:0 10px 30px rgba(15,23,42,.08);

  --saas-radius:14px;
  --saas-radiusSm:10px;
}

/* =========================
   Global
========================= */
html,body{
  background:var(--saas-bg)!important;
  color:var(--saas-text)!important;
}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:inherit;}
hr{border-color:var(--saas-border)!important;}
.text-muted, small, .small{color:var(--saas-muted)!important;}
h1,h2,h3,h4,h5{color:var(--saas-head)!important;}

/* =========================
   Layout shell (sidebar + content)
========================= */
.sidebar{
  background:var(--saas-primary)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:8px 0 24px rgba(2,6,23,.25)!important;
}
.sidebar .brand{


}
.sidebar .brand .title{
  color:red important;
  font-weight:900!important;
  letter-spacing:-.3px;
}
.sidebar .brand .sub{
  color:gray !important;
  font-weight:600!important;
}
.sidebar .sidebar-nav a{
  color:gray !important;
  font-weight:700!important;
  border-radius:12px!important;
  transition:background .15s ease, transform .15s ease;
}
.sidebar .sidebar-nav a:hover{
  background: #EDEDE8 !important;
}
.sidebar .sidebar-nav a.active{
  background:var(--saas-primary-light)!important;
  border-left:3px solid var(--saas-accent)!important;
}
.sidebar .badge,
.sidebar .badge-pill{
  background:red important;
  color:var(--saas-primary)!important;
  font-weight:900!important;
  border-radius:999px!important;
}

/* Logout / danger buttons in sidebar */
.sidebar .btn-danger,
.sidebar .btn.btn-danger{
  background:#ef4444!important;
  border-color:#ef4444!important;
  color:#fff!important;
}

/* Mobile topbar (if present) */
.mobile-topbar{
  background:var(--saas-surface)!important;
  border-bottom:1px solid var(--saas-border)!important;
  box-shadow:var(--saas-shadowSoft)!important;
}
.mobile-topbar .mobile-title{
  color:var(--saas-head)!important;
  font-weight:900!important;
}
.sidebar-toggle{
  border-radius:12px!important;
}

/* Main content wrapper */
.content{
  padding:22px 22px 28px!important;
}
.page-header{
  margin-bottom:16px!important;
}
.page-title{
  font-size:38px!important;
  line-height:1.1!important;
  letter-spacing:-0.6px!important;
  color:var(--saas-head)!important;
  font-weight:900!important;
}
.page-subtitle,
.page-header .text-muted{
  color:var(--saas-muted)!important;
  font-weight:700!important;
}

/* =========================
   Cards / containers
========================= */
.card,
.dashboard-card,
.modal-content,
.alert,
.jumbotron{
  background:var(--saas-surface)!important;
  border:1px solid var(--saas-border)!important;
  border-radius:var(--saas-radius)!important;
  box-shadow:var(--saas-shadowSoft)!important;
  transition:box-shadow .2s ease, transform .15s ease;
}
.card:hover,
.dashboard-card:hover{
  box-shadow:var(--saas-shadow)!important;
}
.card-header{
  background:transparent!important;
  border-bottom:1px solid var(--saas-border)!important;
  font-weight:900!important;
  color:var(--saas-head2)!important;
}
.card-footer{
  background:transparent!important;
  border-top:1px solid var(--saas-border)!important;
}

/* Fix white-on-white inside cards (common legacy issue) */
.card, .card *{
  color:inherit;
}
.card .text-white, .text-white{
  color:var(--saas-head)!important;
}

/* KPI cards (optional markup) */
.kpi-card{
  background:var(--saas-surface)!important;
  border:1px solid var(--saas-border)!important;
  border-radius:var(--saas-radius)!important;
  box-shadow:var(--saas-shadowSoft)!important;
  padding:16px 16px 14px!important;
}
.kpi-card .kpi-title{
  color:var(--saas-head2)!important;
  font-weight:900!important;
}
.kpi-card .kpi-value{
  color:var(--saas-head)!important;
  font-weight:900!important;
  letter-spacing:-.6px!important;
}

/* =========================
   Forms / inputs
========================= */
.form-control,
.form-select,
.custom-select,
input, select, textarea{
  border-radius:var(--saas-radiusSm)!important;
  border:1px solid var(--saas-border2)!important;
  background:#fff!important;
  color:var(--saas-head)!important;
  box-shadow:none!important;
}
::placeholder{color:#9aa6b2!important;}
.form-control:focus,
.form-select:focus,
.custom-select:focus,
input:focus, select:focus, textarea:focus{
  border-color:#b7c7de!important;
  box-shadow:0 0 0 .2rem rgba(15,40,80,.08)!important;
}

/* =========================
   Buttons
========================= */
.btn{
  border-radius:12px!important;
  font-weight:800!important;
}
.btn-primary{
  background:var(--saas-primary)!important;
  border-color:var(--saas-primary)!important;
  color:#fff!important;
}
.btn-primary:hover{
  background:var(--saas-primary-light)!important;
  border-color:var(--saas-primary-light)!important;
}
.btn-outline-primary{
  border:1px solid var(--saas-border2)!important;
  color:var(--saas-head2)!important;
  background:#fff!important;
}
.btn-outline-primary:hover{
  background:#f4f7fb!important;
  border-color:#cfd9e8!important;
  color:var(--saas-head)!important;
}
.btn-success{
  background:var(--saas-accent)!important;
  border-color:var(--saas-accent)!important;
  color:#fff!important;
}
.btn-success:hover{filter:brightness(.95);}

/* Action buttons that look “empty” */
.btn-light, .btn-outline-secondary, .btn-secondary{
  color:var(--saas-head2)!important;
}

/* =========================
   Tables (Swiss clean)
========================= */
.table-responsive,
.table-wrap{
  background:var(--saas-surface)!important;
  border:1px solid var(--saas-border)!important;
  border-radius:var(--saas-radius)!important;
  box-shadow:var(--saas-shadowSoft)!important;
  overflow:hidden!important;
}
.table{
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.table thead th{
  background:var(--saas-thead)!important;
  color:var(--saas-head2)!important;
  font-weight:800!important;
  font-size:13.5px!important;
  text-transform:uppercase;
  letter-spacing:.6px;
  border-bottom:1px solid var(--saas-border)!important;
  padding:16px!important;
  white-space:nowrap;
  vertical-align:middle;
}
.table tbody td{
  border-top:1px solid var(--saas-border)!important;
  padding:16px!important;
  vertical-align:middle!important;
  font-weight:700!important;
  color:var(--saas-head)!important;
  background:transparent!important;
}
.table tbody tr{
  transition:background .15s ease;
}
.table tbody tr:hover{
  background:#f9fbfd!important;
}
.table-striped tbody tr:nth-of-type(odd){
  background:transparent!important;
}

/* Checkbox/radio contrast */
.table input[type="checkbox"],
.table input[type="radio"]{
  accent-color:var(--saas-accent);
}

/* =========================
   Status pills / badges
========================= */
.status-pill, .pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 14px!important;
  border-radius:10px!important;
  font-weight:900!important;
  font-size:14px!important;
  letter-spacing:.2px;
  line-height:1;
}

/* Premium “soft” pills (modern SaaS) */
.status-pill.ok, .pill.ok,
.badge-success{
  background:var(--saas-accent-soft)!important;
  color:var(--saas-accent)!important;
  border:1px solid #cce9d9!important;
}
.status-pill.off, .pill.off,
.badge-secondary, .badge-light{
  background:#eef2f7!important;
  color:#64748b!important;
  border:1px solid #d9e1ec!important;
}

/* Keep danger readable */
.badge-danger{
  background:#fee2e2!important;
  color:#b91c1c!important;
  border:1px solid #fecaca!important;
}

/* =========================
   Person cell pattern (optional)
========================= */
.person{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 8px 16px rgba(15,23,42,.10);
}

/* Icons inheriting wrong colors */
i, svg, .fa, .fas, .far{
  color:inherit;
}

/* =========================
   Modals
========================= */
.modal-header{
  border-bottom:1px solid var(--saas-border)!important;
}
.modal-footer{
  border-top:1px solid var(--saas-border)!important;
}

/* =========================
   Responsive tweaks
========================= */
@media (max-width: 992px){
  .page-title{font-size:32px!important;}
  .content{padding:18px 14px 22px!important;}
}
@media (max-width: 768px){
  .page-title{font-size:28px!important;}
  .table thead th,
  .table tbody td{
    padding:12px!important;
  }
}

/* ===== FIX: table cut off / only few rows visible ===== */

/* Never clamp the table container height */
.table-responsive,
.table-wrap,
.card,
.card-body,
.content {
  height: auto !important;
  max-height: none !important;
}

/* Allow scrolling when needed instead of cutting content */
.table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* If any wrapper is hiding overflow, disable it for tables */
.table-wrap,
.card-body{
  overflow: visible !important;
}

/* If you have any sticky headers on table wrappers, disable them */
.table thead th{
  position: static !important;
}

/* Some pages use a fixed viewport container – neutralize */
.main,
.main-content,
.page-content,
.wrapper,
.container-fluid{
  overflow: visible !important;
}

/* =========================================================
   FIX: Dropdown menus clipped inside table-responsive
   (push.php status dropdown)
========================================================= */

/* Allow dropdown to overflow table area */
.table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Some wrappers still clip dropdown */
.table-wrap,
.card-body{
  overflow: visible !important;
}

/* Ensure dropdown renders above */
.dropdown,
.btn-group{
  position: relative !important;
}

.dropdown-menu{
  z-index: 9999 !important;
}

/* If your dropdown is in the last column, align it inside viewport */
.table td:last-child .dropdown-menu{
  right: 0 !important;
  left: auto !important;
}

/* FIX: dropdown clipped inside table (push.php) */
.table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important; /* key */
}

.enter-btn{
  background: linear-gradient(135deg,#0b1f3b,#1f3a6d) !important;
  border: none !important;
  color:#fff !important;
  font-weight:600;
  border-radius:10px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.25);
  transition:.2s ease;
}


/* =========================================================
   App-specific fixes (tables, dropdowns, action buttons)
========================================================= */

/* Ensure primary buttons never become white via legacy CSS */
.btn-primary,
a.btn-primary,
.enter-btn{
  background-color: var(--saas-primary) !important;
  border-color: var(--saas-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.enter-btn:hover{
  background-color: var(--saas-primary-light) !important;
  border-color: var(--saas-primary-light) !important;
  color: #ffffff !important;
}

/* Prevent utility text colors from breaking buttons */
.btn.text-info, .btn.text-primary, .btn.text-success, .btn.text-danger,
a.btn.text-info, a.btn.text-primary, a.btn.text-success, a.btn.text-danger{
  color:#ffffff !important;
}

/* Let dropdown menus escape table wrappers (CSS part) */
.table-responsive{
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.table-wrap, .card-body, .dashboard-card{
  overflow: visible !important;
}
.dropdown-menu{
  z-index: 99999 !important;
}

/* Keep last-column dropdown inside viewport */
.table td:last-child .dropdown-menu{
  right: 0 !important;
  left: auto !important;
}

/* Avoid accidental row cut-off from fixed heights */
.table-responsive[style*="max-height"],
.table-wrap[style*="max-height"]{
  max-height: none !important;
}
