/* Tracking App — ressource renommée afin d'invalider les anciens caches CSS. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --sky-50: #f2faff; --sky-100: #e2f5ff; --sky-200: #bce9ff; --sky-300: #7ed8ff;
    --sky-400: #38bdf8; --sky-500: #1aa7e8; --sky-600: #0787c5; --sky-700: #086c9e;
    --navy-900: #11344d; --navy-700: #31546b; --slate-500: #6f8798; --line: #dceaf2;
    --surface: #ffffff; --canvas: #f4f9fc; --success: #20a67a; --warning: #f4a62a; --danger: #e05260;
    --sidebar-width: 276px; --topbar-height: 76px; --radius: 16px;
    --shadow-sm: 0 2px 8px rgba(15, 63, 91, .06); --shadow: 0 12px 32px rgba(15, 63, 91, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.tracking-body { background: var(--canvas); color: var(--navy-900); font: 14px/1.5 Inter, Arial, sans-serif; }
a { color: var(--sky-700); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
.tracking-body.menu-open { overflow: hidden; }

.tracking-topbar { position: fixed; z-index: 1002; inset: 0 0 auto 0; height: var(--topbar-height); display: flex; align-items: center;
    justify-content: space-between; gap: 20px; padding: 0 26px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.tracking-brand, .brand-link, .topbar-actions, .account-button { display: flex; align-items: center; }
.tracking-brand { gap: 14px; }
.brand-link { gap: 12px; color: var(--navy-900); }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: white; font-size: 19px;
    background: linear-gradient(135deg, var(--sky-400), var(--sky-600)); box-shadow: 0 7px 17px rgba(26,167,232,.28); }
.company-logo { width: 47px; height: 47px; display: grid; place-items: center; padding: 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.company-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.brand-copy strong { font-size: 16px; letter-spacing: -.2px; }
.brand-copy small { color: var(--slate-500); font-size: 11px; margin-top: 2px; }
.icon-button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--navy-700); background: var(--surface); cursor: pointer; }
.icon-button:hover { color: var(--sky-600); background: var(--sky-50); border-color: var(--sky-200); }
.topbar-actions { gap: 12px; }
.topbar-track-link { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; color: var(--sky-700); background: var(--sky-50); font-weight: 600; }
.account-button { gap: 10px; color: var(--navy-900) !important; }
.account-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--sky-700); background: var(--sky-100); }
.account-copy { display: flex; flex-direction: column; min-width: 88px; line-height: 1.25; }
.account-copy small { color: var(--slate-500); font-size: 10px; }

.tracking-sidebar { position: fixed; z-index: 1001; top: var(--topbar-height); bottom: 0; left: 0; width: var(--sidebar-width); padding: 20px 14px 18px;
    display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); transition: transform .25s ease, width .25s ease; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 12px; color: #8ba0ae; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; }
.sidebar-close { display: none; }
.tracking-nav { flex: 1; overflow-y: auto; padding: 4px 0 20px; scrollbar-width: thin; }
.nav-link, .nav-group > summary { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 3px 0; border-radius: 11px; color: var(--navy-700); font-weight: 600; cursor: pointer; transition: .16s ease; }
.nav-link:hover, .nav-group > summary:hover, .nav-link.active { color: var(--sky-700); background: var(--sky-50); }
.nav-link.active { box-shadow: inset 3px 0 var(--sky-500); }
.nav-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--sky-600); background: var(--sky-50); border-radius: 8px; }
.nav-section-label { padding: 24px 12px 7px; color: #9aabb6; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.nav-group { margin: 0; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.group-chevron { margin-left: auto; font-size: 10px; transition: transform .2s ease; }
.nav-group[open] .group-chevron { transform: rotate(180deg); }
.nav-submenu { margin: 2px 0 7px 25px; padding-left: 18px; border-left: 1px solid var(--sky-200); }
.nav-sublink { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 10px; border-radius: 9px; color: var(--slate-500); font-size: 13px; font-weight: 500; }
.nav-sublink:hover, .nav-sublink.active { color: var(--sky-700); background: var(--sky-50); }
.sidebar-help { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--sky-100); border-radius: 13px; background: linear-gradient(135deg, var(--sky-50), #fff); }
.sidebar-help div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sidebar-help strong { font-size: 12px; }.sidebar-help small { color: var(--slate-500); font-size: 10px; }

.tracking-main { min-height: 100vh; margin-left: var(--sidebar-width); padding-top: var(--topbar-height); display: flex; flex-direction: column; transition: margin-left .25s ease; }
.tracking-page-heading { min-height: 114px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(18px, 3vw, 40px) 18px; }
.page-eyebrow { color: var(--sky-600); font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.tracking-page-heading h1 { margin: 3px 0 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.7px; }
.page-context { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--slate-500); background: white; border: 1px solid var(--line); font-size: 12px; }
.tracking-content { width: 100%; flex: 1; padding: 0 clamp(18px, 3vw, 40px) 30px; }
.tracking-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px clamp(18px, 3vw, 40px); color: var(--slate-500); border-top: 1px solid var(--line); font-size: 11px; }
.tracking-footer div { display: flex; gap: 8px; }
.tracking-overlay { display: none; }

/* Shared application surfaces */
.card { margin-bottom: 20px; padding: clamp(16px, 2.3vw, 26px); background: var(--surface); border: 1px solid rgba(213,231,240,.9); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--navy-900); }
.ui-fluid .ui-inputfield, .ui-fluid .ui-selectonemenu, .ui-fluid .ui-autocomplete, .ui-fluid .ui-inputnumber { width: 100%; }

/* PrimeFaces components, fully custom-skinned */
.ui-widget { font-family: Inter, Arial, sans-serif; font-size: 14px; }
.ui-inputfield, .ui-selectonemenu, .ui-autocomplete-input, .ui-inputnumber-input, .ui-password input, textarea.ui-inputfield {
    min-height: 44px; padding: 10px 12px !important; color: var(--navy-900); background: #fff; border: 1px solid #ccdee8 !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.ui-inputfield:hover, .ui-selectonemenu:hover { border-color: var(--sky-300) !important; }
.ui-inputfield:focus, .ui-state-focus, .ui-selectonemenu.ui-state-focus { border-color: var(--sky-500) !important; box-shadow: 0 0 0 3px rgba(56,189,248,.15) !important; outline: none; }
.ui-selectonemenu .ui-selectonemenu-trigger { width: 2.7rem; display: grid; place-items: center; color: var(--sky-700); border: 0; background: transparent; }
.ui-float-label { display: block; margin-top: 9px; }.ui-float-label > label { color: var(--slate-500); }
.field > label, .ui-outputlabel { display: inline-block; margin-bottom: 7px; color: var(--navy-700); font-weight: 600; }
.ui-button { min-height: 42px; padding: 0 16px !important; color: #fff !important; background: linear-gradient(135deg, var(--sky-500), var(--sky-600)) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 5px 14px rgba(26,167,232,.20) !important; font-weight: 700 !important; }
.ui-button:hover { filter: brightness(.96); transform: translateY(-1px); }
.ui-button.ui-button-secondary, .ui-button.ui-button-flat { color: var(--navy-700) !important; background: #eef5f8 !important; box-shadow: none !important; }
.ui-button.ui-button-success { background: var(--success) !important; }.ui-button.ui-button-danger { background: var(--danger) !important; }.ui-button.ui-button-warning { background: var(--warning) !important; }
.rounded-button { border-radius: 50% !important; padding: 0 !important; width: 42px; }
.ui-datatable { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.ui-datatable .ui-datatable-header { padding: 16px 18px; text-align: left; color: var(--navy-900); background: #fff; border: 0; border-bottom: 1px solid var(--line); }
.ui-datatable thead th { padding: 13px 14px; color: var(--navy-700); background: var(--sky-50); border: 0; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.ui-datatable tbody td { padding: 13px 14px; color: #36566b; background: #fff; border-width: 0 0 1px; border-color: #edf3f6; }
.ui-datatable tbody tr:hover td { background: #f8fcff; }.ui-datatable .ui-paginator { padding: 10px; background: white; border: 0; }
.ui-paginator .ui-paginator-page, .ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-prev, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-last { min-width: 34px; height: 34px; line-height: 34px; border: 0; border-radius: 8px; color: var(--navy-700); background: transparent; }
.ui-paginator .ui-state-active { color: white; background: var(--sky-500); }
.ui-dialog { max-width: calc(100vw - 24px); border: 0 !important; border-radius: 18px !important; box-shadow: 0 24px 65px rgba(12,52,76,.22) !important; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: 18px 22px; color: var(--navy-900); background: #fff; border: 0; border-bottom: 1px solid var(--line); }
.ui-dialog .ui-dialog-content { padding: 20px 22px; background: #fff; }.ui-dialog-mask { background: rgba(15,48,69,.45); backdrop-filter: blur(3px); }
.ui-tabs { border: 0; }.ui-tabs .ui-tabs-nav { display: flex; gap: 4px; padding: 5px; border: 0; border-radius: 11px; background: var(--sky-50); }
.ui-tabs .ui-tabs-nav li { border: 0 !important; background: transparent !important; }.ui-tabs .ui-tabs-nav li.ui-state-active { background: #fff !important; border-radius: 8px; box-shadow: var(--shadow-sm); }
.ui-tabs .ui-tabs-panel { padding: 18px 0; }.ui-growl { top: 88px; }.ui-growl-item-container { border-radius: 12px; box-shadow: var(--shadow); }
.ui-chkbox .ui-chkbox-box { border: 1px solid #c8dce7; border-radius: 6px; }.ui-chkbox .ui-chkbox-box.ui-state-active { background: var(--sky-500); border-color: var(--sky-500); }

.tracking-ajax-status { position: static; width: 0; height: 0; }
.tracking-ajax-overlay { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; background: rgba(244,249,252,.72); backdrop-filter: blur(2px); }
.tracking-loader-content { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--sky-700); background: #fff; border: 1px solid var(--sky-100); border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; }

/* Existing dashboard compatibility */
.overview-box-1 { position: relative; min-height: 170px; overflow: hidden; }.overview-box-1:after { content: ''; position: absolute; width: 105px; height: 105px; right: -25px; bottom: -30px; border-radius: 50%; background: var(--sky-100); }
.overview-box-1 .card-header { display: flex; justify-content: space-between; }.overview-box-1 h6 { margin: 0; color: var(--slate-500); font-size: 13px; }.overview-box-1 h3 { margin: 22px 0 12px; font-size: 29px; }.overview-footer { color: var(--slate-500); font-size: 11px; }

@media (min-width: 1025px) {
    .tracking-layout.sidebar-collapsed .tracking-sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); }
    .tracking-layout.sidebar-collapsed .tracking-main { margin-left: 0; }
}
@media (max-width: 1024px) {
    .tracking-sidebar { top: 0; z-index: 1100; width: min(310px, 88vw); transform: translateX(-105%); box-shadow: var(--shadow); }
    .tracking-layout.mobile-menu-open .tracking-sidebar { transform: translateX(0); }
    .sidebar-close { display: inline-grid; place-items: center; }.tracking-main { margin-left: 0; }
    .tracking-overlay { position: fixed; z-index: 1090; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(15,48,69,.44); }
    .tracking-layout.mobile-menu-open .tracking-overlay { display: block; }
}
@media (max-width: 640px) {
    :root { --topbar-height: 66px; }.tracking-topbar { padding: 0 12px; }.brand-copy small, .account-copy, .topbar-track-link span { display: none; }
    .brand-mark { width: 38px; height: 38px; }.topbar-actions { gap: 7px; }.topbar-track-link { width: 40px; height: 40px; justify-content: center; padding: 0; }
    .account-button { gap: 5px; }.account-avatar { width: 36px; height: 36px; }.tracking-page-heading { min-height: 96px; padding-top: 18px; }
    .page-context { display: none; }.tracking-content { padding-left: 12px; padding-right: 12px; }.tracking-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
    .card { padding: 14px; border-radius: 13px; }.ui-dialog { width: calc(100vw - 20px) !important; }.ui-dialog .ui-dialog-content { padding: 15px; }
    .ui-datatable-reflow .ui-datatable-data td { display: flex !important; justify-content: space-between; gap: 15px; text-align: right !important; }
    .ui-datatable-reflow .ui-column-title { color: var(--navy-900); text-align: left; font-weight: 700; }
}

/* Authentication */
body.tracking-login-body { min-height: 100vh; margin: 0; color: var(--navy-900); background: linear-gradient(145deg, #eaf8ff 0%, #f8fcff 45%, #dff5ff 100%); font: 14px/1.5 Inter, Arial, sans-serif; }
.tracking-login-body:before, .tracking-login-body:after { content: ''; position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.tracking-login-body:before { width: 420px; height: 420px; top: -180px; right: -120px; background: rgba(56,189,248,.16); }
.tracking-login-body:after { width: 330px; height: 330px; bottom: -170px; left: -100px; background: rgba(7,135,197,.10); }
.login-wrapper { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr); position: relative; z-index: 1; }
.login-showcase { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 100px); color: white; background: linear-gradient(145deg, #0d75a8, #20aceb); overflow: hidden; position: relative; }
.login-showcase:after { content: ''; position: absolute; width: 440px; height: 440px; right: -180px; bottom: -230px; border: 80px solid rgba(255,255,255,.08); border-radius: 50%; }
.login-showcase .login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 60px; }.login-showcase .brand-mark { background: rgba(255,255,255,.18); box-shadow: none; }
.login-showcase h1 { max-width: 620px; margin: 0 0 18px; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -2px; }
.login-showcase > p { max-width: 530px; color: rgba(255,255,255,.82); font-size: 16px; }.login-benefits { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 32px; }
.login-benefits span { display: flex; align-items: center; gap: 8px; font-weight: 600; }.login-benefits i { color: #baf0ff; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: clamp(22px, 5vw, 70px); }.login-card { width: min(100%, 450px); padding: clamp(25px, 4vw, 42px); background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; box-shadow: 0 24px 70px rgba(12,76,108,.14); }
.login-card-header { margin-bottom: 28px; }.login-card-header .mobile-brand { display: none; }.login-card h2 { margin: 0 0 8px; font-size: 27px; letter-spacing: -.6px; }.login-card-header p, .login-help { color: var(--slate-500); }
.login-form .login-field { margin-bottom: 18px; }.login-form .login-field label { display: block; margin-bottom: 7px; color: var(--navy-700); font-weight: 700; }
.login-form .ui-inputfield, .login-form .ui-password, .login-form .ui-password input { width: 100%; }.login-form .ui-button { width: 100%; margin-top: 6px; }
.login-separator { display:flex; align-items:center; gap:12px; margin:20px 0; color:#7890a4; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.login-separator:before,.login-separator:after { content:""; height:1px; flex:1; background:#dce8f1; }
.google-login-button { min-height:46px; width:100%; display:flex; align-items:center; justify-content:center; gap:11px; color:#253b50; background:#fff; border:1px solid #cbdce9; border-radius:11px; text-decoration:none; font-weight:750; box-shadow:0 3px 10px rgba(31,73,105,.06); transition:.2s ease; }
.google-login-button:hover { border-color:#76bce5; background:#f8fcff; transform:translateY(-1px); box-shadow:0 7px 18px rgba(31,121,174,.12); }
.google-login-button .pi-google { color:#4285f4; font-size:18px; }
.google-client-note { display:block; margin-top:9px; color:#7890a4; text-align:center; line-height:1.4; }
.google-login-error { display:flex; gap:9px; margin-bottom:17px; padding:11px 13px; color:#9c3c3c; background:#fff3f3; border:1px solid #ffd4d4; border-radius:10px; font-size:13px; }
.registration-google-button { max-width:360px; margin:4px auto 0; }
.registration-separator { margin:16px 0; }
.client-identity-code { display:inline-block; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; color:#176b9b; background:#eaf7ff; border-radius:7px; font:600 11px/1.3 monospace; }
.carrier-logo-placeholder { display:inline-grid; place-items:center; width:50px; height:40px; color:#287da8; background:#eaf7ff; border:1px solid #cceaf8; border-radius:9px; font-size:20px; }
.carrier-logo-placeholder-sm { width:30px; height:24px; border-radius:7px; font-size:14px; }
.field-help { display:block; margin-top:5px; color:#71879a; font-size:12px; }
.parameter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.parameter-card { display:flex; flex-direction:column; min-height:250px; padding:21px; background:#fff; border:1px solid #dceaf3; border-radius:15px; box-shadow:0 7px 22px rgba(27,83,117,.07); }
.parameter-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.parameter-category,.parameter-type { display:inline-flex; padding:5px 8px; color:#1676a8; background:#e9f7ff; border-radius:7px; font-size:10px; font-weight:800; letter-spacing:.05em; }
.parameter-card h3 { margin:0 0 7px; color:#173b52; font-size:17px; }.parameter-card>p { flex:1; margin:0 0 16px; color:#71879a; font-size:13px; }
.parameter-current { margin-bottom:16px; padding:11px 12px; background:#f5fbff; border-radius:10px; }.parameter-current small { display:block; margin-bottom:4px; color:#8196a6; font-size:9px; font-weight:800; letter-spacing:.08em; }.parameter-current strong { display:block; overflow-wrap:anywhere; color:#155d85; }
.parameter-dialog-title { margin-bottom:18px; padding:14px; background:#f2faff; border-radius:11px; }.parameter-dialog-title span { color:#1681b8; font-size:10px; font-weight:800; }.parameter-dialog-title h3 { margin:4px 0; }.parameter-dialog-title p { margin:0; color:#71879a; font-size:13px; }
.table-secondary { display:block; margin-top:4px; color:#7a91a2; font-weight:400; }
.login-register { margin-top: 23px; padding-top: 20px; text-align: center; border-top: 1px solid var(--line); }.login-help { margin-top: 22px; text-align: center; font-size: 12px; }
@media (max-width: 850px) { .login-wrapper { display: block; }.login-showcase { display: none; }.login-panel { min-height: 100vh; }.login-card-header .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } }
@media (max-width: 480px) { .login-panel { padding: 12px; }.login-card { padding: 24px 18px; border-radius: 17px; }.login-card h2 { font-size: 23px; } }

/* Company onboarding */
body.company-registration-body { min-height: 100vh; margin: 0; color: var(--navy-900); background: #f2f9fd; font: 14px/1.5 Inter, Arial, sans-serif; }

/* Pages système indépendantes de tout thème commercial */
.tracking-exception-body { min-height: 100vh; margin: 0; padding: 24px; display: grid; place-items: center; color: var(--navy-900); background: radial-gradient(circle at top right, #dff5ff, transparent 38%), linear-gradient(145deg, #edf9ff, #f8fcff); font: 14px/1.5 Inter, Arial, sans-serif; }
.tracking-exception-card { width: min(100%, 540px); padding: clamp(30px, 6vw, 55px); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 25px 70px rgba(12,76,108,.16); }
.exception-code { display: block; color: var(--sky-600); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.exception-icon { width: 82px; height: 82px; margin: 18px auto; display: grid; place-items: center; color: var(--sky-700); background: var(--sky-100); border-radius: 24px; font-size: 32px; }
.exception-icon.error { color: #c2410c; background: #ffedd5; }.exception-icon.access { color: #6d28d9; background: #ede9fe; }
.tracking-exception-card h1 { margin: 0 0 10px; color: var(--navy-900); font-size: clamp(25px, 5vw, 35px); line-height: 1.2; }
.tracking-exception-card p { margin: 0 auto 25px; max-width: 430px; color: var(--slate-500); }
.exception-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Tableaux de bord adaptés au profil */
.dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: clamp(22px, 4vw, 38px); color: #fff; background: linear-gradient(125deg, #0878bd, #28afe8); border-radius: 20px; box-shadow: 0 18px 42px rgba(8,120,189,.20); overflow: hidden; }
.dashboard-kicker { display: block; margin-bottom: 6px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.dashboard-welcome h1 { margin: 0 0 7px; font-size: clamp(25px, 4vw, 38px); line-height: 1.15; }.dashboard-welcome p { margin: 0; color: rgba(255,255,255,.86); }
.dashboard-profile-icon { width: 82px; height: 82px; flex: 0 0 82px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 24px; font-size: 32px; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }.dashboard-stat-grid.client-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stat { display: flex; align-items: center; gap: 15px; min-height: 130px; padding: 21px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.stat-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; font-size: 19px; }.stat-icon.blue { color: #087fc5; background: #e4f5ff; }.stat-icon.cyan { color: #078ca8; background: #e1f8fb; }.stat-icon.orange { color: #c46510; background: #fff1df; }.stat-icon.violet { color: #7045c7; background: #f0eaff; }.stat-icon.green { color: #14835d; background: #e2f7ee; }
.dashboard-stat small { display: block; color: #8092a3; font-size: 10px; font-weight: 800; letter-spacing: .8px; }.dashboard-stat strong { display: block; margin: 3px 0; color: var(--navy-900); font-size: 25px; line-height: 1.1; }.dashboard-stat div>span { color: #7b8d9e; font-size: 11px; }
.dashboard-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.dashboard-action { display: flex; align-items: center; gap: 13px; padding: 20px; color: var(--navy-900); background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; transition: .2s; }.dashboard-action:hover { transform: translateY(-3px); border-color: var(--sky-300); box-shadow: var(--shadow); }.dashboard-action>span { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; color: var(--sky-700); background: var(--sky-50); border-radius: 12px; }.dashboard-action div { flex: 1; }.dashboard-action strong,.dashboard-action small { display: block; }.dashboard-action small { color: var(--slate-500); }.dashboard-action>i { color: var(--sky-600); }
.client-tracking-panel { display: flex; align-items: center; gap: 20px; padding: clamp(22px, 4vw, 35px); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }.client-tracking-panel .dashboard-kicker { color: var(--sky-600); }.client-tracking-panel h2 { margin: 0 0 5px; color: var(--navy-900); }.client-tracking-panel p { margin: 0; color: var(--slate-500); }.client-tracking-icon { width: 70px; height: 70px; flex: 0 0 70px; display: grid; place-items: center; color: var(--sky-700); background: var(--sky-50); border-radius: 20px; font-size: 28px; }.client-tracking-panel>div { flex: 1; }.dashboard-primary-link { padding: 12px 17px; color: #fff; background: var(--sky-600); border-radius: 11px; text-decoration: none; font-weight: 700; white-space: nowrap; }

@media (max-width: 1050px) { .dashboard-stat-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-action-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .dashboard-profile-icon { display: none; }.dashboard-stat-grid,.dashboard-stat-grid.client-stats { grid-template-columns: 1fr; }.client-tracking-panel { align-items: flex-start; flex-direction: column; }.dashboard-primary-link { width: 100%; text-align: center; }.dashboard-welcome { padding: 24px 20px; } }

/* Grille tarifaire des itinéraires */
.route-tariff-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px 20px; color: #fff; background: linear-gradient(120deg, #087aad, #27b6ed); border-radius: 15px; }
.route-tariff-heading h3 { margin: 3px 0 4px; color: #fff; }.route-tariff-heading p { margin: 0; color: rgba(255,255,255,.82); }
.route-tariff-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.route-tariff-table { grid-row: 2; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.route-tariff-editor { grid-row: 1; padding: 20px; background: #f7fbfd; border: 1px solid var(--line); border-radius: 14px; }
.route-tariff-editor-title { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.route-tariff-editor-title>i { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--sky-600); border-radius: 11px; }
.route-tariff-editor-title strong,.route-tariff-editor-title small { display: block; }.route-tariff-editor-title small { color: var(--slate-500); margin-top: 2px; }
.route-category-guide { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 11px 14px; color: #416276; background: #eaf6fc; border-radius: 10px; font-size: 12px; font-weight: 700; }
.route-category-guide span { display: flex; align-items: center; gap: 7px; }.route-category-guide b { width: 24px; height: 24px; display: inline-grid; place-items: center; color: #fff; background: var(--sky-600); border-radius: 50%; }
.route-tariff-editor .dialog-form-grid.one-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-tariff-editor .route-category-selector,.route-tariff-editor .field:nth-child(6),.route-tariff-editor .field:nth-child(7) { grid-column: 1 / -1; }
.route-field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.route-field-label a { color: var(--sky-700); font-size: 11px; font-weight: 800; text-decoration: none; }
.route-category-selector .ui-selectonemenu { border: 2px solid var(--sky-300); }.route-tariff-help { margin-top: 6px; padding: 9px 11px; color: #9b5b14; background: #fff5e8; border-radius: 8px; font-size: 12px; }
@media (max-width: 900px) { .route-tariff-layout { grid-template-columns: 1fr; }.route-tariff-heading { align-items: flex-start; flex-direction: column; }.route-tariff-editor .dialog-form-grid.one-column { grid-template-columns: 1fr; }.route-tariff-editor .route-category-selector,.route-tariff-editor .field:nth-child(6),.route-tariff-editor .field:nth-child(7) { grid-column: auto; }.route-category-guide { align-items: flex-start; flex-direction: column; }.route-category-guide>i { transform: rotate(90deg); } }

/* Tableaux de bord opérationnels */
.dashboard-stat-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 18px; margin-bottom: 22px; align-items: start; }
.dashboard-content-grid.dashboard-content-equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-table { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.dashboard-table .ui-datatable-header { padding: 17px 19px; background: #fff; border: 0; border-bottom: 1px solid var(--line); }
.dashboard-table .table-header-with-text a { color: var(--sky-700); font-size: 12px; font-weight: 800; text-decoration: none; }
.dashboard-priority-card { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.dashboard-panel-title { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.dashboard-panel-title>span { width: 42px; height: 42px; display: grid; place-items: center; color: #c46510; background: #fff1df; border-radius: 12px; }
.dashboard-panel-title strong,.dashboard-panel-title small { display: block; }
.dashboard-panel-title small { margin-top: 2px; color: var(--slate-500); }
.dashboard-priority-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 4px; color: var(--navy-900); border-bottom: 1px solid var(--line); text-decoration: none; }
.dashboard-priority-row:last-child { border-bottom: 0; }
.dashboard-priority-row strong { color: #fff; background: var(--sky-600); border-radius: 12px; padding: 4px 9px; }
.dashboard-finance-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 22px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.dashboard-finance-strip>div { display: flex; align-items: center; gap: 12px; min-height: 100px; padding: 18px; background: #fff; }
.dashboard-finance-strip>div>span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; color: var(--sky-700); background: var(--sky-50); border-radius: 11px; }
.dashboard-finance-strip small,.dashboard-finance-strip strong { display: block; }
.dashboard-finance-strip small { color: var(--slate-500); font-size: 10px; font-weight: 800; }
.dashboard-finance-strip strong { margin-top: 4px; color: var(--navy-900); font-size: 16px; }
.dashboard-actions-spaced { margin-top: 22px; }
.dashboard-inline-icon { margin: 0 5px; color: var(--sky-600); font-size: 10px; }
@media (max-width: 1050px) { .dashboard-content-grid,.dashboard-content-grid.dashboard-content-equal { grid-template-columns: 1fr; }.dashboard-finance-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .dashboard-stat-grid-six,.dashboard-finance-strip { grid-template-columns: 1fr; } }

/* =========================================================
   SYSTÈME DE COMPOSANTS — application interne
   ========================================================= */
.tracking-body {
    --component-primary: #168fc9;
    --component-primary-dark: #0878ae;
    --component-success: #15976c;
    --component-danger: #dc4c5b;
    --component-warning: #e99a28;
    --component-border: #dbe8ef;
    --component-muted: #6f8492;
}

/* Boutons */
.tracking-body .ui-button {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px !important;
    color: #fff !important;
    background: var(--component-primary) !important;
    border: 1px solid var(--component-primary) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 15px rgba(22,143,201,.18) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.tracking-body .ui-button:hover { transform: translateY(-1px); background: var(--component-primary-dark) !important; border-color: var(--component-primary-dark) !important; box-shadow: 0 9px 20px rgba(22,143,201,.25) !important; }
.tracking-body .ui-button:focus { outline: 3px solid rgba(22,143,201,.18) !important; outline-offset: 2px; }
.tracking-body .ui-button:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(22,143,201,.18) !important; }
.tracking-body .ui-button .ui-button-icon-left { margin-right: 7px; }.tracking-body .ui-button .ui-button-icon-right { margin-left: 7px; }
.tracking-body .ui-button.ui-button-success { background: var(--component-success) !important; border-color: var(--component-success) !important; box-shadow: 0 6px 15px rgba(21,151,108,.18) !important; }
.tracking-body .ui-button.ui-button-danger { background: var(--component-danger) !important; border-color: var(--component-danger) !important; box-shadow: 0 6px 15px rgba(220,76,91,.18) !important; }
.tracking-body .ui-button.ui-button-warning { color: #fff !important; background: var(--component-warning) !important; border-color: var(--component-warning) !important; }
.tracking-body .ui-button.ui-button-secondary { color: #425d6d !important; background: #edf4f7 !important; border-color: #d9e7ee !important; box-shadow: none !important; }
.tracking-body .ui-button.ui-button-outlined,
.tracking-body .ui-button.ui-button-flat { color: var(--component-primary) !important; background: #fff !important; border-color: #bcddea !important; box-shadow: none !important; }
.tracking-body .ui-button.ui-button-outlined:hover,
.tracking-body .ui-button.ui-button-flat:hover { color: var(--component-primary-dark) !important; background: #edf9fe !important; border-color: var(--component-primary) !important; }
.tracking-body .ui-button.ui-button-icon-only,
.tracking-body .rounded-button,
.tracking-body .edit-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 11px !important; }
.tracking-body .ui-button.ui-state-disabled,
.tracking-body .ui-button:disabled { opacity: .48 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

/* Barres d’actions */
.tracking-body .ui-toolbar { margin-bottom: 18px; padding: 12px 14px !important; background: #fff !important; border: 1px solid var(--component-border) !important; border-radius: 14px !important; box-shadow: 0 5px 16px rgba(24,74,102,.05); }
.tracking-body .ui-toolbar-group-left,
.tracking-body .ui-toolbar-group-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Tableaux */
.tracking-body .ui-datatable { overflow: hidden; background: #fff; border: 1px solid var(--component-border); border-radius: 15px; box-shadow: 0 8px 24px rgba(30,76,101,.06); }
.tracking-body .ui-datatable .ui-datatable-header { padding: 17px 19px !important; color: var(--navy-900) !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--component-border) !important; font-size: 15px; font-weight: 800; }
.tracking-body .ui-datatable .ui-datatable-tablewrapper { overflow-x: auto; }
.tracking-body .ui-datatable table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tracking-body .ui-datatable thead th { padding: 12px 14px !important; color: #476172 !important; background: #f1f8fb !important; border: 0 !important; border-bottom: 1px solid #d8e8ef !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .35px; text-transform: uppercase; white-space: nowrap; }
.tracking-body .ui-datatable thead th.ui-state-hover { color: var(--component-primary-dark) !important; background: #e8f6fc !important; }
.tracking-body .ui-datatable tbody td { padding: 13px 14px !important; color: #385467 !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid #edf3f6 !important; vertical-align: middle; }
.tracking-body .ui-datatable tbody tr:nth-child(even) td { background: #fbfdfe !important; }
.tracking-body .ui-datatable tbody tr:hover td { background: #eef9fd !important; }
.tracking-body .ui-datatable tbody tr.ui-state-highlight td { color: #17465f !important; background: #dff4fd !important; }
.tracking-body .ui-datatable .ui-column-filter { width: 100%; min-width: 100px; margin-top: 7px; padding: 8px 9px !important; background: #fff !important; border: 1px solid #d3e3eb !important; border-radius: 8px !important; font-size: 11px; }
.tracking-body .ui-datatable .ui-datatable-empty-message td { padding: 35px 18px !important; color: var(--component-muted) !important; text-align: center; }
.tracking-body .ui-datatable .ui-paginator { display: flex; justify-content: center; align-items: center; gap: 3px; padding: 12px !important; background: #fff !important; border: 0 !important; border-top: 1px solid var(--component-border) !important; }
.tracking-body .ui-paginator .ui-paginator-page,
.tracking-body .ui-paginator .ui-paginator-next,
.tracking-body .ui-paginator .ui-paginator-prev,
.tracking-body .ui-paginator .ui-paginator-first,
.tracking-body .ui-paginator .ui-paginator-last { min-width: 34px; height: 34px; display: inline-grid; place-items: center; color: #567080 !important; background: transparent !important; border: 0 !important; border-radius: 9px !important; }
.tracking-body .ui-paginator .ui-state-active { color: #fff !important; background: var(--component-primary) !important; }

/* Champs et formulaires */
.tracking-body .field { margin-bottom: 15px; }.tracking-body .field > label,.tracking-body .ui-outputlabel { display: inline-block; margin-bottom: 6px; color: #385568; font-size: 12px; font-weight: 700; }
.tracking-body .ui-inputfield,
.tracking-body .ui-selectonemenu,
.tracking-body .ui-autocomplete-input,
.tracking-body .ui-inputtextarea,
.tracking-body .ui-password input { min-height: 43px; color: #233f52 !important; background: #fff !important; border: 1px solid #ccdfe8 !important; border-radius: 10px !important; box-shadow: none !important; }
.tracking-body .ui-inputfield:hover,
.tracking-body .ui-selectonemenu:hover { border-color: #9bc9dd !important; }
.tracking-body .ui-inputfield:focus,
.tracking-body .ui-selectonemenu.ui-state-focus { border-color: var(--component-primary) !important; box-shadow: 0 0 0 3px rgba(22,143,201,.12) !important; }
.tracking-body .ui-state-error { border-color: var(--component-danger) !important; }.tracking-body .ui-message-error { color: var(--component-danger); font-size: 11px; }
.tracking-body .ui-selectonemenu .ui-selectonemenu-trigger { width: 42px; color: var(--component-primary); background: #f4fafc; border-left: 1px solid #dfebf0; border-radius: 0 10px 10px 0; }
.tracking-body .ui-selectonemenu-panel,
.tracking-body .ui-autocomplete-panel { background: #fff; border: 1px solid var(--component-border); border-radius: 11px; box-shadow: 0 14px 35px rgba(18,58,82,.16); overflow: hidden; }
.tracking-body .ui-selectonemenu-items .ui-selectonemenu-item,
.tracking-body .ui-autocomplete-items .ui-autocomplete-item { padding: 10px 12px; color: #385467; }.tracking-body .ui-selectonemenu-items .ui-state-highlight,
.tracking-body .ui-autocomplete-items .ui-state-highlight { color: #0b618d !important; background: #e6f6fd !important; }

/* Dialogues, messages et badges */
.tracking-body .ui-dialog { background: #fff !important; border: 1px solid var(--component-border) !important; border-radius: 18px !important; box-shadow: 0 28px 75px rgba(10,47,68,.25) !important; }
.tracking-body .ui-dialog .ui-dialog-titlebar { padding: 17px 20px !important; color: var(--navy-900) !important; background: #f8fcfe !important; border-bottom: 1px solid var(--component-border) !important; }
.tracking-body .ui-dialog .ui-dialog-title { font-size: 16px; font-weight: 800; }.tracking-body .ui-dialog .ui-dialog-content { padding: 20px !important; background: #fff !important; }
.tracking-body .ui-dialog .ui-dialog-footer { padding: 14px 20px !important; background: #f8fcfe !important; border-top: 1px solid var(--component-border) !important; }
.tracking-body .ui-dialog-mask { background: rgba(5,32,48,.58) !important; backdrop-filter: blur(3px); }
.tracking-body .ui-messages,.tracking-body .ui-growl-item-container { border: 0 !important; border-radius: 11px !important; box-shadow: 0 8px 22px rgba(25,67,91,.10); }
.tracking-body .ui-tag { padding: 5px 9px !important; border-radius: 20px !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .25px; }
.tracking-body .ui-chkbox .ui-chkbox-box { width: 20px; height: 20px; display: grid; place-items: center; background: #fff; border: 1px solid #bcd1dc; border-radius: 6px; }.tracking-body .ui-chkbox .ui-chkbox-box.ui-state-active { color: #fff; background: var(--component-primary); border-color: var(--component-primary); }

@media (max-width: 700px) {
    .tracking-body .ui-toolbar { align-items: stretch; }
    .tracking-body .ui-toolbar-group-left,.tracking-body .ui-toolbar-group-right { width: 100%; }
    .tracking-body .ui-toolbar .ui-button { flex: 1; }
    .tracking-body .ui-datatable-reflow .ui-datatable-data td { padding: 10px 12px !important; }
    .tracking-body .ui-datatable-reflow .ui-column-title { color: #68808f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .tracking-body .ui-dialog { width: calc(100vw - 20px) !important; }
    .tracking-body .ui-dialog .ui-dialog-content { padding: 15px !important; }
}

/* En-tête et fermeture uniformes pour tous les dialogues PrimeFaces. */
body .ui-dialog > .ui-dialog-titlebar,
body.tracking-body .ui-dialog > .ui-dialog-titlebar {
    min-height: 58px !important;
    padding: 17px 62px 17px 22px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #168fc9 0%, #087ab5 100%) !important;
    background-color: #168fc9 !important;
    border: 0 !important;
    border-bottom: 1px solid #086fa4 !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-title,
body.tracking-body .ui-dialog > .ui-dialog-titlebar .ui-dialog-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .28) !important;
    outline: none !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close > span {
    display: none !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::before,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    content: "" !important;
    position: absolute !important;
    top: 15px !important;
    left: 8px !important;
    width: 16px !important;
    height: 2px !important;
    display: block !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    transform: rotate(-45deg) !important;
}

/* Notifications automatiques et centre interne. */
.notification-help-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.notification-master-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 16px 18px; color: #17475e; border: 1px solid #cce7f3; border-radius: 11px; background: #edf8fd; }
.notification-master-switch > div { display: flex; align-items: center; gap: 12px; }
.notification-master-switch > div > i { color: #168fc9; font-size: 1.25rem; }
.notification-master-switch strong,.notification-master-switch span { display: block; }
.notification-master-switch span { margin-top: 3px; color: #718691; font-size: .76rem; }
.notification-help-grid > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    padding: 15px;
    color: #17475e;
    border: 1px solid #d8e9f0;
    border-radius: 11px;
    background: #fff;
}
.notification-help-grid i { grid-row: 1 / 3; color: #168fc9; font-size: 1.2rem; }
.notification-help-grid span { color: #718691; font-size: .75rem; line-height: 1.35; }
.notification-global-filter { min-width: 280px; }
.notification-global-filter .ui-inputfield { width: 100%; padding-left: 2.35rem !important; }
.notification-channel-row { display: grid; gap: 6px; }
.notification-channel-row small { color: #718691; }
.notification-audience { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 900; }
.notification-audience.enabled { color: #14724f; background: #e7f8f1; }
.notification-audience.disabled { color: #718691; background: #edf2f4; }
.notification-rule-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px; color: #17475e; border-radius: 10px; background: #edf8fd; }
.notification-rule-summary > i { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; border-radius: 10px; background: #168fc9; }
.notification-rule-summary strong,.notification-rule-summary span { display: block; }
.notification-rule-summary span { margin-top: 3px; color: #718691; font-size: .78rem; }
.notification-switches { align-content: start; padding: 13px; border: 1px solid #d8e9f0; border-radius: 10px; background: #f8fbfc; }
.notification-switches > strong { display: block; margin-bottom: 8px; color: #17475e; }
.notification-unread-card { display: flex; align-items: center; gap: 13px; width: fit-content; min-width: 230px; margin-bottom: 18px; padding: 16px 20px; color: #fff; border-radius: 12px; background: linear-gradient(135deg,#075276,#168fc9); }
.notification-unread-card > i { font-size: 1.35rem; }
.notification-unread-card strong,.notification-unread-card span { display: block; }
.notification-unread-card strong { font-size: 1.55rem; line-height: 1; }
.notification-unread-card span { margin-top: 4px; color: rgba(255,255,255,.78); font-size: .76rem; }
.notification-message-cell { display: flex; align-items: flex-start; gap: 10px; min-width: 280px; }
.notification-message-cell > i { margin-top: 2px; color: #168fc9; }
.notification-message-cell strong,.notification-message-cell span { display: block; }
.notification-message-cell span { margin-top: 4px; color: #607d8b; font-size: .78rem; line-height: 1.4; }
.notification-attempts,.notification-error { display: block; margin-top: 4px; font-size: .7rem; }
.notification-attempts { color: #718691; }
.notification-error { max-width: 250px; color: #b52c35; }
body .business-table tr.notification-unread-row > td { background: #eff9fd !important; }
body .business-table tr.notification-unread-row > td:first-child { box-shadow: inset 3px 0 #168fc9; }
.nav-notification-badge { display: grid !important; min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; place-items: center; color: #fff; border-radius: 999px; background: #ef5350; font-size: .68rem; font-weight: 900; }

@media (max-width: 1000px) {
    .notification-help-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
    .notification-help-grid { grid-template-columns: 1fr; }
    .notification-global-filter { width: 100%; min-width: 0; }
}

/* Pilotage du stock. */
.stock-dashboard {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stock-kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    color: #17475e;
    border: 1px solid #d8e9f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(38,75,92,.05);
}
.stock-kpi > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #168fc9;
    border-radius: 11px;
    background: #eaf7fc;
    font-size: 1.15rem;
}
.stock-kpi strong,.stock-kpi span { display: block; }
.stock-kpi strong { font-size: 1.45rem; line-height: 1; }
.stock-kpi span { margin-top: 5px; color: #718691; font-size: .76rem; font-weight: 700; }
.stock-kpi.active > i { color: #16845b; background: #e7f8f1; }
.stock-kpi.warning > i { color: #ad7100; background: #fff5d9; }
.stock-kpi.danger > i { color: #bc3e46; background: #ffebed; }
.stock-table-heading { align-items: center; }
.stock-global-filter { min-width: 290px; }
.stock-global-filter .ui-inputfield { width: 100%; padding-left: 2.35rem !important; }
.stock-status.rupture { color: #a9222d; border-color: #f2b8bd; background: #ffebed; }
.stock-history-section { margin-top: 22px; padding: 18px; border: 1px solid #d7e8ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(38,75,92,.05); }
.stock-section-heading { display: flex; justify-content: space-between; margin-bottom: 14px; }
.stock-section-heading span { color: #168fc9; font-size: .68rem; font-weight: 900; letter-spacing: .09em; }
.stock-section-heading h3 { margin: 3px 0 2px; color: #17475e; }
.stock-section-heading p { margin: 0; color: #718691; font-size: .8rem; }
.stock-movement { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.stock-movement.entry { color: #14724f; background: #e7f8f1; }
.stock-movement.exit { color: #a9222d; background: #ffebed; }
.stock-adjustment-warning { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 16px; padding: 12px; color: #6b571b; border: 1px solid #f0dda5; border-radius: 9px; background: #fff9e8; font-size: .8rem; line-height: 1.4; }
.stock-adjustment-warning i { margin-top: 2px; color: #ad7100; }

@media (max-width: 1000px) {
    .stock-dashboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
    .stock-dashboard { grid-template-columns: 1fr; }
    .stock-table-heading { align-items: stretch; flex-direction: column; }
    .stock-global-filter { width: 100%; min-width: 0; }
}

/* Consultation complète d'une expédition. */
.expedition-view-toolbar { align-items: flex-end; }
.expedition-view-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.expedition-view-hero { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(360px,1.8fr) 110px; align-items: stretch; margin-bottom: 18px; overflow: hidden; color: #fff; border-radius: 14px; background: linear-gradient(135deg,#075276,#168fc9); box-shadow: 0 12px 28px rgba(7,82,118,.14); }
.expedition-view-identity,.expedition-view-route,.expedition-view-metric { padding: 22px; }
.expedition-view-identity { display: flex; flex-direction: column; gap: 7px; border-right: 1px solid rgba(255,255,255,.18); }
.expedition-view-identity .status-pill { align-self: flex-start; color: #075276; background: #fff; }
.expedition-view-identity small,.expedition-view-route small { color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 800; }
.expedition-view-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.expedition-view-route div:last-child { text-align: right; }
.expedition-view-route strong { display: block; margin-top: 5px; font-size: 1.08rem; }
.expedition-view-route > i { font-size: 1.25rem; }
.expedition-view-metric { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.12); }
.expedition-view-metric strong { font-size: 2rem; line-height: 1; }
.expedition-view-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.expedition-view-card,.expedition-view-section { border: 1px solid #d7e8ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(38,75,92,.05); }
.expedition-view-card { padding: 18px; }
.expedition-view-card-title { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: #075276; }
.expedition-view-card-title i { display: grid; width: 32px; height: 32px; place-items: center; color: #168fc9; border-radius: 9px; background: #eaf7fc; }
.expedition-view-card-title h3 { margin: 0; font-size: 1rem; }
.expedition-view-data { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,1.3fr); gap: 10px 12px; margin: 0; }
.expedition-view-data dt { color: #718691; font-size: .74rem; font-weight: 700; }
.expedition-view-data dd { margin: 0; color: #173f52; font-size: .82rem; overflow-wrap: anywhere; }
.expedition-balance { color: #bf3f3f !important; font-weight: 800; }
.expedition-view-section { margin-bottom: 18px; padding: 18px; }
.expedition-view-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.expedition-view-section-heading span { color: #168fc9; font-size: .68rem; font-weight: 900; letter-spacing: .09em; }
.expedition-view-section-heading h3 { margin: 3px 0 0; color: #17475e; font-size: 1.05rem; }
.expedition-view-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.expedition-label-action a { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 9px; background: #168fc9; text-decoration: none; }
.expedition-shipment-list { display: grid; gap: 10px; }
.expedition-shipment-item { display: grid; grid-template-columns: auto minmax(160px,1fr) minmax(150px,1fr) minmax(150px,1fr) auto; align-items: center; gap: 16px; padding: 14px; border-radius: 10px; background: #f3f9fc; }
.expedition-shipment-item > i { color: #168fc9; font-size: 1.3rem; }
.expedition-shipment-item div > span,.expedition-shipment-item small { display: block; margin-top: 3px; color: #718691; font-size: .7rem; }

@media (max-width: 1100px) {
    .expedition-view-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .expedition-view-toolbar { align-items: stretch; }
    .expedition-view-actions,.expedition-view-actions .ui-button { width: 100%; }
    .expedition-view-hero,.expedition-view-grid,.expedition-view-columns { grid-template-columns: 1fr; }
    .expedition-view-identity { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
    .expedition-view-route { grid-template-columns: 1fr auto 1fr; }
    .expedition-shipment-item { grid-template-columns: auto 1fr; }
    .expedition-shipment-item > div,.expedition-shipment-item > span { grid-column: 2; }
}

.showcase-stats-grid {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.showcase-stats-grid article {
    padding: 22px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 5px 14px;
    align-items: center;
    border: 1px solid #dce8ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(12, 54, 78, .06);
}

.showcase-stats-grid article > span {
    grid-row: 1 / 3;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #087fdc;
    background: #e6f4ff;
    font-size: 20px;
}

.showcase-stats-grid article > small { color: #6b8292; font-size: 11px; font-weight: 800; }
.showcase-stats-grid article > strong { color: #103d57; font-size: 25px; }
.showcase-stats-help { display: flex; align-items: flex-start; gap: 13px; }
.showcase-stats-help > i { color: #0b84f3; font-size: 21px; }
.showcase-stats-help p { margin: 4px 0 0; color: #6b8292; }

@media (max-width: 960px) {
    .showcase-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .showcase-stats-grid { grid-template-columns: 1fr; }
}

.role-company-form .ui-selectmanycheckbox {
    width: 100%;
    padding: 14px;
    border: 1px solid #dbe7ee;
    border-radius: 12px;
    background: #f8fbfd;
}

.role-company-form .ui-selectmanycheckbox label {
    color: #36576a;
    font-weight: 650;
}

.role-active-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.notification-message-section {
    margin-top: 5px;
    padding: 16px;
    display: grid !important;
    gap: 8px !important;
    border: 1px solid #cfe4f2;
    border-radius: 12px;
    background: #f5fbff;
}

.notification-message-section.client {
    border-color: #d9e2f7;
    background: #f8f9ff;
}

.notification-message-heading {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.notification-message-heading > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: #168fc9;
}

.notification-message-section.client .notification-message-heading > i {
    background: #536bc4;
}

.notification-message-heading small {
    display: block;
    margin-top: 2px;
    color: #718796;
}

.notification-editor-header {
    align-items: flex-start;
}

.notification-editor-header-actions,
.notification-editor-footer > div {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.notification-editor-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.notification-editor-section-title {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-editor-section-title > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #ffffff;
    background: #168fc9;
    font-size: 18px;
}

.notification-editor-section-title h3,
.notification-editor-section-title p {
    margin: 0;
}

.notification-editor-section-title p {
    margin-top: 3px;
    color: #728796;
    font-size: 13px;
}

.notification-recipient-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #cce4f2;
    border-radius: 12px;
    background: #f4fbff;
}

.notification-recipient-card.client {
    border-color: #dbe2f6;
    background: #f7f8ff;
}

.notification-recipient-card > strong i {
    margin-right: 6px;
    color: #168fc9;
}

.notification-extra-emails {
    min-width: 0;
}

.notification-extra-emails .ui-inputfield {
    width: 100%;
}

.notification-extra-emails small,
.notification-rule-active small {
    display: block;
    margin-top: 5px;
    color: #78909c;
}

.notification-rule-active {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 11px;
    background: #f5f8fa;
}

.notification-variables-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.notification-variables-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 11px;
}

.notification-variables-card > div:first-child > i {
    color: #168fc9;
    font-size: 22px;
}

.notification-variables-card small {
    display: block;
    margin-top: 3px;
    color: #78909c;
}

.notification-variable-list {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.notification-variable-list code {
    padding: 6px 9px;
    border: 1px solid #cbe5f3;
    border-radius: 7px;
    color: #126b96;
    background: #edf9ff;
    font-weight: 700;
}

.notification-html-editor-card .field {
    margin-bottom: 17px;
}

.notification-html-editor-card .ui-inputfield,
.notification-html-editor-card .ui-texteditor {
    width: 100%;
}

.notification-html-editor-card.client .notification-editor-section-title > i {
    background: #536bc4;
}

.notification-html-editor-card .ql-toolbar {
    border-radius: 10px 10px 0 0;
    background: #f5f9fc;
}

.notification-html-editor-card .ql-container {
    border-radius: 0 0 10px 10px;
    background: #ffffff;
}

.notification-preview-actions {
    display: flex;
    justify-content: flex-end;
}

.notification-email-preview {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid #cfe1ec;
    border-radius: 12px;
    background: #ffffff;
}

.notification-preview-subject {
    padding: 13px 17px;
    color: #ffffff;
    background: #168fc9;
    font-weight: 800;
}

.notification-email-preview.client .notification-preview-subject {
    background: #536bc4;
}

.notification-preview-body {
    min-height: 90px;
    padding: 18px;
    color: #294b5c;
    line-height: 1.6;
}

.notification-preview-body > :first-child,
.notification-html-message > :first-child {
    margin-top: 0;
}

.notification-preview-body > :last-child,
.notification-html-message > :last-child {
    margin-bottom: 0;
}

.notification-editor-footer {
    padding: 18px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.notification-html-message {
    margin-top: 4px;
    color: #607d8b;
    font-size: .78rem;
    line-height: 1.4;
}

@media (max-width: 850px) {
    .notification-editor-settings-grid {
        grid-template-columns: 1fr;
    }

    .notification-variables-card,
    .notification-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .notification-variable-list {
        justify-content: flex-start;
    }
}

.delivery-table-header { align-items: center; }
.delivery-global-filter { min-width: 310px; }
.delivery-global-filter .ui-inputfield { width: 100%; padding-left: 2.35rem !important; }
.delivery-status-filter { width: 100%; min-width: 155px; }
.delivery-table .ui-column-filter { width: 100%; }

@media (max-width: 700px) {
    .delivery-table-header { align-items: stretch; flex-direction: column; }
    .delivery-global-filter { width: 100%; min-width: 0; }
}

/* Transit : contrôle de départ et journal de localisation. */
.transit-dialog-summary,
.transit-journal-heading,
.transit-last-location {
    display: flex;
    align-items: center;
    gap: 14px;
}

.transit-dialog-summary,
.transit-journal-heading {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    background: #f7fbfe;
}

.transit-dialog-summary > div,
.transit-journal-heading > div,
.transit-last-location > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.transit-dialog-summary small,
.transit-journal-heading small,
.transit-last-location small {
    color: #60758a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.transit-dialog-summary strong,
.transit-last-location strong {
    color: #17334b;
    font-size: 16px;
}

.transit-journal-heading h3 {
    margin: 0;
    color: #17334b;
}

.transit-last-location {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-left: 4px solid #168fc9;
    border-radius: 10px;
    background: #edf8fd;
}

.transit-last-location time {
    color: #46647c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.transit-journal-layout {
    display: grid;
    grid-template-columns: minmax(310px, .8fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: start;
}

.transit-event-editor,
.transit-event-history {
    min-width: 0;
    padding: 16px;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    background: #ffffff;
}

.transit-event-editor > .ui-button {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .transit-journal-layout {
        grid-template-columns: 1fr;
    }

    .transit-last-location {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .transit-last-location time {
        width: 100%;
        padding-left: 52px;
    }
}

/* Fiche professionnelle de l’entreprise */
.company-profile-card,
.company-address-card {
    margin-bottom: 20px;
    padding: 22px;
}

.company-section-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.company-section-heading > span {
    width: 46px;
    height: 46px;
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: var(--sky-600);
}

.company-section-heading small {
    color: var(--sky-700);
    font-weight: 800;
    letter-spacing: .08em;
}

.company-section-heading h3,
.company-section-heading p {
    margin: 0;
}

.company-section-heading p {
    margin-top: 4px;
    color: var(--slate-500);
}

.company-section-heading.compact {
    margin-bottom: 16px;
}

.professional-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.profile-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.profile-field.full,
.profile-subheading.full {
    grid-column: 1 / -1;
}

.profile-field .ui-inputfield,
.profile-field .ui-inputnumber,
.profile-field .ui-inputnumber-input {
    width: 100%;
}

.profile-subheading {
    margin-top: 4px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    color: #31596f;
    background: #edf7fb;
}

.profile-subheading > i {
    color: var(--sky-600);
}

.profile-subheading > span {
    display: grid;
}

.profile-subheading small {
    color: var(--slate-500);
}

.company-profile-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

body .profile-save-button {
    color: #ffffff !important;
    background: var(--sky-600) !important;
}

@media (max-width: 720px) {
    .professional-profile-grid {
        grid-template-columns: 1fr;
    }
}

.admin-company-details-head {
    margin-bottom: 18px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 12px;
    background: #edf7fb;
}

.admin-company-details-head h3,
.admin-company-details-head p {
    margin: 0;
}

.admin-company-details-head p {
    margin-top: 3px;
    color: var(--slate-500);
}

.admin-company-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.admin-company-detail-grid > div {
    min-width: 0;
    padding: 12px;
    display: grid;
    gap: 4px;
    border: 1px solid #dce8ef;
    border-radius: 10px;
}

.admin-company-detail-grid .full {
    grid-column: 1 / -1;
}

.admin-company-detail-grid small {
    color: var(--sky-700);
    font-weight: 800;
}

.admin-company-detail-grid strong {
    color: #304f62;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .admin-company-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-company-detail-grid .full {
        grid-column: auto;
    }
}

/* Formulaire d'expédition directe : recherche client et colis repliables. */
.direct-customer-card {
    border-top: 4px solid #168fc9 !important;
}

.direct-customer-search .ui-autocomplete,
.direct-customer-search .ui-autocomplete-input {
    width: 100% !important;
}

.direct-customer-search .ui-autocomplete-input {
    min-height: 48px;
    padding-left: 42px !important;
    font-size: 15px;
    font-weight: 600;
    background-image: linear-gradient(transparent, transparent);
}

.direct-selected-customer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #bfe2f2;
    border-radius: 12px;
    background: #edf8fd;
}

.direct-selected-customer > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.direct-selected-customer small {
    color: #56748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.direct-selected-customer strong {
    color: #17334b;
    font-size: 16px;
}

.direct-selected-customer span {
    overflow: hidden;
    color: #4e6a80;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.direct-parcel-accordion .ui-accordion-header {
    margin-top: 9px !important;
    padding: 15px 18px !important;
    border: 1px solid #cfe2ef !important;
    border-radius: 12px !important;
    color: #17334b !important;
    font-weight: 800 !important;
    background: #f4fafe !important;
}

.direct-parcel-accordion .ui-accordion-header.ui-state-active {
    color: #ffffff !important;
    border-color: #168fc9 !important;
    background: linear-gradient(135deg, #168fc9, #087ab5) !important;
}

.direct-parcel-accordion .ui-accordion-content {
    padding: 18px !important;
    border: 1px solid #cfe2ef !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    background: #ffffff !important;
}

.direct-parcel-accordion .multi-parcel-card {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.direct-parcel-table {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid #d5e5f0;
    border-radius: 14px;
    background: #ffffff;
}

.direct-parcel-table .ui-datatable-header {
    padding: 15px 18px;
    text-align: left;
    background: #f2f9fd;
    border: 0;
    border-bottom: 1px solid #d5e5f0;
}

.table-header-with-text,
.table-header-with-text > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.table-header-with-text strong {
    color: #17334b;
    font-size: 15px;
}

.table-header-with-text span {
    color: #5c7488;
    font-size: 12px;
    font-weight: 500;
}

.direct-parcel-table .ui-datatable-thead > tr > th {
    padding: 11px 12px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: #168fc9;
    border-color: rgba(255, 255, 255, .2);
}

.direct-parcel-table .ui-datatable-tbody > tr > td {
    padding: 12px;
    color: #334f64;
    vertical-align: middle;
    border-color: #e3edf4;
}

.direct-parcel-table .numeric-column {
    white-space: nowrap;
}

.direct-parcel-table .table-actions-column {
    width: 104px;
    white-space: nowrap;
}

.direct-parcel-table .table-actions-column .ui-button + .ui-button {
    margin-left: 6px;
}

.parcel-description {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parcel-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.parcel-option {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    color: #9a5d00;
    font-size: 10px;
    font-weight: 800;
    background: #fff4d8;
    border-radius: 999px;
}

.parcel-option.dangerous {
    color: #a32a37;
    background: #ffeaed;
}

.parcel-option.muted {
    color: #557084;
    background: #edf3f7;
}

.direct-parcel-dialog .ui-dialog-content {
    max-height: min(72vh, 720px);
    padding: 20px !important;
    overflow-y: auto;
}

.parcel-dialog-intro {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    color: #31566f;
    background: #eef8fe;
    border-radius: 11px;
}

.parcel-dialog-intro > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #ffffff;
    background: #168fc9;
    border-radius: 10px;
}

.parcel-dialog-intro > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.parcel-dialog-intro strong {
    color: #17334b;
}

.parcel-dialog-intro small {
    color: #5c7488;
}

.parcel-dialog-switches {
    padding: 10px 12px;
    background: #f7fafc;
    border: 1px solid #e0ebf2;
    border-radius: 10px;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles {
    display: flex !important;
    position: relative;
    align-items: stretch;
    gap: 0;
    margin: 0 0 22px !important;
    padding: 10px !important;
    counter-reset: expedition-step;
    background: #f4f9fc !important;
    border: 1px solid #d5e5ef !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(22, 63, 91, .06);
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title {
    display: flex !important;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 25% !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 9px 12px 9px 44px !important;
    color: #587286 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    counter-increment: expedition-step;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title::before {
    display: grid;
    position: absolute;
    left: 10px;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #33799e;
    font-size: 11px;
    font-weight: 900;
    content: counter(expedition-step);
    background: #ffffff;
    border: 2px solid #bcd8e8;
    border-radius: 50%;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-highlight {
    color: #ffffff !important;
    background: linear-gradient(135deg, #168fc9, #087ab5) !important;
    box-shadow: 0 7px 18px rgba(8, 122, 181, .25) !important;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title.ui-state-highlight::before {
    color: #087ab5;
    background: #ffffff;
    border-color: #ffffff;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title:has(~ .ui-state-highlight)::before {
    color: #ffffff;
    content: "\2713";
    background: #39a96b;
    border-color: #39a96b;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-content {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-navbar {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #dce8f1;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-navbar .ui-button {
    min-width: 132px;
    padding: 10px 16px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-navbar .ui-wizard-nav-back {
    color: #17678f !important;
    background: #ffffff !important;
    border: 1px solid #9fcde4 !important;
}

body.tracking-body .direct-expedition-wizard > .ui-wizard-navbar .ui-wizard-nav-next {
    color: #ffffff !important;
    background: #168fc9 !important;
    border: 1px solid #168fc9 !important;
}

.parcel-form-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.parcel-form-group {
    padding: 16px;
    background: #f8fbfd;
    border: 1px solid #dce9f2;
    border-radius: 12px;
}

.parcel-form-group h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    color: #17334b;
    font-size: 13px;
}

.parcel-form-group h4 i {
    color: #168fc9;
}

.parcel-entry-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 16px;
}

.parcel-table-toolbar {
    margin-top: 18px;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.review-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #d8e7f1;
    border-radius: 12px;
}

.review-card .review-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: #ffffff;
    background: #168fc9;
    border-radius: 10px;
}

.review-card > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.review-card small {
    color: #6a8193;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.review-card strong,
.review-card span:not(.review-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card strong {
    color: #17334b;
}

.review-card span:not(.review-icon) {
    color: #5b7487;
    font-size: 12px;
}

.review-confirmation-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0;
    padding: 12px 14px;
    color: #315d77;
    background: #eef8fe;
    border-radius: 10px;
}

.product-sale-entry {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(120px, .7fr) minmax(150px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 15px;
    background: #f7fbfe;
    border: 1px solid #dce9f2;
    border-radius: 12px;
}

.product-sale-preview {
    display: flex;
    min-height: 43px;
    flex-direction: column;
    justify-content: center;
    padding: 7px 11px;
    background: #ffffff;
    border: 1px solid #d5e5ef;
    border-radius: 9px;
}

.product-sale-preview small {
    color: #6a8193;
    font-size: 9px;
    font-weight: 800;
}

.product-sale-preview strong {
    color: #17334b;
}

.product-sale-preview span {
    color: #547187;
    font-size: 10px;
}

.product-sale-table {
    margin-top: 14px;
    margin-bottom: 0;
}

.stock-status {
    display: inline-flex;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    border-radius: 999px;
}

.stock-status.ok,
.stock-status.taxable {
    color: #167044;
    background: #e4f7ed;
}

.stock-status.low {
    color: #a43a27;
    background: #ffebe6;
}

.stock-status.exempt {
    color: #536e82;
    background: #edf3f7;
}

.stock-product-summary,
.expedition-detail-summary {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    background: #eef8fe;
    border-radius: 11px;
}

.stock-product-summary {
    flex-direction: column;
    gap: 3px;
}

.expedition-detail-summary > div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.expedition-detail-summary small {
    color: #668195;
    font-size: 9px;
    font-weight: 900;
}

.expedition-detail-summary strong {
    overflow: hidden;
    color: #17334b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-section-title {
    margin: 18px 0 9px;
    color: #17334b;
    font-size: 14px;
}

.expedition-detail-dialog .ui-dialog-content {
    max-height: 75vh;
    overflow-y: auto;
}

.route-table-arrow {
    margin: 0 7px;
    color: #168fc9;
}

.expedition-invoice-cell {
    display: flex;
    min-width: 135px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.expedition-invoice-cell strong {
    color: #17334b;
    font-size: 12px;
}

.expedition-invoice-cell small,
.muted-text {
    color: #6a8193;
    font-size: 10px;
}

.expedition-list-actions {
    width: 104px;
    white-space: nowrap;
}

.expedition-list-actions > * + * {
    margin-left: 6px;
}

.invoice-download-button {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    background: #168fc9 !important;
    border-color: #168fc9 !important;
    border-radius: 50% !important;
}

.invoice-download-button .ui-button-icon-left {
    position: static !important;
    margin: 0 !important;
}

.expedition-detail-invoice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 17px;
    padding: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #168fc9, #087ab5);
    border-radius: 12px;
}

.expedition-detail-invoice > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.expedition-detail-invoice small {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    opacity: .8;
}

.invoice-detail-download {
    color: #087ab5 !important;
    font-weight: 800;
    text-decoration: none;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

@media (max-width: 700px) {
    .expedition-detail-invoice {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .parcel-form-groups,
    .review-grid {
        grid-template-columns: 1fr;
    }

    .product-sale-entry {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body.tracking-body .direct-expedition-wizard > .ui-wizard-step-titles > .ui-wizard-step-title {
        width: 100% !important;
        min-height: 48px;
        padding-left: 40px !important;
        font-size: 11px !important;
    }

    body.tracking-body .direct-expedition-wizard > .ui-wizard-navbar .ui-button {
        min-width: 112px;
    }

    .parcel-entry-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .parcel-entry-actions .ui-button {
        width: 100%;
    }

    .product-sale-entry {
        grid-template-columns: 1fr;
    }

    .product-sale-entry .ui-button {
        width: 100%;
    }

    .expedition-detail-summary {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .direct-selected-customer {
        align-items: stretch;
        flex-direction: column;
    }

    .direct-selected-customer .ui-button {
        width: 100%;
    }
}

/* Réception d'une expédition commerciale composée de plusieurs colis. */
.multi-parcel-toolbar,
.multi-parcel-card-heading,
.multi-parcel-summary {
    display: flex;
    align-items: center;
    gap: 16px;
}

.multi-parcel-toolbar {
    justify-content: space-between;
    margin: 18px 0 12px;
    padding: 16px 18px;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #168fc9, #087ab5);
}

.multi-parcel-toolbar > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.multi-parcel-toolbar small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .85;
}

.multi-parcel-toolbar strong {
    font-size: 19px;
}

.multi-parcel-toolbar .ui-button {
    color: #087ab5 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.multi-parcel-summary {
    margin-bottom: 14px;
    padding: 12px 16px;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid #dbe8f2;
    border-radius: 12px;
    color: #49657c;
    background: #f7fbfe;
}

.multi-parcel-summary strong {
    color: #17334b;
}

.multi-parcel-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.multi-parcel-card {
    margin: 0 !important;
    border-top: 4px solid #168fc9 !important;
}

.multi-parcel-card-heading {
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2edf5;
}

.multi-parcel-card-heading .request-section-title {
    margin: 0;
}

.multi-parcel-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.multi-parcel-columns h4 {
    margin: 0 0 12px;
    color: #17334b;
    font-size: 14px;
}

@media (max-width: 900px) {
    .multi-parcel-columns {
        grid-template-columns: 1fr;
    }

    .multi-parcel-toolbar,
    .multi-parcel-card-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .multi-parcel-toolbar .ui-button,
    .multi-parcel-card-heading .ui-button {
        width: 100%;
    }
}

/* Procédures opérationnelles */
.delivery-rules-config-card {
    margin-bottom: 18px;
    border-top: 4px solid #168fc9 !important;
}

.delivery-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 16px;
}

.delivery-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    background: #f7fbfe;
    border: 1px solid #dce9f2;
    border-radius: 11px;
}

.delivery-rule-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-rule-item strong {
    color: #17334b;
    font-size: 12px;
}

.delivery-rule-item small,
.delivery-attempt-setting small {
    color: #6a8193;
    font-size: 10px;
}

.delivery-attempt-setting {
    max-width: 320px;
    margin-top: 15px;
    padding: 13px;
    background: #eef8fe;
    border-radius: 11px;
}

.delivery-attempt-setting .ui-inputnumber {
    width: 100%;
}

@media (max-width: 700px) {
    .delivery-rules-grid {
        grid-template-columns: 1fr;
    }
}

.process-page-heading {
    align-items: flex-end;
    margin-bottom: 16px;
}

.process-company-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #17638c;
    font-size: 12px;
    font-weight: 800;
    background: #eaf7ff;
    border: 1px solid #cceafb;
    border-radius: 12px;
}

.process-phase-card {
    padding: 18px 20px;
    margin-bottom: 16px;
}

.process-section-heading,
.process-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.process-section-heading {
    margin-bottom: 15px;
}

.process-section-heading h3,
.process-card-header h3 {
    margin: 0;
    color: #173b52;
    font-size: 16px;
}

.process-section-heading p {
    margin: 3px 0 0;
    color: #71879a;
    font-size: 12px;
}

.process-section-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #0b84d8;
    background: #e8f6ff;
    border-radius: 11px;
}

.process-section-icon.green {
    color: #16835b;
    background: #e7f8f0;
}

.process-section-icon.violet {
    color: #6d54c8;
    background: #f0ecff;
}

.process-phase-selector {
    display: block;
    width: 100%;
}

.process-phase-selector.ui-selectonebutton {
    display: grid;
    grid-template-columns: repeat(7, minmax(125px, 1fr));
    gap: 7px;
}

body .process-phase-selector.ui-selectonebutton .ui-button {
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 10px !important;
    color: #526b7e !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2;
    background: #f6fafc !important;
    border: 1px solid #dce9f1 !important;
    border-radius: 10px !important;
}

body .process-phase-selector.ui-selectonebutton .ui-button.ui-state-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #168fc9, #087ab5) !important;
    border-color: #087ab5 !important;
    box-shadow: 0 7px 16px rgba(8, 122, 181, .20) !important;
}

.process-content {
    display: block;
}

.process-config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 16px;
}

.process-policy-card,
.process-add-card {
    display: flex;
    flex-direction: column;
    min-height: 350px;
    padding: 20px;
}

.process-card-header {
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e6eef4;
}

.process-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: #168fc9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.process-instructions-field,
.process-add-card .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.process-instructions-field .ui-inputtextarea,
.process-add-card .ui-inputfield {
    width: 100%;
}

.field-counter {
    min-height: 16px;
    color: #8294a5;
    font-size: 10px;
    text-align: right;
}

.process-required-row {
    padding: 11px 12px;
    margin-top: 13px;
    background: #f6fafc;
    border: 1px solid #e0ebf2;
    border-radius: 10px;
}

.process-card-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
    margin-top: auto;
}

.process-card-actions .ui-button {
    border-radius: 10px !important;
}

.process-steps-card {
    padding: 20px;
    margin-top: 16px;
}

.process-table-heading {
    margin-bottom: 14px;
}

.process-steps-table .ui-datatable-header {
    padding: 10px 14px !important;
    text-align: left !important;
}

.process-order-column {
    width: 90px;
}

.process-order-column .ui-inputnumber,
.process-order-column .ui-inputfield {
    width: 64px !important;
    text-align: center;
}

.process-step-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.process-step-name .ui-inputfield {
    width: 100%;
    font-weight: 700;
}

.process-step-name small {
    color: #8093a4;
    font-size: 10px;
}

.process-step-name small i {
    margin-right: 4px;
    color: #168fc9;
}

.process-check-column,
.process-action-column {
    width: 125px;
    text-align: center !important;
}

.process-action-column {
    width: 105px;
}

.process-save-button {
    width: 36px !important;
    height: 36px !important;
}

@media (max-width: 1120px) {
    .process-phase-selector.ui-selectonebutton {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
}

@media (max-width: 820px) {
    .process-config-grid {
        grid-template-columns: 1fr;
    }

    .process-policy-card,
    .process-add-card {
        min-height: 0;
    }

    .process-page-heading {
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .process-phase-selector.ui-selectonebutton {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-company-badge {
        display: none;
    }

    .process-phase-card,
    .process-policy-card,
    .process-add-card,
    .process-steps-card {
        padding: 14px;
    }

    .process-card-actions .ui-button {
        width: 100%;
    }
}

.reception-checklist-card {
    margin-top: 16px;
    padding: 20px;
}

.reception-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reception-check-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 11px 13px;
    background: #f8fbfd;
    border: 1px solid #ddeaf2;
    border-radius: 11px;
}

.reception-check-item > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.reception-check-item strong {
    color: #24445a;
    font-size: 12px;
}

.reception-check-item small {
    margin-top: 3px;
    overflow: hidden;
    color: #788d9d;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-required,
.control-optional {
    padding: 4px 7px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .5px;
    border-radius: 7px;
}

.control-required {
    color: #a94831;
    background: #fff0eb;
}

.control-optional {
    color: #547083;
    background: #eaf1f5;
}

@media (max-width: 760px) {
    .reception-checklist-grid {
        grid-template-columns: 1fr;
    }
}

.preparation-parcel-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #f0f9ff, #f8fcff);
    border: 1px solid #d4eaf7;
    border-radius: 13px;
}

.preparation-parcel-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.preparation-parcel-summary small {
    color: #168fc9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}

.preparation-parcel-summary strong {
    margin: 2px 0;
    color: #173b52;
    font-size: 16px;
}

.preparation-parcel-summary > div > span {
    overflow: hidden;
    color: #71879a;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preparation-intro h3 {
    margin: 0;
    color: #173b52;
    font-size: 16px;
}

.preparation-intro p {
    margin: 4px 0 14px;
    color: #71879a;
    font-size: 12px;
}

.preparation-checklist {
    display: grid;
    gap: 9px;
}

.preparation-check-item {
    background: #ffffff;
}

.procedure-disabled-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px;
    color: #577286;
    font-size: 12px;
    background: #f3f8fb;
    border: 1px dashed #c8dce8;
    border-radius: 11px;
}

.procedure-disabled-note i {
    color: #168fc9;
}

@media (max-width: 560px) {
    .preparation-parcel-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .preparation-parcel-summary > .status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.departure-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #eef9ff, #f9fcff);
    border: 1px solid #cfe7f4;
    border-radius: 13px;
}

.departure-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.departure-summary small {
    color: #168fc9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}

.departure-summary strong {
    margin: 2px 0;
    color: #173b52;
    font-size: 16px;
}

.departure-summary > div > span {
    color: #71879a;
    font-size: 11px;
}

.departure-mode-block {
    padding: 14px;
    margin-bottom: 15px;
    background: #f8fbfd;
    border: 1px solid #deebf2;
    border-radius: 12px;
}

.departure-mode-block > label {
    display: block;
    margin-bottom: 10px;
    color: #294a60;
    font-size: 12px;
    font-weight: 800;
}

.departure-mode-selector.ui-selectonebutton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

body .departure-mode-selector.ui-selectonebutton .ui-button {
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    color: #526b7e !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: #ffffff !important;
    border: 1px solid #d6e5ee !important;
    border-radius: 10px !important;
}

body .departure-mode-selector.ui-selectonebutton .ui-button.ui-state-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #168fc9, #087ab5) !important;
    border-color: #087ab5 !important;
}

.departure-partner-fields,
.departure-proof-fields {
    padding-top: 2px;
}

.departure-partner-fields .ui-inputfield,
.departure-partner-fields .ui-selectonemenu,
.departure-proof-fields .ui-inputfield {
    width: 100%;
}

.departure-tracking-note,
.departure-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    margin: 12px 0 15px;
    color: #496b80;
    font-size: 11px;
    line-height: 1.45;
    background: #eef8fe;
    border: 1px solid #d2eaf8;
    border-radius: 10px;
}

.departure-tracking-note i {
    margin-top: 2px;
    color: #168fc9;
}

.departure-warning {
    color: #875923;
    background: #fff8eb;
    border-color: #f2dfba;
}

.departure-warning i {
    margin-top: 2px;
    color: #c17b22;
}

@media (max-width: 560px) {
    .departure-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .departure-summary > .status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .departure-mode-selector.ui-selectonebutton {
        grid-template-columns: 1fr;
    }
}

.boarding-control-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #eef8ff, #f8fcff);
    border: 1px solid #cfe6f4;
    border-radius: 13px;
}

.boarding-control-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.boarding-control-summary small {
    color: #168fc9;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .8px;
}

.boarding-control-summary strong {
    margin: 2px 0;
    color: #173b52;
    font-size: 16px;
}

.boarding-control-summary > div > span {
    color: #71879a;
    font-size: 11px;
}

@media (max-width: 560px) {
    .boarding-control-summary {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .boarding-control-summary > .status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Page complète de création et modification d'un colis */
.parcel-form-page { max-width: 1120px; margin: 0 auto; }
.parcel-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.parcel-page-header h2 { margin: 5px 0 6px; color: #123f59; font-size: 28px; }
.parcel-page-header p { margin: 0; color: #6d8493; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: #168fc9;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}
.parcel-page-number {
    min-width: 235px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 15px 17px;
    background: #eaf8ff;
    border: 1px solid #c4e4f2;
    border-radius: 13px;
}
.parcel-page-number small { color: #698493; font-size: 9px; font-weight: 800; letter-spacing: .7px; }
.parcel-page-number strong { color: #075b84; font-size: 16px; }
.parcel-form-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #c7dfeb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 75, 105, .08);
}
.parcel-page-tabs > .ui-tabs-nav { padding: 16px 20px 0 !important; }
.parcel-page-tabs .ui-tabs-panels {
    height: auto !important;
    min-height: 440px !important;
    overflow: visible !important;
}
.parcel-page-tabs .ui-tabs-panel { padding: 27px 32px 34px !important; }
.parcel-form-page .tab-intro {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 23px;
    padding: 13px 15px;
    background: #eaf8ff;
    border: 1px solid #c9e8f5;
    border-radius: 11px;
}
.parcel-form-page .tab-intro > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    color: #fff;
    background: linear-gradient(135deg, #168fc9, #38bdf8);
    border-radius: 10px;
}
.parcel-form-page .tab-intro > div { display: flex; flex-direction: column; }
.parcel-form-page .tab-intro strong { color: #164a67; font-size: 13px; }
.parcel-form-page .tab-intro small { color: #6a8494; font-size: 11px; }
.parcel-page-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 22px;
    background: rgba(248, 252, 254, .97);
    border-top: 1px solid #cfe4ee;
    box-shadow: 0 -7px 20px rgba(22, 75, 103, .06);
    backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
    .parcel-page-header { align-items: stretch; flex-direction: column; }
    .parcel-page-number { width: 100%; align-items: flex-start; }
    .parcel-page-tabs .ui-tabs-panel { padding: 19px 14px 25px !important; }
    .parcel-page-tabs .ui-tabs-panels { min-height: 500px !important; }
    .parcel-page-actions { padding: 12px; }
    .parcel-page-actions .ui-button { flex: 1; }
}

/* Fiches opérationnelles Colis / Embarquements */
.form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 25px 0 16px;
    padding-bottom: 9px;
    color: #075b84;
    border-bottom: 1px solid #cce5f1;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .25px;
}
.form-section-title:first-of-type { margin-top: 0; }
.form-section-title i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #168fc9, #38bdf8);
    border-radius: 9px;
}
.table-subtitle { display: block; margin-top: 3px; color: #7690a0; }
.loading-summary {
    display: grid;
    grid-template-columns: 1.5fr .8fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.loading-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 15px;
    background: #eef9fe;
    border: 1px solid #c8e7f4;
    border-radius: 12px;
}
.loading-summary small { color: #6e8999; font-size: 10px; font-weight: 800; letter-spacing: .6px; }
.loading-summary strong { color: #083e5d; font-size: 15px; }
.loading-summary span:not(.status-badge) { color: #597689; font-size: 12px; }
.workflow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 12px;
    background: #f8fcfe;
    border: 1px solid #d6eaf3;
    border-radius: 12px;
}
.loading-add {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 15px;
    background: #e9f8ff;
    border: 1px solid #b8deef;
    border-radius: 12px;
}
.loading-add .ui-selectonemenu { width: 100% !important; }
.status-AFFECTE_EXPEDITION,.status-CHARGE { color: #075985; background: #d9f2ff; }
.status-ARRIVE_AGENCE,.status-DISPONIBLE_RETRAIT { color: #0f6b4c; background: #dff7ec; }
.status-BROUILLON { color: #526775; background: #eaf0f3; }
.status-OUVERTE,.status-FERMEE { color: #075985; background: #dff3fc; }
.status-CHARGEE,.status-PARTIE,.status-EN_TRANSIT { color: #6b4c0b; background: #fff0c7; }
.status-ARRIVEE,.status-CLOTUREE { color: #0f6b4c; background: #dff7ec; }
.status-ANNULEE { color: #a52f3b; background: #fde5e8; }

@media (max-width: 760px) {
    .loading-summary { grid-template-columns: 1fr; }
    .loading-add { grid-template-columns: 1fr; }
    .loading-add .ui-button { width: 100% !important; }
}

/* Dialogue Colis compact organisé en onglets */
body.tracking-body .ui-dialog.parcel-dialog {
    width: min(820px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 30px) !important;
}
body.tracking-body .parcel-dialog > .ui-dialog-content {
    max-height: calc(100vh - 92px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.parcel-dialog form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 92px);
    min-height: 0;
}
.parcel-dialog .ui-messages { margin: 14px 18px 0 !important; }
.parcel-tabs {
    min-height: 0;
    border: 0 !important;
}
.parcel-tabs > .ui-tabs-nav {
    display: flex !important;
    gap: 3px;
    margin: 0 !important;
    padding: 13px 17px 0 !important;
    overflow-x: auto;
    background: #f4fafd !important;
    border: 0 !important;
    border-bottom: 1px solid #cce3ee !important;
}
.parcel-tabs > .ui-tabs-nav li {
    flex: 1 0 auto;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
}
.parcel-tabs > .ui-tabs-nav li > a {
    width: 100%;
    padding: 12px 13px !important;
    color: #607b8b !important;
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.parcel-tabs > .ui-tabs-nav li.ui-tabs-selected,
.parcel-tabs > .ui-tabs-nav li.ui-state-active {
    background: #ffffff !important;
    box-shadow: inset 0 3px 0 #168fc9;
}
.parcel-tabs > .ui-tabs-nav li.ui-tabs-selected > a,
.parcel-tabs > .ui-tabs-nav li.ui-state-active > a { color: #0878aa !important; }
.parcel-tabs .ui-tabs-panels {
    height: min(405px, calc(100vh - 245px));
    min-height: 315px;
    padding: 0 !important;
    overflow-y: auto;
    background: #ffffff !important;
    border: 0 !important;
}
.parcel-tabs .ui-tabs-panel {
    padding: 20px 22px 24px !important;
    background: #ffffff !important;
}
.parcel-dialog .tab-intro {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
    padding: 12px 14px;
    background: #eaf8ff;
    border: 1px solid #c9e8f5;
    border-radius: 11px;
}
.parcel-dialog .tab-intro > i {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    color: #ffffff;
    background: linear-gradient(135deg, #168fc9, #38bdf8);
    border-radius: 10px;
}
.parcel-dialog .tab-intro > div { display: flex; flex-direction: column; }
.parcel-dialog .tab-intro strong { color: #164a67; font-size: 13px; }
.parcel-dialog .tab-intro small { color: #6a8494; font-size: 11px; }
.parcel-dialog .dialog-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 13px 20px !important;
    background: #f7fbfd !important;
    border-top: 1px solid #cfe4ee !important;
    box-shadow: 0 -7px 20px rgba(22, 75, 103, .06);
}

@media (max-width: 700px) {
    body.tracking-body .ui-dialog.parcel-dialog { width: calc(100vw - 16px) !important; }
    .parcel-tabs > .ui-tabs-nav { padding-left: 8px !important; padding-right: 8px !important; }
    .parcel-tabs > .ui-tabs-nav li > a { padding: 11px 10px !important; }
    .parcel-tabs .ui-tabs-panels { height: calc(100vh - 270px); min-height: 280px; }
    .parcel-tabs .ui-tabs-panel { padding: 16px 13px 20px !important; }
    .parcel-dialog .dialog-actions { flex-direction: row; padding: 11px 13px !important; }
    .parcel-dialog .dialog-actions .ui-button { width: 50% !important; }
}
.registration-topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 5vw, 76px); background: #fff; border-bottom: 1px solid var(--line); }
.registration-login { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--sky-700); border: 1px solid var(--sky-200); border-radius: 10px; font-weight: 700; }
.registration-shell { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.18fr); }
.registration-intro { padding: clamp(45px, 7vw, 105px); color: #fff; background: linear-gradient(150deg, #075f8e 0%, #159edb 58%, #41c2f2 100%); }
.registration-kicker { display: inline-block; color: #aeeaff; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; }
.registration-intro h1 { max-width: 620px; margin: 17px 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.08; letter-spacing: -1.8px; }
.registration-intro > p { max-width: 570px; color: rgba(255,255,255,.83); font-size: 16px; }
.registration-steps { display: grid; gap: 10px; margin-top: 48px; }.registration-step { display: flex; align-items: center; gap: 13px; padding: 12px; color: rgba(255,255,255,.66); border-radius: 12px; }
.registration-step.active { color: white; background: rgba(255,255,255,.12); }.registration-step > span { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-weight: 800; }
.registration-step div { display: flex; flex-direction: column; }.registration-step small { font-size: 11px; opacity: .75; }
.registration-card { padding: clamp(26px, 5vw, 70px); background: #fff; }.registration-card form { max-width: 820px; margin: auto; }
.form-heading > span { color: var(--sky-600); font-size: 11px; font-weight: 800; letter-spacing: 1px; }.form-heading h2 { margin: 5px 0; font-size: 27px; }.form-heading p { margin: 0 0 27px; color: var(--slate-500); }
.registration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }.registration-grid .field.full { grid-column: 1 / -1; }
.registration-card .ui-inputfield, .registration-card .ui-password, .registration-card .ui-password input { width: 100%; }
.form-separator { display: flex; align-items: center; gap: 14px; margin: 32px 0 20px; color: var(--navy-900); font-weight: 800; }.form-separator:after { content: ''; height: 1px; flex: 1; background: var(--line); }
.registration-consent { display: flex; gap: 11px; align-items: flex-start; margin: 25px 0 18px; padding: 13px; color: var(--navy-700); background: var(--sky-50); border: 1px solid var(--sky-100); border-radius: 11px; font-size: 12px; }.registration-consent i { color: var(--sky-600); }
.registration-submit { width: 100%; min-height: 50px; }.registration-success { max-width: 580px; margin: 15vh auto 0; text-align: center; }
.success-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 25px; color: white; background: var(--success); border-radius: 50%; font-size: 28px; box-shadow: 0 15px 30px rgba(32,166,122,.22); }
.registration-success .registration-kicker { color: var(--success); }.registration-success h2 { margin: 8px 0; font-size: 30px; }.registration-success p { color: var(--slate-500); }.success-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; }

/* Platform administration */
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.page-toolbar h2 { margin: 0; font-size: 20px; }.page-toolbar p { margin: 4px 0 0; color: var(--slate-500); }
.toolbar-metric { min-width: 105px; padding: 10px 14px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; }.toolbar-metric span { display: block; color: var(--sky-700); font-size: 21px; font-weight: 800; }.toolbar-metric small { color: var(--slate-500); }
.company-cell, .table-stack { display: flex; }.company-cell { align-items: center; gap: 11px; }.company-cell > div, .table-stack { flex-direction: column; }.company-cell small, .table-stack small { color: var(--slate-500); font-size: 11px; }
.company-table-logo { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 39px; overflow: hidden; color: var(--sky-600); background: var(--sky-50); border-radius: 10px; }.company-table-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.status-badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }.status-EN_ATTENTE { color: #996311; background: #fff4d8; }.status-ACTIVE { color: #087553; background: #dff8ee; }.status-SUSPENDUE { color: #a26710; background: #ffefd4; }.status-REJETEE { color: #ac3543; background: #ffe5e8; }
.actions-column .ui-button { margin: 2px; }
@media (max-width: 900px) { .registration-shell { display: block; }.registration-intro { padding: 42px 24px; }.registration-intro h1 { font-size: 36px; }.registration-steps { grid-template-columns: repeat(3, 1fr); margin-top: 30px; }.registration-step { align-items: flex-start; }.registration-card { padding: 35px 22px; } }
@media (max-width: 620px) { .registration-topbar { height: 66px; padding: 0 12px; }.registration-shell { min-height: calc(100vh - 66px); }.registration-intro { padding: 32px 18px; }.registration-intro h1 { font-size: 29px; }.registration-intro > p { font-size: 14px; }.registration-steps { display: none; }.registration-grid { grid-template-columns: 1fr; }.registration-grid .field.full { grid-column: auto; }.registration-card { padding: 26px 14px; }.page-toolbar { align-items: flex-start; }.toolbar-metric { min-width: 82px; } }

/* V2 company dashboard */
.company-dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 22px 25px; color: #fff; background: linear-gradient(120deg, #087aad, #27b6ed); border-radius: 17px; box-shadow: 0 14px 32px rgba(8,122,173,.18); }
.company-dashboard-welcome .page-eyebrow { color: #b9efff; }.company-dashboard-welcome h2 { margin: 5px 0 2px; font-size: 24px; }.company-dashboard-welcome p { margin: 0; color: rgba(255,255,255,.78); }
.dashboard-date { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); border-radius: 11px; font-weight: 700; }
.logistics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }.logistics-kpi { display: flex; align-items: center; gap: 14px; min-height: 135px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm); }
.kpi-icon { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 47px; border-radius: 13px; font-size: 18px; }.kpi-icon.blue { color: #0787c5; background: #e1f5ff; }.kpi-icon.orange { color: #bc7212; background: #fff0d8; }.kpi-icon.green { color: #138160; background: #ddf8ee; }.kpi-icon.purple { color: #7253ba; background: #eee7ff; }
.logistics-kpi > div { display: flex; flex-direction: column; }.logistics-kpi small { color: var(--slate-500); font-weight: 600; }.logistics-kpi strong { margin: 2px 0; color: var(--navy-900); font-size: 27px; line-height: 1.15; }.logistics-kpi div span { color: #94a6b2; font-size: 10px; }
.dashboard-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }.section-heading h3 { margin: 0; }.section-heading p { margin: 3px 0 0; color: var(--slate-500); font-size: 12px; }.section-count { min-width: 34px; height: 34px; display: grid; place-items: center; color: var(--sky-700); background: var(--sky-50); border-radius: 9px; font-weight: 800; }
.tracking-number { color: var(--sky-700); font-size: 12px; }.parcel-status { display: inline-block; padding: 5px 8px; color: var(--sky-700); background: var(--sky-50); border-radius: 999px; font-size: 9px; font-weight: 800; }
.dashboard-side-cards { display: grid; align-content: start; gap: 14px; }.activity-card { display: flex; align-items: center; gap: 13px; margin: 0; }.activity-card > div { display: flex; flex-direction: column; }.activity-card small { color: var(--slate-500); }.activity-card strong { font-size: 24px; }
.onboarding-hint { display: flex; gap: 12px; margin: 0; color: var(--navy-700); background: linear-gradient(145deg, var(--sky-50), #fff); }.onboarding-hint > i { color: var(--sky-600); font-size: 18px; }.onboarding-hint p { margin: 5px 0 0; color: var(--slate-500); font-size: 11px; }
@media (max-width: 1200px) { .logistics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .dashboard-secondary-grid { grid-template-columns: 1fr; }.dashboard-side-cards { grid-template-columns: repeat(2, 1fr); }.onboarding-hint { grid-column: 1 / -1; } }
@media (max-width: 580px) { .company-dashboard-welcome { align-items: flex-start; padding: 18px; }.dashboard-date { display: none; }.logistics-kpis { grid-template-columns: 1fr; gap: 10px; }.logistics-kpi { min-height: 105px; }.dashboard-side-cards { grid-template-columns: 1fr; }.onboarding-hint { grid-column: auto; } }

.dialog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }.dialog-form-grid .field.full { grid-column: 1 / -1; }.dialog-form-grid .ui-inputfield, .dialog-form-grid .ui-selectonemenu, .dialog-form-grid .ui-autocomplete, .dialog-form-grid .ui-inputnumber { width: 100%; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }.route-cell { display: flex; align-items: center; gap: 9px; }.route-cell i { color: var(--sky-500); }.switches { display: flex; flex-direction: column; justify-content: center; gap: 11px; }
.channel-on { color: var(--success); font-size: 18px; }.channel-off { color: #b5c1c8; font-size: 18px; }
@media (max-width: 640px) { .dialog-form-grid { grid-template-columns: 1fr; }.dialog-form-grid .field.full { grid-column: auto; }.route-cell { align-items: flex-start; flex-direction: column; }.route-cell i { transform: rotate(90deg); } }

/* ================================================================
   REPRISE VISUELLE DES FORMULAIRES, DIALOGUES ET TABLEAUX
   Cette section normalise aussi les anciens écrans encore construits
   avec grid / col-* afin de garder la même présentation partout.
   ================================================================ */

/* Dialogues : surface réellement opaque, y compris pendant les animations PF. */
body .ui-dialog,
body .ui-dialog.ui-widget,
body .ui-dialog.ui-widget-content {
    opacity: 1 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #b8dced !important;
    border-radius: 18px !important;
    box-shadow: 0 26px 72px rgba(5, 48, 78, .30) !important;
    overflow: hidden !important;
}
body .ui-dialog > .ui-dialog-titlebar {
    opacity: 1 !important;
    padding: 18px 22px !important;
    color: #073b5c !important;
    background: linear-gradient(135deg, #e9f8ff 0%, #d9f1fc 100%) !important;
    background-color: #e9f8ff !important;
    background-image: linear-gradient(135deg, #e9f8ff 0%, #d9f1fc 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid #baddeb !important;
}
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-title {
    color: #073b5c !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-icon {
    color: #157dab !important;
    background: rgba(255,255,255,.72) !important;
    border-radius: 9px !important;
}
body .ui-dialog > .ui-dialog-content,
body .ui-dialog > .ui-dialog-content.ui-widget-content,
body .ui-dialog .ui-dialog-content form,
body .ui-dialog .ui-dialog-content .card {
    opacity: 1 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}
body .ui-dialog > .ui-dialog-content {
    padding: 24px !important;
    color: #24485d !important;
}
body.tracking-body .ui-dialog:has(.ui-dialog-content form) {
    width: min(760px, calc(100vw - 28px)) !important;
}
body .ui-dialog .card {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .ui-widget-overlay,
body .ui-dialog-mask {
    opacity: 1 !important;
    background: rgba(3, 29, 48, .62) !important;
    backdrop-filter: blur(4px);
}

/* Formulaires : deux colonnes régulières, puis une colonne sur mobile. */
body .ui-dialog .dialog-form-grid,
body .ui-dialog .form-grid,
body .ui-dialog .registration-grid,
body .ui-dialog .card:has(> [class*="col-"]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
}
body .ui-dialog .dialog-form-grid .field,
body .ui-dialog .form-grid .field,
body .ui-dialog .registration-grid .field,
body .ui-dialog .card > [class*="col-"] {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}
body .ui-dialog .field.full,
body .ui-dialog .form-full,
body .ui-dialog .card > [class*="col-"]:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
body .ui-dialog .field,
body .ui-dialog .ui-float-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
body .ui-dialog .ui-float-label {
    padding-top: 5px;
}
body .ui-dialog .field > label,
body .ui-dialog .ui-float-label > label,
body .ui-dialog .ui-outputlabel {
    position: static !important;
    order: -1;
    margin: 0 0 2px !important;
    color: #31566d !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    transform: none !important;
}
body .ui-dialog .ui-inputfield,
body .ui-dialog .ui-selectonemenu,
body .ui-dialog .ui-autocomplete,
body .ui-dialog .ui-autocomplete-input,
body .ui-dialog .ui-inputnumber,
body .ui-dialog .ui-inputnumber-input,
body .ui-dialog .ui-calendar,
body .ui-dialog .ui-password,
body .ui-dialog .ui-password input,
body .ui-dialog textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}
body .ui-dialog .ui-inputfield,
body .ui-dialog .ui-selectonemenu,
body .ui-dialog .ui-autocomplete-input,
body .ui-dialog .ui-inputnumber-input,
body .ui-dialog .ui-password input,
body .ui-dialog textarea {
    color: #183e55 !important;
    background: #fafdff !important;
    border: 1px solid #bdd8e6 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body .ui-dialog .ui-inputfield:focus,
body .ui-dialog .ui-selectonemenu.ui-state-focus,
body .ui-dialog .ui-autocomplete-input:focus,
body .ui-dialog .ui-inputnumber-input:focus,
body .ui-dialog textarea:focus {
    background: #ffffff !important;
    border-color: #168fc9 !important;
    box-shadow: 0 0 0 3px rgba(22, 143, 201, .14) !important;
}
body .ui-dialog .dialog-actions {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #dcebf2 !important;
}
/* Pied d'action des anciens formulaires : le contenu occupe toute la ligne
   et les boutons restent visibles en bas à droite. */
body.tracking-body .ui-dialog form > .grid {
    margin: 0 !important;
    justify-content: flex-end !important;
    row-gap: 18px !important;
}
body.tracking-body .ui-dialog form > .grid > .col-12 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
body.tracking-body .ui-dialog form > .grid > .ui-button {
    width: auto !important;
    min-width: 120px !important;
    margin-top: 4px !important;
}

/* Tableaux : identité bleue claire et lisible. */
body.tracking-body .ui-datatable {
    border-color: #9ed1e8 !important;
    box-shadow: 0 9px 25px rgba(14, 112, 159, .10) !important;
}
body.tracking-body .ui-datatable .ui-datatable-header {
    color: #ffffff !important;
    background: linear-gradient(135deg, #087daf 0%, #18a7df 100%) !important;
    border-bottom: 0 !important;
}
body.tracking-body .ui-datatable .ui-datatable-header,
body.tracking-body .ui-datatable .ui-datatable-header * {
    color: #ffffff !important;
}
body.tracking-body .ui-datatable thead th {
    color: #075276 !important;
    background: #cfefff !important;
    border-right: 1px solid #addced !important;
    border-bottom: 1px solid #9ed1e8 !important;
}
body.tracking-body .ui-datatable thead th:last-child { border-right: 0 !important; }
body.tracking-body .ui-datatable thead th.ui-state-hover { background: #b9e7fb !important; }
body.tracking-body .ui-datatable tbody td {
    background: #f8fdff !important;
    border-bottom-color: #d9edf6 !important;
}
body.tracking-body .ui-datatable tbody tr:nth-child(even) td { background: #edf9ff !important; }
body.tracking-body .ui-datatable tbody tr:hover td { background: #d9f2fd !important; }
body.tracking-body .ui-datatable tbody tr.ui-state-highlight td {
    color: #063d5b !important;
    background: #bee9fb !important;
}
body.tracking-body .ui-datatable .ui-paginator {
    background: #e7f7fe !important;
    border-top-color: #b9deed !important;
}
body.tracking-body .ui-datatable .ui-paginator .ui-state-active {
    color: #ffffff !important;
    background: #168fc9 !important;
}

/* Préparation d'une proforma : contexte de la demande, saisie et total. */
body .proforma-dialog .ui-dialog-content {
    padding: 20px 24px 24px !important;
}
.proforma-request-summary {
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid #cce7f3;
    border-radius: 14px;
    background: #f5fbfe;
}
.proforma-request-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.proforma-request-heading small,
.proforma-summary-grid small {
    display: block;
    margin-bottom: 4px;
    color: #638091;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.proforma-request-heading h3 {
    margin: 0;
    color: #075276;
}
.proforma-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 22px;
}
.proforma-summary-grid > div {
    min-width: 0;
    padding-left: 12px;
    border-left: 3px solid #53b5df;
}
.proforma-summary-grid strong,
.proforma-summary-grid span {
    display: block;
    overflow-wrap: anywhere;
}
.proforma-summary-grid strong {
    color: #173f53;
}
.proforma-summary-grid span {
    margin-top: 3px;
    color: #607886;
    font-size: .84rem;
}
.proforma-tariff-reference {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    padding: 11px 13px;
    color: #315e74;
    border-radius: 9px;
    background: #e3f4fb;
    font-size: .86rem;
    line-height: 1.45;
}
.proforma-tariff-reference i {
    margin-top: 2px;
    color: #087daf;
}
.proforma-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
    gap: 18px;
}
.proforma-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 20px;
}
.proforma-page-toolbar {
    margin-bottom: 18px;
}
.proforma-editor-card,
.proforma-total-card {
    border: 1px solid #d6e8f0;
    border-radius: 14px;
    background: #ffffff;
}
.proforma-editor-card {
    padding: 18px;
}
.proforma-editor-card > h3,
.proforma-total-card > h3 {
    margin: 0 0 16px;
    color: #075276;
    font-size: 1rem;
}
.proforma-editor-card > h3 i {
    margin-right: 6px;
    color: #168fc9;
}
.proforma-total-card {
    position: sticky;
    top: 0;
    overflow: hidden;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(8, 91, 130, .10);
}
.proforma-total-card > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    color: #456776;
    border-bottom: 1px solid #e5eff4;
    font-size: .88rem;
}
.proforma-total-card > div strong {
    color: #183f53;
    text-align: right;
    white-space: nowrap;
}
.proforma-total-card .discount strong {
    color: #23845c;
}
.proforma-total-card .grand-total {
    margin: 8px -18px -1px;
    padding: 15px 18px;
    color: #ffffff;
    border: 0;
    background: #126f9d;
}
.proforma-total-card .grand-total strong {
    color: #ffffff;
    font-size: 1.05rem;
}
.proforma-total-card > p {
    margin: 14px 0 0;
    color: #66808d;
    font-size: .78rem;
    line-height: 1.45;
}
.proforma-total-card > p i {
    margin-right: 5px;
    color: #168fc9;
}
.uppercase-input {
    text-transform: uppercase;
}
.proforma-actions {
    margin-top: 18px !important;
}
.proforma-page-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #dcebf2;
}
.request-page-toolbar,
.billing-page-toolbar {
    margin-bottom: 18px;
}
.request-page-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}
.request-form-column {
    display: grid;
    gap: 20px;
}
.request-section-card {
    padding: 20px;
    border: 1px solid #d6e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(8, 91, 130, .07);
}
.request-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3eef3;
}
.request-section-title > span {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border-radius: 10px;
    background: #168fc9;
}
.request-section-title h3 {
    margin: 0 0 3px;
    color: #075276;
    font-size: 1rem;
}
.request-section-title p {
    margin: 0;
    color: #68808c;
    font-size: .82rem;
    line-height: 1.4;
}
.request-route-preview {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    border-radius: 10px;
    background: #edf8fd;
}
.request-route-preview small,
.request-route-preview strong {
    display: block;
}
.request-route-preview small {
    margin-bottom: 4px;
    color: #6a8390;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.request-route-preview strong {
    color: #17475e;
}
.request-route-preview > i {
    color: #168fc9;
}
.request-checkbox-field {
    padding: 12px 14px;
    border: 1px solid #d7eaf2;
    border-radius: 9px;
    background: #f5fbfe;
}
.request-page-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid #d6e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.acceptance-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
    color: #315e74;
    border: 1px solid #cce7f3;
    border-radius: 10px;
    background: #edf8fd;
}
.acceptance-summary > i {
    margin-top: 2px;
    color: #168fc9;
    font-size: 1.2rem;
}
.acceptance-summary strong,
.acceptance-summary p {
    display: block;
}
.acceptance-summary p {
    margin: 5px 0 0;
    color: #67808d;
    font-size: .84rem;
    line-height: 1.4;
}
.label-print-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    color: #ffffff !important;
    background: #168fc9 !important;
    text-decoration: none !important;
}
.label-print-button i {
    color: #ffffff !important;
}
.label-page-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #ffffff !important;
    background: #168fc9 !important;
    text-decoration: none !important;
}
.label-page-button i {
    color: #ffffff !important;
}

@media (max-width: 960px) {
    .proforma-page-layout,
    .request-page-layout {
        grid-template-columns: 1fr;
    }
    .proforma-page-layout .proforma-total-card {
        position: static;
    }
}

@media (max-width: 700px) {
    body .ui-dialog > .ui-dialog-content { padding: 18px 14px !important; }
    body .ui-dialog .dialog-form-grid,
    body .ui-dialog .form-grid,
    body .ui-dialog .registration-grid,
    body .ui-dialog .card:has(> [class*="col-"]) {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    body .ui-dialog .field.full,
    body .ui-dialog .form-full,
    body .ui-dialog .card > [class*="col-"]:last-child:nth-child(odd) { grid-column: auto; }
    body .ui-dialog .dialog-actions { flex-direction: column-reverse; }
    body .ui-dialog .dialog-actions .ui-button { width: 100% !important; }
    body.tracking-body .ui-dialog form > .grid > .ui-button {
        width: 100% !important;
        margin: 0 !important;
    }
    .proforma-summary-grid,
    .proforma-editor-layout,
    .proforma-page-layout {
        grid-template-columns: 1fr;
    }
    .proforma-total-card {
        position: static;
    }
    .proforma-page-actions {
        flex-direction: column-reverse;
    }
    .proforma-page-actions .ui-button,
    .request-page-actions .ui-button {
        width: 100% !important;
    }
    .request-page-actions {
        flex-direction: column-reverse;
    }
}

/* Règle finale : aucun ancien thème ne doit masquer le bouton de fermeture. */
body.tracking-body .ui-dialog > .ui-dialog-titlebar,
body .ui-dialog > .ui-dialog-titlebar {
    position: relative !important;
    min-height: 58px !important;
    padding: 17px 62px 17px 22px !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #168fc9 0%, #087ab5 100%) !important;
    background-color: #168fc9 !important;
    border: 0 !important;
    border-bottom: 1px solid #086fa4 !important;
}

body.tracking-body .ui-dialog > .ui-dialog-titlebar .ui-dialog-title,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

body.tracking-body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close:hover,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, .30) !important;
    outline: none !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close > span {
    display: none !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::before,
body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    content: "" !important;
    position: absolute !important;
    top: 15px !important;
    left: 8px !important;
    width: 16px !important;
    height: 2px !important;
    display: block !important;
    border-radius: 2px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
}

body .ui-dialog > .ui-dialog-titlebar .ui-dialog-titlebar-close::after {
    transform: rotate(-45deg) !important;
}
/* Configuration de la vitrine publique */
.showcase-config-header { align-items: center; }
.showcase-preview-link { display: inline-flex !important; align-items: center; gap: 9px; text-decoration: none; }
.showcase-config-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 24px; }
.showcase-editor { min-width: 0; }
.showcase-config-card { margin-bottom: 20px; }
.config-section-title { margin-bottom: 22px; display: flex; align-items: flex-start; gap: 13px; }
.config-section-title > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #0b84f3; }
.config-section-title h3 { margin: 0 0 4px; color: #173b54; }
.config-section-title p { margin: 0; color: #718397; }
.showcase-template-options .ui-radiobutton { margin-right: 10px; }
.showcase-template-options td { padding: 10px 12px !important; border-bottom: 1px solid #e7edf3; }
.showcase-template-options label { color: #324f64; font-weight: 600; }
.showcase-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.showcase-color-input { width: 100% !important; height: 52px !important; padding: 4px !important; cursor: pointer; }
.showcase-switch-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.showcase-switch-grid label { padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid #dae5ee; border-radius: 12px; color: #365267; font-weight: 700; }
.showcase-switch-grid .publish-switch { border-color: #a8d9c9; background: #effbf7; }
.showcase-live-panel { position: sticky; top: 88px; }
.showcase-live-preview { --preview-primary: #0b84f3; --preview-secondary: #062b45; --preview-accent: #20b486; min-height: 430px; padding: 32px 25px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border-radius: 22px; color: #fff; background: linear-gradient(145deg, var(--preview-primary), var(--preview-secondary)); box-shadow: 0 20px 45px rgba(9, 41, 65, .18); }
.showcase-live-preview > small { letter-spacing: .14em; font-weight: 800; opacity: .75; }
.preview-logo { width: 60px; height: 60px; margin-top: 45px; display: grid; place-items: center; border-radius: 16px; color: var(--preview-primary); background: #fff; font-size: 25px; }
.showcase-live-preview h3 { margin: 18px 0 8px; color: #fff; font-size: 27px; }
.showcase-live-preview p { min-height: 55px; margin: 0; color: rgba(255,255,255,.78); line-height: 1.5; }
.preview-button { margin-top: 20px; padding: 10px 13px; border-radius: 9px; color: var(--preview-secondary); background: var(--preview-accent); font-size: 12px; font-weight: 800; }
.preview-lines { width: 100%; margin-top: 45px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-lines i { height: 62px; border-radius: 9px; background: rgba(255,255,255,.15); }
.showcase-live-preview.template-classique { border: 7px double var(--preview-primary); border-radius: 2px; color: var(--preview-secondary); background: #f8f4eb; box-shadow: none; }.showcase-live-preview.template-classique h3 { color: var(--preview-secondary); font-family: Georgia, serif; }.showcase-live-preview.template-classique p { color: #667; }
.showcase-live-preview.template-elegant { border: 1px solid var(--preview-accent); border-radius: 4px; background: #141414; }.showcase-live-preview.template-elegant .preview-logo, .showcase-live-preview.template-elegant .preview-button { color: #111; background: var(--preview-accent); }
.showcase-live-preview.template-minimaliste { border: 1px solid #e0e6eb; border-radius: 0; color: var(--preview-secondary); background: #fff; box-shadow: none; }.showcase-live-preview.template-minimaliste h3 { color: var(--preview-secondary); }.showcase-live-preview.template-minimaliste p { color: #718397; }.showcase-live-preview.template-minimaliste .preview-logo { color: var(--preview-primary); background: #f0f5f8; }.showcase-live-preview.template-minimaliste .preview-lines i { background: #edf1f4; }
@media (max-width: 1000px) { .showcase-config-layout { grid-template-columns: 1fr; } .showcase-live-panel { position: static; } .showcase-live-preview { min-height: 330px; } }
@media (max-width: 650px) { .showcase-color-grid, .showcase-switch-grid { grid-template-columns: 1fr; } }

/* Atelier de personnalisation de la vitrine — disposition révisée */
.showcase-builder {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding-bottom: 92px;
}

.showcase-builder-header {
    margin-bottom: 20px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(120deg, #ffffff 0%, #f1f9ff 100%);
    box-shadow: var(--shadow-sm);
}

.showcase-builder-heading h2 {
    margin: 4px 0 5px;
    color: var(--navy-900);
    font-size: 27px;
    line-height: 1.2;
}

.showcase-builder-heading p {
    margin: 0;
    color: var(--slate-500);
}

.showcase-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.showcase-publication-status,
.showcase-open-button {
    min-height: 42px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.showcase-publication-status.published {
    color: #08775c;
    background: #e4f8f1;
}

.showcase-publication-status.pending {
    border-color: #f0cf87;
    color: #8b5b09;
    background: #fff8e8;
}

.showcase-publication-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

@media (max-width: 760px) {
    .showcase-publication-actions {
        width: 100%;
        justify-content: stretch;
    }

    .showcase-publication-actions .ui-button {
        flex: 1 1 190px;
    }
}

.showcase-publication-status.draft {
    color: #89611b;
    background: #fff4d9;
}

.showcase-open-button {
    border: 1px solid var(--sky-600);
    color: var(--sky-700);
    background: #ffffff;
    text-decoration: none;
}

.showcase-open-button:hover {
    color: #ffffff;
    background: var(--sky-600);
}

.showcase-step-card {
    margin: 0 0 20px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.showcase-step-heading,
.side-card-heading {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.showcase-step-heading h3,
.side-card-heading h3 {
    margin: 0 0 3px;
    color: var(--navy-900);
    font-size: 17px;
}

.showcase-step-heading p,
.side-card-heading p {
    margin: 0;
    color: var(--slate-500);
    font-size: 12px;
}

.showcase-step-number,
.side-card-heading > i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sky-500), var(--sky-700));
    font-weight: 800;
}

.showcase-template-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

body .showcase-template-card {
    position: relative;
    min-width: 0;
    min-height: 154px;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    border: 2px solid #dce8f0;
    border-radius: 14px;
    color: var(--navy-900) !important;
    background: #ffffff;
    text-decoration: none !important;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

body .showcase-template-card:hover {
    border-color: var(--sky-300);
    box-shadow: 0 10px 24px rgba(15, 91, 131, .09);
    transform: translateY(-2px);
}

body .showcase-template-card.selected {
    border-color: var(--sky-600);
    background: #f1faff;
    box-shadow: 0 0 0 3px rgba(7, 135, 197, .10);
}

.template-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 23px;
    height: 23px;
    display: none;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--sky-600);
    font-size: 11px;
}

.showcase-template-card.selected .template-card-check {
    display: grid;
}

.template-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--sky-700);
    background: var(--sky-100);
    font-size: 17px;
}

.template-card-copy {
    margin-top: 12px;
    display: grid;
    gap: 3px;
}

.template-card-copy strong {
    font-size: 15px;
}

.template-card-copy small {
    max-width: 88%;
    color: var(--slate-500);
    font-size: 10px;
    line-height: 1.35;
}

.template-miniature {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 52px;
    height: 40px;
    padding: 6px;
    display: grid;
    gap: 4px;
    border: 1px solid #d6e3ec;
    border-radius: 6px;
    background: #ffffff;
}

.template-miniature i {
    display: block;
    border-radius: 2px;
    background: #dbe8ef;
}

.template-miniature i:first-child {
    background: var(--sky-500);
}

.showcase-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    align-items: start;
    gap: 20px;
}

.showcase-builder-main,
.showcase-builder-side {
    min-width: 0;
}

.showcase-builder-side {
    position: sticky;
    top: 88px;
}

.showcase-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.showcase-field-grid .full {
    grid-column: 1 / -1;
}

.showcase-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.showcase-field > label {
    color: #294b61;
    font-size: 12px;
    font-weight: 800;
}

.showcase-field > small {
    color: var(--slate-500);
    font-size: 10px;
}

.showcase-field .ui-inputfield,
.showcase-input-icon,
.showcase-input-icon .ui-inputfield {
    width: 100%;
}

.showcase-field .ui-inputfield {
    border-color: #cfdee8;
    border-radius: 10px;
}

.showcase-field textarea.ui-inputfield {
    line-height: 1.55;
    resize: vertical;
}

.showcase-input-icon {
    position: relative;
    display: block;
}

.showcase-input-icon > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: var(--sky-600);
    transform: translateY(-50%);
}

.showcase-input-icon .ui-inputfield {
    padding-left: 38px !important;
}

.side-card-heading > i {
    color: var(--sky-700);
    background: var(--sky-100);
}

.showcase-color-list {
    display: grid;
    gap: 5px;
}

.showcase-color-list > label {
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf2f5;
}

.showcase-color-list > label:last-child {
    border-bottom: 0;
}

.showcase-color-list label > span:first-child,
.color-control {
    display: flex;
    align-items: center;
}

.showcase-color-list label > span:first-child {
    align-items: flex-start;
    flex-direction: column;
}

.showcase-color-list strong {
    color: #294b61;
    font-size: 12px;
}

.showcase-color-list small {
    color: var(--slate-500);
    font-size: 9px;
}

.color-control {
    gap: 7px;
}

.color-control input[type="color"] {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid #cbdce7;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.color-control b {
    min-width: 61px;
    color: #536e80;
    font: 600 10px monospace;
}

.showcase-switch-row {
    min-height: 49px;
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf2f5;
}

.showcase-switch-row > span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.showcase-switch-row > span > i {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--sky-700);
    background: var(--sky-100);
}

.showcase-switch-row b {
    color: #34556a;
    font-size: 11px;
}

.showcase-switch-row small {
    display: block;
    color: var(--slate-500);
    font-size: 9px;
}

.showcase-switch-row.publish-row {
    margin: 10px -10px -8px;
    padding: 12px 10px;
    border: 1px solid #bce8d9;
    border-radius: 11px;
    background: #effbf7;
}

/* PrimeFaces 14 : apparence explicite des ToggleSwitch lorsque le thème ne la fournit pas. */
body.tracking-body .visibility-card .ui-toggleswitch,
body.tracking-body .visibility-card .ui-inputswitch {
    position: relative !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 26px !important;
    flex: 0 0 48px !important;
    display: inline-block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

body.tracking-body .visibility-card .ui-toggleswitch .ui-toggleswitch-slider,
body.tracking-body .visibility-card .ui-inputswitch .ui-inputswitch-slider {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border: 1px solid #aebfca !important;
    border-radius: 999px !important;
    background: #cbd7de !important;
    box-shadow: inset 0 1px 2px rgba(17, 52, 77, .10) !important;
    transition: background .18s ease, border-color .18s ease !important;
}

body.tracking-body .visibility-card .ui-toggleswitch .ui-toggleswitch-slider::before,
body.tracking-body .visibility-card .ui-inputswitch .ui-inputswitch-slider::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(17, 52, 77, .28) !important;
    transform: translateX(0) !important;
    transition: transform .18s ease !important;
}

body.tracking-body .visibility-card .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider,
body.tracking-body .visibility-card .ui-toggleswitch.ui-state-active .ui-toggleswitch-slider,
body.tracking-body .visibility-card .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider,
body.tracking-body .visibility-card .ui-inputswitch.ui-state-active .ui-inputswitch-slider {
    border-color: var(--sky-600) !important;
    background: var(--sky-600) !important;
}

body.tracking-body .visibility-card .ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider::before,
body.tracking-body .visibility-card .ui-toggleswitch.ui-state-active .ui-toggleswitch-slider::before,
body.tracking-body .visibility-card .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider::before,
body.tracking-body .visibility-card .ui-inputswitch.ui-state-active .ui-inputswitch-slider::before {
    transform: translateX(22px) !important;
}

body.tracking-body .visibility-card .ui-toggleswitch input,
body.tracking-body .visibility-card .ui-inputswitch input {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    opacity: 0 !important;
}

body.tracking-body .visibility-card .ui-toggleswitch.ui-state-focus .ui-toggleswitch-slider,
body.tracking-body .visibility-card .ui-inputswitch.ui-state-focus .ui-inputswitch-slider {
    box-shadow: 0 0 0 3px rgba(7, 135, 197, .18) !important;
}

.showcase-switch-control {
    position: relative;
    width: 48px;
    height: 26px;
    flex: 0 0 48px;
    display: inline-block;
    cursor: pointer;
}

.showcase-switch-input {
    position: absolute !important;
    z-index: 2;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
}

.showcase-switch-track {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid #aebfca;
    border-radius: 999px;
    background: #cbd7de;
    box-shadow: inset 0 1px 2px rgba(17, 52, 77, .10);
    transition: background .18s ease, border-color .18s ease;
}

.showcase-switch-track > i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(17, 52, 77, .28);
    transition: transform .18s ease;
}

.showcase-switch-input:checked + .showcase-switch-track {
    border-color: var(--sky-600);
    background: var(--sky-600);
}

.showcase-switch-input:checked + .showcase-switch-track > i {
    transform: translateX(22px);
}

.showcase-switch-input:focus-visible + .showcase-switch-track {
    box-shadow: 0 0 0 3px rgba(7, 135, 197, .20);
}

.showcase-switch-input:disabled + .showcase-switch-track {
    cursor: not-allowed;
    opacity: .55;
}

.showcase-preview-panel {
    margin-top: 20px;
}

.showcase-preview-browser {
    overflow: hidden;
    border: 1px solid #cadbe5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(21, 67, 92, .10);
}

.preview-browser-bar {
    height: 34px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #e0e9ef;
    color: #78909f;
    background: #f5f8fa;
}

.preview-browser-bar > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c4d2da;
}

.preview-browser-bar > span {
    margin-left: auto;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.showcase-builder .showcase-live-preview {
    min-height: 270px;
    padding: 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.preview-site-nav {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
}

.preview-site-nav .preview-logo {
    width: 30px;
    height: 30px;
    margin: 0 auto 0 0;
    border-radius: 8px;
    font-size: 13px;
}

.preview-site-nav > i {
    width: 25px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .42);
}

.preview-site-content {
    margin-top: 34px;
}

.preview-site-content > small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .8;
}

.preview-site-content h3 {
    margin: 6px 0;
    font-size: 21px;
}

.preview-site-content p {
    min-height: 38px;
    font-size: 10px;
}

.showcase-builder .preview-button {
    margin-top: 9px;
    padding: 7px 10px;
    font-size: 8px;
}

.showcase-builder .preview-lines {
    margin-top: 25px;
}

.showcase-builder .preview-lines i {
    height: 37px;
}

.showcase-builder .template-classique .preview-site-nav > i,
.showcase-builder .template-minimaliste .preview-site-nav > i {
    background: rgba(40, 75, 96, .25);
}

.showcase-builder .template-classique .preview-site-content > small,
.showcase-builder .template-minimaliste .preview-site-content > small {
    color: var(--preview-primary);
}

.showcase-save-bar {
    position: fixed;
    z-index: 30;
    right: 22px;
    bottom: 16px;
    left: calc(var(--sidebar-width) + 22px);
    min-height: 62px;
    padding: 10px 14px 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #cfe0ea;
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 36px rgba(15, 63, 91, .18);
    backdrop-filter: blur(12px);
}

.showcase-save-bar > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--slate-500);
    font-size: 12px;
}

body .showcase-save-button {
    min-width: 230px;
    border-color: var(--sky-600) !important;
    color: #ffffff !important;
    background: var(--sky-600) !important;
}

@media (max-width: 1180px) {
    .showcase-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .showcase-builder-grid {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 940px) {
    .showcase-builder-grid {
        grid-template-columns: 1fr;
    }

    .showcase-builder-side {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .showcase-preview-panel {
        margin-top: 0;
        grid-column: 1 / -1;
    }

    .showcase-save-bar {
        left: 22px;
    }
}

@media (max-width: 680px) {
    .showcase-builder-header,
    .showcase-header-actions,
    .showcase-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .showcase-template-grid,
    .showcase-field-grid,
    .showcase-builder-side {
        grid-template-columns: 1fr;
    }

    .showcase-field-grid .full {
        grid-column: auto;
    }

    .showcase-save-bar {
        right: 10px;
        bottom: 10px;
        left: 10px;
    }

    .showcase-save-bar > div {
        display: none;
    }

    body .showcase-save-button {
        width: 100%;
        min-width: 0;
    }
}

.request-showcase-context {
    margin-bottom: 18px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #b9e6d6;
    border-radius: 13px;
    color: #28594b;
    background: #effbf7;
}

.request-showcase-context > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: var(--success);
}

.request-showcase-context > div {
    display: grid;
    gap: 2px;
}

.request-showcase-context small {
    color: #55776c;
}

.login-return-notice {
    margin: 0 0 18px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #bce2f4;
    border-radius: 11px;
    color: #174c68;
    background: #eef9fe;
}

.login-return-notice > i {
    margin-top: 2px;
    color: var(--sky-600);
}

.login-return-notice > span {
    display: grid;
    gap: 2px;
}

.login-return-notice small {
    color: #5f7b8b;
    font-size: 10px;
    line-height: 1.4;
}

/* Gestion des médias de la vitrine */
.showcase-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.showcase-media-card {
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    border: 1px solid #d7e4ec;
    border-radius: 14px;
    background: #fbfdff;
}

.media-preview {
    min-height: 205px;
    padding: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid #dce8ef;
    background: linear-gradient(145deg, #edf8fe, #f5f8fb);
}

.media-preview img {
    display: block;
    max-width: 100%;
    max-height: 170px;
    object-fit: contain;
}

.cover-preview {
    padding: 0;
    background: #e7eef3;
}

.cover-preview img {
    width: 100%;
    height: 205px;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.logo-preview img {
    width: 125px;
    height: 125px;
    padding: 8px;
    border: 1px solid #d8e5ed;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 68, 96, .10);
}

.media-placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    color: #77909f;
}

.media-placeholder i {
    font-size: 35px;
}

.media-placeholder small {
    font-weight: 700;
}

.media-card-content {
    min-width: 0;
    padding: 17px;
    display: flex;
    flex-direction: column;
}

.media-card-title {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.media-card-title > i {
    margin-top: 2px;
    color: var(--sky-600);
}

.media-card-title > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.media-card-title strong {
    color: #284b61;
    font-size: 13px;
}

.media-card-title small {
    color: var(--slate-500);
    font-size: 9px;
    line-height: 1.4;
}

.showcase-file-upload,
.showcase-file-upload .ui-fileupload-simple {
    width: 100%;
}

.showcase-file-upload .ui-button,
.showcase-file-upload.ui-button {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    border: 1px dashed var(--sky-500) !important;
    color: var(--sky-700) !important;
    background: #eef9fe !important;
}

.media-card-actions {
    margin-top: auto;
    padding-top: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body .media-upload-button {
    border-color: var(--sky-600) !important;
    color: #ffffff !important;
    background: var(--sky-600) !important;
}

.external-image-option {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e1eaf0;
}

.external-image-option summary {
    color: var(--sky-700);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.external-image-option .showcase-field {
    margin-top: 9px;
}

@media (max-width: 1180px) {
    .showcase-media-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .showcase-media-card {
        grid-template-columns: 1fr;
    }

    .media-preview {
        min-height: 170px;
        border-right: 0;
        border-bottom: 1px solid #dce8ef;
    }

    .cover-preview img {
        height: 170px;
    }
}

/* Configuration globale du stockage des images */
.media-storage-settings {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid #cfe3ef;
    background: linear-gradient(145deg, #ffffff, #f5fbfe);
}

.media-storage-heading {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.media-storage-heading h3,
.media-storage-heading p {
    margin: 0;
}

.media-storage-heading p {
    margin-top: 4px;
    color: var(--slate-500);
}

.media-storage-icon {
    width: 46px;
    height: 46px;
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: var(--sky-600);
}

.media-storage-icon i {
    font-size: 20px;
}

.media-storage-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.media-storage-flow .field {
    margin: 0;
}

.media-storage-flow small {
    display: block;
    margin-top: 6px;
    color: var(--slate-500);
}

.media-setting-input {
    position: relative;
    display: block;
}

.media-setting-input > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--sky-600);
}

.media-setting-input .ui-inputfield {
    width: 100%;
    padding-left: 38px;
}

.media-flow-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sky-700);
    background: #e2f4fc;
}

.media-storage-example {
    margin-top: 16px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 9px;
    color: #42677b;
    background: #edf7fb;
}

.media-storage-example i {
    color: var(--sky-600);
}

.media-storage-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

body .media-storage-save {
    color: #ffffff !important;
    background: var(--sky-600) !important;
}

.parameter-locked {
    color: #8ba0ac;
}

@media (max-width: 760px) {
    .media-storage-flow {
        grid-template-columns: 1fr;
    }

    .media-flow-arrow {
        margin: -2px auto;
        transform: rotate(90deg);
    }
}