/* Wisender Panel - Pro UI (single stylesheet)
   Notes:
   - Uses existing class names from the project to avoid touching backend logic.
   - Works for auth pages (index/register) and app pages (dashboard/users/licenses/support).
*/

/* Font (optional) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --primary-color:#4A6CFD;
  --primary-hover:#2952FD;

  --bg-color:#f6f8fc;
  --surface:#ffffff;
  --surface-2:#fafbff;

  --sidebar-bg:#0f172a;
  --sidebar-bg-2:#111827;
  --sidebar-text:rgba(255,255,255,.78);
  --sidebar-text-active:#ffffff;

  --topbar-bg:rgba(255,255,255,.85);

  --border-color:#e5e7eb;
  --text-dark:#0f172a;
  --text-light:#64748b;

  --text-success:#16a34a;
  --text-danger:#ef4444;
  --text-warning:#f59e0b;

  --white:#ffffff;

  --radius-card:14px;
  --radius-input:12px;
  --radius-btn:12px;

  --shadow-sm:0 2px 12px rgba(15,23,42,.06);
  --shadow-md:0 14px 40px rgba(15,23,42,.10);

  --ring:0 0 0 4px rgba(74,108,253,.15);
}

*{margin:0;padding:0;box-sizing:border-box}
html, body{height:100%}
body{
  font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text-dark);
  background:var(--bg-color);
}

/* -------- Auth pages (index/register) -------- */
body.auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.auth-shell{
  width:100%;
  max-width:980px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:24px;
  align-items:stretch;
}

.auth-aside{
  border-radius:var(--radius-card);
  background:
    radial-gradient(900px 450px at 20% 10%, rgba(74,108,253,.35), transparent 60%),
    radial-gradient(800px 420px at 90% 90%, rgba(17,24,39,.35), transparent 55%),
    linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  color:#fff;
  padding:34px;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
}
.auth-aside .brand{
  display:flex;gap:12px;align-items:center;
  font-weight:700;font-size:20px;letter-spacing:.3px;
}
.auth-aside .brand img{width:42px;height:42px;border-radius:12px}
.auth-aside h2{font-size:30px;line-height:1.15;margin-top:28px}
.auth-aside p{margin-top:10px;color:rgba(255,255,255,.75);line-height:1.55}
.auth-aside .aside-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:28px;font-size:12px;color:rgba(255,255,255,.65)
}

.form-wrapper{width:100%}
.form-container{
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);
  padding:36px;
  text-align:left;
}

.logo-container{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.logo{width:44px;height:44px;border-radius:12px;object-fit:cover}
.form-container h1{
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
}
.form-container p{
  color:var(--text-light);
  margin-bottom:22px;
  font-size:14px;
  line-height:1.6;
}

.input-group{margin-bottom:16px}
.input-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:13px;
  color:rgba(15,23,42,.85);
}
.input-group input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-input);
  font-size:14px;
  background:var(--surface);
  transition: box-shadow .2s, border-color .2s, transform .1s;
}
.input-group input:focus{
  outline:none;
  border-color:var(--primary-color);
  box-shadow:var(--ring);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  transition: transform .06s, background .15s, box-shadow .15s, border-color .15s;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn-primary{background:var(--primary-color); color:#fff;}
.btn-primary:hover{background:var(--primary-hover);}
.btn-secondary{
  background:#fff;
  border-color:var(--border-color);
  color:var(--text-dark);
}
.btn-secondary:hover{border-color:#cbd5e1; box-shadow:var(--shadow-sm);}
.btn-danger{
  background:rgba(239,68,68,.12);
  color:var(--text-danger);
  border-color:rgba(239,68,68,.22);
}
.btn-danger:hover{background:rgba(239,68,68,.18)}
.btn-edit{
  background:rgba(74,108,253,.12);
  color:var(--primary-color);
  border-color:rgba(74,108,253,.22);
}
.btn-edit:hover{background:rgba(74,108,253,.18)}

.btn.full{width:100%}

.form-footer{
  margin-top:16px;
  font-size:13px;
  color:var(--text-light);
}
.form-footer a{
  color:var(--primary-color);
  text-decoration:none;
  font-weight:700;
}
.form-footer a:hover{text-decoration:underline}

.alert{
  padding:12px 14px;
  border-radius:var(--radius-input);
  border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.08);
  color:var(--text-danger);
  margin-bottom:16px;
  font-size:13px;
  line-height:1.5;
}
.alert-success{
  border-color:rgba(22,163,74,.20);
  background:rgba(22,163,74,.08);
  color:var(--text-success);
}
.alert-warning{
  border-color:rgba(245,158,11,.22);
  background:rgba(245,158,11,.10);
  color:var(--text-warning);
}

/* Responsive auth */
@media (max-width: 920px){
  .auth-shell{grid-template-columns:1fr; max-width:520px}
  .auth-aside{display:none}
}

/* -------- App layout -------- */
body.app{
  min-height:100vh;
}

.page-wrapper{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:270px;
  background:linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  color:var(--sidebar-text);
  display:flex;
  flex-direction:column;
  transition: width .2s ease, transform .2s ease;
  z-index:1000;
  border-right:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 18px;
  text-decoration:none;
  color:var(--sidebar-text-active);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-brand svg{width:22px;height:22px;opacity:.95}
.sidebar-brand span{font-weight:800; letter-spacing:.2px}
.sidebar-nav{
  list-style:none;
  padding:12px 10px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav-item{width:100%}
.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--sidebar-text);
  transition: background .15s, color .15s, transform .06s;
}
.nav-link .icon{width:18px;height:18px;opacity:.95}
.nav-link:hover{
  background:rgba(255,255,255,.07);
  color:var(--sidebar-text-active);
}
.nav-link.active{
  background:rgba(74,108,253,.20);
  color:var(--sidebar-text-active);
  border:1px solid rgba(74,108,253,.25);
}
.nav-link.active .icon{color:#fff}

/* Generic icon sizing (used outside sidebar too) */
.icon{
  width:20px;
  height:20px;
  display:inline-block;
  flex:0 0 auto;
}
svg.icon{width:20px;height:20px}

.main-content-wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar{
  position:sticky;
  top:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border-color);
  backdrop-filter: blur(10px);
}
.sidebar-toggle-btn{
  border:1px solid var(--border-color);
  background:var(--surface);
  width:40px;
  height:40px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  font-size:18px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.user-profile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--border-color);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.user-profile img{width:34px;height:34px;border-radius:12px;object-fit:cover}
.user-profile span{font-weight:700;font-size:13px;color:rgba(15,23,42,.85)}
.logout-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:var(--surface);
  color:rgba(15,23,42,.75);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
}
.logout-link svg{width:18px;height:18px}
.logout-link:hover{border-color:#cbd5e1;color:rgba(15,23,42,.9)}

.content-area{
  padding:18px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.content-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.content-header h1,
.section-title{
  font-size:22px;
  font-weight:800;
}
.content-header p{color:var(--text-light); margin-top:6px; font-size:13px; line-height:1.55}

/* -------- Support page -------- */
.support-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}
.support-card{
  grid-column: span 6;
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.support-card--wide{grid-column: span 12;}
.support-card-header{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border-color);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.support-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.support-card-header .icon{color:var(--primary-color)}
.support-card-header h2{
  font-size:14px;
  font-weight:800;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.support-card-body{padding:16px}

.support-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.support-item{margin:0}
.support-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:var(--surface-2);
  text-decoration:none;
  color:rgba(15,23,42,.86);
  font-weight:800;
  font-size:13px;
  transition: transform .06s, box-shadow .15s, border-color .15s;
}
.support-link:hover{
  transform: translateY(-1px);
  box-shadow:var(--shadow-sm);
  border-color:#cbd5e1;
}
.support-link .icon{color:rgba(15,23,42,.55)}
.support-link:hover .icon{color:var(--primary-color)}

.download-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:var(--primary-color);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(74,108,253,.22);
  transition: transform .06s, background .15s, box-shadow .15s;
}
.download-button:hover{background:var(--primary-hover); box-shadow:0 14px 30px rgba(74,108,253,.28)}
.download-button:active{transform: translateY(1px)}
.download-button .icon{color:#fff}

.changelog-entry{
  margin-top:12px;
  border:1px solid var(--border-color);
  border-radius:12px;
  background:var(--surface-2);
  padding:12px;
}
.changelog-entry h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:900;
  margin:0;
}
.changelog-entry .version{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(74,108,253,.14);
  color:var(--primary-color);
  border:1px solid rgba(74,108,253,.20);
  font-weight:900;
  font-size:12px;
}
.changelog-entry .date{
  display:block;
  margin-top:6px;
  color:var(--text-light);
  font-size:12px;
  font-weight:700;
}
.changelog-entry ul{
  margin:8px 0 0 18px;
  color:rgba(15,23,42,.82);
  font-size:13px;
  line-height:1.55;
}
.changelog-entry li{margin:4px 0}

@media (max-width: 980px){
  .support-card{grid-column: span 12;}
}

/* Stats/cards (dashboard & licenses) */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin: 14px 0 18px;
}
.stat-card, .card{
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  padding:16px;
  transition: transform .06s, box-shadow .15s, border-color .15s;
}
.stat-card:hover, .card:hover{box-shadow:var(--shadow-md); border-color:#dbe2ea}
.stat-card{display:flex; align-items:center; justify-content:space-between}
.card-info .card-title, .card-title{color:var(--text-light); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.card-info .card-value, .card-value{font-size:22px; font-weight:800; margin-top:6px; font-variant-numeric: tabular-nums;}
.card-icon{
  width:44px; height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(74,108,253,.12);
  color:var(--primary-color);
}
.card-icon svg{width:22px;height:22px}

@media (max-width: 1100px){
  .stats-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .stats-grid{grid-template-columns:1fr}
  .content-area{padding:14px}
}

/* Tables */
.table-container, .table-responsive{
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.user-table, table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
thead th{
  background:var(--surface-2);
  color:var(--text-light);
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:14px 14px;
  border-bottom:1px solid var(--border-color);
}
tbody td{
  padding:14px 14px;
  border-bottom:1px solid var(--border-color);
  font-size:13px;
  color:rgba(15,23,42,.86);
}
tbody tr:hover{background:#f8fafc}
.actions-cell, .table-actions{white-space:nowrap}
.action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:var(--surface);
  text-decoration:none;
  margin-right:6px;
  box-shadow:var(--shadow-sm);
}
.action-btn svg{width:18px;height:18px}
.action-btn:hover{border-color:#cbd5e1; transform: translateY(-1px)}
.action-btn.delete{border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.06)}
.action-btn.activate{border-color:rgba(22,163,74,.22); background:rgba(22,163,74,.06)}
.action-btn.deactivate{border-color:rgba(245,158,11,.28); background:rgba(245,158,11,.08)}
.action-btn.edit-btn, .action-btn.edit{border-color:rgba(74,108,253,.22); background:rgba(74,108,253,.06)}

.status-badge, .badge, .type-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  border:1px solid transparent;
}
.badge-success, .status-true, .active{
  background:rgba(22,163,74,.10);
  color:var(--text-success);
  border-color:rgba(22,163,74,.18);
}
.badge-danger, .status-false, .inactive{
  background:rgba(239,68,68,.10);
  color:var(--text-danger);
  border-color:rgba(239,68,68,.18);
}
.badge-warning{
  background:rgba(245,158,11,.12);
  color:var(--text-warning);
  border-color:rgba(245,158,11,.20);
}
.badge-muted{
  background:rgba(100,116,139,.12);
  color:#475569;
  border-color:rgba(100,116,139,.18);
}

/* Forms in modals/pages */
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.form-group{display:flex;flex-direction:column; gap:8px}
.form-group label{font-size:12px;font-weight:800;color:rgba(15,23,42,.75);letter-spacing:.02em}
.form-group input, .form-group select, .form-group textarea{
  padding:12px 14px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-input);
  font-size:13px;
  background:var(--surface);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--primary-color);
  box-shadow:var(--ring);
}
@media (max-width: 640px){
  .form-grid{grid-template-columns:1fr}
}

/* Modals (supports both .modal-content and .modal-dialog patterns) */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:2000;
  padding:20px;
}
.modal.open{display:flex}
.modal[style*="display: block"]{display:flex !important} /* for existing JS using style.display='block' */

.modal-content, .modal-dialog{
  background:var(--surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-md);
  width:min(720px, 100%);
  margin:auto;
  overflow:hidden;
  animation: modalIn .14s ease-out;
}
@keyframes modalIn{
  from{transform: translateY(6px) scale(.99); opacity:.6}
  to{transform: translateY(0) scale(1); opacity:1}
}
.modal-header, .modal-footer{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--surface-2);
}
.modal-header{border-bottom:1px solid var(--border-color)}
.modal-footer{border-top:1px solid var(--border-color)}
.modal-title{font-size:16px;font-weight:900}
.modal-body{padding:16px}
.close-btn{
  border:1px solid var(--border-color);
  background:var(--surface);
  width:38px;height:38px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  font-size:18px;
}
.close-btn:hover{border-color:#cbd5e1}

/* Flash message (licenses.php) */
.flash-message{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius:var(--radius-input);
  border:1px solid var(--border-color);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  font-size:13px;
}
.flash-message.success{border-color:rgba(22,163,74,.18); background:rgba(22,163,74,.08); color:var(--text-success)}
.flash-message.danger{border-color:rgba(239,68,68,.18); background:rgba(239,68,68,.08); color:var(--text-danger)}
.flash-message.warning{border-color:rgba(245,158,11,.18); background:rgba(245,158,11,.10); color:var(--text-warning)}

/* Pagination (licenses.php) */
.pagination{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding:12px 10px 0;
}
.pagination a, .pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  min-width:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border-color);
  background:var(--surface);
  color:rgba(15,23,42,.8);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  font-weight:800;
  font-size:13px;
}
.pagination a:hover{border-color:#cbd5e1}
.pagination .active{
  background:rgba(74,108,253,.14);
  border-color:rgba(74,108,253,.26);
  color:var(--primary-color);
}

/* Sidebar behavior
   - Desktop/tablet: "sidebar-toggled" collapses sidebar to icon-only.
   - Mobile (<=992px): sidebar becomes off-canvas with backdrop (drawer).
*/
.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:999; /* below sidebar (1000) */
}
.sidebar-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
body.no-scroll{overflow:hidden}

/* Mobile off-canvas */
@media (max-width: 992px){
  .sidebar{
    position:fixed;
    left:0; top:0;
    height:100vh;
    transform:translateX(-105%);
    box-shadow:var(--shadow-md);
  }
  body.sidebar-toggled .sidebar{ transform:translateX(-105%); }
  body:not(.sidebar-toggled) .sidebar{ transform:translateX(0); }

  /* Prevent content squeeze when drawer opens */
  .main-content-wrapper{margin-left:0 !important;}
}

/* Desktop/tablet collapse (icon-only) */
@media (min-width: 993px){
  body.sidebar-toggled .sidebar{
    width:88px;
  }
  body.sidebar-toggled .sidebar-brand span{display:none}
  body.sidebar-toggled .nav-link span{display:none}
  body.sidebar-toggled .nav-link{justify-content:center; font-size:0}
}

  body.sidebar-toggled .sidebar-brand span{display:none}
  body.sidebar-toggled .nav-link span{display:none}
  body.sidebar-toggled .nav-link{justify-content:center; font-size:0}
}

/* Small polish */
a{color:inherit}
input, button, select, textarea{font-family:inherit}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}


/* Extra helpers used in existing pages */
.card-header{padding:14px 16px;border-bottom:1px solid var(--border-color);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-body{padding:16px}
.filter-form{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}
.filter-form .form-group{margin:0}
@media (max-width: 900px){
  .filter-form{grid-template-columns:1fr}
}

.table-responsive{overflow:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:760px}