/* Import Font */
@import "https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap";

:root {
    --light-bg: #f0f2f5;
    --light-card-bg: #fff;
    --light-text-color: #212529;
    --light-primary: #222;
    --light-border-color: #dee2e6;
    
    --dark-bg: #121212;
    --dark-card-bg: #1e1e1e;
    --dark-text-color: #fff;
    --dark-secondary-text-color: #b3b3b3;
    --dark-primary-accent: #efdf0d;
    --dark-border-color: #333;
}

/* Default is Light Mode */
body {
    background-color: var(--light-bg);
    color: var(--light-text-color);
    font-family: 'Mozilla Headline', sans-serif;
    padding-top: 90px;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode Overrides */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text-color);
}

.container { max-width: 780px; }

/* Navbar */
#mainNavbar {
    background-color: var(--light-card-bg);
    border-bottom: 1px solid var(--light-border-color);
}
body.dark-mode #mainNavbar {
    background-color: var(--dark-card-bg);
    border-bottom: 1px solid var(--dark-border-color);
}
.main-title {
    color: var(--light-text-color);
    font-size: 1.5rem;
    font-weight: 600;
}
body.dark-mode .main-title { color: var(--dark-primary-accent); }
.navbar-nav .nav-link { color: #6c757d; font-weight: 500; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--light-primary); }
body.dark-mode .navbar-nav .nav-link { color: var(--dark-secondary-text-color); }
body.dark-mode .navbar-nav .nav-link.active, body.dark-mode .navbar-nav .nav-link:hover { color: var(--dark-primary-accent); }
.navbar-toggler { 
    border: 1px solid var(--light-border-color); 
}
.navbar-toggler:focus { 
    box-shadow: none !important;
}
.navbar-toggler-icon { 
    filter: none; 
}
body.dark-mode .navbar-toggler { 
    border-color: var(--dark-border-color); 
}
body.dark-mode .navbar-toggler-icon { 
    filter: invert(1) grayscale(100%) brightness(200%); 
}

/* Cards */
.content-card {
    background-color: var(--light-card-bg);
    border: 1px solid var(--light-border-color);
    border-radius: 0.5rem;
}
body.dark-mode .content-card {
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-border-color);
}
.stat-card { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.stat-card .icon { font-size: 2.8rem; color: var(--light-primary); }
body.dark-mode .stat-card .icon { color: var(--dark-primary-accent); }
.stat-card .label { font-size: 0.9rem; font-weight: 500; text-transform: uppercase; color: #6c757d; }
body.dark-mode .stat-card .label { color: var(--dark-secondary-text-color); }
.stat-card .value { color: var(--light-text-color); font-size: 2rem; font-weight: 600; line-height: 1.2; }
body.dark-mode .stat-card .value { color: var(--dark-text-color); }

/* Forms & Tabs */
.nav-tabs { border-bottom-color: var(--light-border-color); }
.nav-tabs .nav-link { border: none; color: #6c757d; }
.nav-tabs .nav-link.active { background-color: transparent; color: var(--light-primary); border-bottom: 2px solid var(--light-primary); }
body.dark-mode .nav-tabs { border-bottom: 1px solid var(--dark-border-color); }
body.dark-mode .nav-tabs .nav-link { color: var(--dark-secondary-text-color); }
body.dark-mode .nav-tabs .nav-link.active { color: var(--dark-primary-accent); border-bottom: 2px solid var(--dark-primary-accent); }
.tab-content { border-top: none; }
.form-control { background-color: #fff; border-color: var(--light-border-color); color: var(--light-text-color); }
.form-control:focus { background-color: #fff; border-color: var(--light-primary); box-shadow: none; }
body.dark-mode .form-control { background-color: var(--dark-bg); border-color: var(--dark-border-color); color: var(--dark-text-color); }
body.dark-mode .form-control:focus { background-color: var(--dark-bg); border-color: var(--dark-primary-accent); }
.btn-custom-accent { background-color: var(--light-primary); color: #fff; font-weight: 600; }
body.dark-mode .btn-custom-accent { background-color: var(--dark-primary-accent); color: #000; }
.custom-file-input-wrapper { display: flex; align-items: center; border: 1px solid var(--light-border-color); border-radius: .375rem; padding: .375rem; }
.btn-custom-file-trigger { background-color: #e9ecef; border: 1px solid var(--light-border-color); border-radius: .25rem; color: var(--light-text-color); cursor: pointer; padding: .375rem .75rem; white-space: nowrap; }
.file-name-display { color: var(--light-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark-mode .custom-file-input-wrapper { border-color: var(--dark-border-color); }
body.dark-mode .btn-custom-file-trigger { background-color: #333; border-color: var(--dark-border-color); color: var(--dark-secondary-text-color); }
body.dark-mode .file-name-display { color: var(--dark-secondary-text-color); }

/* System Info Table */
.sys-info-table { --bs-table-bg: transparent; --bs-table-color: var(--light-text-color); --bs-table-border-color: var(--light-border-color); margin-bottom: 0; }
.sys-info-table td { padding: .75rem .5rem; }
.sys-info-table .label { color: #6c757d; white-space: nowrap; width: 1%; }
.sys-info-table .colon { color: #6c757d; width: 20px; }
body.dark-mode .sys-info-table { --bs-table-color: var(--dark-text-color); --bs-table-border-color: var(--dark-border-color); }
body.dark-mode .sys-info-table .label, body.dark-mode .sys-info-table .colon { color: var(--dark-secondary-text-color); }

/* FINAL REVISED: Theme Switch (All focus effects removed) */
.form-switch .form-check-label { color: var(--light-text-color); font-weight: 500; }
body.dark-mode .form-switch .form-check-label { color: var(--dark-secondary-text-color); }
.form-switch .form-check-input { background-color: #dee2e6; border-color: #ced4da; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--light-primary); border-color: var(--light-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
    border-color: #ced4da !important;
    outline: 0;
    box-shadow: none !important;
}
.form-switch .form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    border-color: var(--light-primary) !important;
}
body.dark-mode .form-switch .form-check-input { background-color: #333; border-color: var(--dark-border-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b3b3b3'/%3e%3c/svg%3e"); }
body.dark-mode .form-switch .form-check-input:checked { background-color: var(--dark-primary-accent); border-color: var(--dark-primary-accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231e1e1e'/%3e%3c/svg%3e"); }
body.dark-mode .form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b3b3b3'/%3e%3c/svg%3e") !important;
    border-color: var(--dark-border-color) !important;
}
body.dark-mode .form-switch .form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231e1e1e'/%3e%3c/svg%3e") !important;
    border-color: var(--dark-primary-accent) !important;
}

/* Mobile Sidebar */
.offcanvas { background-color: var(--light-card-bg); }
.offcanvas.offcanvas-start { width: 70%; }
body.dark-mode .offcanvas { background-color: var(--dark-card-bg); }
.sidebar-cover .cover-image { display: block; height: 150px; width: 100%; object-fit: cover; }
.sidebar-cover .btn-close { filter: none; position: absolute; right: 1rem; top: 1rem; }
body.dark-mode .sidebar-cover .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Docs Page */
.code-block-wrapper { position: relative; margin-top: 1rem; }
.code-block { background-color: var(--light-bg); border: 1px solid var(--light-border-color); border-radius: 0.5rem; padding: 1rem; white-space: pre-wrap; word-break: break-all; margin-top: 0; }
body.dark-mode .code-block { background-color: var(--dark-bg); border-color: var(--dark-border-color); }
.copy-btn { position: absolute; top: .5rem; right: .5rem; background-color: #e9ecef; border: 1px solid var(--light-border-color); color: var(--light-text-color); opacity: 0.7; }
.copy-btn:hover { opacity: 1; }
.copy-btn:focus { box-shadow: none; }
.copy-btn.btn-success { background-color: #198754; color: white; border-color: #198754; }
body.dark-mode .copy-btn { background-color: #333; border-color: var(--dark-border-color); color: var(--dark-secondary-text-color); }
body.dark-mode .copy-btn.btn-success { background-color: #2ea04f; color: white; border-color: #2ea04f; }

/* Contact Page */
.contact-description { color: #6c757d; }
body.dark-mode .contact-description { color: var(--dark-secondary-text-color); }
.contact-list { border-top: 1px solid var(--light-border-color); }
body.dark-mode .contact-list { border-top-color: var(--dark-border-color); }
.contact-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--light-border-color); text-decoration: none; color: var(--light-text-color); transition: background-color 0.2s; }
.contact-item:hover { background-color: var(--light-bg); }
body.dark-mode .contact-item { border-bottom-color: var(--dark-border-color); color: var(--dark-text-color); }
body.dark-mode .contact-item:hover { background-color: var(--dark-bg); }
.contact-icon { font-size: 1.5rem; width: 30px; text-align: center; color: var(--light-primary); }
body.dark-mode .contact-icon { color: var(--dark-primary-accent); }

/* REVISED: Result box style */
.result-box {
    display: flex;
    align-items: center;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}
body.dark-mode .result-box {
    background-color: var(--dark-bg);
    border-color: var(--dark-border-color);
}
.result-url {
    flex-grow: 1;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.result-url::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
.copy-btn-result {
    background: none;
    border: none;
    color: #6c757d;
    margin-left: 0.75rem;
}
body.dark-mode .copy-btn-result {
    color: var(--dark-secondary-text-color);
}