/* Portalın ortaq stili: ağ / qara / sarı-narıncı palitra, ikonlar və tünd rejim */

.icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: -0.22em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

::selection { background: #fde68a; color: #0a0a0a; }

.theme-toggle-btn {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    color: #0a0a0a;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, border-color .2s;
    flex-shrink: 0;
}
.theme-toggle-btn:hover { background: #fef3c7; border-color: #f59e0b; }

.portal-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #b45309;
    text-decoration: none;
    white-space: nowrap;
}
.portal-home-link:hover { color: #0a0a0a; text-decoration: underline; }

.num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ---------- Tünd rejim: body.dark-mode klassı theme.js tərəfindən idarə olunur ---------- */
body.dark-mode {
    background-color: #0a0a0a !important;
    color: #e5e5e5 !important;
}
body.dark-mode header,
body.dark-mode footer,
body.dark-mode aside,
body.dark-mode table,
body.dark-mode .section-card,
body.dark-mode .command-card,
body.dark-mode .slideshow-container,
body.dark-mode .slide,
body.dark-mode .portal-card,
body.dark-mode .stat-tile,
body.dark-mode .panel {
    background-color: #171717 !important;
    color: #e5e5e5 !important;
    box-shadow: 0 0 0 1px #262626 !important;
}
body.dark-mode .bg-white,
body.dark-mode .bg-neutral-50,
body.dark-mode .bg-neutral-100,
body.dark-mode .info-box {
    background-color: #262626 !important;
}
body.dark-mode .bg-amber-50,
body.dark-mode .bg-orange-50,
body.dark-mode .warning-box,
body.dark-mode .note-box {
    background-color: #2a2113 !important;
}
body.dark-mode .text-neutral-500,
body.dark-mode .text-neutral-600,
body.dark-mode .text-neutral-700,
body.dark-mode .text-neutral-800,
body.dark-mode .text-neutral-900,
body.dark-mode .content,
body.dark-mode p,
body.dark-mode li {
    color: #d4d4d4 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 {
    color: #ffffff !important;
}
body.dark-mode .text-amber-600,
body.dark-mode .text-amber-700,
body.dark-mode .text-amber-800,
body.dark-mode .text-orange-600,
body.dark-mode .text-orange-700,
body.dark-mode .text-orange-800,
body.dark-mode .portal-home-link {
    color: #fbbf24 !important;
}
body.dark-mode thead tr {
    background-color: #262626 !important;
    color: #ffffff !important;
}
body.dark-mode td, body.dark-mode th {
    border-color: #333333 !important;
}
body.dark-mode .inactive-tab {
    background-color: #262626 !important;
    color: #d4d4d4 !important;
}
body.dark-mode .sidebar-link { color: #d4d4d4 !important; }
body.dark-mode .sidebar-link:hover { background-color: #262626 !important; }
body.dark-mode .sidebar-link.active { color: #0a0a0a !important; }
body.dark-mode .theme-toggle-btn { background: #262626; border-color: #404040; color: #fbbf24; }
body.dark-mode .theme-toggle-btn:hover { background: #262626; border-color: #f59e0b; }
body.dark-mode .num-badge { background: #262626; }

/* ---------- Ümumi footer (bütün səhifələr) ---------- */
footer.brand-footer {
    background: #0a0a0a;
    color: #d4d4d4;
    border-top: 3px solid #f59e0b;
    margin-top: 3rem;
}
.brand-footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 1.5rem;
}
.brand-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #262626;
}
.brand-footer-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
}
.brand-footer-name .icon { color: #fbbf24; }
.brand-footer-tagline { font-size: 0.875rem; color: #a3a3a3; margin-top: 0.25rem; }
.brand-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 600; }
.brand-footer-links a { color: #e5e5e5; }
.brand-footer-links a:hover { color: #fbbf24; }
.brand-footer-copy { padding-top: 1rem; font-size: 0.85rem; color: #a3a3a3; text-align: center; }
.brand-footer-copy strong { color: #fbbf24; font-weight: 700; }
body.dark-mode footer.brand-footer {
    background-color: #000000 !important;
    color: #d4d4d4 !important;
    box-shadow: none !important;
    border-top: 3px solid #f59e0b;
}
.brand-footer a { text-decoration: none; }

/* ---------- Sayt naviqasiyası (Ana Səhifə · CCNA · Faydalı Linklər · Haqqında) ---------- */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #404040;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.site-nav a .icon { color: #d97706; }
.site-nav a:hover { background: #fef3c7; color: #0a0a0a; }
.site-nav a.active { background: #0a0a0a; color: #fbbf24; }
.site-nav a.active .icon { color: #fbbf24; }
.site-nav.on-dark a { color: #e5e5e5; }
.site-nav.on-dark a .icon { color: #fbbf24; }
.site-nav.on-dark a:hover { background: #262626; color: #fbbf24; }
.site-nav.on-dark a.active, body.dark-mode .site-nav a.active { background: #f59e0b; color: #0a0a0a; }
.site-nav.on-dark a.active .icon, body.dark-mode .site-nav a.active .icon { color: #0a0a0a; }
body.dark-mode .site-nav a { color: #e5e5e5; }
body.dark-mode .site-nav a .icon { color: #fbbf24; }
body.dark-mode .site-nav a:hover { background: #262626; color: #fbbf24; }

/* Footer sosial ikonları */
.brand-footer-social-wrap { padding-top: 1.5rem; text-align: center; }
.brand-footer-social-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: #a3a3a3; margin-bottom: 0.75rem; }
.brand-footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.brand-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: #1f1f1f;
    border: 1px solid #404040;
    color: #fbbf24;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.brand-footer-social a:hover { background: #f59e0b; border-color: #f59e0b; color: #0a0a0a; transform: translateY(-2px); }
.brand-footer-social .icon { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.site-logo { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: #f59e0b; color: #0a0a0a; }
body.dark-mode .site-logo { color: #0a0a0a; }
.site-nav a { white-space: nowrap; }
@media (max-width: 767px) {
    .site-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
}

/* ---------- Mobil: yığcam sabit başlıq ----------
   Başlıq bir sətir ad + bir sətir sürüşən menyu olur; Portal və tema düyməsi menyunun əvvəlinə keçir */
@media (max-width: 767px) {
    header.sticky > nav.container {
        flex-wrap: wrap !important;
        gap: 0.35rem 0.75rem !important;
        padding: 0.6rem 1rem !important;
    }
    header.sticky > nav.container h1 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    header.sticky > nav.container h1 .icon { width: 1.1em; height: 1.1em; }
    header.sticky > nav.container > div:first-child { gap: 0.4rem 0.6rem !important; }
    header.sticky > nav.container > div:last-child {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        width: 100%;
        gap: 1rem !important;
        padding-bottom: 0.2rem !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    header.sticky > nav.container > div:last-child::-webkit-scrollbar { display: none; }
    header.sticky > nav.container > div:last-child > * { flex-shrink: 0; white-space: nowrap; font-size: 0.875rem; }
    header.sticky > nav.container .portal-home-link,
    header.sticky > nav.container .theme-toggle-btn { order: -1; }
    .lesson-badge { font-size: 0.68rem; padding: 0.2rem 0.5rem; }

    /* links.html / about.html başlığı */
    header.sticky > div.container { padding: 0.6rem 1rem !important; }

    /* Məzmun kənarları və kartlar */
    main.container { padding-left: 1rem !important; padding-right: 1rem !important; }
    .section-card { padding: 1.25rem 1rem !important; }
    .section-title { font-size: 1.3rem !important; }
    footer.brand-footer .brand-footer-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
    header.sticky > div.container > a:first-child { font-size: 0.95rem; }
    .brand-footer-links { gap: 0.4rem 1rem; }
}
@media (max-width: 480px) {
    header.sticky .lesson-badge { display: none; }
}
@media (max-width: 767px) {
    /* Cədvəllər: kiçik şrift, sıx xanalar; genişdirsə cədvəlin öz çərçivəsində yana sürüşür */
    .data-table { font-size: 0.85rem; }
    .data-table th, .data-table td { padding: 0.55rem 0.65rem !important; }
    main table { font-size: 0.85rem; }
    /* Köhnə dərslərdəki çox böyük başlıqlar */
    main h2.text-4xl, main h2.text-3xl { font-size: 1.4rem !important; line-height: 1.3 !important; }
    main h3.text-2xl { font-size: 1.15rem !important; }
    /* Footer sosial ikonları bir sıraya sığsın */
    .brand-footer-social { gap: 0.45rem; }
    .brand-footer-social a { width: 2.4rem; height: 2.4rem; }
    .brand-footer-social .icon { width: 1.15rem; height: 1.15rem; }
    /* Kod blokları */
    .code-block pre { font-size: 0.8rem; }
}

/* Lab bölməsi — qaranlıq rejim */
body.dark-mode .lab-solution { background: #171717; border-color: #333333; }
body.dark-mode .lab-solution summary { color: #fbbf24; }
body.dark-mode .lab-footer { border-color: #333333; }
body.dark-mode .lab-done-btn { background: #f59e0b; color: #0a0a0a; }
body.dark-mode .lab-done-btn .icon { color: #0a0a0a; }
body.dark-mode .lab-done-btn.is-done { background: #fbbf24; }