/* KCL-AI shell — matches /home/kcl-ai/interface example.jpg */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  --kcl-bg: #0b0f14;
  --kcl-bg-2: #10151c;
  --kcl-panel: #12181f;
  --kcl-panel-2: #161d26;
  --kcl-line: #1e2732;
  --kcl-lime: #d2f04a;
  --kcl-lime-dim: #b6d63a;
  --kcl-text: #e8edf2;
  --kcl-muted: #9aa3ad;
  --kcl-sidebar: #0c1016;
  --kcl-hover: #182029;
}

html, body {
  background: var(--kcl-bg) !important;
  color: var(--kcl-text) !important;
  font-family: "Outfit", "Open Sans", sans-serif !important;
}

#staging-banner { display: none !important; }
body { padding-top: 0 !important; }

#container {
  background: var(--kcl-bg);
  min-height: 100vh;
}

#main-nav {
  background: var(--kcl-sidebar) !important;
  border-right: 1px solid var(--kcl-line);
  min-width: 232px;
  width: 232px;
}

#branding {
  margin-bottom: 8px !important;
  padding: 22px 20px 16px !important;
  border-bottom: 2px solid var(--kcl-lime);
}

#branding a.logo {
  display: block;
  text-decoration: none !important;
  color: var(--kcl-text) !important;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
}

#branding a.logo img { display: none !important; }
#branding a.logo::after { content: "KCL-AI"; }

.main-menu { padding: 12px 0 24px; }

.main-menu li {
  border-right: 0 !important;
  border-left: 3px solid transparent;
  margin: 0 8px;
  border-radius: 8px;
}

.main-menu a {
  color: var(--kcl-muted) !important;
  font-size: 14px !important;
  font-weight: 500;
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  border-radius: 8px;
}

.main-menu li:hover { border-color: var(--kcl-lime) !important; }
.main-menu a:hover {
  background: var(--kcl-hover) !important;
  color: var(--kcl-text) !important;
}
.main-menu a:hover .material-icons,
.main-menu li:hover .material-icons { color: var(--kcl-lime) !important; }
.main-menu .material-icons {
  color: var(--kcl-muted) !important;
  font-size: 20px;
}

#top-nav {
  background: var(--kcl-bg-2) !important;
  border-bottom: 1px solid var(--kcl-line) !important;
  color: var(--kcl-muted) !important;
}
#top-nav a { color: var(--kcl-muted) !important; }
#top-nav a:hover { color: var(--kcl-lime) !important; }
.breadcrumbs, .user-links, #username { color: var(--kcl-muted) !important; }

#content { color: var(--kcl-text) !important; }

.section {
  background: var(--kcl-panel) !important;
  border: 1px solid var(--kcl-line);
  border-radius: 16px;
  padding: 18px 18px 12px;
}
.section h2 {
  color: var(--kcl-text) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

/* KPI cards */
.quick-stats .statistic,
.statistic {
  background:
    repeating-linear-gradient(
      -45deg,
      #141b24 0 10px,
      #10161d 10px 20px
    ) !important;
  border: 1px solid #243041 !important;
  border-radius: 16px !important;
  color: var(--kcl-text) !important;
  padding: 22px 10px 18px !important;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(210, 240, 74, 0.04);
}
.statistic:nth-child(n) { background-color: transparent !important; }

.quick-stats .number,
.statistic .number {
  color: var(--kcl-lime) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em;
  margin-bottom: 8px !important;
}
.quick-stats .title,
.statistic .title {
  color: var(--kcl-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.homepage .notices {
  background: var(--kcl-panel) !important;
}
.homepage .notices li {
  border-bottom: 1px solid var(--kcl-line) !important;
  color: var(--kcl-muted);
  font-size: 13px;
  padding: 12px 4px !important;
}

.homepage .projects table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}
.homepage .projects table th {
  color: var(--kcl-muted) !important;
  font-weight: 600 !important;
  text-align: left;
  padding: 8px 8px !important;
  border-bottom: 1px solid var(--kcl-line);
  white-space: nowrap;
}
.homepage .projects table th a { color: var(--kcl-muted) !important; text-decoration: none; }
.homepage .projects table td {
  color: var(--kcl-text);
  padding: 8px 8px !important;
  border-bottom: 1px solid #1a222c;
}
.homepage .projects table tr,
.homepage .projects table tr:nth-child(even),
.homepage .projects table tr:first-child {
  background: transparent !important;
}
.homepage .projects table tbody tr:hover td { background: rgba(210, 240, 74, 0.04); }
.homepage .projects .scroll-wrapper { max-height: 520px; }

.button, input[type="submit"], input[type="button"], .object-tools a, .add-row a {
  background: var(--kcl-lime) !important;
  color: #111 !important;
  border: 0 !important;
  font-weight: 700 !important;
  border-radius: 6px;
}
.button:hover, input[type="submit"]:hover, .object-tools a:hover {
  background: var(--kcl-lime-dim) !important;
  color: #111 !important;
}
.deletelink { background: #c0392b !important; color: #fff !important; }

/* AI tab */
#ewo-ai-tab {
  background: var(--kcl-lime) !important;
  color: #111 !important;
  border-radius: 10px 0 0 10px !important;
  font-family: "Outfit", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: -4px 4px 18px rgba(0,0,0,0.35);
}
#ewo-ai-tab:hover, #ewo-ai-tab[aria-expanded="true"] {
  background: var(--kcl-lime-dim) !important;
}
#ewo-ai-tab .material-icons { color: #111 !important; }
#ewo-ai-head { border-bottom-color: var(--kcl-lime) !important; background: #0b0f14 !important; }
#ewo-ai-panel { background: #10151c !important; }

/* Forms / changelists */
#changelist, .module, fieldset, .form-row {
  background: transparent;
  color: var(--kcl-text);
}
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], textarea, select, .vTextField {
  background: #0e1319 !important;
  color: var(--kcl-text) !important;
  border: 1px solid var(--kcl-line) !important;
  border-radius: 6px;
}
table { color: var(--kcl-text); }
#changelist table thead th,
#result_list thead th { background: #10161d !important; color: var(--kcl-muted) !important; }
#changelist table tbody tr,
#result_list tbody tr { background: #12181f !important; }
#changelist table tbody tr:nth-child(even),
#result_list tbody tr:nth-child(even) { background: #151c24 !important; }
#changelist table td, #changelist table th,
#result_list td, #result_list th { color: var(--kcl-text) !important; border-color: var(--kcl-line) !important; }

a { color: var(--kcl-lime-dim); }
a:hover { color: var(--kcl-lime); }

/* Login */
body.login { background: var(--kcl-bg) !important; }
body.login #content-main { margin-top: 12vh !important; }
body.login .section {
  background: var(--kcl-panel) !important;
  border: 1px solid var(--kcl-line);
  border-radius: 18px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
body.login .branding {
  background: transparent !important;
  border-bottom: 2px solid var(--kcl-lime);
  margin: -40px -40px 24px !important;
  padding: 28px 30px 18px !important;
}
body.login .logo img { display: none !important; }
body.login .branding .logo {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--kcl-text) !important;
  text-decoration: none !important;
}
body.login .branding .logo::after { content: "KCL-AI"; }
body.login label { color: var(--kcl-muted) !important; }
body.login input[type="submit"] {
  width: 100%;
  padding: 10px 16px !important;
  font-size: 15px;
}

header h1 { color: var(--kcl-text) !important; }
.messagelist li { background: var(--kcl-panel-2); color: var(--kcl-text); border-radius: 8px; }

footer .last-updated { color: var(--kcl-muted); padding: 8px 20px 20px; }

@media (max-width: 1100px) {
  #main-nav { min-width: 72px; width: 72px; }
  #branding a.logo { font-size: 14px; }
  .main-menu a { font-size: 0 !important; padding: 10px 8px !important; }
  .main-menu .material-icons { font-size: 22px; margin-right: 0 !important; }
}

#branding { border-bottom: 2px solid var(--kcl-lime) !important; }
#top-nav {
  border-top: 2px solid var(--kcl-lime) !important;
  margin-top: -2px;
}


/* Datagrid interiors — distinct fill, readable rows */
.homepage .projects,
.homepage .safety,
.homepage .payroll,
.homepage .human-resources,
.homepage .holidays,
.homepage .services,
.homepage .repairs,
#changelist,
#changelist-form,
.module.filtered,
.results {
  --grid-bg: #1c2633;
  --grid-row: #1a2330;
  --grid-alt: #151d28;
  --grid-head: #121a24;
  --grid-line: #2a3646;
}

.homepage .projects .scroll-wrapper,
.homepage .safety .scroll-wrapper,
#changelist .results,
.results {
  background: var(--grid-bg, #1c2633) !important;
  border-radius: 10px;
}

.homepage table,
.homepage .projects table,
.homepage .safety table,
.homepage .payroll table,
.homepage .human-resources table,
.homepage .holidays table,
#changelist table,
#result_list,
table#result_list {
  background: #1c2633 !important;
  color: #e8edf2 !important;
}

.homepage table thead th,
.homepage .projects table th,
.homepage .safety table th,
#changelist table thead th,
#result_list thead th,
table#result_list thead th {
  background: #121a24 !important;
  color: #c5cdd6 !important;
  border-bottom: 1px solid #2a3646 !important;
  border-color: #2a3646 !important;
}

.homepage table tbody td,
.homepage .projects table td,
.homepage .safety table td,
#changelist table tbody td,
#result_list tbody td,
table#result_list tbody td {
  background: transparent !important;
  color: #e8edf2 !important;
  border-bottom: 1px solid #2a3646 !important;
  border-color: #2a3646 !important;
}

.homepage table tbody tr,
.homepage .projects table tr,
.homepage .projects table tr:first-child,
.homepage .projects table tr:nth-child(even),
.homepage .safety table tr,
.homepage .safety table tr:first-child,
.homepage .safety table tr:nth-child(even),
#changelist table tbody tr,
#result_list tbody tr {
  background: #1a2330 !important;
}

.homepage table tbody tr:nth-child(even),
.homepage .projects table tbody tr:nth-child(even),
.homepage .safety table tbody tr:nth-child(even),
#changelist table tbody tr:nth-child(even),
#result_list tbody tr:nth-child(even) {
  background: #151d28 !important;
}

.homepage table tbody tr:hover td,
.homepage .projects table tbody tr:hover td,
#changelist table tbody tr:hover td,
#result_list tbody tr:hover td {
  background: rgba(210, 240, 74, 0.08) !important;
}

.homepage table tbody tr:hover,
#changelist table tbody tr:hover,
#result_list tbody tr:hover {
  background: #243044 !important;
}

.homepage table a,
.homepage .projects table a,
#changelist table a,
#result_list a {
  color: #d2f04a !important;
}

.homepage .projects table tfoot th,
.homepage .projects table tr th[colspan] {
  background: #121a24 !important;
  color: #d2f04a !important;
}