/*************************************************************************
**
** Copyright (c) by jeff (jeff@bqic.de)
**
** Author:  jeff
**
** File:    dashboard.css
**
** Purpose: layout for the dedicated /dashboard page
**
** Created: 2026-08-29
**
************************************************************************/

.content.dashboard-page-content
{
    display:                 flex;
    align-items:             stretch;
    justify-content:         stretch;
    grid-template-rows:      unset;
    grid-template-areas:     unset;
    overflow:                hidden;
    padding:                 0;
}

.dash
{
    position:                relative;
    display:                 flex;
    flex-direction:          column;
    width:                   100%;
    height:                  100%;
    min-height:              0;
    color:                   #ddd;
    font-family:             candara, Calibri, sans-serif;
}

.dash-leader
{
    display:                 flex;
    align-items:             center;
    gap:                     14px;
    flex-shrink:             0;
    padding:                 8px 16px;
    border-bottom:           1px solid #030870;
    background:              rgba(0, 0, 0, 0.28);
    font-family:             tahoma, sans-serif;
    font-size:               12px;
    letter-spacing:          0.06em;
    text-transform:          uppercase;
}

.dash-leader-kicker
{
    color:                   #ffd200;
    font-weight:             bold;
    white-space:             nowrap;
}

.dash-leader-rule
{
    width:                   28px;
    height:                  2px;
    background:              #ffd200;
    flex-shrink:             0;
}

.dash-leader-link
{
    margin-left:             auto;
    color:                   #ffd200;
    text-decoration:         none;
    white-space:             nowrap;
}

.dash-leader-link:hover
{
    color:                   #f38606;
}

.dash-work
{
    display:                 grid;
    grid-template-columns:   220px minmax(0, 1fr) 280px;
    min-height:              0;
    flex:                    1;
}

.dash-rail,
.dash-inspector
{
    min-height:              0;
    overflow:                hidden;
    background:              rgba(0, 0, 0, 0.22);
    border-right:            1px solid #030870;
    padding:                 14px 12px 18px;
}

.dash-rail
{
    display:                 flex;
    flex-direction:          column;
}

.dash-inspector
{
    display:                 flex;
    flex-direction:          column;
    border-right:            none;
    border-left:             1px solid #030870;
}

.dash-scrollwrap
{
    display:                 flex;
    flex:                    1;
    min-height:              0;
    overflow:                hidden;
}

.dash-scrollwrap .ccanvas_scrollbar
{
    flex:                    0 0 15px;
    float:                   none;
    height:                  100% !important;
    margin-left:             8px;
    align-self:              stretch;
    overflow:                visible;
}

.dash-inspector-body
{
    flex:                    1;
    min-width:               0;
    overflow:                hidden;
}

.dash-rail-head
{
    display:                 flex;
    align-items:             baseline;
    justify-content:         space-between;
    gap:                     8px;
    margin-bottom:           10px;
    flex-shrink:             0;
}

.dash h1,
.dash h2
{
    margin:                  0;
    font-family:             tahoma, sans-serif;
    font-size:               14px;
    color:                   #ffd200;
    font-weight:             bold;
    letter-spacing:          0.04em;
    text-transform:          uppercase;
}

.dash-album-list
{
    list-style:              none;
    margin:                  0;
    padding:                 0;
    flex:                    1;
    min-height:              0;
    min-width:               0;
    overflow:                hidden;
}

.dash-album
{
    position:                relative;
    display:                 block;
    width:                   100%;
    margin:                  0 0 10px;
    padding:                 0;
    border:                  1px solid #030870;
    background:              #2a2a2a;
    color:                   inherit;
    text-align:              left;
    cursor:                  pointer;
    font-family:             inherit;
}

.dash-album:hover,
.dash-gallery:hover,
.dash-print:hover
{
    border-color:            #f38606;
}

.dash-album.is-current,
.dash-gallery.is-current,
.dash-print.is-current
{
    border-color:            #ffd200;
}

.dash-album-cover,
.dash-gallery-cover,
.dash-print-img
{
    display:                 block;
    width:                   100%;
    height:                  88px;
    background-color:        #1c1c1c;
    background-size:         cover;
    background-position:     center;
}

.dash-album-meta,
.dash-gallery-meta,
.dash-print-title
{
    display:                 block;
    padding:                 6px 52px 8px 8px;
    font-size:               13px;
    color:                   #fff;
}

.dash-count
{
    color:                   #aaa;
    font-weight:             normal;
}

.dash-stage
{
    display:                 flex;
    flex-direction:          column;
    min-width:               0;
    min-height:              0;
    overflow:                hidden;
    padding:                 12px 14px 16px;
}

.dash-galleries
{
    display:                 flex;
    flex-direction:          column;
    flex:                    0 1 auto;
    min-height:              0;
    max-height:              42%;
}

.dash-galleries .dash-scrollwrap
{
    flex:                    1 1 auto;
}

.dash-gallery-strip
{
    display:                 flex;
    flex-wrap:               wrap;
    align-content:           flex-start;
    align-items:             flex-start;
    gap:                     10px;
    overflow:                hidden;
    min-height:              0;
    min-width:               0;
    flex:                    1;
    padding-bottom:          8px;
}

.dash-gallery
{
    position:                relative;
    flex:                    0 0 140px;
    padding:                 0;
    border:                  1px solid #030870;
    background:              #2a2a2a;
    color:                   inherit;
    text-align:              left;
    cursor:                  pointer;
    font-family:             inherit;
}

.dash-gallery-cover
{
    height:                  72px;
}

.dash-toolbar
{
    display:                 flex;
    align-items:             center;
    margin:                  8px 0 10px;
}

.dash-crumb
{
    margin:                  0;
    color:                   #aaa;
    font-size:               13px;
}

.dash-btn
{
    min-height:              28px;
    padding:                 0 14px;
    background:              transparent;
    border:                  1px solid #ffd200;
    color:                   #ffd200;
    font-family:             tahoma, sans-serif;
    font-size:               12px;
    font-weight:             bold;
    cursor:                  pointer;
}

.dash-btn:hover:not(:disabled)
{
    color:                   #f38606;
    border-color:            #f38606;
}

.dash-btn:disabled
{
    opacity:                 0.35;
    cursor:                  default;
}

.dash-btn-quiet
{
    border-color:            #888;
    color:                   #ddd;
    font-weight:             normal;
}

.dash-btn-quiet:hover:not(:disabled)
{
    border-color:            #ffd200;
    color:                   #ffd200;
}

.dash-btn-danger
{
    border-color:            #c45c5c;
    color:                   #ffb3b3;
}

.dash-btn-danger:hover:not(:disabled)
{
    border-color:            #ff6b6b;
    color:                   #ff6b6b;
}

.dash-add
{
    flex-shrink:             0;
    width:                   32px;
    height:                  32px;
    margin:                  4px auto 0;
    padding:                 0;
    border:                  1px solid #ffd200;
    border-radius:           50%;
    background:              transparent;
    color:                   #ffd200;
    font-size:               22px;
    line-height:             28px;
    cursor:                  pointer;
}

.dash-gallery-strip .dash-add
{
    margin:                  0;
    align-self:              center;
}

.dash-add:hover
{
    color:                   #f38606;
    border-color:            #f38606;
}

.dash-copy,
.dash-trash
{
    position:                absolute;
    bottom:                  6px;
    width:                   22px;
    height:                  22px;
    padding:                 0;
    border:                  0;
    background:              transparent;
    color:                   #ffd200;
    cursor:                  pointer;
    line-height:             0;
}

.dash-copy
{
    right:                   30px;
}

.dash-trash
{
    right:                   6px;
}

.dash-copy:hover
{
    color:                   #f38606;
}

.dash-copy.is-copied
{
    color:                   #7dff9a;
}

.dash-trash:hover
{
    color:                   #ff6b6b;
}

.dash-drop
{
    flex-shrink:             0;
    margin-bottom:           10px;
    padding:                 10px 12px;
    border:                  1px dashed #030870;
    color:                   #aaa;
    font-size:               12px;
    text-align:              center;
    cursor:                  pointer;
}

.dash-drop.is-over
{
    border-color:            #ffd200;
    color:                   #ffd200;
}

.dash-drop.is-disabled
{
    cursor:                  not-allowed;
    opacity:                 0.55;
    color:                   #888;
}

.dash-drop.is-disabled.is-over
{
    border-color:            #030870;
    color:                   #888;
}

.dash-drop.is-disabled.is-hint
{
    border-color:            #ffd200;
    color:                   #ffd200;
    opacity:                 1;
}

.dash-drop p
{
    margin:                  0;
}

.dash-grid-wrap
{
    flex:                    1;
}

.dash-grid
{
    display:                 grid;
    grid-template-columns:   repeat(auto-fill, 140px);
    align-content:           start;
    gap:                     10px;
    overflow:                hidden;
    min-height:              0;
    min-width:               0;
    flex:                    1;
    padding-bottom:          8px;
}

.dash-print
{
    position:                relative;
    width:                   140px;
    padding:                 0;
    border:                  1px solid #030870;
    background:              #2a2a2a;
    color:                   inherit;
    text-align:              left;
    cursor:                  grab;
    font-family:             inherit;
}

.dash-print-img
{
    height:                  72px;
}

.dash-print-title
{
    white-space:             nowrap;
    overflow:                hidden;
    text-overflow:           ellipsis;
}

.dash-inspector label
{
    display:                 block;
    margin:                  12px 0 4px;
    font-size:               13px;
    font-weight:             bold;
    color:                   #fff;
}

.dash-inspector-kicker
{
    margin:                  0 0 4px;
    font-family:             tahoma, sans-serif;
    font-size:               11px;
    letter-spacing:          0.08em;
    text-transform:          uppercase;
    color:                   #ffd200;
}

.dash-insp-hint
{
    margin:                  0 0 6px;
    font-size:               12px;
    color:                   #888;
}

.dash-insp-hint.is-hidden
{
    display:                 none;
}

.dash-inspector input[type=text],
.dash-inspector input[type=date],
.dash-inspector textarea
{
    width:                   100%;
    padding:                 6px 8px;
    border:                  1px solid #aaa;
    background:              #eee;
    color:                   #000;
    font-family:             candara, Calibri, sans-serif;
    font-size:               14px;
}

.dash-insp-date[hidden]
{
    display:                 none;
}

.dash-album.is-drop,
.dash-gallery.is-drop
{
    outline:                 2px solid #ffd200;
    outline-offset:          -2px;
}

.dash-inspector textarea
{
    resize:                  vertical;
    min-height:              88px;
}

.dash-tags
{
    display:                 flex;
    flex-wrap:               wrap;
    gap:                     6px;
    margin-bottom:           8px;
    min-height:              8px;
}

.dash-tag
{
    display:                 inline-flex;
    align-items:             center;
    gap:                     6px;
    padding:                 2px 10px;
    border:                  1px solid #ffd200;
    border-radius:           999px;
    color:                   #ffd200;
    font-size:               12px;
    background:              transparent;
}

.dash-tag.is-inherited
{
    border-color:            #888;
    color:                   #bbb;
}

.dash-tag button
{
    padding:                 0;
    border:                  0;
    background:              transparent;
    color:                   inherit;
    cursor:                  pointer;
    font-size:               14px;
    line-height:             1;
}

.dash-dialog
{
    position:                absolute;
    inset:                   0;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    background:              rgba(0, 0, 0, 0.55);
    z-index:                 20;
}

.dash-dialog[hidden]
{
    display:                 none;
}

.dash-dialog-panel
{
    width:                   min(420px, calc(100% - 48px));
    background:              #2a2a2a;
    border:                  1px solid #030870;
    border-top:              3px solid #ffd200;
    padding:                 22px 24px 18px;
}

.dash-dialog-panel h2
{
    margin-bottom:           8px;
}

.dash-dialog-panel p
{
    margin:                  0 0 18px;
    color:                   #ddd;
}

.dash-dialog-actions
{
    display:                 flex;
    justify-content:         flex-end;
    gap:                     8px;
}

.dash-btn:focus-visible,
.dash-add:focus-visible,
.dash-copy:focus-visible,
.dash-trash:focus-visible,
.dash-drop:focus-visible,
.dash-album:focus-visible,
.dash-gallery:focus-visible,
.dash-print:focus-visible,
.dash-inspector input:focus-visible,
.dash-inspector textarea:focus-visible
{
    outline:                 2px solid #ffd200;
    outline-offset:          2px;
}

@media (max-width: 900px)
{
    .dash-work
    {
        grid-template-columns: 1fr;
        grid-template-rows:    auto auto 1fr;
        overflow:              auto;
    }

    .dash-rail,
    .dash-inspector
    {
        border:                none;
        max-height:            none;
    }

    .dash-album-list
    {
        display:               flex;
        gap:                   10px;
        overflow-x:            auto;
        overflow-y:            hidden;
        scrollbar-width:       none;
    }

    .dash-album-list::-webkit-scrollbar
    {
        display:               none;
    }

    .dash-album
    {
        flex:                  0 0 160px;
        margin:                0;
    }
}

.hourglass img
{
    animation:               dash-aperture 1.2s linear infinite;
}

html:has(.dash) .hourglass
{
    background-color:        rgba(0, 0, 0, 0.12);
}

@keyframes dash-aperture
{
    to
    {
        transform:           rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .dash *
    {
        transition:            none !important;
    }

    .hourglass img
    {
        animation:             none !important;
    }
}