/* Sebastian Theme Colors */
:root {
    --sebastian-dark: #18181b;
    --sebastian-gray: #2c2a27;
    --sebastian-light-gray: #3e3b36;
    --sebastian-red: #a92d2d;
    --sebastian-light-red: #cc3434;
}

/* Sebastian Utility Classes */
.bg-sebastian-dark {
    background-color: var(--sebastian-dark) !important;
}
.bg-sebastian-gray {
    background-color: var(--sebastian-gray) !important;
}
.bg-sebastian-light-gray {
    background-color: var(--sebastian-light-gray) !important;
}
.bg-sebastian-red {
    background-color: var(--sebastian-red) !important;
}
.bg-sebastian-light-red {
    background-color: var(--sebastian-light-red) !important;
}

.text-sebastian-red {
    color: var(--sebastian-red) !important;
}
.text-sebastian-light-red {
    color: var(--sebastian-light-red) !important;
}

#app {
    padding-top:75px;
}
.navbar-brand img {
    height: 50px!important;
}

/* Typography - Restore heading sizes */
h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

h2 {
    font-size: 1.75rem !important; 
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
}

h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

h5 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}

h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
}

/* Mermaids */
.mermaid {
    overflow: hidden;
    border: 1px solid #ccc;
    max-height: 700px;
}

.dark .mermaid {
    border-color: var(--sebastian-light-gray);
}

.mermaid svg {
    width: 100%;
    height: 700px;
}
#mermaid-editor {
    height: 700px;
    max-height: 700px;;
}

/* Dark mode overrides for elements not covered by Tailwind */
.dark .navbar {
    background-color: var(--sebastian-dark);
    color: #f3f4f6;
}

.dark .card {
    background-color: var(--sebastian-gray);
    color: #f3f4f6;
    border-color: var(--sebastian-light-gray);
}

.dark .card-header {
    background-color: var(--sebastian-dark);
    border-color: var(--sebastian-light-gray);
}

.dark .list-group-item {
    background-color: var(--sebastian-gray);
    color: #f3f4f6;
    border-color: var(--sebastian-light-gray);
}

.dark a {
    color: var(--sebastian-red);
}

.dark a:hover {
    color: var(--sebastian-light-red);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    min-width: 200px;
    z-index: 10;
}
.show {
    display: block;
}