/* ============================================================
   smartcustos CI Theme - Soft UI & Depth
   Tested against Frappe v14 / v15
   Primary: #C8102E   |   Secondary: #1A1A1A
   ============================================================ */

:root {
  --sc-red: #C8102E;
  --sc-red-dark: #A00D24;
  --sc-red-light: #FDF2F2; 
  --sc-black: #1A1A1A;
  --sc-text: #333333;
  --sc-muted: #6B6B6B;
  --sc-border: #E5E7EB; 
  --sc-bg: #F3F4F6; /* Neues, sanftes Grau für den Seitenhintergrund */
  --sc-radius: 8px; 

  /* Frappe variable overrides */
  --primary: var(--sc-red);
  --primary-color: var(--sc-red);
  --btn-primary: var(--sc-red);
  --text-on-primary: #ffffff;
  --red-500: var(--sc-red);
  --red-600: var(--sc-red-dark);
  --red-100: var(--sc-red-light);
}

/* ---------- Global type & links ---------- */
body, .layout-main {
  color: var(--sc-text);
  font-family: "Inter", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: 0.01em;
  background-color: var(--sc-bg) !important; /* Nimmt das grelle Weiß aus dem Hintergrund */
}

.text-primary { color: var(--sc-red) !important; }

.workspace a { color: var(--sc-text) !important; transition: color 150ms ease; }
.workspace a:hover { color: var(--sc-red) !important; text-decoration: none; }

/* ---------- Top navbar (Mit dezentem Glas-Effekt) ---------- */
.navbar {
  /* Leicht transparentes Weiß + Blur-Filter für den Glassmorphism-Look */
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Für Safari */
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.navbar .navbar-brand,
.navbar-home img { filter: none; }

/* ---------- Workspace sidebar ---------- */
.standard-sidebar,
.layout-side-section {
  background: #ffffff; /* Sidebar bleibt weiß für klaren Kontrast zum grauen Body */
  border-right: 1px solid var(--sc-border);
}
.standard-sidebar-section .standard-sidebar-label {
  color: var(--sc-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.standard-sidebar-item {
  border-radius: 6px;
  margin: 2px 8px;
  padding: 8px 12px;
  transition: all 150ms ease;
  color: var(--sc-text);
}
.standard-sidebar-item:hover {
  background: var(--sc-bg);
  color: var(--sc-black);
}
.standard-sidebar-item.selected,
.standard-sidebar-item.active {
  background: var(--sc-red-light) !important;
  color: var(--sc-red-dark) !important;
  border-left: 3px solid var(--sc-red);
  font-weight: 600;
}
.standard-sidebar-item.selected .sidebar-item-icon svg,
.standard-sidebar-item.selected .sidebar-item-icon use {
  stroke: var(--sc-red) !important;
  fill: var(--sc-red) !important;
}

/* ---------- Page headers ---------- */
.page-head .title-text,
.page-title .title-text {
  font-weight: 700;
  color: var(--sc-black);
  letter-spacing: -0.01em;
}

/* ---------- Section / widget-group headers ---------- */
.widget-group-head,
.widget-group .widget-group-title,
.workspace .ce-block h2,
.workspace .widget-group .widget-group-title-area {
  background: transparent;
  color: var(--sc-black) !important;
  padding: 4px 0 4px 12px;
  border-radius: 0;
  border-left: 4px solid var(--sc-red);
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 32px 0 16px 0;
}
.widget-group-head::before,
.workspace .ce-block h2::before { display: none; }

/* ---------- Cards (Weiß auf grauem Grund) ---------- */
.widget.number-widget-box,
.widget.number-card,
.widget.links-widget-box,
.widget.quick-list-widget-box,
.widget.onboarding-widget-box,
.widget.shortcut-widget-box {
  background: #ffffff !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.02) !important;
}

/* Number Cards */
.widget.number-widget-box,
.widget.number-card {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.widget.number-widget-box:hover,
.widget.number-card:hover {
  border-color: var(--sc-red) !important;
  box-shadow: 0 4px 16px rgba(200, 16, 46, 0.08) !important;
  transform: translateY(-2px);
}
.widget .widget-head .widget-title,
.widget .number-card-title {
  color: var(--sc-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.widget .number-card .widget-content .number,
.widget.number-widget-box .widget-body .number {
  color: var(--sc-black) !important;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}
.widget .number-card .card-stats,
.widget.number-widget-box .card-stats {
  color: var(--sc-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Shortcut Cards */
.widget.shortcut-widget-box {
  color: var(--sc-text) !important;
  font-weight: 500;
  padding: 12px 16px !important;
  transition: all 150ms ease;
}
.widget.shortcut-widget-box:hover {
  border-color: var(--sc-red) !important;
  color: var(--sc-red) !important;
  box-shadow: 0 4px 8px rgba(200, 16, 46, 0.08) !important;
  transform: translateY(-1px);
}
.widget.shortcut-widget-box .widget-title {
  color: inherit !important;
  font-size: 14px !important;
  text-transform: none;
}
.widget-group .widget-group-body > .widget.shortcut-widget-box:first-child {
  background: var(--sc-bg) !important;
  border-color: #D1D5DB !important;
}
.widget-group .widget-group-body > .widget.shortcut-widget-box:first-child:hover {
  background: #ffffff !important;
  border-color: var(--sc-red) !important;
}

/* Link Cards */
.widget.links-widget-box .widget-head {
  border-bottom: 1px solid var(--sc-border);
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.widget.links-widget-box .widget-head .widget-title {
  color: var(--sc-black) !important;
  font-size: 14px !important;
  font-weight: 600;
}
.widget.links-widget-box .link-item {
  color: var(--sc-text) !important;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 4px;
  transition: background 150ms ease, color 150ms ease;
}
.widget.links-widget-box .link-item:hover {
  color: var(--sc-red-dark) !important;
  background-color: var(--sc-red-light);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--sc-red) !important;
  border-color: var(--sc-red) !important;
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(200, 16, 46, 0.2);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--sc-red-dark) !important;
  border-color: var(--sc-red-dark) !important;
  box-shadow: 0 2px 4px rgba(200, 16, 46, 0.3);
}

/* ---------- Form / inputs ---------- */
.form-control:focus,
.input-with-feedback:focus,
.frappe-control input:focus,
.awesomplete > input:focus {
  border-color: var(--sc-red) !important;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1) !important;
}

/* ---------- Save / Submit buttons form footer ---------- */
.standard-actions .btn-primary,
.page-actions .btn-primary {
  background: var(--sc-black) !important;
  border-color: var(--sc-black) !important;
}
.standard-actions .btn-primary:hover,
.page-actions .btn-primary:hover {
  background: var(--sc-red) !important;
  border-color: var(--sc-red) !important;
}

/* ---------- Workspace overall spacing ---------- */
.layout-main-section .workspace,
.layout-main-section-wrapper {
  background: transparent !important; /* Lässt das Grau vom Body durchscheinen */
}
.workspace .widget-group {
  margin-bottom: 32px;
}

/* ---------- Hide Spacer ---------- */
.widget.spacer-widget-box {
  border: 1px dashed transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}