/* Layout Manager Styles - Clean Responsive Architecture */

/* === BASE LAYOUT MODES === */
.layout-desktop {
    /* Desktop specific styles */
}

.layout-tablet {
    /* Tablet specific styles */
}

.layout-mobile {
    /* Mobile specific styles */
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* === DESKTOP GRID LAYOUT === */
.desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 1fr;
    grid-template-areas:
        "output-4 output-4 right-panel"
        "history-panel input-center console-panel";
    height: 100vh;
    gap: 2px;
}

.desktop-grid.hide-first-row {
    grid-template-rows: 0px 1fr 1fr;
}

.desktop-grid.hide-first-row #output-1,
.desktop-grid.hide-first-row #output-2 {
    display: none;
}

/* === TABLET LAYOUT === */
.tablet-grid {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.tablet-tabs-container {
    display: flex;
    flex-direction: column;
    height: 60%;
    border: 1px solid #2d3748;
    margin-bottom: 2px;
}

.tablet-tabs-nav {
    display: flex;
    background: #232a3d;
    border-bottom: 1px solid #2d3748;
    flex-shrink: 0;
}

.tablet-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.tablet-tab-btn:hover {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
}

.tablet-tab-btn.active {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
}

.tablet-tabs-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.tablet-tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.tablet-tab-content.active {
    display: flex;
    flex-direction: column;
}

.tablet-outputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    height: 100%;
}

.tablet-outputs-grid #tablet-output-4 {
    grid-column: 1 / -1;
}

.tablet-output-slot {
    background: #1a1d29;
    border: 1px solid #2d3748;
    border-radius: 4px;
    overflow: hidden;
}

/* Input panel остается внизу на планшете */
.layout-tablet #input-center {
    height: 40vh !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tablet panels visibility override */
.layout-tablet #output-1,
.layout-tablet #output-2,
.layout-tablet #output-4,
.layout-tablet #right-panel-container,
.layout-tablet #history-panel,
.layout-tablet #console-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* === MOBILE STACK LAYOUT === */
.mobile-stack {
    display: none; /* Скрываем оригинальный grid на мобильном */
}

.mobile-tabs-container {
    display: flex;
    flex-direction: column;
    height: 50vh;
    background: #1a1d29;
    border: 1px solid #2d3748;
}

.mobile-tabs-nav {
    display: flex;
    background: #232a3d;
    border-bottom: 1px solid #2d3748;
    flex-shrink: 0;
}

.mobile-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 8px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.mobile-tab-btn:hover {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
}

.mobile-tab-btn.active {
    color: #a78bfa;
    border-bottom-color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
}

.mobile-tabs-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.mobile-tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.mobile-tab-content.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Mobile input panel */
.layout-mobile #input-center {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    z-index: 1000;
    background: #1a1d29;
    border-top: 1px solid #2d3748;
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet specific adjustments */
    .tablet-tab-btn {
        font-size: 11px;
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    /* Mobile specific adjustments */
    .mobile-tab-btn {
        font-size: 10px;
        padding: 6px 3px;
    }
}

/* === CONTENT STYLING === */
.mobile-history,
.mobile-calendar,
.mobile-todo {
    background: #1a1d29;
    color: #c9d1d9;
}

.mobile-history .history-header,
.mobile-calendar .calendar-header,
.mobile-todo .todo-header {
    padding: 10px;
    border-bottom: 1px solid #2d3748;
    background: #232a3d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-history .history-title,
.mobile-calendar .calendar-title,
.mobile-todo .todo-title {
    font-weight: bold;
    font-size: 12px;
}

.mobile-history .history-controls button {
    background: transparent;
    border: 1px solid #4b5563;
    color: #9ca3af;
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 4px;
    cursor: pointer;
}

.mobile-history .history-controls button:hover {
    background: rgba(167, 139, 250, 0.1);
    border-color: #a78bfa;
    color: #a78bfa;
}

/* Calendar grid styling */
.calendar-grid-container {
    overflow-y: auto;
}

/* Todo input styling */
.mobile-todo .todo-input input {
    background: #0f0f1a;
    border: 1px solid #2d3748;
    color: #c9d1d9;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.mobile-todo .todo-input input:focus {
    outline: none;
    border-color: #a78bfa;
}

/* === HIDE ELEMENTS BY MODE === */
.layout-mobile .first-row-toggle {
    display: none;
}

/* На мобильном скрываем desktop панели только если есть мобильный контейнер */
.layout-mobile.has-mobile-tabs #output-1,
.layout-mobile.has-mobile-tabs #output-2,
.layout-mobile.has-mobile-tabs #output-4,
.layout-mobile.has-mobile-tabs #right-panel-container,
.layout-mobile.has-mobile-tabs #history-panel,
.layout-mobile.has-mobile-tabs #console-panel {
    display: none;
}

/* Show input panel on mobile - aggressive override */
.layout-mobile #input-center,
body.layout-mobile #input-center {
    display: flex !important;
    position: fixed !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    width: 100vw !important;
    height: 50vh !important;
    z-index: 1001 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: #1a1d29 !important;
    border-top: 1px solid #2d3748 !important;
}

/* === SMOOTH TRANSITIONS === */
.desktop-grid,
.tablet-tabs-container,
.mobile-tabs-container {
    transition: all 0.3s ease;
}

.tablet-tab-content,
.mobile-tab-content {
    transition: opacity 0.2s ease;
}

/* === UTILITY CLASSES === */
.layout-hidden {
    display: none !important;
}

.layout-visible {
    display: block !important;
}

.layout-flex {
    display: flex !important;
}

/* === DEBUG BORDERS (remove in production) === */
.layout-debug .desktop-grid {
    border: 2px solid red;
}

.layout-debug .tablet-tabs-container {
    border: 2px solid blue;
}

.layout-debug .mobile-tabs-container {
    border: 2px solid green;
}