/* devsgonewild-shadcn.css */
/* Load after Bootstrap. No build step required. */

:root {
    /* Brand + neutrals */
    --dgw-accent: #df691a;
    --dgw-accent-600: #c75712;
    --dgw-accent-700: #a7470e;
  
    --dgw-bg: #0b0c0e;            /* use a charcoal base for contrasty "modern" look */
    --dgw-panel: #111317;         /* card / panel */
    --dgw-panel-2: #161a20;       /* hover panel */
    --dgw-text: #e8eaed;
    --dgw-text-dim: #c7cbd1;
    --dgw-border: #262a31;
  
    --dgw-radius: 14px;
    --dgw-radius-lg: 18px;
    --dgw-shadow: 0 8px 30px rgba(0,0,0,0.25);
    --dgw-shadow-soft: 0 6px 20px rgba(0,0,0,0.18);
  
    /* Map to Bootstrap variables where helpful */
    --bs-body-bg: var(--dgw-bg);
    --bs-body-color: var(--dgw-text);
    --bs-link-color: var(--dgw-accent);
    --bs-border-color: var(--dgw-border);
    --bs-border-radius: var(--dgw-radius);
    --bs-border-radius-lg: var(--dgw-radius-lg);
    --bs-primary: var(--dgw-accent);
  
    /* Font */
    --dgw-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  
  @media (prefers-color-scheme: light) {
    :root {
      --dgw-bg: #f8f9fb;
      --dgw-panel: #ffffff;
      --dgw-panel-2: #f3f5f7;
      --dgw-text: #0f1216;
      --dgw-text-dim: #5b616b;
      --dgw-border: #e5e7eb;
      --dgw-shadow: 0 10px 30px rgba(16,24,40,0.08);
      --dgw-shadow-soft: 0 8px 24px rgba(16,24,40,0.06);
    }
  }
  
  /* Base */
  html, body {
    background: var(--dgw-bg);
    color: var(--dgw-text);
    font-family: var(--dgw-font);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  
  /* Buttons (shadcn-ish, pill-ish, subtle shadow) */
  .btn {
    border-radius: calc(var(--dgw-radius) - 2px);
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
  }
  
  .btn:active { transform: translateY(0); }
  
  .btn-primary,
  a.btn-primary,
  a.btn-primary:visited,
  a.btn-primary:hover,
  a.btn-primary:active {
    background: linear-gradient(135deg, var(--dgw-accent), var(--dgw-accent-600));
    border: none;
    color: #fff !important;
    box-shadow: var(--dgw-shadow-soft);
  }
  .btn-primary:hover,
  a.btn-primary:hover {
    background: linear-gradient(135deg, var(--dgw-accent-600), var(--dgw-accent-700));
    transform: translateY(-1px);
  }
  .btn-primary a,
  .btn-primary a:visited,
  .btn-primary a:hover,
  .btn-primary a:active {
    color: #fff;
  }
  .btn-outline-primary {
    color: var(--dgw-accent);
    border-color: color-mix(in srgb, var(--dgw-accent) 55%, transparent);
    background: transparent;
  }
  .btn-outline-primary:hover {
    background: color-mix(in srgb, var(--dgw-accent) 12%, transparent);
    border-color: var(--dgw-accent);
    color: var(--dgw-accent);
  }
  
  /* Ghost & subtle buttons */
  .btn-ghost {
    background: transparent;
    border: 1px solid var(--dgw-border);
    color: var(--dgw-text);
  }
  .btn-ghost:hover {
    background: var(--dgw-panel-2);
  }
  
  /* Cards */
  .card {
    background: var(--dgw-panel);
    border: 1px solid var(--dgw-border);
    border-radius: var(--dgw-radius-lg);
    box-shadow: var(--dgw-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .card:hover { transform: translateY(-2px); }
  .card-header, .card-footer {
    background: transparent;
    border-color: var(--dgw-border);
  }
  .card-title {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .card-title a, .card-title a:visited {
    color: var(--dgw-text);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
  }

  .card-title a:hover {
    color: var(--dgw-accent);
  }
  
  /* Navbar (glass-ish) */
  .navbar {
    border-bottom: 1px solid var(--dgw-border);
    background: color-mix(in srgb, var(--dgw-panel) 75%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
  }
  .navbar .navbar-brand, .navbar .nav-link {
    color: var(--dgw-text);
  }
  .navbar .nav-link:hover { color: var(--dgw-accent); }
  
  /* Forms */
  .form-control, .form-select {
    background: var(--dgw-panel);
    color: var(--dgw-text);
    border-radius: var(--dgw-radius);
    border: 1px solid var(--dgw-border);
    transition: box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  }
  .form-control::placeholder { color: var(--dgw-text-dim); }
  
  .form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--dgw-accent) 55%, var(--dgw-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dgw-accent) 22%, transparent);
    background: var(--dgw-panel);
    color: var(--dgw-text);
  }
  
  /* Checkboxes / radios */
  .form-check-input {
    border-radius: 6px;
    border: 1px solid var(--dgw-border);
    background: var(--dgw-panel);
  }
  .form-check-input:checked {
    background-color: var(--dgw-accent);
    border-color: var(--dgw-accent);
  }
  
  /* Tables */
  .table {
    color: var(--dgw-text);
    border-color: var(--dgw-border);
  }
  .table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-color: var(--dgw-border);
  }
  .table-hover tbody tr:hover {
    background: color-mix(in srgb, var(--dgw-accent) 6%, transparent);
  }
  
  /* Modals */
  .modal-content {
    background: var(--dgw-panel);
    border: 1px solid var(--dgw-border);
    border-radius: var(--dgw-radius-lg);
    box-shadow: var(--dgw-shadow);
  }
  .modal-header, .modal-footer { border-color: var(--dgw-border); }
  
  /* Badges & alerts */
  .badge.bg-primary {
    background: color-mix(in srgb, var(--dgw-accent) 85%, #fff);
    color: #fff;
  }
  .badge.bg-secondary {
    background: color-mix(in srgb, var(--dgw-accent) 20%, var(--dgw-panel));
    color: #fff;
  }
  /* .alert-primary {
    background: color-mix(in srgb, var(--dgw-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--dgw-accent) 35%, transparent);
    color: var(--dgw-text);
  } */
  
  /* Utility: “elevate on hover” */
  .elevate { transition: transform .18s ease, box-shadow .18s ease; }
  .elevate:hover { transform: translateY(-2px); box-shadow: var(--dgw-shadow); }
  
  /* Utility: section padding and subtle separators */
  .section {
    padding: clamp(2.5rem, 4vw, 5rem) 0;
    border-top: 1px solid var(--dgw-border);
  }
  
  /* Hero */
  .hero {
    background: radial-gradient(1200px 600px at 10% -20%, color-mix(in srgb, var(--dgw-accent) 15%, transparent), transparent 70%),
                radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--dgw-accent) 10%, transparent), transparent 70%);
  }
  .hero .display-4 { font-weight: 800; letter-spacing: -0.03em; }
  .hero .lead { color: var(--dgw-text-dim); }
  
  /* Focus visibility */
  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--dgw-accent) 60%, transparent);
    outline-offset: 2px;
  }
  
  /* Small motion smoothing */
  * { scroll-behavior: smooth; }
  

  /* ----------------------------------------
   Breadcrumb (shadcn-inspired)
   ---------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: var(--dgw-bg);
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
    margin-top: 0.3rem;
    color: var(--dgw-text);
  }
  
  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: var(--dgw-text-dim);
    transition: color 0.15s ease;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--dgw-text);
    padding: 0 0.75rem 0 0.3rem;
    font-weight: 500;
    transform: translateY(-1px);
  }
  
  .breadcrumb-item > a {
    color: var(--dgw-text);
    text-decoration: none;
    font-weight: 500;
  }
  
  .breadcrumb-item > a:hover {
    color: var(--dgw-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .breadcrumb-item.active {
    color: var(--dgw-text);
    font-weight: 600;
  }


  /* ----------------------------------------
   Alerts (soft background, rounded corners)
   ---------------------------------------- */
.alert {
    border: 1px solid var(--dgw-border);
    border-radius: var(--dgw-radius-lg);
    padding: 1rem 1.25rem;
    font-weight: 500;
    background: var(--dgw-panel);
    color: var(--dgw-text);
    box-shadow: var(--dgw-shadow-soft);
  }
  
  /* Accent variants */
  .alert-primary {
    background: color-mix(in srgb, var(--dgw-accent) 12%, var(--dgw-panel));
    border-color: color-mix(in srgb, var(--dgw-accent) 35%, var(--dgw-border));
  }
  
  .alert-success {
    background: color-mix(in srgb, #28a745 12%, var(--dgw-panel));
    border-color: color-mix(in srgb, #28a745 35%, var(--dgw-border));
  }
  
  .alert-danger {
    background: color-mix(in srgb, #dc3545 12%, var(--dgw-panel));
    border-color: color-mix(in srgb, #dc3545 35%, var(--dgw-border));
  }
  
  .alert-warning {
    background: color-mix(in srgb, #ffc107 15%, var(--dgw-panel));
    border-color: color-mix(in srgb, #ffc107 35%, var(--dgw-border));
    color: #000;
  }

  .alert {
    animation: dgw-fade-in .25s ease-out;
  }
  
  
  .alert .alert-link, .alert a {
    color: #df691a;
    text-decoration: underline;
}
  
  /* Optional: subtle fade-in animation */
  @keyframes dgw-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ----------------------------------------
   Card title links (neutral)
   ---------------------------------------- */
.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.card-title a:hover {
  color: var(--dgw-accent);
  /* color: var(--dgw-text); */
  /* color: inherit; */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

  .form-group {
    margin-bottom: 1.5rem;
  }

  /* ----------------------------------------
   Links (brand brown/orange instead of blue)
   ---------------------------------------- */
a,
.link-primary {
  color: var(--dgw-accent);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

a:hover,
.link-primary:hover {
  color: var(--dgw-accent-600); 
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

a:active {
  color: var(--dgw-accent-700);
}

a:visited {
  color: var(--dgw-accent-600);
}