/* TIM-OE Clean Theme 2026-05-01
   Global visual polish for the whole TIM-OE panel. Functionality is untouched. */

:root {
  --timoe-bg: #f4f8fc;
  --timoe-surface: rgba(255, 255, 255, 0.86);
  --timoe-surface-strong: #ffffff;
  --timoe-border: rgba(148, 163, 184, 0.22);
  --timoe-text: #0f172a;
  --timoe-muted: #64748b;
  --timoe-primary: #2563eb;
  --timoe-primary-soft: rgba(37, 99, 235, 0.10);
  --timoe-info: #0ea5e9;
  --timoe-success: #10b981;
  --timoe-warning: #f59e0b;
  --timoe-danger: #ef4444;
  --timoe-shadow: 0 18px 48px rgba(15, 23, 42, 0.075);
  --timoe-soft-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

html,
body {
  background: var(--timoe-bg) !important;
}

body {
  color: var(--timoe-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.15), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(37, 99, 235, 0.13), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(16, 185, 129, 0.11), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fc 44%, #eef4fb 100%);
}

#root {
  min-height: 100vh;
}

main {
  color: var(--timoe-text);
}

/* App shell / main content surfaces */
main [class*="bg-white"],
main [class*="bg-slate-50"],
main [class*="bg-gray-50"],
main section[class*="border"],
main article[class*="border"],
main div[class*="border"][class*="rounded"] {
  border-color: var(--timoe-border) !important;
}

main [class*="shadow"],
aside[class*="shadow"],
nav[class*="shadow"] {
  box-shadow: var(--timoe-shadow) !important;
}

main [class*="rounded-[30px]"],
main [class*="rounded-[28px]"],
main [class*="rounded-3xl"] {
  border-color: rgba(148, 163, 184, 0.20) !important;
}

/* Cleaner sidebar/topbar feel */
aside,
header,
nav {
  border-color: rgba(148, 163, 184, 0.18) !important;
}

aside a,
aside button,
nav a,
nav button {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

aside a:hover,
aside button:hover,
nav a:hover,
nav button:hover {
  transform: translateY(-1px);
}

/* Inputs and form fields */
input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--timoe-text) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

/* Buttons */
button,
a[class*="rounded"] {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

button:not(:disabled):hover,
a[class*="rounded"]:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: .62;
  cursor: not-allowed;
}

/* Tables and list rows */
table {
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  background: rgba(248, 250, 252, 0.88) !important;
  color: #475569 !important;
  font-weight: 800 !important;
}

tbody tr {
  transition: background-color .14s ease;
}

tbody tr:hover {
  background: rgba(239, 246, 255, 0.62) !important;
}

/* Soft notification / card polish */
[class*="bg-green"],
[class*="bg-emerald"] {
  border-color: rgba(16, 185, 129, 0.24) !important;
}

[class*="bg-red"],
[class*="bg-rose"] {
  border-color: rgba(239, 68, 68, 0.24) !important;
}

[class*="bg-yellow"],
[class*="bg-amber"] {
  border-color: rgba(245, 158, 11, 0.24) !important;
}

[class*="bg-blue"],
[class*="bg-sky"] {
  border-color: rgba(37, 99, 235, 0.22) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.34);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.52);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* Dark mode compatibility */
html.dark,
body.dark,
body.tim-oe-dark {
  --timoe-bg: #020617;
  --timoe-surface: rgba(15, 23, 42, 0.82);
  --timoe-surface-strong: #0f172a;
  --timoe-border: rgba(51, 65, 85, 0.78);
  --timoe-text: #e5edf8;
  --timoe-muted: #94a3b8;
}

html.dark body::before,
body.dark::before,
body.tim-oe-dark::before {
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.18), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.12), transparent 28%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

html.dark input,
html.dark select,
html.dark textarea,
body.dark input,
body.dark select,
body.dark textarea,
body.tim-oe-dark input,
body.tim-oe-dark select,
body.tim-oe-dark textarea {
  background-color: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(51, 65, 85, 0.88) !important;
  color: #e5edf8 !important;
}

html.dark thead th,
body.dark thead th,
body.tim-oe-dark thead th {
  background: rgba(15, 23, 42, 0.86) !important;
  color: #cbd5e1 !important;
}

html.dark tbody tr:hover,
body.dark tbody tr:hover,
body.tim-oe-dark tbody tr:hover {
  background: rgba(30, 41, 59, 0.58) !important;
}

@media (max-width: 760px) {
  main [class*="rounded-[30px]"],
  main [class*="rounded-[28px]"],
  main [class*="rounded-3xl"] {
    border-radius: 20px !important;
  }
}