/* apps/my-documents/theme.css */

.mydocs-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* === Menu bar === */
.mydocs-menubar {
    height: 22px;
    background: linear-gradient(to right, #f3f5f7, #ede8ce);
    border-bottom: 1px solid #d8d2bd;
    display: flex;
    align-items: center;
    padding: 0 0 0 2px;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

.mydocs-menu-item {
    font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    padding: 2px 6px;
    color: #000000;
    cursor: default;
    user-select: none;
}

.mydocs-menu-item:first-letter { text-decoration: underline; }

/* 1px #d8d2bd separator + 39px logo area pushed to the far right */
.mydocs-logo-area {
    width: 39px;
    height: 100%;
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #d8d2bd;
    box-sizing: content-box;
    background: #ffffff;
}

.mydocs-windows-logo {
    width: 23px;
    height: 22px;
    display: block;
}

/* === Below menubar: 1px #ffffff === */
.mydocs-sep-white {
    height: 1px;
    background: #ffffff;
    flex-shrink: 0;
}

/* === Toolbar row (37px, horizontal gradient) === */
.mydocs-toolbar {
    height: 37px;
    background: linear-gradient(to right, #f3f5f7, #ede8ce);
    flex-shrink: 0;
    border-bottom: 1px solid #d8d2bd;
    display: flex;
    align-items: center;
    padding: 1px 2px 0 5px;
}

/* === Toolbar buttons === */
.mydocs-tb-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1px 3px;
    cursor: default;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 2px;
}

.mydocs-tb-btn:not(.disabled):hover {
    border-color: #aca899;
    background: rgba(255,255,255,0.45);
}

.mydocs-tb-btn:not(.disabled):active {
    border-color: #aca899;
    background: rgba(0,0,0,0.05);
}

.mydocs-tb-icon {
    width: 24px;
    height: 24px;
    background-image: url('../../assets/xp/document_buttons.png');
    background-repeat: no-repeat;
    background-position-y: 0px;
    flex-shrink: 0;
}

/* Column x-positions */
.btn-back { background-position-x: 0px; }
.btn-fwd  { background-position-x: -24px; }
.btn-up   { background-position-x: -48px; }
.btn-col3 { background-position-x: -72px; }
.btn-col4 { background-position-x: -96px; }
.btn-col5 { background-position-x: -120px; }

/* Hover: row 1 */
.mydocs-tb-btn:not(.disabled):hover .mydocs-tb-icon { background-position-y: -24px; }

/* Pressed: row 2 + 1px right/down shift */
.mydocs-tb-btn:not(.disabled):active .mydocs-tb-icon {
    background-position-y: -48px;
    transform: translate(1px, 1px);
}
.mydocs-tb-btn:not(.disabled):active .mydocs-tb-label {
    transform: translate(1px, 1px);
}

.mydocs-tb-label {
    font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    color: #000000;
    white-space: nowrap;
    margin-left: 3px;
}

.mydocs-tb-btn.disabled .mydocs-tb-label { color: #888888; }

.mydocs-tb-arrow {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #444444;
    margin-left: 3px;
    flex-shrink: 0;
    align-self: center;
}
.mydocs-tb-btn.disabled .mydocs-tb-arrow { border-top-color: #aaaaaa; }

.mydocs-tb-sep {
    width: 1px;
    height: 28px;
    background: #aca899;
    margin: 0 3px;
    flex-shrink: 0;
}

/* === 1px #ffffff separator after toolbar === */
.mydocs-sep-dark {
    height: 1px;
    background: #ffffff;
    flex-shrink: 0;
}

/* === Address bar (22px, gradient) === */
.mydocs-addressbar {
    height: 22px;
    flex-shrink: 0;
    background:
        linear-gradient(to bottom,
            transparent calc(100% - 3px),
            #e7e2cc calc(100% - 3px),
            #e7e2cc calc(100% - 2px),
            #dedbc3 calc(100% - 2px),
            #dedbc3 calc(100% - 1px),
            #cdcabb calc(100% - 1px)
        ),
        linear-gradient(to right, #f3f5f7, #ede8ce);
}

/* === Main content area === */
.mydocs-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: linear-gradient(to right, #f3f5f7, #ede8ce);
}

/* Left task pane: 209px, blue gradient, 1px #fff border left/bottom/right */
.mydocs-task-pane {
    width: 209px;
    flex-shrink: 0;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #7ba2e7, #6375d6);
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    overflow-y: auto;
}

/* Right file content area */
.mydocs-files {
    flex: 1;
    overflow: auto;
    background: white;
}