/* =============================================================
   shadcn-alpine UserSpice Template
   File: usersc/templates/shadcn-alpine/assets/css/shadcn.css
   ============================================================= */

/* ── shadcn CSS Variables: Light Mode ─────────────────────── */
:root {
  --background:            0 0% 100%;
  --foreground:            222.2 84% 4.9%;
  --card:                  0 0% 100%;
  --card-foreground:       222.2 84% 4.9%;
  --popover:               0 0% 100%;
  --popover-foreground:    222.2 84% 4.9%;
  --primary:               222.2 47.4% 11.2%;
  --primary-foreground:    210 40% 98%;
  --secondary:             210 40% 96.1%;
  --secondary-foreground:  222.2 47.4% 11.2%;
  --muted:                 210 40% 96.1%;
  --muted-foreground:      215.4 16.3% 46.9%;
  --accent:                210 40% 96.1%;
  --accent-foreground:     222.2 47.4% 11.2%;
  --destructive:           0 84.2% 60.2%;
  --destructive-foreground:210 40% 98%;
  --border:                214.3 31.8% 91.4%;
  --input:                 214.3 31.8% 91.4%;
  --ring:                  222.2 84% 4.9%;
  --radius:                0.5rem;
  --sidebar-background:    0 0% 98%;
  --sidebar-foreground:    240 5.3% 26.1%;
  --sidebar-border:        220 13% 91%;
  --sidebar-accent:        240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
}

/* ── shadcn CSS Variables: Dark Mode ──────────────────────── */
.dark {
  --background:            222.2 84% 4.9%;
  --foreground:            210 40% 98%;
  --card:                  222.2 84% 4.9%;
  --card-foreground:       210 40% 98%;
  --popover:               222.2 84% 4.9%;
  --popover-foreground:    210 40% 98%;
  --primary:               210 40% 98%;
  --primary-foreground:    222.2 47.4% 11.2%;
  --secondary:             217.2 32.6% 17.5%;
  --secondary-foreground:  210 40% 98%;
  --muted:                 217.2 32.6% 17.5%;
  --muted-foreground:      215 20.2% 65.1%;
  --accent:                217.2 32.6% 17.5%;
  --accent-foreground:     210 40% 98%;
  --destructive:           0 62.8% 30.6%;
  --destructive-foreground:210 40% 98%;
  --border:                217.2 32.6% 17.5%;
  --input:                 217.2 32.6% 17.5%;
  --ring:                  212.7 26.8% 83.9%;
  --sidebar-background:    240 5.9% 10%;
  --sidebar-foreground:    240 4.8% 95.9%;
  --sidebar-border:        240 3.7% 15.9%;
  --sidebar-accent:        240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
  padding: 0;
  transition: background-color 0.2s, color 0.2s;
}

h1{font-size: 48px!important;font-weight:700!important;}

/* ── Alpine.js cloak ──────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Custom scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: hsl(var(--border)); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* ── Sidebar nav link ─────────────────────────────────────── */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--sidebar-foreground));
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover,
.sidebar-link.active {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}
.sidebar-link.active { font-weight: 600; }
.sidebar-link svg   { flex-shrink: 0; width: 1rem; height: 1rem; }

/* Sidebar section label */
.sidebar-label {
  padding: 0 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--secondary-foreground));
  transition: opacity 0.2s;
}

/* ── shadcn-style form inputs (used on UserSpice forms) ────── */
.us-input {
  height: 2.25rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.us-input:focus {
  box-shadow: 0 0 0 2px hsl(var(--ring));
}
.us-input::placeholder { color: hsl(var(--muted-foreground)); }

/* ── shadcn-style button ──────────────────────────────────── */
.us-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  text-decoration: none;
}
.us-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.us-btn-primary:hover  { opacity: 0.9; }
.us-btn-outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.us-btn-outline:hover  { background: hsl(var(--accent)); }
.us-btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.us-btn-destructive:hover { opacity: 0.9; }

/* ── shadcn-style card ────────────────────────────────────── */
.us-card {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}

/* ── Override Bootstrap alerts to use shadcn tokens ────────── */
.alert {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.alert-danger, .alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.dark .alert-success  { background: rgba(20,83,45,0.2);  border-color: rgba(187,247,208,0.2); color: #4ade80; }
.dark .alert-danger   { background: rgba(127,29,29,0.2); border-color: rgba(254,202,202,0.2); color: #f87171; }
.dark .alert-warning  { background: rgba(120,53,15,0.2); border-color: rgba(253,230,138,0.2); color: #fbbf24; }

/* ── UserSpice DataTables override ────────────────────────── */
.dataTables_wrapper { font-size: 0.875rem; }
table.dataTable thead th {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  border-bottom: 1px solid hsl(var(--border));
  background: transparent;
}
table.dataTable tbody tr:hover {
  background: hsl(var(--muted)) !important;
}

/* Custom */
#page1 h3{
  font-size: 18px!important;
  font-weight: 600!important;
  line-height: 28px!important;
  margin-bottom: 20px!important;
}

.marquee-track,
.mq-track{
  margin: 0 auto;
}

/* Breadcrumb/header mobile fix */
@media (max-width: 640px) {
  .breadcrumb-wrapper,
  .page-header,
  .topbar-title {
    min-width: 0;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .breadcrumb a,
  .breadcrumb span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb a:first-child {
    max-width: 130px;
  }

  .breadcrumb .current,
  .breadcrumb span:last-child {
    max-width: 120px;
    font-weight: 700;
  }
}