/* =====================================================================
   Cabinet's Explorer layout! (body.os-office) A light page, coral chrome,
   the drawer list on the left. Cabinet Classic stays untouched!
   ===================================================================== */
body.os-office {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    background: #fbf3f1;
    color: #252525;
}
body.os-office.os-dark { background: #1f1716; }
body.os-office #os-top { grid-column: 1 / -1; grid-row: 1; }
body.os-office #os-status { grid-column: 1 / -1; grid-row: 3; }
/* Left: the drawer list, like a navigation pane! */
body.os-office #sidebar {
    grid-column: 1;
    grid-row: 2;
    width: 240px;
    height: auto;
    padding: 12px 10px 10px;
    background: #fbe9e6;
    border-right: 1px solid #f1cfca;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #3b1f1c;
    animation: osFade 0.3s;
}
body.os-office.os-dark #sidebar { background: #2b1f1e; border-right-color: #4a3331; color: #f4dcd9; }
body.os-office.cb-no-drawers #sidebar { display: none; }
body.os-office #sidebar::before { content: "Drawers"; font-family: var(--os-brand-font); font-weight: 800; font-size: 15px; color: var(--os-accent-d, #e5483a); padding: 0 6px 8px; }
body.os-office #sidebar .sidebar-brand,
body.os-office #sidebar .pad-selection-stack,
body.os-office #sidebar .sidebar-footer-controls,
body.os-office #sidebar #toggle-zone,
body.os-office #sidebar .drawer-menu-label { display: none !important; }
body.os-office #sidebar .drawer-menu-box, body.os-office #sidebar .filter-menu-box, body.os-office #sidebar .drawer-name-box { color: inherit; }
body.os-office #sidebar .filter-menu-box { display: none; }
body.os-office #sidebar .drawer-pick {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #3b1f1c;
    box-shadow: none;
    font-family: var(--os-font);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.14s, padding 0.2s var(--os-spring);
}
body.os-office #sidebar .drawer-pick:hover { background: #f6d6d1; transform: none; padding-left: 14px; }
body.os-office #sidebar .drawer-pick.active, body.os-office #sidebar .drawer-item.active .drawer-pick {
    background: linear-gradient(180deg, var(--os-gel1) 0%, var(--os-gel2) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.os-office #sidebar .drawer-name-box { display: none; }
body.os-office.os-dark #sidebar .drawer-pick { color: #f4dcd9; }
body.os-office.os-dark #sidebar .drawer-pick:hover { background: #3d2b29; }
/* Main: the files! */
body.os-office .workspace-viewport-wrapper {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    padding: 18px 26px 0;
    background: #fff;
    animation: osFade 0.3s;
}
body.os-office:not(.cb-no-drawers) .workspace-viewport-wrapper { border-radius: 0; }
body.os-office.os-dark .workspace-viewport-wrapper { background: #241b1a; }
body.os-office .drawer-menu-head h1 { color: #3b1f1c; text-shadow: none; font-family: var(--os-brand-font); }
body.os-office .drawer-menu-head p, body.os-office .drawer-empty { color: #8a6560; }
body.os-office #drawer-total { color: #8a6560; }
body.os-office.os-dark .drawer-menu-head h1 { color: #f4dcd9; }
body.os-office .view-segmented { display: none; }
body.os-office .folder-breadcrumb { background: #fdf3f1; border-color: #f1cfca; }
body.os-office .breadcrumb-item { color: #8a6560; }
body.os-office .breadcrumb-item:hover, body.os-office .breadcrumb-item.current { color: #e5483a; }
body.os-office .file-card, body.os-office .folder-card { box-shadow: 0 2px 10px rgba(127, 52, 45, 0.16), inset 0 1px 0 #fff; }

/* Ribbon: the tag picker */
.cb-tagbox label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--os-dim); padding: 2px 6px; }
.cb-tagbox select { min-width: 140px; height: 26px; border: 1px solid var(--os-menu-line); border-radius: 6px; background: var(--os-ribbon, #fff); color: inherit; font: inherit; padding: 0 6px; }

/* File screen + Classic button */
.cb-bs-doc img { width: 36px; height: 36px; }
.cb-classic-layout { margin-top: 2px; }
.os-dlg.cb-layout-dlg { width: 560px; }

/* The File screen's "this document" card (the shared bb-bs-doc class had no rules here, so the icon blew up and the text ran together!) */
.bb-bs-doc { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--os-menu-line); border-radius: 10px; max-width: 560px; }
.bb-bs-doc img { width: 36px; height: 36px; flex: none; }
.bb-bs-doc div { display: flex; flex-direction: column; gap: 3px; }
.bb-bs-doc span { color: var(--os-dim); font-size: 12.5px; }