/* ============================================
   ACMSolution Unified Global Stylesheet
   (Merged: base style + dark/light theme + cards)
============================================ */

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

/* ------------- Global variables ------------- */
:root {
  --sidebar-width: 250px;
  --topbar-height: 56px;

  /* Default Light Mode */
  --background: #f9f9fb;
  --sidebar-bg: #ffffff;
  --topbar-bg: #ffffff;
  --content-bg: #ffffff;
  --text: #222;
  --border: #dee2e6;
  --link: #007bff;
  --card: #f8f9fa;
}

html[data-theme="light"] {
  --background: #f9f9fb;
  --sidebar-bg: #ffffff;
  --topbar-bg: #ffffff;
  --content-bg: #ffffff;
  --text: #222;
  --border: #dee2e6;
  --link: #007bff;
  --card: #f8f9fa;
}

html[data-theme="dark"] {
  --background: #0b1220;
  --sidebar-bg: #1f1f1f;
  --topbar-bg: #1f1f1f;
  --content-bg: #0f1724;
  --text: #e6eef8;
  --border: #333;
  --link: #ffffff;
  --card: #0f1724;
}


/* ------------- HTML & Body Base ------------- */
html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'Poppins', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  background: var(--background);
  color: var(--text);
  overflow: hidden; /* fixed layout, scroll handled by content areas */
}

a {
  color: var(--link);
  text-decoration: none;
}

/* ------------- Card Component ------------- */
.card-custom {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 1rem;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* hover subtle for dark/light */
.card-custom:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}

/* ------------- Main Content Layout ------------- */
main#mainContent {
  position: absolute;
  top: var(--topbar-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  padding: 1rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--content-bg);
  transition: left .28s ease;
}

/* Sidebar collapsed mode */
body.sidebar-hidden main#mainContent {
  left: 0;
}

/* ------------- Responsive Behavior ------------- */
@media (max-width: 768px) {
  main#mainContent {
    left: 0;
  }
}

/* ------------- Optional Tweaks ------------- */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Optional scrollbar smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}