/* Cliora 5.0.6 — loaded after ui-505.css.
   One heading scale for every library page, one card, and the activity log. */

/* ========================================================================
   1. The page title reads the same everywhere.
   Contents, Links and Devices replace their <h1> with a folder breadcrumb,
   which was set at 18px while ArtWall, Settings and the Dashboard kept the
   29px heading. The breadcrumb now carries the heading, with the folder path
   stepped down so a deep path still fits on one line.
   ======================================================================== */

.cliora-app .manager-header .library-breadcrumb {
    font-size: 29px;
    font-weight: 500;
    letter-spacing: -1.1px;
    line-height: 1.2;
    gap: 8px;
}
.cliora-app .manager-header .library-breadcrumb .library-crumb {
    padding: 0;
    max-width: 22ch;
}
/* The root crumb is the page name; everything after it is where you are. */
.cliora-app .manager-header .library-breadcrumb .library-crumb ~ .library-crumb {
    font-size: 20px;
    letter-spacing: -.5px;
    max-width: 18ch;
}
.cliora-app .manager-header .library-breadcrumb > i {
    font-size: 13px;
    margin: 0 2px;
    align-self: center;
}
@media (max-width: 1023px) {
    .cliora-app .manager-header .library-breadcrumb { font-size: 27px; }
    .cliora-app .manager-header .library-breadcrumb .library-crumb ~ .library-crumb { font-size: 19px; }
}
@media (max-width: 767px) {
    .cliora-app .manager-header .library-breadcrumb { font-size: 21px; letter-spacing: -.7px; }
    .cliora-app .manager-header .library-breadcrumb .library-crumb { max-width: 14ch; }
    .cliora-app .manager-header .library-breadcrumb .library-crumb ~ .library-crumb { font-size: 15px; max-width: 11ch; }
    .cliora-app .manager-header .library-breadcrumb > i { font-size: 10px; }
}

/* ========================================================================
   2. One card for Contents, ArtWall, Devices and Links.
   The media library keeps its own proportions on purpose.
   ======================================================================== */

.cliora-app .contents-container .content-card .content-title {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.15px;
    line-height: 1.4;
}
.cliora-app .contents-container .content-card .content-meta {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .1px;
    line-height: 1.5;
    color: var(--text-muted);
}
.cliora-app .contents-container .content-card .content-title code,
.cliora-app .contents-container .content-card .content-meta code {
    font: inherit;
    font-size: 10.5px;
    letter-spacing: .1px;
    color: var(--text-muted);
}
/* ArtWall used to set its own 12px meta; devices their own title size. */
.cliora-app .artwall-cards .content-meta { font-size: 10.5px; }
.cliora-app .artwall-cards .content-icon svg { width: 74px; height: 62px; color: var(--text-muted); }
.cliora-app .artwall-cards.list-view .content-icon svg { width: 44px; height: 36px; }

/* The overflow button sits at the right edge of the action row and shares the
   baseline with the icons beside it. (In 5.0.5 the paging button borrowed this
   class name, which centred it and pushed it out of line.) */
.cliora-app .contents-container .content-card .content-actions .library-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    align-self: center;
}

/* ========================================================================
   3. Sign-in: the password-help panel.
   ======================================================================== */

.cliora-auth .auth-recover { display: grid; gap: 0; text-align: left; }
.cliora-auth .auth-recover[hidden] { display: none; }
.cliora-auth .auth-recover-lead { margin: 0 0 18px; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.cliora-auth .auth-recover-mailbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-app);
    text-decoration: none;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.cliora-auth .auth-recover-mailbox:hover { border-color: var(--accent-blue); }
.cliora-auth .auth-recover-mailbox i { color: var(--accent-blue); font-size: 15px; flex: none; }
.cliora-auth .auth-recover-mailbox span { display: grid; gap: 2px; min-width: 0; text-align: left; }
.cliora-auth .auth-recover-mailbox small { color: var(--text-muted); font-size: .74rem; }
.cliora-auth .auth-recover-mailbox strong { font-size: .88rem; font-weight: 600; }
.cliora-auth .auth-recover-note { margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.cliora-auth .auth-recover-back { margin: 18px 0 0; display: flex; justify-content: center; }

/* ========================================================================
   4. A waiting password request marks the Users menu item.
   ======================================================================== */

.cliora-app #mainSidebar .nav-item { position: relative; }
.cliora-app .ui-nav-dot {
    position: absolute;
    top: 12px;
    left: 26px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-accent);
    box-shadow: 0 0 0 2px var(--bg-sidebar);
    pointer-events: none;
}
.cliora-app #mainSidebar.collapsed .ui-nav-dot { left: 30px; }

/* ========================================================================
   5. The activity log.
   Charts are plain SVG and take their colours from the theme, so the same
   card reads correctly in light and dark without being redrawn.
   ======================================================================== */

.cliora-app .activity-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
}
.cliora-app .activity-filter { display: grid; gap: 6px; font-size: 11px; color: var(--text-muted); }
.cliora-app .activity-filter > span { letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.cliora-app .activity-filter :is(input, select) { min-height: 38px; }
.cliora-app .activity-search { flex: 1 1 200px; min-width: 160px; }
.cliora-app .activity-filters .btn-action { min-height: 38px; }

.cliora-app .activity-body { display: grid; gap: 22px; align-content: start; }
.cliora-app .activity-status { min-height: 18px; font-size: 12.5px; color: var(--text-muted); }
.cliora-app .activity-status.error { color: var(--ui-danger); }
.cliora-app .activity-status.success { color: var(--ui-positive); }

.cliora-app .activity-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.cliora-app .activity-stat {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: var(--bg-panel);
}
.cliora-app .activity-stat-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cliora-app .activity-stat-value { font-size: 25px; font-weight: 500; letter-spacing: -.7px; }

.cliora-app .activity-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.cliora-app .activity-chart-card,
.cliora-app .activity-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-panel);
    min-width: 0;
}
.cliora-app .activity-chart-card h3,
.cliora-app .activity-card h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.cliora-app .activity-chart-body { flex: 1; min-width: 0; display: flex; align-items: center; }
.cliora-app .activity-chart { width: 100%; height: auto; overflow: visible; }
.cliora-app .activity-axis { stroke: var(--border-color); stroke-width: 1; }
.cliora-app .activity-tick { fill: var(--text-muted); font-size: 10px; }
.cliora-app .activity-bar { transition: opacity .15s; }
.cliora-app .activity-bar:hover { opacity: .75; }

.cliora-app .activity-rank { display: grid; gap: 9px; width: 100%; }
.cliora-app .activity-rank-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; }
.cliora-app .activity-rank-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliora-app .activity-rank-track { height: 8px; border-radius: 6px; background: var(--ui-input); overflow: hidden; }
.cliora-app .activity-rank-fill { height: 100%; border-radius: 6px; }
.cliora-app .activity-rank-value { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

.cliora-app .activity-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; width: 100%; }
.cliora-app .activity-donut { width: 132px; height: 132px; flex: none; }
.cliora-app .activity-legend { display: grid; gap: 7px; min-width: 0; flex: 1 1 130px; }
.cliora-app .activity-legend-item { display: flex; align-items: center; gap: 9px; font-size: 12px; min-width: 0; }
.cliora-app .activity-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cliora-app .activity-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliora-app .activity-legend-value { margin-left: auto; color: var(--text-muted); }

.cliora-app .activity-empty {
    width: 100%;
    margin: 0;
    padding: 26px 18px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
}

.cliora-app .activity-table-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cliora-app .activity-table-head h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }

/* One event per row: time, area, what, which item, detail. */
.cliora-app .contents-container.activity-list > .content-card.activity-row {
    display: grid;
    grid-template-columns: 148px 84px 150px minmax(110px, 1fr) minmax(0, 1.6fr);
    gap: 14px;
    align-items: center;
    min-height: 0;
    padding: 10px 16px;
    font-size: 12.5px;
}
.cliora-app .activity-row-time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cliora-app .activity-row-kind {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--ui-soft);
    color: var(--ui-accent);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cliora-app .activity-row-event { font-weight: 500; }
.cliora-app .activity-row-resource,
.cliora-app .activity-row-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cards saved onto the dashboard. */
.cliora-app .activity-dashboard { display: grid; gap: 16px; margin-top: 26px; }
.cliora-app .activity-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cliora-app .activity-dashboard-head h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.cliora-app .activity-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.cliora-app .activity-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cliora-app .activity-card-range { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cliora-app .activity-card-body { min-height: 120px; display: flex; align-items: center; }

.cliora-app .activity-card-list { display: grid; gap: 10px; margin-top: 8px; }
.cliora-app .activity-card-list-title { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.cliora-app .activity-card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cliora-app .activity-card-row-label { display: flex; align-items: center; gap: 9px; font-size: 13px; flex: 1 1 160px; min-width: 0; }
.cliora-app .activity-card-row-label input { width: 17px; height: 17px; accent-color: var(--ui-accent); flex: none; }
.cliora-app .activity-card-row-meta { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1023px) {
    .cliora-app .contents-container.activity-list > .content-card.activity-row {
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        padding: 12px 14px;
    }
    .cliora-app .activity-row-time { grid-column: 1; order: 1; font-size: 11px; }
    .cliora-app .activity-row-kind { grid-column: 2; order: 2; }
    .cliora-app .activity-row-event { grid-column: 1 / -1; order: 3; font-size: 13px; }
    .cliora-app .activity-row-resource { grid-column: 1 / -1; order: 4; white-space: normal; }
    .cliora-app .activity-row-detail { grid-column: 1 / -1; order: 5; white-space: normal; font-size: 11.5px; }
}
@media (max-width: 767px) {
    .cliora-app .activity-filters { gap: 8px 10px; }
    .cliora-app .activity-filter { flex: 1 1 130px; }
    .cliora-app .activity-charts,
    .cliora-app .activity-dashboard-grid { grid-template-columns: 1fr; }
    .cliora-app .activity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cliora-app .activity-stat-value { font-size: 21px; }
}

/* ========================================================================
   6. A secondary header button stays secondary in the light theme too.
   ui-2.css repaints .btn-primary for the light theme with a selector that
   outranks the neutral one, so New folder, Import backup, Generate with AI
   and the log's export buttons all came out as accent-filled primaries and
   the page lost its one clear main action.
   ======================================================================== */

:root[data-theme="light"] .cliora-app .header-actions .btn-primary.library-secondary,
:root[data-theme="light"] .cliora-app .header-actions .library-secondary,
:root[data-theme="light"] .cliora-app .btn-primary[onclick="openCreateFolderModal()"],
:root[data-theme="light"] .cliora-app .btn-primary[data-ai-module="asset_image"] {
    background: var(--bg-panel) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none;
}
:root[data-theme="light"] .cliora-app .btn-primary[data-ai-module="asset_image"] { color: var(--ui-accent) !important; }
:root[data-theme="light"] .cliora-app .header-actions .library-secondary:hover,
:root[data-theme="light"] .cliora-app .btn-primary[onclick="openCreateFolderModal()"]:hover {
    border-color: var(--ui-accent) !important;
    color: var(--ui-accent) !important;
}