/*
 | WeLove3D Portal — compact, premium admin skin.
 | Loaded via a Filament render hook (STYLES_AFTER) so it overrides the
 | default theme with no build step. Served from the docroot at /css/portal.css.
 |
 | Strategy: the single biggest density lever is the root rem scale — Filament
 | sizes almost everything (text, spacing, icons) in rem, so shrinking the root
 | font shrinks the whole UI proportionally and evenly. Targeted rules then
 | tighten the roomiest spots and add a more refined, premium finish.
 */

/* 1) Global density — scale the whole panel down together (16px -> 13.5px). */
html {
    font-size: 13.5px;
}

body,
.fi-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}

/* 2) Use the full viewport (paired with maxContentWidth(Full)); trim gutters. */
.fi-main {
    max-width: 100% !important;
    padding-inline: 1.15rem;
    padding-block: 0.9rem;
}

.fi-topbar > nav,
.fi-topbar > div {
    padding-block: 0.4rem !important;
}

/* 3) Sidebar — tighter rhythm, quieter group labels. */
.fi-sidebar {
    --sidebar-width: 15rem;
}

.fi-sidebar-item {
    margin-bottom: 0.05rem;
}

.fi-sidebar-item-label {
    font-size: 0.83rem;
}

.fi-sidebar-item .fi-icon,
.fi-topbar .fi-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.fi-sidebar-group-label {
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* 4) Section cards — denser padding, refined corners + shadow. */
.fi-section {
    border-radius: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
}

.fi-section-header {
    padding: 0.8rem 1rem !important;
}

.fi-section-content {
    padding: 0.85rem 1rem !important;
}

/* 5) Tables — compact rows, crisp small-caps headers. */
.fi-ta-ctn {
    border-radius: 0.65rem;
}

.fi-ta-header-cell {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.fi-ta-cell {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

.fi-ta-row:hover {
    background-color: rgba(59, 130, 246, 0.035);
}

/* 6) Page headings — confident, not shouty. */
.fi-header-heading {
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -0.012em;
}

.fi-header-subheading {
    font-size: 0.82rem;
}

/* 7) Stat widgets — tighter, larger emphasis on the number. */
.fi-wi-stats-overview-stat {
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.72rem;
}

/* 8) Controls — tighter inputs, buttons and badges. */
.fi-input {
    font-size: 0.83rem;
}

.fi-btn {
    font-size: 0.82rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.fi-badge {
    font-size: 0.68rem;
    padding-block: 0.1rem;
}

/* 9) Modals a touch tighter. */
.fi-modal-content {
    gap: 0.75rem;
}

/* Dark-mode: soften the premium shadows so cards don't look flat-black. */
.dark .fi-section,
.dark .fi-wi-stats-overview-stat {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.dark .fi-ta-row:hover {
    background-color: rgba(59, 130, 246, 0.08);
}

/* ──────────────────────────────────────────────────────────────────────────
 | 10) Notes board — sticky notes.
 |
 | The Notes table renders as a content grid, so each record is a card. We
 | strip Filament's card chrome (via the `wl-note-record` class set with
 | recordClasses) and let the coloured sticky itself be the card.
 */
.fi-ta-record.wl-note-record {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fi-ta-record.wl-note-record .fi-ta-record-content,
.fi-ta-record.wl-note-record .fi-ta-col-wrp,
.fi-ta-record.wl-note-record .fi-ta-col {
    padding: 0 !important;
}

/* One-line sticky row: date + title on a single line, so the board packs many
   notes in. Full detail opens in the read modal. */
.wl-note {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.5rem 1.9rem 0.5rem 0.85rem;   /* right room for the pin */
    border-radius: 0.3rem;
    color: #1f2937;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 3px 8px -5px rgba(15, 23, 42, 0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wl-note:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16), 0 8px 16px -8px rgba(15, 23, 42, 0.3);
}

.wl-note-date {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
    line-height: 1.5;
}

.wl-note-title {
    flex: 1 1 auto;
    min-width: 0;                 /* allow the ellipsis to kick in */
    font-size: 0.9rem;
    font-weight: 640;
    line-height: 1.5;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-note-pin {
    position: absolute;
    inset-inline-end: 0.6rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    opacity: 0.55;
}

.wl-note-pin-icon {
    width: 0.95rem;
    height: 0.95rem;
}

/* Sticky palette. */
.wl-note--yellow { background: #fef3c7; }
.wl-note--pink   { background: #fce7f3; }
.wl-note--blue   { background: #dbeafe; }
.wl-note--green  { background: #dcfce7; }
.wl-note--orange { background: #ffedd5; }
.wl-note--purple { background: #ede9fe; }

/* Dark mode: mute the paper so it doesn't glare, keep the hue readable. */
.dark .wl-note {
    color: #f1f5f9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.6);
}

.dark .wl-note--yellow { background: #4a3c14; }
.dark .wl-note--pink   { background: #4b2438; }
.dark .wl-note--blue   { background: #1e3556; }
.dark .wl-note--green  { background: #1c3f2d; }
.dark .wl-note--orange { background: #4a3117; }
.dark .wl-note--purple { background: #33285c; }

/* The expanded note, inside the read modal. */
.wl-note-read {
    padding: 1.15rem 1.25rem;
    border-radius: 0.4rem;
    color: #1f2937;
}

.wl-note-read-meta {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.62;
    margin-bottom: 0.7rem;
}

.wl-note-read-body {
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;   /* keep the line breaks the user typed */
    overflow-wrap: anywhere;
}

.wl-note-read-body--empty {
    font-style: italic;
    opacity: 0.55;
}

.wl-note-read-foot {
    margin-top: 1rem;
    font-size: 0.7rem;
    opacity: 0.5;
}

.dark .wl-note-read {
    color: #f1f5f9;
}