@import './shared/base.css';
@import './shared/components.css';

/* ========== LAYOUT ========== */

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* ========== PAGE BODY & CARDS ROW ========== */

.page-body {
    flex: 1;
    overflow-y: auto;
    padding: 40px 28px 72px;
}

.cards-row {
    max-width: 90vw;
    margin: 0 auto;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* ========== CARD SHELL ========== */

.card {
    flex: 1;
    height: var(--card-height);
    background: var(--color-surface);
    border: var(--border-soft);
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: var(--border-soft);
    flex-shrink: 0;
}

.card-title {
    font-weight: 600;
    font-size: 0.94em;
}

/* ========== I/O CARD ========== */

.io-body {
    flex: 1;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.card-desc {
    font-size: 0.84em;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ========== LIBRARY CARD ========== */

.library-stats {
    padding: 20px 16px;
    border-top: var(--border-soft);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--font-size-controls);
    color: var(--color-text-muted);
    justify-content: center;
}

.library-stats-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.library-stats-value {
    font-weight: 700;
    color: var(--color-text);
}

.library-stats-label {
    font-weight: normal;
    color: var(--color-text-muted);
}

.library-list {
    flex: 1;
    overflow-y: auto;
}

.library-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: var(--border-soft);
    font-size: var(--font-size-controls);
    cursor: default;

    /* fixed row height with overflow behavior */
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: hidden;
}
.library-row:hover {
    background-color: var(--color-surface-hi);
}

.library-row-name,
.library-row-count {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-row-name {
    flex: 1 1 0;
    min-width: 0;
}

.library-row-count {
    font-size: 0.82em;
    color: var(--color-text-muted);
    flex: 0 1 100px;
    min-width: 50px;
    max-width: 180px;
}

.library-empty {
    padding: 20px 16px;
    color: var(--color-text-muted);
    font-size: var(--font-size-controls);
}

/* .library-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: var(--border-soft);
    border-bottom: var(--border-soft);
}
.library-controls input {
    flex: 1;
    min-width: 100px;
} */


/* ========== WORKSPACE CARD ========== */

.ws-body {
    flex: 1;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Shared card footer — sits below the scrollable content area */
.card-controlbar, /* hack to copy styling to control bar*/
.card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-bottom: var(--border-soft);
    flex-shrink: 0;
}

/* Library view selector uses shared sort-select styling from shared/components.css. */

/* Full-width button used in workspace card */
.btn--full {
    width: 100%;
}

/* ========== I/O STATUS INDICATOR ========== */

.io-footer {
    flex-direction: column;
    gap: 5px;
    padding: 10px 16px;
}

.io-status {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.io-status-bar-track {
    width: 100%;
    height: 4px;
    background: var(--color-surface-hi);
    border-radius: 9999px;
    overflow: hidden;
}

.io-status-bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    border-radius: 9999px;
    transition: width 0.2s ease;
}

.io-status--error .io-status-bar {
    background: var(--color-error);
}

.io-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.io-status-label {
    font-size: 0.78em;
    color: var(--color-text-muted);
    /* Truncate long names; counter stays fixed on the right */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.io-status-counter {
    font-size: 0.78em;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: 8px;
}

@keyframes io-flash {
    0%   { background-color: var(--color-accent); }
    100% { background-color: transparent; }
}

.io-status--flash {
    animation: io-flash 0.8s ease-out;
}