/* ============================================
   Enjaz Mo3alem API - Custom Swagger Theme
   Modern Dark Theme with Light Mode Toggle
   ============================================ */

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, rgb(130, 149, 231) 0%, #3469d2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.theme-toggle-btn:active {
    transform: translateY(0);
}

/* Database Diagram Button */
.db-diagram-btn {
    position: fixed;
    bottom: 70px;
    /* Position above the theme toggle button */
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #49cc90 0%, #3ab67a 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(73, 204, 144, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-diagram-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(73, 204, 144, 0.6);
}

.db-diagram-btn:active {
    transform: translateY(0);
}

.db-icon {
    width: 20px;
    height: 20px;
}

/* ============================================
   DARK THEME (Default)
   ============================================ */

body {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Topbar */
.swagger-ui .topbar {
    background: #2a2a2a !important;
    border-bottom: 3px solid #3469d2 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.swagger-ui .topbar .download-url-wrapper {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 8px;
}

.swagger-ui .topbar .download-url-wrapper input[type=text] {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 6px;
}

/* Info Section */
.swagger-ui .info {
    background: #2a2a2a !important;
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.swagger-ui .info .title {
    color: #eeeeee !important;
    font-size: 36px !important;
    font-weight: 700 !important;
}

.swagger-ui .info p,
.swagger-ui .info li {
    color: #b8b8b8 !important;
}

/* Scheme Container */
.swagger-ui .scheme-container {
    background: #2a2a2a !important;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Operations */
.swagger-ui .opblock-tag {
    background: #2a2a2a !important;
    border-radius: 8px;
    margin: 8px 0;
    border: 1px solid #333333 !important;
    transition: all 0.3s ease;
}

.swagger-ui .opblock-tag:hover {
    border-color: #444444 !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}

.swagger-ui .opblock-tag-section {
    padding: 15px 20px;
}

.swagger-ui .opblock-tag-section h3 {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
}

/* Operation Blocks */
.swagger-ui .opblock {
    background: #2a2a2a !important;
    border: 1px solid #333333 !important;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.swagger-ui .opblock:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.swagger-ui .opblock.is-open {
    border-color: #444444 !important;
}

.swagger-ui .opblock .opblock-summary {
    background: #2a2a2a !important;
    border-radius: 8px 8px 0 0;
}

.swagger-ui .opblock .opblock-summary-method {
    border-radius: 6px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* HTTP Method Colors */
.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background: linear-gradient(135deg, #61affe 0%, #4a9eff 100%) !important;
    box-shadow: 0 4px 16px #61affe77;
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background: linear-gradient(135deg, #49cc90 0%, #3ab67a 100%) !important;
    box-shadow: 0 4px 16px #9cdfd1a1;
}

.swagger-ui .opblock.opblock-put .opblock-summary-method {
    background: linear-gradient(135deg, #fca130 0%, #f59020 100%) !important;
    box-shadow: 0 4px 16px #f5b66977;
}

.swagger-ui .opblock.opblock-delete .opblock-summary-method {
    background: linear-gradient(135deg, #f93e3e 0%, #e92e2e 100%) !important;
    box-shadow: 0 4px 16px #f5696977;
}

.swagger-ui .opblock.opblock-patch .opblock-summary-method {
    background: linear-gradient(135deg, #50e3c2 0%, #40d3b2 100%) !important;
    box-shadow: 0 4px 16px #50e3c277;
}

/* Operation Summary */
.swagger-ui .opblock-summary-description,
.swagger-ui .opblock-summary-path {
    color: #e0e0e0 !important;
}

.swagger-ui .opblock-summary-path__deprecated {
    color: #f93e3e !important;
}

/* Parameters */
.swagger-ui .parameters-col_description {
    color: #b8b8b8 !important;
}

.swagger-ui .parameter__name {
    color: #667eea !important;
    font-weight: 600;
}

.swagger-ui .parameter__type {
    color: #49cc90 !important;
}

.swagger-ui table thead tr th {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-bottom: 2px solid #333333 !important;
}

.swagger-ui table tbody tr td {
    background: #1f1f1f !important;
    color: #b8b8b8 !important;
    border-bottom: 1px solid #333333 !important;
}

/* Inputs and Textareas */
.swagger-ui input[type=text],
.swagger-ui input[type=password],
.swagger-ui input[type=email],
.swagger-ui textarea,
.swagger-ui select {
    background: #1f1f1f !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    border-radius: 6px;
    padding: 10px;
}

.swagger-ui input[type=text]:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Buttons */
.swagger-ui .btn {
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.swagger-ui .btn.execute {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.swagger-ui .btn.execute:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.swagger-ui .btn.cancel {
    background: #333333 !important;
    border: 1px solid #444444 !important;
    color: #e0e0e0 !important;
}

.swagger-ui .btn.authorize {
    background: linear-gradient(135deg, #49cc90 0%, #3ab67a 100%) !important;
    border: none !important;
    color: white !important;
}

/* Tab Headers inside Operation Blocks */
.swagger-ui .opblock-body .tab-header {
    background: #1f1f1f !important;
    border-bottom: 1px solid #333333 !important;
}

.swagger-ui .opblock-body .tab-header .tab-item {
    background: transparent !important;
    color: #b8b8b8 !important;
    border: none !important;
}

.swagger-ui .opblock-body .tab-header .tab-item.active {
    color: #e0e0e0 !important;
}


/* Try it out button */
.swagger-ui .try-out__btn {
    background: #3469d2 !important;
    border: 1px solid #3469d2 !important;
    color: #e0e0e0 !important;
}

.swagger-ui .try-out__btn:hover {
    background: #4e7edf !important;
    border-color: #4e7edf !important;
}


.swagger-ui .opblock-section p {
    color: #b8b8b8 !important;
}

/* Response/Request body section */
.swagger-ui .opblock-section-header {
    background: #1f1f1f !important;
    border-bottom: 1px solid #333333 !important;
}

.swagger-ui .opblock-section-header h4 {
    color: #e0e0e0 !important;
}

/* Response tabs */
.swagger-ui .responses-wrapper .tab-header {
    background: #1f1f1f !important;
}

/* Responses */
.swagger-ui .responses-inner {
    background: #1f1f1f !important;
    border-radius: 8px;
    padding: 15px;
}

.swagger-ui .response-col_status {
    color: #49cc90 !important;
    font-weight: 700;
}

.swagger-ui .response-col_description {
    color: #b8b8b8 !important;
}

.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5,
.swagger-ui .responses-inner h6,
.swagger-ui .responses-inner button {
    color: #e0e0e0 !important;
}

/* Code Blocks */
.swagger-ui .highlight-code {
    background: #1a1a1a !important;
    border-radius: 6px;
}

.swagger-ui .microlight {
    color: #e0e0e0 !important;
}

/* Models */
.swagger-ui .model-box {
    background: #2a2a2a !important;
    border-radius: 8px;
    border: 1px solid #333333 !important;
}

.swagger-ui .model-title {
    color: #667eea !important;
    font-weight: 600;
}

.swagger-ui .model {
    color: #b8b8b8 !important;
}

.swagger-ui .prop-type {
    color: #49cc90 !important;
}

.swagger-ui .prop-format {
    color: #fca130 !important;
}

/* Authorization Modal */
.swagger-ui .dialog-ux {
    background: #2a2a2a !important;
    border: 1px solid #333333 !important;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.swagger-ui .dialog-ux .modal-ux-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 12px 12px 0 0;
}

.swagger-ui .dialog-ux .modal-ux-header h3 {
    color: white !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* ============================================
   LIGHT THEME
   ============================================ */

body.light-theme {
    background: #f5f7fa !important;
    color: #2d3748 !important;
}

body.light-theme .swagger-ui .topbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

body.light-theme .swagger-ui .info {
    background: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body.light-theme .swagger-ui .info .title {
    color: #667eea !important;
}

body.light-theme .swagger-ui .info p,
body.light-theme .swagger-ui .info li {
    color: #4a5568 !important;
}

body.light-theme .swagger-ui .scheme-container {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.light-theme .swagger-ui .opblock-tag {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui .opblock-tag:hover {
    border-color: #667eea !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}

body.light-theme .swagger-ui .opblock-tag-section h3 {
    color: #2d3748 !important;
}

body.light-theme .swagger-ui .opblock {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui .opblock .opblock-summary {
    background: #f7fafc !important;
}

body.light-theme .swagger-ui .opblock-summary-description,
body.light-theme .swagger-ui .opblock-summary-path {
    color: #2d3748 !important;
}

body.light-theme .swagger-ui .parameters-col_description {
    color: #4a5568 !important;
}

body.light-theme .swagger-ui table thead tr th {
    background: #f7fafc !important;
    color: #2d3748 !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui table tbody tr td {
    background: white !important;
    color: #4a5568 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui input[type=text],
body.light-theme .swagger-ui input[type=password],
body.light-theme .swagger-ui input[type=email],
body.light-theme .swagger-ui textarea,
body.light-theme .swagger-ui select {
    background: white !important;
    border: 1px solid #cbd5e0 !important;
    color: #2d3748 !important;
}

body.light-theme .swagger-ui .btn.cancel {
    background: #edf2f7 !important;
    border: 1px solid #cbd5e0 !important;
    color: #2d3748 !important;
}

body.light-theme .swagger-ui .responses-inner {
    background: #f7fafc !important;
}

body.light-theme .swagger-ui .response-col_description {
    color: #4a5568 !important;
}

body.light-theme .swagger-ui .highlight-code {
    background: #2d3748 !important;
}

body.light-theme .swagger-ui .microlight {
    color: #e2e8f0 !important;
}

/* Light Theme - Code blocks in request/response bodies - Keep dark background */
body.light-theme .swagger-ui .body-param__text,
body.light-theme .swagger-ui .response-col_description__inner pre,
body.light-theme .swagger-ui .response-col_description__inner code,
body.light-theme .swagger-ui .opblock-body pre,
body.light-theme .swagger-ui .opblock-body code,
body.light-theme .swagger-ui textarea.body-param__text {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Light Theme - Example values - Keep dark background */
body.light-theme .swagger-ui .example,
body.light-theme .swagger-ui .example-value {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* Light Theme - Model example - Keep dark background */
body.light-theme .swagger-ui .model-example,
body.light-theme .swagger-ui .model-example pre {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
}

body.light-theme .swagger-ui .model-box {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui .model {
    color: #4a5568 !important;
}

body.light-theme .swagger-ui .dialog-ux {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme ::-webkit-scrollbar-track {
    background: #f7fafc;
}

/* Light Theme - Tab Headers */
body.light-theme .swagger-ui .opblock-body .tab-header {
    background: #f7fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui .opblock-body .tab-header .tab-item {
    background: transparent !important;
    color: #4a5568 !important;
    border: none !important;
}

body.light-theme .swagger-ui .opblock-body .tab-header .tab-item.active {
    color: #2d3748 !important;
}

/* Light Theme - Try it out button */
body.light-theme .swagger-ui .try-out__btn {
    background: #3469d2 !important;
    border: 1px solid #3469d2 !important;
    color: white !important;
}

body.light-theme .swagger-ui .try-out__btn:hover {
    background: #4e7edf !important;
    border-color: #4e7edf !important;
}

/* Light Theme - Section paragraphs */
body.light-theme .swagger-ui .opblock-section p {
    color: #4a5568 !important;
}

/* Light Theme - Response/Request body section */
body.light-theme .swagger-ui .opblock-section-header {
    background: #f7fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .swagger-ui .opblock-section-header h4 {
    color: #2d3748 !important;
}

/* Light Theme - Response tabs */
body.light-theme .swagger-ui .responses-wrapper .tab-header {
    background: #f7fafc !important;
}

/* Light Theme - Response inner elements */
body.light-theme .swagger-ui .responses-inner h4,
body.light-theme .swagger-ui .responses-inner h5,
body.light-theme .swagger-ui .responses-inner h6,
body.light-theme .swagger-ui .responses-inner button {
    color: #2d3748 !important;
}

/* Light Theme - Rendered markdown */
body.light-theme .renderedMarkdown p {
    color: #4a5568 !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.swagger-ui .opblock {
    animation: fadeIn 0.3s ease;
}


.renderedMarkdown p {
    color: #aaaaaa !important;
}

.model-example {
    border-radius: 10px !important;
    padding: 0px 10px !important;
}

.response-col_status {
    padding: 10px !important;
}

/* Replace Swagger Logo */
.swagger-ui .topbar-wrapper .link {
    display: flex;
    align-items: center;
}

/* Hide the default Swagger SVG logo */
.swagger-ui .topbar-wrapper .link svg {
    display: none !important;
}

/* Add your custom logo */
.swagger-ui .topbar-wrapper .link::before {
    content: "";
    display: block;
    width: 200px;
    /* Adjust width as needed */
    height: 70px;
    /* Adjust height as needed */
    background-image: url('/Enjaz Logo.svg');
    /* Replace with your logo path */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: start;
}