/* Invoiso UI Reset + Full Modern Light Redesign */

:root {
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --text: #172033;
  --muted: #5f6f86;
  --border: #e4ebf3;
  --primary: #1f7ae0;
  --primary-2: #14a3b8;
  --success: #1aa57a;
  --danger: #d64b4b;

  --sidebar-bg: #1f2f46;
  --sidebar-bg-2: #1a2739;
  --sidebar-text: #d6e3f2;
  --sidebar-muted: #90a6bf;
  --sidebar-hover: rgba(255, 255, 255, 0.1);
  --sidebar-active-1: #2793ff;
  --sidebar-active-2: #3fb2ff;

  --ring: rgba(31, 122, 224, 0.24);
  --radius: 12px;
  color-scheme: light;
}

/* Force light-only mode */
html, body {
  color-scheme: light !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.dark, .dark {
  color-scheme: light !important;
}

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

/* Hard-disable dark tokens */
.bg-gray-950,
.dark\:bg-gray-950,
.dark .bg-gray-950,
.dark\:bg-gray-900,
.dark .bg-gray-900,
.dark\:text-gray-100,
.dark .text-gray-100,
.dark\:text-gray-200,
.dark .text-gray-200,
.dark\:text-white,
.dark .text-white {
  background-color: transparent !important;
  color: inherit !important;
}

/* Main app shells */
.min-h-screen,
.h-screen {
  background: var(--bg) !important;
}

/* Cards, panels, containers */
.bg-white,
.bg-card,
.rounded-xl,
.rounded-2xl,
[role="dialog"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 6px 18px rgba(17, 27, 44, 0.06) !important;
}

/* Inputs */
input, textarea, select, [role="combobox"], [data-radix-select-trigger] {
  background: #fff !important;
  border: 1px solid #d7e1ec !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}

input:focus, textarea:focus, select:focus, [role="combobox"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #8ca0b8 !important;
}

/* Buttons */
button, .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.bg-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(31, 122, 224, 0.26) !important;
}

.bg-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Keep standard utility colors readable */
.text-gray-500 { color: #667992 !important; }
.text-gray-400 { color: #7d91a8 !important; }
.text-gray-900 { color: #152033 !important; }

/* Tables */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: #f4f7fb !important;
  color: #60748d !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px !important;
  border-bottom: 1px solid var(--border) !important;
}

tbody td {
  border-bottom: 1px solid #edf2f8 !important;
  color: #1d2a3f !important;
}

tbody tr:hover {
  background: #f9fbff !important;
}

/* ==============================
   Sidebar redesign from scratch
   ============================== */
aside.border-r {
  position: relative;
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 6px 0 24px rgba(11, 22, 39, 0.35) !important;
  backdrop-filter: none !important;
}

/* Remove accidental translucent white classes on sidebar */
aside.border-r.bg-white\/80,
aside.border-r.backdrop-blur-xl {
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2)) !important;
  backdrop-filter: none !important;
}

/* Sidebar logo/header area */
aside.border-r > div:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Section labels: OVERVIEW / TOOLS / SYSTEM */
aside.border-r nav p {
  color: #a9bdd3 !important;
  font-size: 11px !important;
  letter-spacing: 0.09em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-top: 10px;
  margin-bottom: 6px;
}

/* Menu links - readable by default */
aside.border-r nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 5px 4px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  color: var(--sidebar-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Ensure link text is always readable */
aside.border-r nav a span {
  color: var(--sidebar-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  opacity: 1 !important;
}

/* Icon readability */
aside.border-r nav a svg {
  color: #9eb4cc !important;
  stroke: currentColor;
  stroke-width: 1.75 !important;
  opacity: 1 !important;
}

/* Hover state */
aside.border-r nav a:hover {
  color: #ffffff !important;
  background: var(--sidebar-hover) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

aside.border-r nav a:hover span,
aside.border-r nav a:hover svg {
  color: #ffffff !important;
}

/* Active state by aria-current OR helper classes */
aside.border-r nav a[aria-current="page"],
aside.border-r nav a.active,
aside.border-r nav a[data-active="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--sidebar-active-1), var(--sidebar-active-2)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 22px rgba(26, 138, 255, 0.36) !important;
}

aside.border-r nav a[aria-current="page"] span,
aside.border-r nav a.active span,
aside.border-r nav a[data-active="true"] span,
aside.border-r nav a[aria-current="page"] svg,
aside.border-r nav a.active svg,
aside.border-r nav a[data-active="true"] svg {
  color: #ffffff !important;
}

/* Neutralize malformed class-string side effects */
aside.border-r nav a[class*="bg-blue-600"] {
  background: transparent !important;
  color: var(--sidebar-text) !important;
  box-shadow: none !important;
}

aside.border-r nav a[class*="bg-blue-600"][aria-current="page"],
aside.border-r nav a[class*="bg-blue-600"].active {
  background: linear-gradient(135deg, var(--sidebar-active-1), var(--sidebar-active-2)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(26, 138, 255, 0.36) !important;
}

/* Sidebar custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(170, 192, 215, 0.35);
  border-radius: 999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(170, 192, 215, 0.55);
}

/* Topbar */
header.border-b,
.sticky.top-0.border-b {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}

/* Focus */
:focus-visible {
  outline: 2px solid rgba(31, 122, 224, 0.55) !important;
  outline-offset: 2px !important;
}

/* Small screens */
@media (max-width: 768px) {
  aside.border-r {
    box-shadow: 8px 0 24px rgba(11, 22, 39, 0.4) !important;
  }

  aside.border-r nav a {
    min-height: 42px;
    padding: 10px 12px !important;
  }

  aside.border-r nav a span {
    font-size: 14px !important;
  }
}

/* ===== Visibility safeguards (do not lose tables/content) ===== */
.table-wrapper, .overflow-x-auto {
  overflow-x: auto;
}

table {
  width: 100%;
  display: table;
}

thead { display: table-header-group; }
tbody { display: table-row-group; }
tr { display: table-row; }
th, td { display: table-cell; vertical-align: middle; }

/* Preserve critical content visibility */
main, section, article, .card, .bg-card, .bg-white {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Readability in content area */
main, section, article {
  color: #172033 !important;
}

/* Status badges remain readable */
[class*="badge"], .rounded-full[class*="text-"] {
  font-weight: 600;
}