/* Application composition, using shared color tokens. */
.container
{
    height: calc(100dvh - 60px);
    grid-template-columns: 250px 330px minmax(0, 1fr);
    transition: none;
}

.container.operations-hidden
{
    grid-template-columns: 250px 0 minmax(0, 1fr);
}

.container.sidebar-minimized
{
    grid-template-columns: 48px 330px minmax(0, 1fr);
}

.sidebar
{
    padding: 18px 14px 12px;
    background: var(--surface2);
}

.sidebar-header
{
    margin-bottom: 14px;
    padding: 0 6px;
}

.sidebar-title
{
    font-size: 15px;
}

.sidebar-search
{
    width: 100%;
    height: 34px;
    padding: 7px 10px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--ink);
    font: 12px "Segoe UI", sans-serif;
}

.sidebar-search::placeholder
{
    color: var(--muted);
}

.list-item
{
    min-height: 36px;
    padding: 8px;
    border-radius: 5px;
}

.list-item-name
{
    font-size: 13px;
}

.list-item.active
{
    border-color: transparent;
    box-shadow: inset 3px 0 var(--accent);
}

.list-item.active .list-item-name
{
    color: var(--accent-ink);
}

.list-item-new
{
    border: 1px solid var(--border-strong);
    background: var(--surface);
    margin-bottom: 14px;
}

.new-printer-icon
{
    color: var(--accent-ink);
    background: var(--accent-soft);
}

.sidebar-separator
{
    padding: 18px 8px 8px;
    letter-spacing: .05em;
    color: var(--muted);
}

.sidebar-footer
{
    padding-top: 12px;
}

.workspace-name
{
    font-size: 13px;
    color: var(--ink);
}

.workspace-avatar
{
    background: var(--accent-soft);
    color: var(--accent-ink);
    width: 30px;
    height: 30px;
}

.operations-panel
{
    padding: 20px 20px;
    background: var(--surface);
}

.operations-header
{
    min-height: 32px;
    margin-bottom: 12px;
}

.ops-printer-name
{
    font-size: 17px;
    font-weight: 600;
}

.ops-protocol
{
    font-size: 10px;
    color: var(--muted);
}

.operations-info
{
    padding-bottom: 18px;
    margin-bottom: 17px;
    gap: 9px;
    font-size: 12px;
}

.info-row
{
    gap: 7px;
}

.info-label
{
    font-size: 10px;
    letter-spacing: .02em;
    color: var(--muted);
}

.ops-address
{
    font-size: 12px;
    color: var(--ink);
}

.status-pill
{
    font-family: "Segoe UI", sans-serif;
    text-transform: none;
    font-size: 11px;
    padding: 3px 9px;
}

.status-listening, .status-started
{
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
}

.status-listening::before, .status-started::before
{
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.operations-section-label
{
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin: 7px 0 9px;
}

.operations-actions
{
    gap: 10px;
}

.operations-button-row
{
    gap: 8px;
}

.operations-panel .btn
{
    min-height: 33px;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 5px;
}

.operations-panel .btn-primary
{
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.operations-panel [data-action="start-stop"]
{
    background: var(--surface2);
    border-color: var(--border-strong);
    color: var(--text);
}

.operations-panel [data-action="inject-document"]
{
    background: var(--accent);
    color: var(--accent-contrast);
    border-color: var(--accent);
}

.operations-panel [data-action="inject-document"] img
{
    filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .operations-panel [data-action="inject-document"] img
{
    filter: brightness(0);
}

.flags-grid
{
    gap: 14px 10px;
}

.flag-switch
{
    font-size: 12px;
}

.flag-switch span
{
    font-size: 12px;
    color: var(--text);
}

.operations-actions > .flag-switch
{
    margin: 12px 0 4px;
}

.section-divider
{
    margin: 8px 0;
}

.drawer-row
{
    margin: 2px 0;
}

.drawer-label, .drawer-state
{
    font-size: 12px;
}

.danger-zone
{
    margin-top: 20px;
}

.danger-zone-header
{
    padding: 11px 10px;
    border-radius: 5px;
}

.danger-zone-title
{
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.documents-panel
{
    padding: 0 30px 30px;
    background: var(--bg);
}

.documents-toolbar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 2px 22px;
    color: var(--ink);
}

.documents-toolbar strong
{
    font-size: 16px;
    font-weight: 600;
}

.documents-toolbar span
{
    font-size: 12px;
    color: var(--muted);
}

.documents-toolbar small
{
    display: inline-block;
    margin-left: 9px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--muted);
    background: var(--surface);
}

.document-paper
{
    border-radius: 4px;
    box-shadow: var(--shadow);
}

.document-canvas-block
{
    margin-bottom: 28px;
}

.document-canvas-footer
{
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
}

.new-printer-icon svg
{
    stroke: var(--accent-ink);
}

.container.sidebar-minimized .sidebar-search
{
    display: none;
}

.documents-toolbar[hidden]
{
    display: none;
}

.documents-count
{
    display: inline-block;
    margin-left: 9px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    color: var(--muted);
    background: var(--surface);
}

.container.sidebar-minimized.operations-hidden
{
    grid-template-columns: 48px 0 minmax(0, 1fr);
}

.container.sidebar-minimized .sidebar
{
    padding: 18px 4px 12px;
}

.container.operations-hidden .operations-panel
{
    padding: 20px 0;
}

.appearance-option
{
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 22px 0;
}

.appearance-option label
{
    font-size: 14px;
    color: var(--ink);
}

.settings-theme-symbol
{
    font-size: 20px;
    width: 18px;
    line-height: 1;
}

.workspace-settings-dialog
{
    font-size: 14px;
}

.workspace-settings-dialog .field-hint
{
    font-size: 13px;
    line-height: 1.65;
}

.workspace-settings-dialog .input
{
    font-size: 14px;
    min-height: 36px;
}

.workspace-settings-dialog h3
{
    font-size: 18px;
    margin-bottom: 16px;
}

.workspace-settings-dialog .settings-section h3
{
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--ink);
}

.workspace-settings-nav-item
{
    font-size: 13px;
    padding: 10px 12px;
}

@media (max-width: 1100px)
{
    .container
    {
        grid-template-columns: 210px 300px minmax(0, 1fr);
    }

    .container.operations-hidden
    {
        grid-template-columns: 210px 0 minmax(0, 1fr);
    }

    .documents-panel
    {
        padding-right: 16px;
        padding-left: 16px;
    }

}

@media (max-width: 760px)
{
    .container
    {
        grid-template-columns: 180px minmax(0, 1fr);
        grid-template-areas: "sidebar documents";
    }

    .container.operations-hidden
    {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .container.sidebar-minimized
    {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .operations-panel
    {
        position: fixed;
        z-index: 120;
        top: 60px;
        bottom: 0;
        left: 48px;
        width: min(330px, calc(100vw - 48px));
    }

    .container.operations-hidden .operations-panel
    {
        visibility: hidden;
    }

    .documents-toolbar
    {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .appearance-option
    {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}