/*
 * Site-specific overrides layered on top of the Landrick template
 * (style.css + colors/default.css, both left untouched here). Two things
 * live in this file:
 *   1. Reusable utility classes that replace ad-hoc inline `style="..."`
 *      attributes duplicated (and inconsistently valued) across the Vue
 *      components — see .avatar-marker / .avatar-card / .status-icon-success.
 *   2. Active-state styling for vue-router's auto-applied
 *      .router-link-active / .router-link-exact-active classes, which the
 *      template never styled, so the dashboards had no "you are here"
 *      indicator anywhere in the sidebar, mobile menu, or footer nav.
 */

/* This vendored bootstrap.min.css ships every responsive d-*-none variant
   (.d-sm-none, .d-md-none, .d-print-none, ...) but is missing the base
   .d-none rule itself. Every plain `class="d-none"` in the app (hidden
   file inputs, the hidden logout form, duplicate nav-menu markup, the
   mobile-hidden back-to-home button) was silently rendering visible. */
.d-none {
    display: none !important;
}

/* --- Typography, spacing, buttons -----------------------------------------
   style.css sets font-family: "Nunito" on body/headings everywhere, but
   only one page ever loaded a font file for it (and loaded the wrong one,
   Roboto) — every other page fell back to each visitor's OS default
   sans-serif. Fixed at the template level (a <link> per page); what
   follows is deliberate polish now that the intended typeface actually
   loads: a little more breathing room in cards/headings, and buttons that
   feel less like a stock template default. Brand color untouched. */

.card-body {
    padding: 1.5rem;
}

.card-header {
    padding: 1rem 1.5rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.01em;
}

.btn {
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
}

/* --- Avatar / marker photo treatments -----------------------------------
   Map markers used 3 different ad-hoc border colors (#00ff4c neon green,
   rgb(14, 63, 125) navy, no coordination between them) for what's actually
   a deliberate type distinction: individual artisans vs. entreprises. Kept
   that distinction, replaced the arbitrary colors with the site's actual
   brand palette. */
.avatar-marker {
    width: 30px;
    height: 30px;
    padding: 2px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
}

.avatar-marker--artisan {
    border: 2px solid #e43f52;
}

.avatar-marker--entreprise {
    border: 2px solid #2c3e6b;
}

.avatar-card {
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    object-fit: cover;
}

/* --- Status icons ---------------------------------------------------------
   Same success-green (#198754, Bootstrap's own $success) was hardcoded via
   inline style on ~16 iconify icons across the client/artisan order-detail
   views. One class instead of one inline style per occurrence. */
.status-icon-success {
    color: #198754;
}

/* --- Dashboard navigation active state ------------------------------------
   Client and artisan dashboards repeat the same nav in 3 places (sidebar,
   mobile menu, footer list); vue-router already tags the current route's
   link with router-link-active / router-link-exact-active, but nothing
   styled those classes, so users had no way to see which section they were
   in. Pure additive CSS — no Vue template changes. */
.sidebar-nav .navbar-link.router-link-active {
    background-color: rgba(228, 63, 82, 0.1);
    box-shadow: none;
    border-left: 3px solid #e43f52;
}

.sidebar-nav .navbar-link.router-link-active h6,
.sidebar-nav .navbar-link.router-link-active span {
    color: #e43f52;
}

.navigation-menu .sub-menu-item.router-link-active {
    color: #e43f52 !important;
}

.footer-list .text-foot.router-link-active {
    color: #e43f52 !important;
}

/* colors/default.css turns the whole sidebar row solid brand-red on
   hover/active (#navmenu-nav li.account-menu:hover/.active .navbar-link)
   but never paired it with a text color, so the icon/label became
   unreadable dark-on-red. Pair it with white, same as .btn-danger. */
#navmenu-nav li.account-menu:hover .navbar-link,
#navmenu-nav li.account-menu.active .navbar-link {
    color: #fff !important;
}

#navmenu-nav li.account-menu:hover .navbar-link h6,
#navmenu-nav li.account-menu:hover .navbar-link span,
#navmenu-nav li.account-menu.active .navbar-link h6,
#navmenu-nav li.account-menu.active .navbar-link span {
    color: #fff !important;
}

/* --- Header buttons (language switcher, notifications, connexion) --------- */

/* Two icon-only buttons (globe/bell) sat with ~0 gap on the guest header
   because Connexion was a bare <a> sibling, not a .list-inline-item like
   every other header in the app (client/artisan) uses for the same pair —
   the Bootstrap .list-inline-item:not(:last-child) margin never applied to
   it. Fixed at the markup level (IndexComponent.vue) to match that
   established pattern; this just closes the same gap for any stray case. */
#topnav .buy-button > li:not(:last-child) {
    margin-right: 0.5rem;
}

/* LangueComponent's flag <img> had no size constraint (raw source pixel
   size) and its links were plain <a> tags with no .dropdown-item class, so
   none of style.css's already-correct .dropdown-danger hover styling
   (color: #e43f52, matching the rest of the brand palette) ever applied. */
.lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

/* .dropdown-danger's :hover and .active share the same color-only
   treatment in style.css, so the current language was indistinguishable
   from a hovered one. Give .active its own subtle tint + weight so "your
   language" and "what you're pointing at" read as different things. */
.dropdown-danger .dropdown-menu .dropdown-item.active {
    background-color: rgba(228, 63, 82, 0.08) !important;
    font-weight: 600;
}

/* --- Remaining ad-hoc inline styles, extracted to shared classes ---------- */

/* Every form-field icon (login, register, profile, reset-password, ~9
   files) repeated the exact same inline style on its iconify <span>. No
   other rule anywhere sets vertical-align on .iconify, so this is a safe
   global default (unset === baseline, the value every one of those
   instances was already forcing one at a time). */
.iconify {
    vertical-align: unset;
}

/* Same z-index fix, duplicated verbatim across every profile/order-detail
   "public-profile" card and every auth "login-page" card. */
.public-profile,
.login-page {
    z-index: 1;
}

/* Category-list accordion buttons (guest homepage search modal, artisan
   profile service picker, register/social-register flows) all inlined
   text-align: left — Bootstrap's own .text-start utility already does
   this (and is RTL-aware, which matters for the Arabic locale). Applied
   via class instead at each call site; nothing new needed here.
   Category icon <img> sizing was inconsistent across the same repeated
   markup (10%/5px in two files, 15%/10px and 5%/10px in others) — picked
   one and unified. */
.category-icon {
    max-width: 10%;
    margin: 5px;
}

/* Service checklist icon (artisan profile's service picker) — visually
   related but a different element/context than .category-icon above, so
   kept as its own class rather than merged (no value changed). */
.service-icon {
    max-width: 5%;
    margin: 10px;
}

/* The two file-upload <label>/<input> pairs (client + artisan profile
   photo) hid the native input via inline style; Bootstrap's d-none
   utility already does the same thing, used at each call site instead. */

/* Leaflet map root container height, duplicated identically between the
   client/guest map and the artisan map. */
.map-container {
    height: 70vh;
    position: relative;
}

/* Alert padding, duplicated identically in ChangerMotDePasseComponent and
   SocialComponent. */
.alert-padded {
    padding: 15px;
}

/* Notification dropdown position/size, byte-for-byte duplicated between
   the client and artisan headers (same Popper-less absolute-position
   hack as the language dropdown fixed above, just at a different width). */
.notification-dropdown-menu {
    width: 300px;
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate3d(-264px, 38px, 0px);
}

/* Language dropdown position/size — byte-for-byte duplicated between the
   client and artisan headers, same shape as .notification-dropdown-menu. */
.language-dropdown-menu {
    width: 160px;
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate(-184px, 38px);
}

/* Guest header's own language dropdown never needed the position hack
   above (no conflicting layout context), just the width. */
.language-dropdown-menu-guest {
    width: 160px;
}

/* Two visually-similar but distinct image-sizing contexts (homepage
   service-category tile vs. artisan portfolio photo grid item) — kept
   separate, no value changed, just moved out of inline style. */
.service-category-tile-icon {
    display: inline-flex;
    width: 40%;
}

.portfolio-image-item {
    display: inline-flex;
    width: 50%;
}

/* Single-use rating-prompt icon circle (Client\CommandeDetailComponent). */
.rating-icon-circle {
    height: 65px;
    width: 65px;
}

/* Guest homepage hero carousel background images. */
.hero-slide-1 {
    background: url('/m/img/accueil/slide-1.jpg') center center;
}

.hero-slide-2 {
    background: url('/m/img/accueil/slide-2.jpg') center center;
}

.hero-slide-3 {
    background: url('/m/img/accueil/slide-3.jpg') center center;
}

/* --- Profile pages (client + artisan) --------------------------------- */

/* Every profile section used a different wrapper: the first used a proper
   .card, the rest used bare "rounded shadow" divs with a manually-built
   header. Unified under one .profile-card pattern (proper Bootstrap
   card-header/card-body) so every section looks the same. */
.profile-card {
    margin-bottom: 1.5rem;
}

.profile-card .card-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-card .card-header .iconify {
    color: #e43f52;
    font-size: 1.25rem;
}

.profile-card .card-header h5 {
    margin-bottom: 0;
}

/* Avatar + edit button: previously two separate elements sitting side by
   side. Overlaying the edit button on the avatar's corner is the standard
   "change photo" pattern and reads more clearly than a detached pencil
   icon floating next to the picture. */
.profile-avatar-wrapper {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.profile-avatar-wrapper .avatar {
    display: block;
}

.profile-avatar-edit-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* Portfolio photo grid (artisan "Photos de travaux") — was a vertical list
   of full-width rows, each with its own always-visible delete button.
   Grid layout with a hover-revealed delete button reads as a gallery
   instead of a form list. */
.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio-grid-item {
    position: relative;
    width: 140px;
    height: 140px;
}

.portfolio-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    cursor: pointer;
}

.portfolio-grid-item .btn-delete-photo {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.portfolio-grid-item:hover .btn-delete-photo {
    opacity: 1;
}

/* Touch devices have no :hover, so the button above would otherwise be
   permanently invisible there — show it unconditionally when the primary
   input has no hover capability (phones/tablets), which is this app's main
   upload device. */
@media (hover: none) {
    .portfolio-grid-item .btn-delete-photo {
        opacity: 1;
    }
}

/* Services list — same list-group-item Bootstrap already provides
   elsewhere, just given breathing room and a softer delete button so it
   doesn't compete visually with the primary "Ajouter" action. */
.profile-service-item {
    padding: 0.75rem 1rem;
}

.profile-service-item .avatar-marker,
.profile-service-item .service-icon {
    margin: 0;
}

/* Pages mount their whole UI into #app via Vue (createApp().mount('#app')),
   which replaces its entire contents once mounted — so #app is completely
   empty until the JS bundle finishes downloading/parsing/executing (can be
   a couple of seconds). With nothing in #app, the static <footer> below it
   was the first visible thing on the page, then jumped down once real
   content appeared. This placeholder fills that gap with the same height
   a viewport would have, so the footer never renders above real content,
   and disappears on its own the instant Vue mounts and overwrites #app. */
.app-loading-placeholder {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .bg-profile's 100px top/bottom padding and the .public-profile card's
   175px top offset (both from style.css, unchanged there) are sized for
   the desktop two-column hero. Neither scales down for narrow viewports,
   so on phones the card's fixed 175px drop plus the section's own 100px
   padding left a ~450px band of bare background above the artisan's
   public profile card. */
@media (max-width: 767px) {
    .bg-profile {
        padding: 30px 0;
    }

    .bg-profile .public-profile {
        top: 60px;
    }
}