/* ========================================
   FlashCards - 3-колонная адаптивная верстка
   ======================================== */

/* Глобальные стили */
* { 
    box-sizing: border-box; 
}

* {
    font-family: 'Saira Extra Condensed', sans-serif !important;
}

body {
    font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, 
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
                 "Noto Color Emoji";
    text-transform: uppercase;
}

.btn, .btn *, .btn-brick, .btn-brick * {
    text-transform: uppercase !important;
}

/* ФИКС: кириллица не растягивает блоки 
:lang(ru), :lang(pt) {
  letter-spacing: -0.02em;     
  word-spacing: -0.5px;        
  text-rendering: optimizeLegibility;
}*/

html:lang(ru) { font-size: 85%; }

:lang(ru) {
    /* 🔥 ПОХОЖИЕ НА SAIRA - узкие кириллические */
    font-family: "Exo 2", "Rajdhani", "Orbitron", "PT Serif", "Inter", sans-serif !important;
    letter-spacing: -0.05em;
}

/*nav .nav-link:lang(ru) {
    font-size: 11pt !important;  
}*/

/* ФИКС: блоки не расширяются */
.resume-section, .card, .card-body {
  min-height: 120px;  
}

/* Типографика */
h1, .h1 { font-size: calc(1.725rem + 5.7vw); }
p.lead { font-size: 1rem; font-weight: 400; }
label { font-size: 0.7rem; }
textarea { text-transform: uppercase; }
input { text-transform: uppercase; }
select { text-transform: uppercase; }

/* Цветовая схема */
.btn-brick {
    background-color: #bd5d38 !important;
    color: rgba(255,255,255,0.95) !important;
}

.text-brick { color: #bd5d38 !important; }
.text-brick:hover { color: #a54a2e !important; }

/* Формы и инпуты */
.form-control:focus {
    border-color: #deae9c;
    box-shadow: 0 0 0 0.25rem rgba(189, 93, 56, 0.25);
}

/* Убираем скругления */
.form-control, .form-control-lg, .btn, .btn-lg, .card, .alert {
    border-radius: 0 !important;
}

.login-form {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* ========================================
   ЛЕВАЯ НАВИГАЦИЯ (десктоп)
   ======================================== */
#leftSidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 17rem !important;
    height: 100vh !important;
    z-index: 1050 !important;
    background-color: #bd5d38 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto;
    box-shadow: 3px 0 20px rgba(189,93,56,0.4);
}

#leftSidebar .nav-link {
    color: rgba(255,255,255,0.95) !important;
    background: transparent !important;
    padding: 12px 16px;
    justify-content: center !important;
}

#leftSidebar .nav-link:hover,
#leftSidebar .nav-link.active {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ========================================
   ПРАВАЯ ПАНЕЛЬ - УНИВЕРСАЛЬНАЯ
   ======================================== */
#rightSidebar.right-sidebar-universal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 25rem !important;
    height: 100vh !important;
    z-index: 1040 !important;
    border-left: 1px solid #dee2e6;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ========================================
   MAIN (десктоп по умолчанию)
   ======================================== */
main {
    margin-left: 17rem !important;
    margin-right: 17rem !important;
    min-height: 100vh;
}

/* ========================================
   🔥 КНОПКА ПРАВОЙ ПАНЕЛИ - ФИНАЛЬНАЯ ЛОГИКА
   ======================================== */
.right-panel-toggle {
    display: block !important; /* ✅ ВИДНА ПО УМОЛЧАНИЮ */
    z-index: 1060 !important;
}

/* ========================================
   АДАПТИВНОСТЬ - НОВАЯ ЛОГИКА
   ======================================== */

/* ✅ МОБИЛЬНЫЕ <992px - ПОЛНАЯ ШИРИНА */
@media (max-width: 991.98px) {
    #leftSidebar, #rightSidebar.right-sidebar-universal { 
        display: none !important; 
    }
    
    main { 
        margin: 0 !important;
        /*padding-top: 80px !important; */
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
    }
    
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    .row {
        margin: 0 !important;
    }
    
    /* ✅ КНОПКА ВИДНА НА МОБИЛЬНЫХ */
    .right-panel-toggle {
        display: block !important;
    }

    /*-----*/
    .study-page {
        all: unset !important;
        display: block !important;
        padding: 1rem !important;
        padding-top: 3rem !important;
        min-height: 1px !important;
    }
    
    .study-page .resume-section-content {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Контейнер карточки */
    #card-container {
        margin-bottom: 2rem !important;
    }
}

/* ✅ НОУТБУКИ 992-1399px */
@media (min-width: 992px) and (max-width: 1399.98px) {
    #rightSidebar.right-sidebar-universal {
        transform: translateX(100%) !important;
    }
    
    main {
        margin-right: 0 !important;
        margin-left: 17rem !important;
        width: calc(100% - 17rem) !important;
        max-width: calc(100% - 17rem) !important;
        overflow-x: hidden !important;
    }
    
    /* ✅ КНОПКА ВИДНА НА НОУТБУКАХ */
    .right-panel-toggle {
        display: block !important;
    }
}

/* ✅ ДЕСКТОП ≥1400px */
@media (min-width: 1400px) {
    #rightSidebar.right-sidebar-universal {
        transform: none !important;
        visibility: visible !important;
    }
    
    main { 
        margin-right: 17rem !important; 
        margin-left: 17rem !important;
    }
    
    /* ✅ КНОПКА СКРЫТА НА ДЕСКТОПЕ */
    .right-panel-toggle {
        display: none !important;
    }
}

@media (min-width: 992px) {
    main { padding-top: 0 !important; }
}

/* ========================================
   МОБИЛЬНЫЕ МЕНЮ (offcanvas)
   ======================================== */
.mobile-menu-white .offcanvas-body {
    color: white !important;
}

.mobile-menu-white .offcanvas-body .nav-link,
.mobile-menu-white .offcanvas-body a,
.mobile-menu-white .offcanvas-body .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mobile-menu-white .offcanvas-body .nav-link:hover,
.mobile-menu-white .offcanvas-body .nav-link.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.offcanvas-body {
    scrollbar-width: thin;
}

/* ========================================
   МЕНЮ - submenu-toggle (иконка+текст+стрелка)
   ======================================== */
.submenu-toggle { 
    display: flex !important; 
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
}

.folder-icon {
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

.set-title {
    flex-grow: 1 !important;
    text-align: center !important;
    margin: 0 12px !important;
}

.submenu-arrow { 
    margin-left: auto !important;
    flex-shrink: 0 !important;
    font-size: 0.8em !important; 
    transition: transform 0.2s ease !important;
}

.navbar-nav .ps-4 { 
    border-left: 3px solid #bd5d38 !important; 
}

/* ========================================
   ДОПОЛНИТЕЛЬНЫЕ СЕКЦИИ
   ======================================== */
.resume-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0.8rem;
    scroll-snap-align: start;
}

.resume-section-content {
    max-width: 800px;
    width: 100%;
}

.text-muted {
  font-size: 12px !important;
}
/*.text-muted:lang(ru) {
  font-size: 10px !important;
}*/