/* ==========================================================================
   legacy-chrome.css — the shell chrome shared by the main shell and the sign-in
   shell: the sidebar and its footer, the logo area, the profile / bell chrome,
   the notification and toast-history dropdowns, the sign-in header strip and
   the fixed page footer.
   --------------------------------------------------------------------------
   WHAT IT OWNS
     · Sign-in shell: `.full-width-header`, `.logo-area`, `.header-logo` (+img),
       `.footer` (+ `.footer .text-muted`).
     · Main shell: `.dashboard-container`, `.sidebar` (+ `.collapsed`,
       `.sidebar .sidebar-footer`, `.sidebar-footer`), `.profile-area`,
       `.profile-btn` (+img), `.profile-info` (`.name`, `.role`), `.bell-btn`,
       `.number-notification`, `#sidebar-area.collapsed .header-logo`.
     · Dropdowns: `.profile-dropdown`, `.bell-dropdown`, `.dropdown-item`,
       `.notification-list .dropdown-item:hover`, the `.toast-history-*` family,
       and the `popup` keyframes the profile dropdown animates with.

   LINK ORDER — LOAD-BEARING IN BOTH DIRECTIONS
     · AFTER the framework sheet (`lib-v2\bootstrap\css\bootstrap.min.css`):
       `.dropdown-item` here must beat the framework's own.
     · BEFORE `components\ics-layout.css`. That sheet declares
       `.ics-shell .sidebar-footer` at the SAME specificity (0,2,0) as
       `.sidebar .sidebar-footer` here and must win by link order. Link this
       sheet after it and the shell footer silently reverts to the look below
       (sticky, transparent, centred, 2px 8px padding, z-index 10,
       space-between).
     · Linked by BOTH `_Meta` and `_AuthMeta`, and it must stay on both:
       `_AuthLayout` (the sign-in views) carries `.full-width-header`,
       `.logo-area`, `.header-logo` and `.footer`; dropping the `_AuthMeta` link
       strips the sign-in page.

   DEPENDENCIES
     · `.full-width-header`, `.footer` and `.footer .text-muted` read the design
       tokens `--ics-surface`, `--ics-border`, `--ics-text`, `--ics-text-muted`;
       the `.toast-history-item--*` stripes read `--ics-success/danger/warning/
       info` with hex fallbacks. `tokens.css` is linked before this sheet on
       both shells, so the variables resolve on both.

   TRAPS
     · `.toast-history-item--success|error|warning|info` have NO markup carrier
       and are LIVE: `components\ics-layout.js` builds the class name by string
       concatenation (`'toast-history-item--' + type`). Never delete them on the
       strength of a markup search.
     · This library defines ONE theme. No body class selects a theme and no
       per-user theme switch exists; never add a theme-class rule to this sheet.
   ========================================================================== */

/* THE SIGN-IN SHELL'S HEADER STRIP (carrier: _AuthLayout.cshtml) — painted on the design
   tokens: the token surface, the gold-500 hairline (--ics-border) and the token ink.
   tokens.css is linked by _AuthMeta and _Meta alike, so the variables resolve on both shells. */
.full-width-header {
    background: var(--ics-surface);
    border-bottom: 1px solid var(--ics-border);
    color: var(--ics-text);
    height: 42px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard-container {
    display: flex;
    flex: 1;
    margin: 0px;
}

.profile-dropdown {
    position: absolute;
    min-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    animation: popup 0.2s ease-out;
    bottom: 30px;
    padding: 0px;
    left: 0px;
}

.dropdown-item {
    font-size: 14px;
    color: #333 !important;
    cursor: pointer;
    border-bottom: 1px solid #dfdfdf;
}

.dropdown-item:last-child {
        border-bottom: none;
    }

.number-notification {
    top: 0px;
    left: 4px;
}

.bell-dropdown {
    right: 0;
}

.toast-history-head {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #dee2e6; padding: 6px 1rem;
}

.toast-history-clear { font-size: 12px; text-decoration: none; }

.toast-history-list { max-height: 320px; overflow-y: auto; text-align: left; }

.toast-history-empty { padding: 14px 1rem; font-size: 12px; color: #6b7280; text-align: center; }

.toast-history-item {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 6px 10px 6px 8px; border-bottom: 1px solid #f1f3f5;
    border-left: 3px solid transparent;
}

.toast-history-item:last-child { border-bottom: 0; }

.toast-history-item--success { border-left-color: var(--ics-success, #3F8F5B); }

.toast-history-item--error   { border-left-color: var(--ics-danger,  #C0492F); }

.toast-history-item--warning { border-left-color: var(--ics-warning, #C7912F); }

.toast-history-item--info    { border-left-color: var(--ics-info,    #3A6EA5); }

.toast-history-icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }

.toast-history-text { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; color: #374151; }

.toast-history-title { font-weight: 600; color: #111827; display: flex; justify-content: space-between; gap: 8px; overflow-wrap: break-word; }

.toast-history-when { font-weight: 400; color: #6b7280; white-space: nowrap; }

.toast-history-msg { white-space: pre-line; overflow-wrap: break-word; }

.toast-history-foot { border-top: 1px solid #dee2e6; text-align: center; font-size: 11px; color: #6b7280; padding: 5px; }

.notification-list .dropdown-item:hover {
    background-color: #f8f9fa;
    border-radius: 6px;
}

.sidebar {
/*    width: 26rem;*/
    background: white;
    border-right: 1px solid #a1a1a1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
/*    position: fixed;*/
    top: 0px;
    z-index: 3;
    transition: width 0.3s ease;
}

.sidebar .sidebar-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    background: transparent;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 2px 8px;
    z-index: 10;
    justify-content:space-between;
}

.sidebar-footer {
    margin-top: auto;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    user-select: none;
}

.logo-area {
    position: relative;
    padding: 5px;
}

.profile-area {
    padding: 0px;
    margin-right: 5px;
    margin-left: 5px;
    height: 33px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
/*    padding: 5px 20px;*/
    background: #fff;
    width: 238px;
    justify-content: center;
    transition: width 0.5s ease;
}

.header-logo img {
        width: auto;
        height: 45px;
    }

.header-logo img {
    height: 35px;
    width: 100%; /* keep aspect ratio */
    max-width: 100%; /* prevent overflow */
    object-fit: contain; /* ensure full logo is visible */
    display: block;
}

.profile-btn {
    border-radius: 0.375rem;
    padding: 0px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    width: 142px;
}

.bell-btn {
    border: 1px solid #d1d5db;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    background: #ffffff;
    margin-top: 5px;
    border-radius: 4px;
}

.profile-btn img {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    object-fit: cover;
    background: #dfdfdf;
}

.profile-info {
    font-size: 0.75rem;
    line-height: 1.1;
    color: #374151;
    min-width: 85px;
}

.profile-info .name {
        font-weight: 600;
        color: #111827;
        margin-bottom: 0;
    }

.profile-info .role {
        color: #9ca3af;
        margin-bottom: 0;
    }

.sidebar.collapsed {
    width: 43px;
    border-right: 1px solid #a1a1a1;
}

.footer {
    position: fixed !important;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 30px !important;
    background: var(--ics-surface) !important;
    text-align: center;
    border-top: 1px solid var(--ics-border);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

/* the copyright line in the theme's muted ink (bootstrap's .text-muted is !important, so this is too) */
.footer .text-muted {
    color: var(--ics-text-muted) !important;
}

#sidebar-area.collapsed .header-logo {
    display: none !important;
    transition: width 0.3s ease;
}

@keyframes popup {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}