/*
 * Fotos.bg brand layer.
 *
 * Loaded after Vuexy's core.css and overrides its custom properties rather than
 * editing the vendor file, so the theme survives a Vuexy upgrade.
 *
 * Palette
 *   #210070  deep violet — primary
 *   #a2eacb  mint        — success / positive
 *   #fec500  gold        — warning / attention
 *
 * The one thing that is not a straight swap: mint and gold are *light* colours.
 * White text on them measures 1.4:1 and 1.6:1, far below the 4.5:1 floor, and
 * Vuexy puts white on success/warning by default. Every rule that pairs text
 * with those two therefore forces near-black instead — see --fotos-on-light.
 */

:root,
[data-bs-theme='light'] {
    --fotos-primary: #210070;
    --fotos-primary-rgb: 33, 0, 112;
    --fotos-primary-hover: #2d0a8f;      /* lifted, still 12:1 against white */
    --fotos-primary-soft: #ece8f7;

    --fotos-mint: #a2eacb;
    --fotos-mint-rgb: 162, 234, 203;
    --fotos-mint-hover: #8fe0bd;
    --fotos-mint-soft: #eafaf3;

    --fotos-gold: #fec500;
    --fotos-gold-rgb: 254, 197, 0;
    --fotos-gold-hover: #e8b400;
    --fotos-gold-soft: #fff6d9;

    /* Text colour for anything sitting on mint or gold. */
    --fotos-on-light: #171622;

    /* ---- Bootstrap / Vuexy tokens ---- */
    --bs-primary: var(--fotos-primary);
    --bs-primary-rgb: var(--fotos-primary-rgb);
    --bs-primary-bg-subtle: var(--fotos-primary-soft);
    --bs-primary-border-subtle: #c9bde8;
    --bs-primary-text-emphasis: var(--fotos-primary);
    --bs-primary-contrast: #fff;

    --bs-success: var(--fotos-mint);
    --bs-success-rgb: var(--fotos-mint-rgb);
    --bs-success-bg-subtle: var(--fotos-mint-soft);
    --bs-success-border-subtle: #7fd8b2;
    --bs-success-text-emphasis: #0d5c3f;   /* readable mint, not the swatch */
    --bs-success-contrast: var(--fotos-on-light);

    --bs-warning: var(--fotos-gold);
    --bs-warning-rgb: var(--fotos-gold-rgb);
    --bs-warning-bg-subtle: var(--fotos-gold-soft);
    --bs-warning-border-subtle: #f0c93f;
    --bs-warning-text-emphasis: #7a5c00;
    --bs-warning-contrast: var(--fotos-on-light);

    --bs-link-color: var(--fotos-primary);
    --bs-link-color-rgb: var(--fotos-primary-rgb);
    --bs-link-hover-color: var(--fotos-primary-hover);
}

/* Vuexy hardcodes the old purple inside its .btn-primary token block, so the
   variable override above does not reach it. */
.btn-primary {
    --bs-btn-bg: var(--fotos-primary);
    --bs-btn-border-color: var(--fotos-primary);
    --bs-btn-hover-bg: var(--fotos-primary-hover);
    --bs-btn-hover-border-color: var(--fotos-primary-hover);
    --bs-btn-active-bg: var(--fotos-primary-hover);
    --bs-btn-active-border-color: var(--fotos-primary-hover);
    --bs-btn-disabled-bg: var(--fotos-primary);
    --bs-btn-disabled-border-color: var(--fotos-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Mint and gold carry dark text everywhere they appear as a fill. */
.btn-success,
.btn-warning {
    --bs-btn-color: var(--fotos-on-light);
    --bs-btn-hover-color: var(--fotos-on-light);
    --bs-btn-active-color: var(--fotos-on-light);
    --bs-btn-disabled-color: var(--fotos-on-light);
}
.btn-success { --bs-btn-bg: var(--fotos-mint); --bs-btn-border-color: var(--fotos-mint); --bs-btn-hover-bg: var(--fotos-mint-hover); --bs-btn-hover-border-color: var(--fotos-mint-hover); --bs-btn-active-bg: var(--fotos-mint-hover); }
.btn-warning { --bs-btn-bg: var(--fotos-gold); --bs-btn-border-color: var(--fotos-gold); --bs-btn-hover-bg: var(--fotos-gold-hover); --bs-btn-hover-border-color: var(--fotos-gold-hover); --bs-btn-active-bg: var(--fotos-gold-hover); }

.bg-success, .bg-warning,
.badge.bg-success, .badge.bg-warning,
.progress-bar.bg-success, .progress-bar.bg-warning { color: var(--fotos-on-light) !important; }

/* Subtle "label" variants: tinted background, readable text. */
.bg-label-primary { background-color: var(--fotos-primary-soft) !important; color: var(--fotos-primary) !important; }
.bg-label-success { background-color: var(--fotos-mint-soft) !important; color: #0d5c3f !important; }
.bg-label-warning { background-color: var(--fotos-gold-soft) !important; color: #7a5c00 !important; }
.btn-label-primary { background-color: var(--fotos-primary-soft); color: var(--fotos-primary); border-color: transparent; }
.btn-label-primary:hover { background-color: var(--fotos-primary); color: #fff; }
.btn-label-success { background-color: var(--fotos-mint-soft); color: #0d5c3f; border-color: transparent; }
.btn-label-success:hover { background-color: var(--fotos-mint); color: var(--fotos-on-light); }
.btn-label-warning { background-color: var(--fotos-gold-soft); color: #7a5c00; border-color: transparent; }
.btn-label-warning:hover { background-color: var(--fotos-gold); color: var(--fotos-on-light); }

.text-primary { color: var(--fotos-primary) !important; }
.text-success { color: #0d5c3f !important; }
.text-warning { color: #7a5c00 !important; }

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
    background-color: var(--fotos-primary);
    border-color: var(--fotos-primary);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fotos-primary);
    box-shadow: 0 0 0 .15rem rgba(var(--fotos-primary-rgb), .15);
}

/* ---- Left navigation: the brand violet ---------------------------------
   Deep enough that the mint accent and the white active pill both read
   clearly against it. */
#layout-menu.layout-menu {
    --bs-menu-bg: #1a0059;
    --bs-menu-color: rgba(255, 255, 255, .78);
    --bs-menu-color-rgb: 255, 255, 255;
    --bs-menu-hover-bg: rgba(255, 255, 255, .08);
    --bs-menu-hover-color: #fff;
    --bs-menu-active-bg: var(--fotos-mint);
    --bs-menu-active-color: var(--fotos-on-light);
    --bs-menu-sub-active-bg: rgba(255, 255, 255, .12);
    --bs-menu-sub-active-color: #fff;
    --bs-menu-header-color: rgba(255, 255, 255, .45);
    --bs-menu-divider-color: rgba(255, 255, 255, .12);
    background-color: #1a0059;
    color: rgba(255, 255, 255, .78);
}
#layout-menu .app-brand-text,
#layout-menu .menu-link,
#layout-menu .menu-toggle { color: rgba(255, 255, 255, .78); }
#layout-menu .menu-link:hover,
#layout-menu .menu-toggle:hover { color: #fff; }
#layout-menu .menu-item.active > .menu-link:not(.menu-toggle) {
    background: var(--fotos-mint);
    color: var(--fotos-on-light);
    box-shadow: none;
}
#layout-menu .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: var(--fotos-on-light); }
#layout-menu .menu-item.open > .menu-toggle { color: #fff; }
#layout-menu .menu-header { color: rgba(255, 255, 255, .45); }
#layout-menu .menu-inner > .menu-item.open .menu-sub { background: rgba(0, 0, 0, .18); }
/* The vendor scrollbar is drawn light; on a dark rail it looks like a seam. */
#layout-menu .ps__thumb-y { background-color: rgba(255, 255, 255, .28) !important; }

/* ---- Shared empty-state block -------------------------------------------
   <x-empty-state>. Every colour here is an already-verified token from
   above — nothing new is introduced. */
.empty-state-description {
    max-width: 26rem;
}
.empty-state .avatar-initial.icon-base { display: flex; align-items: center; justify-content: center; }

/* ---- Dashboard: workspace entry point -----------------------------------
   Quick-action tiles and the credits/gallery panels that replace the four
   flat stat cards. */
.quick-action-card {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--fotos-primary) !important;
    box-shadow: 0 .5rem 1.5rem rgba(var(--fotos-primary-rgb), .12);
}
.quick-action-card .quick-action-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.quick-action-card:hover .quick-action-arrow {
    opacity: 1;
    transform: translateX(0);
}

.credit-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem .25rem .375rem;
    border-radius: var(--bs-border-radius-pill);
    background: rgba(255, 255, 255, .14);
}
.credit-pill .avatar-initial { color: var(--fotos-on-light); }

/* ---- Project gallery -----------------------------------------------------
   Thumbnails are frequently transparent PNGs, so they always sit on a
   checkerboard rather than a flat card background — otherwise a cut-out on
   a white card is indistinguishable from an unprocessed photo. */
.gallery-thumb {
    position: relative;
    overflow: hidden;
    display: block;
}
.gallery-thumb img {
    position: absolute;   /* cannot influence its parent's height, whatever
                             the intrinsic size of the file happens to be */
    inset: 0;
    width: 100%;
    height: 100%;
    /* `contain` rather than `cover`: these are product cutouts, and cropping
       into one to fill a tile hides the thing the user is trying to
       recognise. The padding keeps the subject off the tile edges. */
    object-fit: contain;
    padding: .75rem;
    display: block;
}
.gallery-thumb .gallery-status {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2;
}
.gallery-thumb .gallery-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: rgba(23, 22, 34, 0);
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}
.gallery-card:hover .gallery-actions,
.gallery-card:focus-within .gallery-actions {
    opacity: 1;
    background: rgba(23, 22, 34, .45);
}
.gallery-card {
    transition: box-shadow .15s ease, border-color .15s ease;
}
.gallery-card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(23, 22, 34, .12);
}

/* ---- Admin panel -----------------------------------------------------------
   The staff tool: dense tables, obvious failure states, numbers that line up.
   Nothing here introduces a new hue — every colour is one of the tokens
   defined above, so the contrast figures already computed for them still
   hold. */

/* Small fixed-size thumbnail used wherever an admin table needs to show the
   actual image instead of just a filename — projects list, failure list.
   Deliberately not the full .gallery-thumb treatment (that pads for a much
   bigger card); this only needs to sit inside a table cell. */
.admin-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Numbers an operator compares across rows: durations, credits, counts.
   Tabular figures so digits line up column to column. */
.admin-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Compact stat strip on the dashboard — replaces four tall, low-density
   stat cards with one row an operator can scan in a glance. */
.admin-stat-strip > div + div {
    border-left: 1px solid var(--bs-border-color);
}
@media (max-width: 767.98px) {
    /* Two columns per row below md: only the second item of each visual
       pair sits next to a sibling, so only it keeps the divider — the
       first item of every wrapped row (3rd, 5th, ...) must not inherit
       one meant for the desktop four-across layout. */
    .admin-stat-strip > div:nth-child(odd) {
        border-left: none;
    }
}

/* A batch or project sitting in "processing" well past the time that state
   normally takes. Same warning tokens as everywhere else, just a left
   accent so it reads without adding another badge. */
.admin-row-stuck {
    box-shadow: inset 3px 0 0 var(--fotos-gold);
}

/* ---- Editor canvas stage --------------------------------------------------
   Shared with the branding-template workspace: a dark, Photoshop-style stage
   makes a transparent checkerboard read instantly, instead of a light
   checker pattern sitting flush on a white card. Scoped to #canvas-wrap so
   the rest of editor/show.blade.php keeps its ordinary light Vuexy chrome —
   this does not change any element the JS queries, only its background. */
#canvas-wrap.editor-stage {
    background: radial-gradient(ellipse at center, #2a2a30 0%, #1b1b1f 70%);
    padding: 2.5rem 1.25rem;
    min-height: 460px;
}
#canvas-wrap.editor-stage #editor-canvas {
    box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}