/**
 * Browser Base CSS - Structural classes for browser-style programs
 * These classes are theme-agnostic and provide layout structure only.
 * Theme-specific styling is in web-XXXX.css files.
 */

/* ================================================
   Browser Page Container
   ================================================ */
.browser-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

.browser-page-content {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.browser-page-centered {
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================
   Browser Toolbar (Navigation Bar)
   ================================================ */
.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.browser-toolbar button {
    flex-shrink: 0;
}

.browser-toolbar .url-bar {
    flex: 1;
    min-width: 0;
}

/* ================================================
   Browser Header / Banner
   ================================================ */
.browser-header {
    padding: 16px;
    text-align: center;
}

.browser-header-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 4px;
}

.browser-header-subtitle {
    font-size: 12px;
    opacity: 0.8;
}

/* ================================================
   Browser Cards / Boxes
   ================================================ */
.browser-card {
    padding: 16px;
    margin-bottom: 16px;
}

.browser-card-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 4px;
}

.browser-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.browser-card-row:last-child {
    margin-bottom: 0;
}

.browser-card-label {
    font-size: 12px;
}

.browser-card-value {
    font-size: 12px;
    font-weight: bold;
}

/* ================================================
   Browser Grid Layouts
   ================================================ */
.browser-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.browser-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.browser-stat-box {
    padding: 8px;
    text-align: center;
}

.browser-stat-label {
    font-size: 10px;
    margin-bottom: 2px;
}

.browser-stat-value {
    font-size: 14px;
    font-weight: bold;
}

/* ================================================
   Browser Progress Bars
   ================================================ */
.browser-progress {
    margin: 12px 0;
}

.browser-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 4px;
}

.browser-progress-bar {
    height: 16px;
    overflow: hidden;
}

.browser-progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.browser-progress-text {
    font-size: 10px;
    margin-top: 4px;
}

/* ================================================
   Browser Lists / Items
   ================================================ */
.browser-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.browser-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
}

.browser-list-item:last-child {
    margin-bottom: 0;
}

.browser-list-item-content {
    flex: 1;
}

.browser-list-item-title {
    font-weight: bold;
    margin-bottom: 2px;
}

.browser-list-item-subtitle {
    font-size: 11px;
}

.browser-list-item-price {
    font-size: 11px;
}

/* ================================================
   Browser Buttons
   ================================================ */
.browser-button {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    min-width: 80px;
}

.browser-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.browser-button-primary {
    /* Theme-specific */
}

.browser-button-secondary {
    /* Theme-specific */
}

/* ================================================
   Browser Sidebar Layout
   ================================================ */
.browser-layout-sidebar {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.browser-sidebar {
    width: 150px;
    padding: 8px;
    overflow-y: auto;
}

.browser-sidebar-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.browser-sidebar-link {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    cursor: pointer;
}

.browser-main {
    flex: 1;
    overflow: auto;
    padding: 8px;
}

/* ================================================
   Browser Footer
   ================================================ */
.browser-footer {
    padding: 16px;
    text-align: center;
    font-size: 10px;
}

/* ================================================
   Browser Status Indicators
   ================================================ */
.browser-status-ok {
    /* Theme-specific green */
}

.browser-status-warning {
    /* Theme-specific yellow/orange */
}

.browser-status-error {
    /* Theme-specific red */
}

/* ================================================
   Browser Badges / Tags
   ================================================ */
.browser-badge {
    display: inline-block;
    padding: 1px 4px;
    font-size: 9px;
    margin-left: 4px;
}

/* ================================================
   Utility Classes
   ================================================ */
.browser-text-center {
    text-align: center;
}

.browser-text-right {
    text-align: right;
}

.browser-text-muted {
    opacity: 0.7;
}

.browser-text-small {
    font-size: 10px;
}

.browser-mt-1 { margin-top: 4px; }
.browser-mt-2 { margin-top: 8px; }
.browser-mt-3 { margin-top: 12px; }
.browser-mb-1 { margin-bottom: 4px; }
.browser-mb-2 { margin-bottom: 8px; }
.browser-mb-3 { margin-bottom: 12px; }