/* Resources (KBW-0185) — folder tree, document grid, storage panel.
   Built on the v2 theme variables (--card / --ink / --line / --human …) and the .k-* kit. No Bootstrap. */

/* The body is the list of files and nothing else: the folders and the storage panel live in the
   shell's contextual panel (KBW-0189), so the page has one job and the grid gets the whole width. */
.res-page .res-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;               /* lets the card scroll instead of stretching the page */
    min-width: 0;
}

/* Search with the magnifier inside the field, like the rest of the v2 chrome. */
.res-search           { position: relative; display: inline-flex; align-items: center; }
.res-search .k-field  { padding-left: 1.9rem; min-width: 230px; }
/* Room for the clear button, and only while it is there — an always-reserved gutter reads as a
   control that has gone missing. */
.res-search .k-field.res-search-clearable { padding-right: 1.8rem; }

/* The browser's own clear affordance on type=search. Hidden because it clears the TEXT and leaves
   the result standing: the list stays filtered, the map stays ranked, and the box that explained
   why is now empty. Ours resets both. */
.res-search .k-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.res-search-clear {
    position: absolute; right: .35rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: 6px;
    background: none; color: var(--ink-soft);
    cursor: pointer; line-height: 0;
    transition: color .12s, background .12s;
}
.res-search-clear:hover { color: var(--ink); background: var(--paper); }

/* "Search by" + the switch, kept together so they wrap as one unit. */
.res-searchby       { display: inline-flex; align-items: center; gap: .4rem; }
.res-searchby-label { font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
.res-search-ico {
    position: absolute; left: .55rem; width: 14px; height: 14px;
    fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round;
    pointer-events: none;
}

/* ── Contextual panel: folders + storage ──────────────────────────────────────
   Inside .app-sidebar, so no card of its own — the panel IS the surface. It scrolls with the rest
   of the panel body, the same way the project and task lists already do. */
.res-panel { padding: .35rem .5rem .5rem; }
.res-tree  { display: flex; flex-direction: column; gap: 1px; }

.res-node {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .42rem .55rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    font-size: .855rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.res-node:hover { background: var(--we); }
.res-node.on    { background: var(--human-soft); color: var(--human-text); font-weight: 600; }
.res-node.sub   { padding-left: .55rem; }

.res-ico {
    flex: 0 0 auto; width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .75;
}
.res-node.on .res-ico { opacity: 1; }

/* Long names truncate rather than wrapping: the list must stay one line per row so it reads as a
   column of places, not a paragraph. */
.res-node-lbl   { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.res-group       { margin: .45rem 0 .25rem; }
.res-group-head  {
    padding: .2rem .55rem .3rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft);
}
.res-group-empty { padding: .1rem .55rem; font-size: .78rem; color: var(--ink-soft); }
.res-tree-sep    { height: 1px; background: var(--line); margin: .45rem .2rem; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.res-main  { flex: 1 1 auto; min-width: 0; display: flex; }

.res-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: .35rem .35rem .5rem;
    overflow: hidden;            /* the scroller is .res-gridwrap, so the sticky header has one */
}
.res-empty { padding: 1.4rem .9rem; color: var(--ink-soft); font-size: .86rem; }
.res-more  { margin: .55rem .65rem .25rem; }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
/* One scroller for both axes, and it is inside the card rather than the page: .k-page clips
   overflow-x, so a grid wider than the viewport used to run off the right edge with no way to
   reach it (KBW-0189). Sticky headers need this element to be the scrollport too. */
.res-gridwrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.res-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }

.res-grid th {
    position: sticky; top: 0; z-index: 1;
    background: var(--card);
    text-align: left;
    font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-soft);
    padding: .55rem .6rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.res-th-num { text-align: right; }

.res-grid td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink);
}
.res-grid tbody tr:last-child td { border-bottom: 0; }

.res-row        { cursor: pointer; transition: background .1s ease; }
.res-row:hover  { background: var(--we); }
.res-row.sel    { background: var(--human-soft); }

/* The flex row is a span inside the cell: a <td> made into a flex container leaves the table's
   width algorithm, and the grid then sized itself to its widest row whatever the space available.
   The cap in characters is what keeps one long file name from widening the whole table. */
.res-name-row   { display: flex; align-items: center; gap: .55rem; min-width: 0; max-width: 46ch; }
.res-cell-num   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
                  color: var(--ink-soft); }
.res-cell-date,
.res-cell-who   { white-space: nowrap; color: var(--ink-soft); }
.res-cell-where { white-space: nowrap; }

/* The extension IS the icon: three letters identify a file faster than a generic page glyph. */
.res-file-ico {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 26px; border-radius: 7px;
    font-size: .58rem; font-weight: 800; letter-spacing: .03em;
    background: var(--we); color: var(--ink-soft);
    border: 1px solid var(--line);
}
.res-file-ico.pdf      { background: var(--alert-soft); color: var(--alert-text); border-color: transparent; }
.res-file-ico.document { background: var(--focus-soft); color: var(--focus-text); border-color: transparent; }
.res-file-ico.spreadsheet { background: var(--human-soft); color: var(--human-text); border-color: transparent; }
.res-file-ico.text     { background: var(--we);         color: var(--ink-soft); }
.res-file-ico.image    { background: var(--agent-soft); color: var(--agent-text); border-color: transparent; }

.res-file-txt   { display: flex; flex-direction: column; min-width: 0; }
.res-file-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The file name under the title: a document's title is often generated, and the file name is what
   the user recognises. */
.res-file-sub   { font-size: .72rem; color: var(--ink-soft);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges qualify a row; they do not announce a problem, so they stay quiet by default. */
.res-badge {
    flex: 0 0 auto;
    font-size: .66rem; font-weight: 600; padding: .1rem .4rem; border-radius: 999px;
    background: var(--we); color: var(--ink-soft); white-space: nowrap;
}
.res-badge.warn { background: var(--amber-soft); color: var(--amber-text); }
/* On its way, not wrong: an upload the indexer has not read yet. */
.res-badge.info { background: var(--human-soft); color: var(--human-text); }
.res-row-pending { cursor: default; }
.res-row-pending .res-file-title { color: var(--ink-soft); }

/* Where the document is filed. Scope is invisible everywhere else, which is how a misfiled
   document stays misfiled. */
.res-chip {
    font-size: .73rem; padding: .12rem .45rem; border-radius: 7px;
    background: var(--we); color: var(--ink-soft);
}
.res-chip.project { background: var(--human-soft); color: var(--human-text); }
.res-chip.chat    { background: var(--agent-soft); color: var(--agent-text); }

/* ── Storage panel ────────────────────────────────────────────────────────── */
/* Sits under the folders in the contextual panel, separated by a rule: same surface, different
   question — where a file is filed, versus how much room is left. */
.res-usage {
    margin-top: .9rem; padding: .8rem .1rem 0;
    border-top: 1px solid var(--line);
}
/* The whole header is the disclosure, not just the chevron: a 12px arrow is a poor target on a
   phone, and the label is what the finger goes for anyway. */
.res-usage-head {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    padding: .2rem .35rem .5rem;
    border: 0; background: transparent; cursor: pointer; text-align: left;
}
.res-usage-title {
    flex: 1 1 auto;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft);
}
.res-usage-chev {
    flex: 0 0 auto; width: 14px; height: 14px;
    fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s ease;
}
.res-usage-chev.open { transform: rotate(180deg); }
.res-usage-head:hover .res-usage-title,
.res-usage-head:hover .res-usage-chev { color: var(--ink); stroke: var(--ink); }

/* Closed: used / total / percent on one line. Tabular figures so the row does not jitter when the
   number changes under an upload. */
.res-usage-strip {
    display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
    padding: 0 .35rem .2rem;
    font-variant-numeric: tabular-nums;
}
.res-strip-used { font-size: .95rem; font-weight: 700; color: var(--ink); }
.res-strip-max  { font-size: .8rem; color: var(--ink-soft); }
.res-strip-pct  {
    margin-left: auto;
    font-size: .78rem; font-weight: 700; color: var(--ink-soft);
}
.res-strip-pct.warn { color: var(--amber-text); }
.res-strip-pct.hot  { color: var(--alert-text); }

.res-ring-wrap { position: relative; display: flex; justify-content: center; margin: .2rem 0 1rem; }
.res-ring      { width: 132px; height: 132px; }
.res-ring-track { stroke: var(--line); }
.res-ring-fill  { stroke: var(--human); transition: stroke-dasharray .4s ease; }
.res-ring-fill.warn { stroke: var(--amber); }
.res-ring-fill.hot  { stroke: var(--alert); }

.res-ring-txt {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem; pointer-events: none;
}
.res-ring-used { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.res-ring-max  { font-size: .74rem; color: var(--ink-soft); }

/* Kebab column: fixed and narrow, and the button only appears on the row under the pointer —
   a column of dots down the whole grid competes with the content it is meant to serve. */
.res-th-kebab   { width: 34px; }
.res-cell-kebab { width: 34px; text-align: right; padding-left: 0; }
.res-kebab {
    border: 0; background: transparent; color: var(--ink-soft);
    padding: .2rem; border-radius: 7px; cursor: pointer;
    opacity: 0; transition: opacity .1s, background .1s;
}
.res-row:hover .res-kebab,
.res-row.sel   .res-kebab,
.res-kebab:focus-visible { opacity: 1; }
.res-kebab:hover { background: var(--we); color: var(--ink); }
/* Coarse pointers have no hover, so the affordance must simply be there. */
@media (hover: none) { .res-kebab { opacity: 1; } }

/* ── Share dialog ─────────────────────────────────────────────────────────── */
.res-share-modal   { width: min(460px, 94vw); padding: 0 1.1rem 1.1rem; }
.res-share-subject {
    margin: 0 0 .9rem; font-size: .84rem; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-share-list { list-style: none; margin: 0 0 .9rem; padding: 0;
                  display: flex; flex-direction: column; gap: .3rem; }
.res-share-row  { display: flex; align-items: center; gap: .6rem; font-size: .84rem; min-height: 40px; }
.res-share-who  { flex: 1; min-width: 0; }
.res-share-email { display: block; font-size: .74rem; color: var(--ink-soft); }
.res-share-role { font-size: .74rem; color: var(--ink-soft); }
.res-share-level { width: auto; flex: 0 0 auto; }
.res-share-section {
    margin: 1rem 0 .45rem; font-size: .8rem; font-weight: 600; color: var(--ink);
}
.res-share-general { display: flex; align-items: center; gap: .6rem; }
.res-share-general .k-field { width: auto; flex: 1 1 auto; }
.res-share-general-icon {
    flex: 0 0 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface-2); color: var(--ink-soft);
}
.res-share-error { margin: .6rem 0 0; font-size: .78rem; color: var(--alert-text); }

/* The percentage sits in the ring, where the eye already is. Quiet until it isn't: the colour is
   what says "over", so the same element serves both states. */
.res-ring-pct {
    margin-top: .15rem;
    font-size: .74rem; font-weight: 700; color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.res-ring-pct.warn { color: var(--amber-text); }
.res-ring-pct.hot  {
    color: var(--alert-text);
    background: var(--alert-soft); padding: .05rem .35rem; border-radius: 999px;
}
.res-over-note {
    margin: 0 0 .8rem;
    font-size: .74rem; line-height: 1.4; color: var(--alert-text);
    background: var(--alert-soft); border-radius: 10px; padding: .5rem .6rem;
}


/* Segmented bar: the parts add up to the ring because both are measured on the same rows. */
.res-bar {
    display: flex; height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--line); margin-bottom: .8rem;
}
.res-bar-seg { height: 100%; }

.res-legend     { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.res-legend-row { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.res-legend-name  { color: var(--ink); font-weight: 500; }
.res-legend-files { color: var(--ink-soft); font-size: .72rem; }
.res-legend-size  { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.res-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }

/* One hue per kind of file, shared by the bar and the legend dots. Drawn from the Kibo accents
   rather than a new palette, so the panel belongs to the product. */
.res-bar-seg.pdf,      .res-dot.pdf      { background: var(--alert); }
.res-bar-seg.document, .res-dot.document { background: var(--m-doc); }
.res-bar-seg.spreadsheet, .res-dot.spreadsheet { background: var(--human); }
.res-bar-seg.text,     .res-dot.text     { background: var(--focus); }
.res-bar-seg.image,    .res-dot.image    { background: var(--agent); }
.res-bar-seg.video,    .res-dot.video    { background: var(--m-chat); }
.res-bar-seg.audio,    .res-dot.audio    { background: var(--amber); }
.res-bar-seg.archive,  .res-dot.archive  { background: var(--m-frag); }
.res-bar-seg.other,    .res-dot.other    { background: var(--ink-soft); }




/* ── Narrow ───────────────────────────────────────────────────────────────────
   The folders and the storage panel no longer fold above the grid at these widths — they are in
   the contextual panel, which is a drawer on a tablet and a phone. What is left to do here is give
   the grid a shape that fits the width it actually has. */
@media (max-width: 900px) {
    /* Version and who changed it are the first to go: the name, the size and when it changed are
       what identify a file. */
    .res-grid th:nth-child(2), .res-grid td:nth-child(2),
    .res-grid th:nth-child(4), .res-grid td:nth-child(4) { display: none; }
    /* The toolbar is five controls wide now (two switches, the box, search, reload) and
       .k-page-actions wraps. The box takes whatever line it lands on rather than staying at its
       230px and pushing the buttons onto a line of their own. */
    .res-search { flex: 1 1 180px; }
    .res-search .k-field { min-width: 0; width: 100%; }
    .res-name-row { max-width: 34ch; }
}

@media (max-width: 640px) {
    /* Phone: "where" goes too — the folder that is open already answers it — leaving name, size and
       date. The name column carries the file name under the title, so nothing is lost. */
    .res-grid th:nth-child(6), .res-grid td:nth-child(6) { display: none; }
    .res-name-row { max-width: none; }
    .res-grid { font-size: .82rem; }
    .res-grid th, .res-grid td { padding: .45rem .4rem; }
}

/* View switch: folders / map. A segmented control rather than two links — they are two readings
   of one set, and leaving the page for the other would make them feel like two products. */
.res-viewswitch {
    display: inline-flex; gap: 2px; padding: 2px;
    background: var(--we); border: 1px solid var(--line); border-radius: 10px;
}
.res-viewbtn {
    border: 0; background: transparent; color: var(--ink-soft);
    padding: .3rem .7rem; border-radius: 8px; font-size: .8rem; cursor: pointer;
    transition: background .12s, color .12s;
}
.res-viewbtn:hover { color: var(--ink); }
.res-viewbtn.on    { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* The map draws its own page block; inside Resources it must not add a second outer margin. */
.mm-embedded { padding: 0; }