/**
 * Document Library — app styles
 *
 * Every class is namespaced `doclib-` so nothing can bleed into another tool,
 * and every spacing, radius and neutral colour is a --fw-* token so both themes
 * work without a second rule. No Bootstrap: v1 leaned on .row/.col-*, .table,
 * .modal, .alert-dismissible and .btn-close; those are CSS grid, .fw-table and
 * frikwork's .fw-modal now.
 *
 * THE ONE PLACE HEX VALUES ARE ALLOWED
 * ------------------------------------
 * The house rule is "no hardcoded colours, use --fw-* tokens". File-type
 * theming is the deliberate exception, because the colours ARE the feature: a
 * Word document has to be Word blue and a PDF has to be Adobe red, and no
 * theme token can express "the colour Microsoft uses for Excel". They are
 * declared once here as --doclib-* custom properties instead of being
 * interpolated into a `style="color: #2b579a"` attribute the way v1 did it, so
 * there is a single place to change one and both themes can tune it
 * independently. Everything else in this file is tokens.
 */

/* Dark is frikwork's base theme — its own tokens live on :root and only the
   light overrides are attribute-scoped — so these follow the same shape. That
   also keeps them correct when the theme is set to 'auto', which REMOVES
   data-fw-theme entirely; a `[data-fw-theme="dark"]` block would silently stop
   applying while the rest of the page stayed dark. */
:root {
  /* Adobe */
  --doclib-pdf:       #f40f02;
  --doclib-psd:       #31a8ff;
  --doclib-ai:        #ff9a00;
  --doclib-indd:      #ff3366;
  --doclib-xd:        #ff61f6;

  /* Microsoft. word / excel / visio / publisher / onenote are lifted from the
     brand hex — #2b579a on a near-black surface is barely visible. The exact
     brand values are restored for the light theme below. */
  --doclib-word:      #4a8ae0;
  --doclib-excel:     #3ba76a;
  --doclib-ppt:       #d24726;
  --doclib-visio:     #6d86d6;
  --doclib-publisher: #14a893;
  --doclib-onenote:   #b060e0;

  /* Google Workspace */
  --doclib-gdoc:      #4285f4;
  --doclib-gsheet:    #0f9d58;
  --doclib-gslides:   #f4b400;

  /* OpenDocument (also lifted), text, images, archives */
  --doclib-odf:       #6a9ae8;
  --doclib-text:      #9aa0a6;
  --doclib-image:     #94c83e;
  --doclib-archive:   #f5a623;
  --doclib-generic:   #9aa0a6;
}

/* On a white surface the real brand colours are the right ones. */
:root[data-fw-theme="light"] {
  --doclib-word:      #2b579a;
  --doclib-excel:     #217346;
  --doclib-visio:     #3955a3;
  --doclib-publisher: #077568;
  --doclib-onenote:   #7719aa;
  --doclib-odf:       #2a5fb4;
}

/* ---------------------------------------------------------------------------
 * Panel + toolbar
 * ------------------------------------------------------------------------ */

/* The table runs edge to edge; .app-panel__body's padding would inset it and
   cut the hover highlight short of the card edge. */
.doclib-panel .app-panel__body {
  padding: 0;
}

.doclib-notes {
  margin-top: var(--fw-space-lg);
}

.doclib-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fw-space-md);
  padding: var(--fw-space-md) var(--fw-space-lg);
  border-bottom: 1px solid var(--fw-border);
}

.doclib-search {
  position: relative;
  flex: 0 1 26rem;
  min-width: 15rem;
}

.doclib-search__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fw-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.doclib-search__input {
  padding-left: 2.35rem;
}

.doclib-count {
  margin-left: auto;
  color: var(--fw-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * The table
 * ------------------------------------------------------------------------ */

.doclib-table th,
.doclib-table td {
  padding: var(--fw-space-sm) var(--fw-space-lg);
  vertical-align: middle;
}

.doclib-table tbody tr:last-child td {
  border-bottom: none;
}

.doclib-c-icon {
  width: 3.25rem;
  text-align: center;
}

.doclib-c-size,
.doclib-c-date {
  white-space: nowrap;
  color: var(--fw-text-muted);
}

.doclib-c-actions {
  width: 6rem;
  text-align: right;
  white-space: nowrap;
}

.doclib-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--doclib-generic);
}

.doclib-icon--pdf       { color: var(--doclib-pdf); }
.doclib-icon--psd       { color: var(--doclib-psd); }
.doclib-icon--ai        { color: var(--doclib-ai); }
.doclib-icon--indd      { color: var(--doclib-indd); }
.doclib-icon--xd        { color: var(--doclib-xd); }
.doclib-icon--word      { color: var(--doclib-word); }
.doclib-icon--excel     { color: var(--doclib-excel); }
.doclib-icon--ppt       { color: var(--doclib-ppt); }
.doclib-icon--visio     { color: var(--doclib-visio); }
.doclib-icon--publisher { color: var(--doclib-publisher); }
.doclib-icon--onenote   { color: var(--doclib-onenote); }
.doclib-icon--gdoc      { color: var(--doclib-gdoc); }
.doclib-icon--gsheet    { color: var(--doclib-gsheet); }
.doclib-icon--gslides   { color: var(--doclib-gslides); }
.doclib-icon--odf       { color: var(--doclib-odf); }
.doclib-icon--text      { color: var(--doclib-text); }
.doclib-icon--image     { color: var(--doclib-image); }
.doclib-icon--archive   { color: var(--doclib-archive); }
.doclib-icon--generic   { color: var(--doclib-generic); }

.doclib-name {
  display: block;
  font-weight: 600;
  color: var(--fw-text);
  overflow-wrap: anywhere;
}

.doclib-desc {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--fw-text-muted);
  overflow-wrap: anywhere;
}

/* Type / size / date, restated under the name when those columns are hidden. */
.doclib-inline-meta {
  display: none;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--fw-text-muted);
}

.doclib-type {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-pill);
  background: var(--fw-bg-2);
  font-size: 0.72rem;
  color: var(--fw-text-muted);
  white-space: nowrap;
}

.doclib-action {
  color: var(--fw-text-muted);
}

.doclib-action:hover,
.doclib-action:focus-visible {
  color: var(--fw-brand-text);
  background: var(--fw-bg-hover);
}

.doclib-action--danger:hover,
.doclib-action--danger:focus-visible {
  color: var(--fw-danger);
}

/* ---------------------------------------------------------------------------
 * Search miss
 * ------------------------------------------------------------------------ */

.doclib-noresults {
  padding: var(--fw-space-xl) var(--fw-space-lg);
  text-align: center;
  color: var(--fw-text-muted);
}

.doclib-noresults i {
  font-size: 1.6rem;
  margin-bottom: var(--fw-space-sm);
}

.doclib-noresults p {
  margin: 0;
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------------------
 * Upload modal
 *
 * frikwork has no dropzone component — .fw-file is a styled <input type=file>,
 * which is a different thing. Built here from tokens.
 * ------------------------------------------------------------------------ */

.doclib-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fw-space-xs);
  padding: var(--fw-space-xl) var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
  text-align: center;
  cursor: pointer;
  background: var(--fw-bg-2);
  border: 2px dashed var(--fw-border);
  border-radius: var(--fw-radius-lg);
  transition: border-color var(--fw-dur) ease, background var(--fw-dur) ease;
}

.doclib-drop:hover {
  border-color: var(--fw-brand);
  background: var(--fw-bg-hover);
}

/* Focus lives on the covering input, so the ring has to be drawn on the zone. */
.doclib-drop:focus-within {
  border-color: var(--fw-brand);
  outline: 2px solid var(--fw-brand);
  outline-offset: 2px;
}

.doclib-drop.is-dragging {
  border-color: var(--fw-brand);
  border-style: solid;
  background: color-mix(in srgb, var(--fw-brand) 10%, transparent);
}

.doclib-drop__icon {
  font-size: 1.75rem;
  color: var(--fw-brand-text);
}

.doclib-drop__title {
  font-weight: 600;
  color: var(--fw-text);
}

.doclib-drop__hint {
  max-width: 34rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fw-text-muted);
}

.doclib-drop__file {
  margin-top: var(--fw-space-xs);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fw-brand-text);
  overflow-wrap: anywhere;
}

/* The real input covers the zone so a click anywhere opens the picker and
   keyboard focus lands somewhere sensible — but it must not be display:none,
   or it stops being focusable at all. */
.doclib-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.doclib-progress {
  margin-top: var(--fw-space-md);
}

.doclib-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-xs);
}

.doclib-confirm {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Visually hidden, still announced
 * ------------------------------------------------------------------------ */

.doclib-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * v1 used Bootstrap's .d-none .d-md-table-cell to drop columns. Same idea, done
 * with media queries: the type, size and date columns fold away and reappear as
 * one line under the filename.
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .doclib-table th.doclib-c-type,
  .doclib-table td.doclib-c-type,
  .doclib-table th.doclib-c-date,
  .doclib-table td.doclib-c-date {
    display: none;
  }
  .doclib-inline-meta { display: block; }
}

@media (max-width: 620px) {
  .doclib-table th.doclib-c-size,
  .doclib-table td.doclib-c-size {
    display: none;
  }
  .doclib-table th,
  .doclib-table td {
    padding-inline: var(--fw-space-md);
  }
  .doclib-toolbar { padding-inline: var(--fw-space-md); }
  .doclib-search { flex: 1 1 100%; }
  .doclib-count { margin-left: 0; }
}