/* Responsive / Fluid rewrite of INON LMS Admin Portal styles
   - Replaces fixed widths with fluid/clamped values
   - Uses auto-fill/minmax grids for responsiveness
   - Adds mobile sidebar overlay and hamburger toggle classes
   - Improves table wrapping, fluid paddings, and typography
   - Keeps dark-theme color variables from original mockup

   Usage:
   - Replace your existing styles.css with this file or include it after existing file
   - Add a mobile toggle button: <button class="mobile-toggle" aria-label="Open menu">☰</button>
   - The sidebar can be toggled with a .sidebar--open class on root (eg. document.documentElement.classList.toggle('sidebar-open'))
*/

:root{
  /* Color system (kept from original) */
  --primary-color: #FF6B35;
  --primary-dark: #E55A25;
  --primary-light: #FF8B5C;
  --secondary-color: #1A237E;
  --secondary-light: #3F51B5;

  --bg-dark: #0A1628;
  --bg-darker: #050D1A;
  --bg-card: #0F1E32;
  --bg-card-hover: #152640;
  --bg-gradient: linear-gradient(135deg, #0A1628 0%, #0F1E32 50%, #1A237E 100%);

  --text-primary: #FFFFFF;
  --text-secondary: #B0BEC5;
  --text-muted: #6B7B8A;

  --success: #4CAF50;
  --warning: #FFB74D;
  --error: #EF5350;
  --info: #64B5F6;

  --border-color: #1E3A5F;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --shadow-xl: 0 25px 50px rgba(0,0,0,0.5);

  /* typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Poppins', var(--font-primary);

  /* spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* fluid sidebar width -- clamped between 180px and 260px, using viewport as intermediate */
  --sidebar-width: clamp(180px, 20vw, 260px);

  /* fluid right panel width used in content grid -- min 280px, max 30% of viewport */
  --panel-min: 280px;
  --panel-max: 30vw;
}

/* Fluid typography: scales between 14px and 16px depending on viewport */
html{ font-size: clamp(14px, 1.2vw, 16px); }

/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: var(--font-primary);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout: using CSS grid for the high-level layout but supporting a toggleable overlay sidebar on small screens */
.admin-layout{
  display:grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height:100vh;
  transition: grid-template-columns var(--transition-fast);
}

/* When sidebar hidden (small screens) use single column */
.admin-layout.sidebar-collapsed{
  grid-template-columns: 1fr;
}

/* Sidebar styles - fluid width */
.sidebar{
  background: var(--bg-darker);
  border-right:1px solid var(--border-color);
  padding: clamp(16px, 2.4vw, 24px);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  width:var(--sidebar-width);
  min-width: 140px;
  -webkit-overflow-scrolling: touch;
  transition: transform var(--transition-fast), visibility var(--transition-fast), opacity var(--transition-fast);
}

/* Mobile overlay behaviour for sidebar (controlled with .sidebar--open class on .sidebar) */
.sidebar.overlay{
  position:fixed; left:0; top:0; bottom:0; z-index:1200; transform: translateX(-100%); width: min(86vw, 360px);
}

.sidebar.overlay.sidebar--open{
  transform: translateX(0);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

/* sidebar logo */
.sidebar-logo{ display:flex; align-items:center; gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom:1px solid var(--border-color); }
.sidebar-logo .icon{ width:44px; height:44px; background: linear-gradient(135deg,var(--primary-color),var(--primary-dark)); border-radius:12px; display:flex;align-items:center;justify-content:center;font-size:1.5rem; }
.sidebar-logo h1{ font-size: clamp(1rem, 1.6vw, 1.25rem); color:var(--text-primary); }

.nav-list{ list-style:none; padding:0; }
.nav-list a{ display:flex; align-items:center; gap:12px; padding: 10px 12px; color:var(--text-secondary); border-radius:10px; margin-bottom:6px; text-decoration:none; transition: all var(--transition-fast); }
.nav-list a:hover{ background:var(--bg-card); color:var(--text-primary); }
.nav-list a.active{ background: rgba(255,107,53,0.12); color:var(--primary-color); border-left:3px solid var(--primary-color); padding-left:9px; }

/* Main content area: use same fluid sidebar width for margin alignment on larger screens */
.main-content{
  padding: clamp(16px, 2.5vw, 32px);
  background: var(--bg-dark);
  min-width:0; /* allow flex children to shrink */
  width:100%;
}

/* Top bar */
.top-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom: 24px; }
.page-title h1{ color:var(--text-primary); font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight:600; margin-bottom:4px; }
.page-title p{ color:var(--text-secondary); font-size:0.9rem; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding: 10px 16px; border-radius:10px; font-weight:500; cursor:pointer; transition: all var(--transition-fast); border:none; font-size:0.9375rem; }
.btn-primary{ background:var(--primary-color); color:white; }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-secondary{ background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color); }
.btn-secondary:hover{ border-color:var(--text-muted); }

/* Mobile toggle button (to show overlay sidebar) */
.mobile-toggle{
  display:none; /* shown on small screens */
  font-size:1.25rem; line-height:1; background:transparent; border:1px solid transparent; color:var(--text-primary); padding:8px 10px; border-radius:8px; cursor:pointer;
}

/* Stats grid: use auto-fill for fluid columns */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:20px;
  margin-bottom:24px;
  width:100%;
}

.stat-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding: clamp(16px, 2vw, 24px); transition: all var(--transition-normal); min-width:0; display:flex; flex-direction:column; }
.stat-card:hover{ border-color:var(--primary-color); transform: translateY(-4px); box-shadow:var(--shadow-md); }
.stat-header{ display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:12px; }
.stat-value{ font-size: clamp(1.5rem, 3vw, 2rem); font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.stat-label{ color:var(--text-secondary); font-size:0.9rem; }

/* Content grid: fluid right panel using minmax and clamp */
.content-grid{
  display:grid;
  grid-template-columns: 1fr minmax(var(--panel-min), var(--panel-max));
  gap: clamp(16px, 2.5vw, 32px);
  width:100%;
}

/* Cards */
.card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding: clamp(16px, 2vw, 24px); margin-bottom:20px; }
.card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }

/* Tables and table container: improved wrapping; use sticky header */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--border-color); }
.table th{ color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; }
.table td{ color:var(--text-secondary); }
.table tr:hover td{ background:var(--bg-card-hover); }

.table-container{ overflow-x:auto; width:100%; border-radius:0 0 12px 12px; }
.table-container table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table-container th, .table-container td{ padding: 12px 14px; vertical-align:middle; }
.table-container th{ background:var(--bg-darker); position:sticky; top:0; z-index:10; }
.table-container td{ color:var(--text-secondary); word-break:break-word; }

/* License table specific */
.license-table .license-key-cell{ font-family: 'Courier New', monospace; color:var(--text-primary); font-weight:500; font-size:0.875rem; letter-spacing:0.5px; }
.license-table .actions-cell{ text-align:center; padding:8px 12px; }
.action-buttons{ display:flex; gap:8px; justify-content:center; align-items:center; }
.btn-icon-small{ background:transparent; border:1px solid var(--border-color); border-radius:8px; padding:6px 10px; font-size:0.875rem; cursor:pointer; color:var(--text-secondary); transition: all var(--transition-fast); display:inline-flex; align-items:center; justify-content:center; }
.btn-icon-small:hover{ background:var(--bg-card-hover); border-color:var(--text-muted); color:var(--text-primary); }
.btn-icon-small.btn-danger{ color:var(--error); border-color: rgba(239,83,80,0.3); }
.btn-icon-small.btn-danger:hover{ background: rgba(239,83,80,0.1); border-color: var(--error); }

/* Status dots and badges */
.status-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; margin-right:6px; vertical-align:middle; }
.status{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px; font-size:0.75rem; font-weight:500; }
.status-active{ background: rgba(46,160,67,0.16); color:var(--success); }
.status-inactive{ background: rgba(112,112,112,0.12); color:var(--text-muted); }
.status-expired, .status-blocked{ background: rgba(248,81,73,0.12); color:var(--error); }

/* Forms */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; color:var(--text-secondary); font-size:0.9rem; font-weight:500; margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding: clamp(10px, 1.8vw, 12px); background:var(--bg-darker); border:1px solid var(--border-color); border-radius:10px; color:var(--text-primary); font-size:0.95rem; font-family:var(--font-primary); box-sizing:border-box; transition: all var(--transition-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--primary-color); box-shadow: 0 0 0 4px rgba(255,107,53,0.08); }
.form-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 12px; }

/* Modal overlay: responsive max width */
.modal-overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:1300; backdrop-filter: blur(4px); }
.modal-overlay.active{ display:flex; }
.modal-content{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding: clamp(12px, 2vw, 24px); width:90%; max-width:640px; max-height:90vh; overflow:auto; box-shadow:var(--shadow-xl); }
.modal-title{ color:var(--text-primary); font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight:600; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-color); }

.modal-content form{ display:flex; flex-direction:column; }
.modal-content .form-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:16px; padding-top:12px; border-top:1px solid var(--border-color); }

/* Empty state */
.empty-state{ text-align:center; padding:24px; }

/* Filter bar */
.filter-bar{ display:flex; gap:12px; margin-bottom:18px; align-items:stretch; flex-wrap:wrap; }
.search-box{ flex:1; min-width:180px; max-width:540px; }
.search-box input{ width:100%; height:100%; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; color:var(--text-primary); font-size:0.95rem; box-sizing:border-box; }
.filter-select{ padding:10px 14px; padding-right:36px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; color:var(--text-primary); font-size:0.95rem; cursor:pointer; appearance:none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B0BEC5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; min-width:120px; }

/* Helpers */
.hidden{ display:none !important; }
.center{ display:flex; align-items:center; justify-content:center; }

/* Accessibility focus outline for keyboard users */
:focus{ outline: 3px solid rgba(255,107,53,0.14); outline-offset:2px; }

/* Responsive breakpoints and behaviour adjustments */
@media (max-width: 1200px){
  /* ensure content grid collapses gracefully on narrower screens */
  .content-grid{ grid-template-columns: 1fr minmax(var(--panel-min), 35vw); }
  .top-bar{ gap:12px; }
}

@media (max-width: 992px){
  /* slightly smaller paddings */
  .main-content{ padding: clamp(12px, 3vw, 20px); }
  .stats-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 768px){
  /* Mobile behaviour: collapse main grid to single column. Use overlay sidebar. */
  .admin-layout{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .sidebar.overlay{ display:block; }
  .mobile-toggle{ display:inline-flex; }
  .main-content{ padding: 16px; }
  .content-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr; }
  .modal-content{ max-width: 92vw; padding: 16px; }
}

@media (max-width: 420px){
  /* Very small screens: reduce paddings and font sizes */
  html{ font-size: 13px; }
  .sidebar{ padding:12px; }
  .card{ padding:12px; }
  .btn{ padding:8px 12px; font-size: 0.9rem; }
}

/* Utility: when sidebar should be visible as overlay, add class to root like .sidebar-open */
.sidebar-open .sidebar.overlay{ transform: translateX(0); }
.sidebar-open .overlay-backdrop{ display:block; }

/* Overlay backdrop for off-canvas sidebar */
.overlay-backdrop{ display:none; position:fixed; inset:0; background: rgba(0,0,0,0.45); z-index:1100; }

/* small cosmetic tweaks */
.table-container::-webkit-scrollbar{ height:8px; }
.table-container::-webkit-scrollbar-track{ background:var(--bg-darker); border-radius:4px; }
.table-container::-webkit-scrollbar-thumb{ background:var(--border-color); border-radius:4px; }

/* End of file */