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

:root {
    --background: #fff;
    --foreground: #09090b;

    --card: #fff;
    --card-foreground: #09090b;

    --popover: #fff;
    --popover-foreground: #09090b;

    --primary: #18181b;
    --primary-foreground: #fafafa;

    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;

    --muted: #f4f4f5;
    --muted-foreground: #71717a;

    --accent: #f4f4f5;
    --accent-foreground: #18181b;

    --destructive: #ef4444;
    --destructive-foreground: #fafafa;

    --border: #e4e4e7;
    --input: #e4e4e7;
    --ring: #18181b;

    --radius: .5rem;
}

[data-bs-theme="dark"] {
    --background: #09090b;
    --foreground: #fafafa;

    --card: #09090b;
    --card-foreground: #fafafa;

    --popover: #09090b;
    --popover-foreground: #fafafa;

    --primary: #fafafa;
    --primary-foreground: #18181b;

    --secondary: #27272a;
    --secondary-foreground: #fafafa;

    --muted: #27272a;
    --muted-foreground: #a1a1aa;

    --accent: #27272a;
    --accent-foreground: #fafafa;

    --destructive: #7f1d1d;
    --destructive-foreground: #fafafa;

    --border: #27272a;
    --input: #27272a;
    --ring: #d4d4d8;
}


/* --------------------------------------------------
   Base
-------------------------------------------------- */

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

html {
    font-family: 'Inter', sans-serif;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-size: .875rem;
    line-height: 1.5;
}


/* --------------------------------------------------
   Layout
-------------------------------------------------- */

/* Shadcn-style content width and spacing */

.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (max-width: 768px) {
    .container {
        padding-inline: 1rem;
    }
}

main {
    min-height: calc(100vh - 57px);
}


/* --------------------------------------------------
   Typography
-------------------------------------------------- */

.text-muted {
    color: var(--muted-foreground) !important;
}

small,
.small {
    font-size: .8125rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--foreground);
    font-weight: 600;
    letter-spacing: -.025em;
}


/* --------------------------------------------------
   Links
-------------------------------------------------- */

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* --------------------------------------------------
   Borders
-------------------------------------------------- */

.border,
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.list-group,
.list-group-item,
.nav-tabs,
.table {
    border-color: var(--border) !important;
}


/* --------------------------------------------------
   Cards
-------------------------------------------------- */

.card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--border);
}

.card-title {
    font-weight: 600;
    letter-spacing: -.015em;
}


/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--radius);

    font-size: .875rem;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--ring);
}

.btn-primary {
    --bs-btn-color: var(--primary-foreground);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);

    --bs-btn-hover-color: var(--primary-foreground);
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 90%, transparent);
    --bs-btn-hover-border-color: var(--primary);

    --bs-btn-active-color: var(--primary-foreground);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}

.btn-secondary {
    --bs-btn-color: var(--secondary-foreground);
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);

    --bs-btn-hover-color: var(--secondary-foreground);
    --bs-btn-hover-bg: color-mix(in srgb, var(--secondary) 80%, transparent);
    --bs-btn-hover-border-color: var(--secondary);

    --bs-btn-active-color: var(--secondary-foreground);
    --bs-btn-active-bg: var(--secondary);
    --bs-btn-active-border-color: var(--secondary);
}

.btn-outline-primary {
    --bs-btn-color: var(--foreground);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--border);

    --bs-btn-hover-color: var(--foreground);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--border);
}


/* --------------------------------------------------
   Forms
-------------------------------------------------- */

.form-control,
.form-select {
    background: transparent;
    color: var(--foreground);
    border-color: var(--input);
    border-radius: var(--radius);
}

.form-control::placeholder {
    color: var(--muted-foreground);
}

.form-control:focus,
.form-select:focus {
    background: transparent;
    color: var(--foreground);
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--ring) 20%,
        transparent
    );
}

.form-label {
    margin-bottom: .375rem;
    font-weight: 500;
}

.form-text {
    color: var(--muted-foreground);
}


/* --------------------------------------------------
   Checkboxes & Radios
-------------------------------------------------- */

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: .25rem;

    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: .25rem;
    box-shadow: none;
    cursor: pointer;
}

.form-check-input:checked {
    position: relative;
    background: var(--primary);
    border-color: var(--primary);
    background-image: none;
}

.form-check-input:checked::after {
    content: "";
    position: absolute;
    inset: .15rem;
    background: var(--primary-foreground);

    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
        center / contain no-repeat;

    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")
        center / contain no-repeat;
}

.form-check-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 2px color-mix(
        in srgb,
        var(--ring) 20%,
        transparent
    );
}

.form-check-input:checked:focus {
    border-color: var(--primary);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}


/* --------------------------------------------------
   Tables
-------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--foreground);
    --bs-table-border-color: var(--border);
}

.table > :not(caption) > * > * {
    padding: .75rem 1rem;
}


/* --------------------------------------------------
   Dropdown
-------------------------------------------------- */

.dropdown-menu {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / .1),
        0 2px 4px -2px rgb(0 0 0 / .1);
}

.dropdown-item {
    color: var(--popover-foreground);
    border-radius: .375rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--accent);
    color: var(--accent-foreground);
}


/* --------------------------------------------------
   Modal
-------------------------------------------------- */

.modal-content {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / .1),
        0 8px 10px -6px rgb(0 0 0 / .1);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}


/* --------------------------------------------------
   Navbar
-------------------------------------------------- */

.navbar {
    background: var(--background) !important;
    border-bottom: 1px solid var(--border);
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--foreground);
}

.navbar-nav .nav-link {
    border-radius: .375rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--foreground);
    background: var(--accent);
}


/* --------------------------------------------------
   Pagination
-------------------------------------------------- */

.page-link {
    color: var(--foreground);
    background: transparent;
    border-color: var(--border);
}

.page-link:hover {
    color: var(--foreground);
    background: var(--accent);
    border-color: var(--border);
}

.page-item.active .page-link {
    color: var(--primary-foreground);
    background: var(--primary);
    border-color: var(--primary);
}


/* --------------------------------------------------
   Badges
-------------------------------------------------- */

.badge {
    border-radius: .375rem;
    font-weight: 500;
}


/* --------------------------------------------------
   List Groups
-------------------------------------------------- */

.list-group {
    border-radius: var(--radius);
}

.list-group-item {
    background: var(--background);
    color: var(--foreground);
}

.list-group-item:hover {
    background: var(--accent);
}


/* --------------------------------------------------
   Breadcrumb
-------------------------------------------------- */

.breadcrumb {
    margin-bottom: 0;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--muted-foreground);
}

.breadcrumb-item.active {
    color: var(--foreground);
}


/* --------------------------------------------------
   Tabs
-------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--border);
}

.nav-tabs .nav-link {
    color: var(--muted-foreground);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--foreground);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--foreground);
    background: transparent;
    border-color: transparent transparent var(--foreground);
}


/* --------------------------------------------------
   Accordion
-------------------------------------------------- */

.accordion {
    --bs-accordion-bg: var(--background);
    --bs-accordion-color: var(--foreground);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-color: var(--foreground);
    --bs-accordion-btn-bg: var(--background);
    --bs-accordion-active-color: var(--foreground);
    --bs-accordion-active-bg: var(--muted);
}


/* --------------------------------------------------
   Offcanvas
-------------------------------------------------- */

.offcanvas {
    background: var(--background);
    color: var(--foreground);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border);
}


/* --------------------------------------------------
   Toast
-------------------------------------------------- */

.toast {
    background: var(--popover);
    color: var(--popover-foreground);
}


/* --------------------------------------------------
   Horizontal Rule
-------------------------------------------------- */

hr {
    border-color: var(--border);
    opacity: 1;
}


/* --------------------------------------------------
   Alerts
-------------------------------------------------- */

.xam-alerts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;

    display: flex;
    flex-direction: column;
    gap: .5rem;

    width: 380px;
    max-width: calc(100vw - 2rem);

    margin: 0;
    padding: 0;

    pointer-events: none;
}

.xam-alert {
    display: flex;
    align-items: center;
    gap: .75rem;

    width: 100%;
    min-height: 3.25rem;
    padding: .75rem .875rem;

    background: var(--popover);
    color: var(--popover-foreground);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / .08),
        0 4px 6px -4px rgb(0 0 0 / .08);

    pointer-events: auto;
    animation: xam-alert-in .2s ease-out;
}

.xam-alert-message {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    line-height: 1.5;
}

.xam-alert-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: .375rem;

    background: transparent;
    color: var(--muted-foreground);

    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;

    transition: .15s ease;
}

.xam-alert-close:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}


/* --------------------------------------------------
   Alert Variants
-------------------------------------------------- */

.xam-alert-success {
    border-color: color-mix(
        in srgb,
        var(--bs-success) 35%,
        var(--border)
    );
}

.xam-alert-success .xam-alert-message {
    color: color-mix(
        in srgb,
        var(--bs-success-text-emphasis) 70%,
        var(--foreground)
    );
}

.xam-alert-danger {
    border-color: color-mix(
        in srgb,
        var(--destructive) 45%,
        var(--border)
    );
}

.xam-alert-danger .xam-alert-message {
    color: color-mix(
        in srgb,
        var(--destructive) 80%,
        var(--foreground)
    );
}

.xam-alert-warning {
    border-color: color-mix(
        in srgb,
        var(--bs-warning) 35%,
        var(--border)
    );
}

.xam-alert-warning .xam-alert-message {
    color: color-mix(
        in srgb,
        var(--bs-warning-text-emphasis) 70%,
        var(--foreground)
    );
}

.xam-alert-info {
    border-color: color-mix(
        in srgb,
        var(--bs-info) 30%,
        var(--border)
    );
}

.xam-alert-info .xam-alert-message {
    color: color-mix(
        in srgb,
        var(--bs-info-text-emphasis) 65%,
        var(--foreground)
    );
}


/* --------------------------------------------------
   Animation
-------------------------------------------------- */

@keyframes xam-alert-in {
    from {
        opacity: 0;
        transform: translateY(-.375rem) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 576px) {
    .xam-alerts {
        top: .75rem;
        right: .75rem;
        left: .75rem;
        width: auto;
        max-width: none;
    }
}

/* Form validation */
.form-control.is-valid,
.form-control.is-invalid,
.form-select.is-valid,
.form-select.is-invalid {
    background-image: none;
    padding-right: 0.75rem;
}