/* =========================================================================
   freedom-os-admin-parity.css
   Task: Austin msg72424 (2026-08-09) item 3.
   "update the table styling to match admin.freedomclub.com, including the
    sidebar styling too ... Ensure the load animation is smooth and
    everything fades in cleanly."

   SOURCE OF TRUTH: /home/ubuntu/fc-admin/admin-dashboard.html
     - table spec  : "FC/FF Canonical Table Style (msg 42655, 2026-05-27)" block
     - sidebar spec: .sidebar / .nav-item rules
   Ranking note (PCM step 1): admin-dashboard.html is what Austin looks at and
   is the surface he named, so it outranks the older in-file GROUP 9 block in
   dashboard.html. This file is loaded LAST in <head> so it wins the cascade
   without editing the 654KB monolith (MODULAR-FROM-THE-START).

   Light mode only for structure/colour. Dark-mode rules in dashboard.html are
   deliberately NOT overridden except where the admin spec defines them.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TABLES - the LIVE admin.freedomclub.com values

   CANON CONFLICT, RESOLVED. admin-dashboard.html contains a comment block
   headed "FC/FF Canonical Table Style (msg 42655, 2026-05-27)" claiming
   13px 16px / 14px headers and 14px 16px / #E5E7EB cells. That block is
   NO LONGER what admin renders: a later
   ":root:not(.dark) .table thead th, ... .data-table ..." block carrying
   !important overrides it.

   Measured live on admin.freedomclub.com, 2026-08-09, on #brand-build and
   #inner-circle, plain .data-table and .data-table.bb-table alike:
     thead th : #F9FAFB bg, #374151, 13.5px/500, none, normal,
                padding 6px 14px, border-bottom 1px #E5E7EB, nowrap
     tbody td : #FFFFFF bg, #1A1A1A, 13.5px/400,
                padding 12px 14px, border-bottom 1px #F0F0F0, tabular-nums
     hover    : #FAFBFC

   RANKING: the rendered surface wins. Austin asked Freedom OS to match the
   dashboard he looks at, not a stale comment inside it.
   ------------------------------------------------------------------------- */

.fa-costs-table,
.fa-attr-table,
#products .products-table,
.data-table,
.table,
.fc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}

.fa-costs-table thead th,
.fa-attr-table thead th,
#products .products-table thead th,
.data-table thead th,
.table thead th,
.fc-table thead th {
    background: #F9FAFB !important;
    color: #374151 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 6px 14px !important;
    text-align: left;
    border-bottom: 1px solid #E5E7EB !important;
    border-top: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}

.fa-costs-table tbody td,
.fa-attr-table tbody td,
#products .products-table tbody td,
.data-table tbody td,
.table tbody td,
.fc-table tbody td {
    padding: 12px 14px !important;
    color: #1A1A1A;
    font-size: 13.5px !important;
    font-weight: 400;
    border-bottom: 1px solid #F0F0F0 !important;
    background: #FFFFFF;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    transition: background 120ms;
}

/* Admin rows are sized by padding, not a forced height. Releasing the
   hard-coded 48px lets rows match admin exactly. */
.fa-costs-table tbody tr,
.fa-attr-table tbody tr,
#products .products-table tbody tr,
.data-table tbody tr,
.table tbody tr,
.fc-table tbody tr {
    height: auto !important;
}

.fa-costs-table tbody tr:last-child td,
.fa-attr-table tbody tr:last-child td,
#products .products-table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.table tbody tr:last-child td,
.fc-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.fa-costs-table tbody tr:hover td,
.fa-attr-table tbody tr:hover td,
#products .products-table tbody tr:hover td,
.data-table tbody tr:hover td,
.table tbody tr:hover td,
.fc-table tbody tr:hover td {
    background: #FAFBFC !important;
}

/* Bare tables with no class - admin parity */
.content table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}
.content table:not([class]) thead th {
    background: #F5F6FA !important;
    color: #6B7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    text-align: left;
    border-bottom: 1px solid #E5E7EB !important;
    border-top: 0 !important;
    white-space: nowrap;
}
.content table:not([class]) tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: #0F172A;
    border-bottom: 1px solid #E5E7EB;
    background: transparent;
    vertical-align: middle;
}
.content table:not([class]) tbody tr:last-child td { border-bottom: 0; }
.content table:not([class]) tbody tr:hover td { background: #FAFBFC; }

/* Canonical table frame (austin-directives 2026-05-27, the border Austin has
   raised 10 times): ONE thin frame, 1px #e2e8f0, radius 10px, overflow hidden,
   no box-shadow, and NOTHING nested inside may draw a second border.

   Structure here (verified in dashboard.html): .table-card is already the
   frame element and .table-container / .fa-attr-table-wrap sit INSIDE it.
   So the card carries the single frame and the inner wrappers are stripped.
   Adding a border to the inner wrapper would recreate the exact double-border
   defect, so it is deliberately removed rather than styled. */
.table-card,
.fa-attr-table-wrap {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* Inner wrappers must stay frameless (single-border rule). */
.table-card .table-container,
.table-card .fa-attr-table-wrap,
.table-card > .table-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Dark mode - mirror admin's dark table values */
:root.dark .fa-costs-table thead th,
:root.dark .fa-attr-table thead th,
:root.dark #products .products-table thead th,
:root.dark .data-table thead th,
:root.dark .table thead th,
:root.dark .fc-table thead th {
    background: #111827 !important;
    color: #9CA3AF !important;
    border-bottom-color: #374151 !important;
}
:root.dark .fa-costs-table tbody td,
:root.dark .fa-attr-table tbody td,
:root.dark #products .products-table tbody td,
:root.dark .data-table tbody td,
:root.dark .table tbody td,
:root.dark .fc-table tbody td {
    color: #E5E7EB;
    border-bottom-color: #2D3748 !important;
}
:root.dark .fa-costs-table tbody tr:hover td,
:root.dark .fa-attr-table tbody tr:hover td,
:root.dark #products .products-table tbody tr:hover td,
:root.dark .data-table tbody tr:hover td,
:root.dark .table tbody tr:hover td,
:root.dark .fc-table tbody tr:hover td {
    background: #243042 !important;
}

/* Admin's tablet padding step */
@media (min-width: 481px) and (max-width: 1024px) {
    .fa-costs-table thead th,
    .fa-attr-table thead th,
    #products .products-table thead th,
    .data-table thead th,
    .table thead th,
    .fc-table thead th,
    .content table:not([class]) thead th {
        font-size: 11px !important;
        padding: 10px 12px !important;
        letter-spacing: 0.4px !important;
    }
    .fa-costs-table tbody td,
    .fa-attr-table tbody td,
    #products .products-table tbody td,
    .data-table tbody td,
    .table tbody td,
    .fc-table tbody td,
    .content table:not([class]) tbody td {
        padding: 12px !important;
    }
}

/* -------------------------------------------------------------------------
   2. SIDEBAR - exact admin.freedomclub.com values
   Admin spec:
     .sidebar   : width 280px, bg var(--bg-sidebar), border-right 1px var(--border-light)
     .sidebar-nav: padding 0
     .nav-item  : gap 10px, padding 10px 16px, radius 10px, 14px/500,
                  margin 2px 12px, transition all .15s ease
     .nav-item svg : 16px
     .nav-item.active : #ebebeb
   ------------------------------------------------------------------------- */

/* Specificity note: dashboard.html carries later !important rules at
   lines ~8985, ~10117 and ~11019 that drifted this sidebar away from admin
   (tinted #f2f2ef background, inset shadow, near-black #111827 active pill,
   10px 12px padding). Those are the exact deltas Austin asked to remove, so
   these selectors are written at html body .sidebar ... specificity with
   !important to win cleanly rather than to mask a bug. */

html body .sidebar {
    width: 280px !important;
    background: var(--bg-sidebar) !important;   /* white, per admin */
    border-right: 1px solid var(--border-light) !important;
    box-shadow: none !important;                /* admin has no inset shadow */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html body .sidebar::-webkit-scrollbar { width: 0; height: 0; }

html body .main-content { margin-left: 280px; }

html body .sidebar nav {
    padding: 0 !important;
}

html body .sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 2px 12px !important;
    min-height: 0 !important;
}
html body .sidebar .nav-item svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
html body .sidebar .nav-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
/* Admin active pill is light grey #ebebeb, NOT a near-black fill. */
html body .sidebar .nav-item.active {
    background: #ebebeb !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
:root.dark body .sidebar .nav-item.active {
    background: #2d3748 !important;
    color: #ffffff !important;
}
:root.dark body .sidebar {
    background: var(--bg-light) !important;
}

/* Admin logo block spacing */
html body .sidebar .logo {
    padding: 18px 20px 32px 20px;
    margin-bottom: 0;
}

/* Collapsed sidebar: the LIVE mechanism is body.sidebar-collapsed with a
   56px rail (dashboard.html lines 8348/8994, driven by toggleSidebarCollapse
   + the fai-sidebar-collapsed localStorage key). Those rules already carry
   !important and must keep winning, so we deliberately do NOT restate a
   width here. Only the expanded margin needs to follow the new 280px. */
body.sidebar-collapsed .main-content { margin-left: 56px; }

@media (max-width: 768px) {
    /* Mobile sidebar is an off-canvas drawer; main content is full width. */
    .main-content { margin-left: 0 !important; }
}

/* -------------------------------------------------------------------------
   3. LOAD ANIMATION - smooth, clean fade in
   Root cause fixed: showApp() flipped #app-container from display:none to
   display:'' with no transition, producing a hard pop-in. We give the
   container an opacity/translate transition driven by a .fa-booted class,
   and stagger the first paint of cards/tables so content settles rather
   than snapping. Respects prefers-reduced-motion.
   ------------------------------------------------------------------------- */

#app-container {
    opacity: 0;
    transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#app-container.fa-booted {
    opacity: 1;
}

/* Section switching fades rather than jumps */
.content .section.active {
    animation: faSectionIn 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes faSectionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger the first paint of the primary cards on the active section */
#app-container.fa-firstpaint .section.active > * {
    animation: faRise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#app-container.fa-firstpaint .section.active > *:nth-child(1) { animation-delay: 0ms; }
#app-container.fa-firstpaint .section.active > *:nth-child(2) { animation-delay: 45ms; }
#app-container.fa-firstpaint .section.active > *:nth-child(3) { animation-delay: 90ms; }
#app-container.fa-firstpaint .section.active > *:nth-child(4) { animation-delay: 135ms; }
#app-container.fa-firstpaint .section.active > *:nth-child(5) { animation-delay: 180ms; }
#app-container.fa-firstpaint .section.active > *:nth-child(n+6) { animation-delay: 220ms; }
@keyframes faRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Login overlay should fade out, not vanish */
#login-overlay {
    transition: opacity 220ms ease;
}
#login-overlay.fa-fading {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #app-container,
    #app-container.fa-booted,
    .content .section.active,
    #app-container.fa-firstpaint .section.active > * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}