html, body { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.font-sans { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

[x-cloak] { display: none !important; }

:root {

    --background: 138.8 100% 96.9%;
    --foreground: 229.1 95.7% 9%;

    --primary: 213.5 96.4% 44.1%;
    --primary-foreground: 0 0% 100%;

    --secondary: 89 75% 54.5%;
    --secondary-foreground: 229.1 95.7% 9%;

    --accent: 89 75% 54.5%;
    --accent-foreground: 229.1 95.7% 9%;

    --muted: 138.8 100% 96.9%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 213.5 96.4% 44.1%;

    --card: 0 0% 100%;
    --card-foreground: 229.1 95.7% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --popover: 0 0% 100%;
    --popover-foreground: 229.1 95.7% 9%;

    --radius: 0.5rem;
}

.dark {

    --background: 229.1 95.7% 9%;
    --foreground: 0 0% 100%;

    --primary: 213.5 96.4% 44.1%;
    --primary-foreground: 0 0% 100%;

    --secondary: 89 75% 54.5%;
    --secondary-foreground: 229.1 95.7% 9%;

    --accent: 89 75% 54.5%;
    --accent-foreground: 0 0% 100%;

    --muted: 219.5 95.2% 24.7%;
    --muted-foreground: 215 20.2% 65.1%;

    --border: 219.5 95.2% 24.7%;
    --input: 219.5 95.2% 24.7%;
    --ring: 213.5 96.4% 44.1%;

    --card: 229.1 95.7% 9%;
    --card-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --popover: 229.1 95.7% 9%;
    --popover-foreground: 0 0% 100%;
}

.bg-gradient-primary {

    background: linear-gradient(135deg, hsl(213.5, 96.4%, 44.1%) 0%, hsl(219.5, 95.2%, 24.7%) 100%);
}

.bg-gradient-secondary {

    background: linear-gradient(135deg, hsl(89, 75%, 54.5%) 0%, hsl(138.8, 100%, 96.9%) 100%);
}

.bg-gradient-primary-secondary {

    background: linear-gradient(135deg, hsl(213.5, 96.4%, 44.1%) 0%, hsl(89, 75%, 54.5%) 100%);
}

.bg-gradient-blue-green {

    background: linear-gradient(135deg, hsl(213.5, 96.4%, 44.1%) 0%, hsl(89, 75%, 54.5%) 100%);
}

.bg-gradient-dark-blue {

    background: linear-gradient(135deg, hsl(229.1, 95.7%, 9%) 0%, hsl(219.5, 95.2%, 24.7%) 100%);
}

.bg-gradient-light {

    background: linear-gradient(135deg, hsl(138.8, 100%, 96.9%) 0%, hsl(0, 0%, 100%) 100%);
}

.text-gradient-primary {

    background: linear-gradient(135deg, hsl(213.5, 96.4%, 44.1%) 0%, hsl(219.5, 95.2%, 24.7%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {

    background: linear-gradient(135deg, hsl(89, 75%, 54.5%) 0%, hsl(138.8, 100%, 96.9%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-primary-secondary {

    background: linear-gradient(135deg, hsl(213.5, 96.4%, 44.1%) 0%, hsl(89, 75%, 54.5%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



#main-content table td,
#main-content table tbody td {

    color: rgb(17 24 39) !important;
}

.dark #main-content table td,
.dark #main-content table tbody td {

    color: rgb(229 231 235) !important;
}

#main-content table tbody td span:not([class*="bg-"]):not([class*="rounded"]) {

    color: rgb(17 24 39) !important;
}

.dark #main-content table tbody td span:not([class*="bg-"]):not([class*="rounded"]) {

    color: rgb(229 231 235) !important;
}

#main-content table thead {

    background-color: rgb(249 250 251) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    overflow: hidden !important;
}

.dark #main-content table thead {

    background-color: rgb(31 41 55) !important;
}

#main-content table thead th {

    background-color: rgb(249 250 251) !important;
    color: rgb(55 65 81) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1.5rem !important;
}

.dark #main-content table thead th {

    background-color: rgb(31 41 55) !important;
    color: rgb(209 213 219) !important;
}

#main-content table thead th button {

    color: rgb(55 65 81) !important;
}

.dark #main-content table thead th button {

    color: rgb(209 213 219) !important;
}

#main-content table thead th button:hover {

    color: rgb(17 24 39) !important;
}

.dark #main-content table thead th button:hover {

    color: rgb(255 255 255) !important;
}

#main-content table tbody td[colspan] div {
    background-color: transparent !important;
}

.dark #main-content table tbody td[colspan] div {
    background-color: transparent !important;
}

#main-content table tbody td[colspan] div span {
    color: rgb(156 163 175) !important;
}

.dark #main-content table tbody td[colspan] div span {
    color: rgb(156 163 175) !important;
}



#main-content div:has(> [wire\:model\.live="search"]) {

    box-shadow: none !important;
}

#main-content div[wire\:click="clearSearch"] {

    margin: 0 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgb(209 213 219) !important;
}

.dark #main-content div[wire\:click="clearSearch"] {

    border-color: rgb(75 85 99) !important;
}

#main-content input[wire\:model\.live="search"] {

    min-width: 256px !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgb(209 213 219) !important;
    background-color: rgb(249 250 251) !important;
    color: rgb(17 24 39) !important;
    box-shadow: none !important;
}

.dark #main-content input[wire\:model\.live="search"] {

    border-color: rgb(75 85 99) !important;
    background-color: rgb(31 41 55) !important;
    color: rgb(229 231 235) !important;
}

#main-content input[wire\:model\.live="search"]:focus {

    border-color: hsl(213.5, 96.4%, 44.1%) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsla(213.5, 96.4%, 44.1%, 0.2) !important;
}

#main-content select[id*="perPage"],
#main-content select[id*="per-page"],
#main-content .rounded-md.shadow-sm select {

    min-width: 80px !important;
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgb(209 213 219) !important;
    background-color: rgb(255 255 255) !important;
    color: rgb(17 24 39) !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    box-shadow: none !important;
}

.dark #main-content select[id*="perPage"],
.dark #main-content select[id*="per-page"],
.dark #main-content .rounded-md.shadow-sm select {

    border-color: rgb(75 85 99) !important;
    background-color: rgb(31 41 55) !important;
    color: rgb(229 231 235) !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
}

#main-content select[id*="perPage"]:focus,
#main-content select[id*="per-page"]:focus,
#main-content .rounded-md.shadow-sm select:focus {

    border-color: hsl(213.5, 96.4%, 44.1%) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsla(213.5, 96.4%, 44.1%, 0.2) !important;
}



#user-dropdown, #notification-dropdown {

    left: -1rem !important;
}