/*
Theme Name: plantons
*/
:root {
    --color-btn1: #ffcccc;
    --color-btn1-hover: #ffaaaa;
    --color-btn2: #fff ;
    --color-btn2-hover: #f0f0f0;
    --color-bar0: #d6d6d6;
    --color-bar1: #8fbfa7;
    --color-bar2: #c2ddd0;
    --color-nav: #fff;
    --color-btn3: #c2ddd0;
    --color-btn3-hover: #8fbfa7;
    --color-bg1: #fff ;
}




*, *::before, *::after { box-sizing: border-box; }
body, input, button, textarea, h1, h2 { font-family:'Roboto', sans-serif; font-size: large; margin: 0; padding: 0; border: none; background: none; color: #000; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; }
input, textarea, select { border-bottom: 1px solid #555; }
textarea { min-height: 120px; }
input:focus, textarea:focus, select:focus { outline: none }
p {
    line-height: 1.5rem;
}



/* =========================================
   BUTTONS
   ========================================= */

@keyframes gradients { 0% { background-position: 0% 50%; } 33% { background-position: 50% 30%; } 66% { background-position: 100% 100%; } 100% { background-position: 0% 50%; } }


.plt-btn {
    display: inline-block;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 8px 14px;
    background: var(--color-btn2);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.2;
}

.plt-btn:hover {
    background: var(--color-btn2-hover);
}

/* Full-width button (e.g. + client / + commande / + contenu) */
.plt-btn-100 {
    display: block;
    width: 100%;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px 0;
    background: var(--color-btn2);
    cursor: pointer;
    text-align: center;
    margin: 10px 0;
}
.plt-btn-100:hover {
    background: var(--color-btn2-hover);
}

.plt-logout-btn {
    border: 1px solid #555;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 0.9rem;
    background: var(--color-btn2);
    cursor: pointer; 
}
.plt-logout-btn:hover {
    background: var(--color-btn2-hover);
}


.plt-jd-menu-btn {
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px 20px;
    background: var(--color-btn2);
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
}
.plt-jd-menu-btn:hover {
    background: var(--color-btn2-hover);
}

.plt-jd-order-add {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    gap: 5px;
}
.plt-add-content-btn {
    background-color: var(--color-btn3);
    text-align: right;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
}
.plt-add-content-btn:hover {
    background: var(--color-btn3-hover);
}  

.plt-jd-info-link {
    text-decoration: underline;
    color: #555;
}



/* Destructive / close button (🗙) */
.plt-del {
    display: inline-block;
    border: 1px solid #ac1a17;
    border-radius: 5px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.2;
}

.plt-del:hover {
    background: #d32f2f;
    color: #fff;
}   


/* toggle */
.plt-jd-details-toggle{
  position: relative;
  margin: 10px 20px;
  padding: 5px 10px;
  background: #111;
    color: #fff;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

.plt-jd-details-toggle:hover {
  background: #333;
}


/* simple 2-state label swap */
.plt-jd-details-toggle[data-state="hidden"] .plt-jd-details-toggle__label--on { display:none; }
.plt-jd-details-toggle[data-state="shown"]  .plt-jd-details-toggle__label--off{ display:none; }




.plt-jd-save-btn {
    border: none;
    color: #000;
    border-radius: 5px;
    padding: 10px 20px;
    background: #ffe344;
    cursor: pointer;
    white-space: nowrap; /* ensure content-based width */
}

/* Topbar save button: fixed at bottom, hidden by default */
.plt-jd-topbar .plt-jd-save-btn {
    position: fixed;
    bottom: 50px;

    /* Anchor 20px from the right edge of the 600px wrapper */
    right: max(
        20px,
        calc((100vw - 600px) / 2 + 20px)
    );

    z-index: 1000;

    opacity: 0;
    pointer-events: none;
    transform: translateY(100px);
    transition: opacity .3s ease, transform .3s ease;
}

/* When there are unsaved changes, show it with animation */
.plt-jd-topbar--unsaved .plt-jd-save-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.plt-jd-save-btn:hover {
    background: var(--color-btn1-hover);
}

/* login */

.plt-login {
    background-image: url("planton3.jpg");
    background-color: #f0f0f0;
    background-position: left center;
    min-height: 100vh;
  overflow-y: auto;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.plt-login-form {
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.plt-login-header {
    font-size: 2rem;
    font-weight: 600;
}

.plt-login-input {
    width: 100%;
}

.plt-login-error {
    color:#ac1a17;
    animation: oups .5s;
}

@keyframes oups {
    0% { transform: translate(0); }
    25% { transform: translate(5px); }
    50% { transform: translate(-5px); }
    75% { transform: translate(5px); }
    100% { transform: translate(0); }
}

.plt-login-info {
    color: #555;
}
.plt-login-btn {
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px 20px;
    background: var(--color-bar1);
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
}
.plt-login-btn:hover {
    background: var(--color-bar2);
}

.plt-login-btn2 {
    color: #555;
    cursor: pointer;
}

/* login 6 digit styling */

.plt-code-inputs {
    display: flex;
    gap: 8px;
}

.plt-code-input {
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.plt-code-input:focus {
    outline: none;
    border-color: var(--color-bar1);
   outline: 2px solid var(--color-bar1);
}



/* =========================================
   top bar
   ========================================= */

.plt-jd-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}

.plt-jd-topbar-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; 
}

/* Rows inside top bar */
.plt-jd-topbar-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* First row: keep 2-column layout */
.plt-jd-topbar-row--main {
    align-items: center;
    padding: 10px;
    background-color: var(--color-nav);
}

/* Second row: tabs full width */
.plt-jd-topbar-row--tabs {
    background-color: var(--color-nav);
    justify-content: flex-start;
    gap: 0;   
}

																	
.plt-jd-tab-badge {
    display:inline-block;
    background-color: #ffcccc;
    margin-left:.35rem;
    padding:.08rem .4rem;
    border:1px solid currentColor;
    border-radius:999px;
    font-size:.75em;
    line-height:1;
		vertical-align:middle;
																	  
}
/*third row: anchored toggle details button */

.plt-jd-topbar-row--toggle {
    background-color: transparent;
    background: transparent;
    justify-content: flex-end;
}

/* Message + save button side */
.plt-jd-topbar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    gap: 0;
}

/* Tabs row spanning full width */
.plt-jd-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 5px;    
}

/* Individual tab */
.plt-jd-tab {
    padding: 0 14px 6px;
    text-align: left;
    cursor: pointer;
    background: transparent;     
    border-bottom: 2px solid #000;       
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #444;
    font-weight: 500;
    transition: 
        background 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}
@media screen and (max-width: 340px) {
    .plt-jd-tab {
        padding: 0 6px 6px;
    }
}

.plt-jd-tab:hover {
    background: var(--color-btn2-hover);
}

/* Active tab */
.plt-jd-tab.is-active {
    background: white;
    color: #222;
    font-weight: 600;
}


.plt-jd-topbar-message {
    padding: 2px 10px;
    white-space: wrap;
}



/*
.plt-jd-topbar--unsaved .plt-jd-topbar-row--main {
    background: var(--color-btn1);
}

.plt-jd-topbar--error .plt-jd-topbar-row--main {
    background-color: #ffe4e1;
} 

*/ 

/* overlay now carries the message */
.plt-jd-topbar-overlay {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;

  pointer-events: none;
  opacity: 0;
  transform: translateY(700%);
  z-index: 999;
}

/* keep content above overlay if desired */
.plt-jd-topbar-inner {
  position: relative;
  z-index: 1000;
}

/* message in overlay */
.plt-jd-message-overlay {
  width: 100%;
  line-height: 1.2;
  padding: 20px 20px;
  border: 1px solid #555;
  border-radius: 5px;
  background: #fff;
}

/* overlay visuals + animation */
.plt-jd-topbar--success .plt-jd-topbar-overlay {
  background: transparent;
  animation: pltTopbarFlash 6s ease-out 1;
}
.plt-jd-topbar--error .plt-jd-topbar-overlay {
  background: transparent;
  animation: pltTopbarFlash 6s ease-out 1;
}

/* overlay message color */
.plt-jd-topbar--success .plt-jd-message-overlay { background: var(--color-bar1); }
.plt-jd-topbar--error   .plt-jd-message-overlay { background: #e26868; }

/* stop animating the topbar text; animate overlay text instead */
.plt-jd-topbar--success .plt-jd-topbar-message,
.plt-jd-topbar--error .plt-jd-topbar-message {
  animation: none;
}

.plt-jd-topbar--success .plt-jd-message-overlay,
.plt-jd-topbar--error .plt-jd-message-overlay {
  animation: pltMsgPop 450ms ease-out 1;
}

/* animation */
@keyframes pltTopbarFlash {
  0%   { opacity: 0; transform: translateY(400%); }
  5%  { opacity: 1}
  10%  { opacity: 1; transform: translateY(0%); }
  90%  { opacity: 1; transform: translateY(0%); }
  100% { opacity: 0; transform: translateY(0%); }
}

.plt-jd-topbar--success .plt-jd-topbar-message,
.plt-jd-topbar--error .plt-jd-topbar-message {
  animation: pltMsgPop 450ms ease-out 1;
}

@keyframes pltMsgPop {
  0% { transform: translateY(2px); opacity: .6; }
  100% { transform: translateY(0); opacity: 1; }
}

/* existing: keep collapsing main + tabs */
.plt-jd-topbar-row--main,
.plt-jd-topbar-row--tabs {
  transition: transform 220ms ease;
  will-change: transform;
}

.plt-jd-topbar.is-collapsed .plt-jd-topbar-row--main,
.plt-jd-topbar.is-collapsed .plt-jd-topbar-row--tabs {
  transform: translateY(calc(-1 * var(--plt-topbar-hide, 0px)));
}

/* NEW: move only the toggle button up (not the whole row, and not the save button) */
.plt-jd-details-toggle {
  transition: transform 220ms ease;
  will-change: transform;
}

.plt-jd-topbar.is-collapsed .plt-jd-details-toggle {
  transform: translateY(calc(-1 * var(--plt-topbar-hide, 0px)));
}



/* =========================================
   Jardinier / client interface
   ========================================= */

.plt-jd-page {
    opacity: 0;
    transition: opacity .1s ease-in-out;
}

.plt-jd-page.is-visible {
    opacity: 1;
}

/* Tab panels: only active one takes space */
.plt-jd-tabs-panels {
    position: relative;
    overflow: hidden;
}

/* hidden by default */
.plt-jd-tab-panel {
    display: none;          /* COLLAPSE height */
    opacity: 0;
    transform: translateX(4px);
    padding: 0 10px;
}

/* visible one */
.plt-jd-tab-panel.is-active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}


.plt-jd-info-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.plt-jd-wrap {
    background: var(--color-bg1);
    max-width: 600px;
    margin: 0 auto;
}

.plt-jd-empty {
    font-style: italic;
    opacity: .75;
    margin-top: 200px;
}

.plt-jd-category-header{
  margin: 20px 0 0 20px;
  color: #555;
  font-style: italic;
  font-size: 1rem;																									  
																										  
}


/* Base row container */
.plt-jd-row, .plt-jd-processing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    row-gap: 0rem;;
    padding: 0.75rem 0;
    border-top: 1px solid #ccc;
}   



.plt-jd-row--cancelled .plt-jd-row-right, .plt-jd-row--cancelled .plt-jd-meta {
    display: none;
}

 
/* Optional: slightly dim inputs/buttons for non-public */
.plt-jd-row--rejected input,
.plt-jd-row--cancelled input {
  pointer-events: none;
}
.plt-jd-row--rejected button,
.plt-jd-row--cancelled button {
    pointer-events: none ;
}

.plt-state-badge {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #dbe7ff;
  text-align: right;
}

.plt-state-badge--rejected { background:#ffd6d6; }
.plt-state-badge--cancelled { background:#ffd6d6; }
.plt-state-badge--pending {background: #ddd;}
.plt-state-badge--private {background: #ddd;}


.plt-jd-meta {
    font-size: 0.8rem;
    color: #777;
    flex-wrap: wrap;
    gap: 0.75rem;
    row-gap: 0rem;
    margin-bottom: 0.25rem;
}

.plt-jd-effective-value {
    font-weight: 600;
    font-size: 1.2em;
}


/* Two-column area */
.plt-jd-row-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 10px;
}



/* Left column: name + species */
.plt-jd-row-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.plt-jd-row-name {
    margin-bottom: 0.25rem;
    font-weight:  600;
}

/* Right column: qty label + controls (+ margin underneath) */
.plt-jd-row-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 180px;
}

.order-recap {
    border-top: 3px solid #000;
    padding : 0.75rem 0;
}

.plt-jd-row-right-header {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    text-align: right;
}


.plt-jd-row-margin {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.plt-jd-row-qty-label, .plt-jd-row-margin-label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
}
.plt-jd-row-margin-label {
    color: #555;
}
.plt-jd-row-qty-total {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    align-self: flex-end;
    font-weight: 600;
}

/* Quantity controls: side by side */
.plt-jd-row-qty, .plt-jd-row-margin-controls {
    display: flex;
    align-items: center;
}

.plt-jd-qty-btn, .plt-jd-margin-btn {

    background: var(--color-btn2);
    border: 1px solid #555;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    line-height: .8;
}
.plt-jd-qty-btn:hover, .plt-jd-margin-btn:hover {
    background: var(--color-btn2-hover);
}



.plt-jd-qty-input, .plt-jd-margin-input {
    width: 70px;
    font-weight: 600;
    text-align: center;
    padding: 0.25rem 0.35rem;
    border: none;
}

.plt-jd-margin-input {
    font-weight: 400;
    color: #555;
}

.plt-jd-qty-input--error, .plt-jd-margin-input--error {
    color: #e53935;
    font-weight: 600;
    background: #ffebee;
}


/* ---------------------------------------
   Collapsible rows (default collapsed)
---------------------------------------- */

.plt-jd-row {
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* disable tap highlight on mobile */
}

.plt-jd-row-right-summary {
  font-size: .8rem;
  line-height: 1rem;
  color: #555;
    text-align: right;
}

.plt-jd-row-summary-qty {
    font-size: 1rem;
    color: #000;
  font-weight: 600;
}

.plt-jd-row-summary-margin {

  font-weight: 600;
}

.plt-jd-effective-value {
    font-weight: 600;
    color: #000;
}

/* Summary visible only when row is collapsed */
.plt-jd-row.is-open .plt-jd-row-right-summary {
  display: none;
}

/* Collapsed: show only name/species (left) + summary (right) */

/* hide controls */
.plt-jd-row:not(.is-open) .plt-jd-row-qty-label,
.plt-jd-row:not(.is-open) .plt-jd-row-qty,
.plt-jd-row:not(.is-open) .plt-jd-row-margin {
  display: none;
}

/* hide LEFT meta (plateaux / prix estimé) */
.plt-jd-row:not(.is-open) .plt-jd-row-left > .plt-jd-meta {
  display: none;
}

/* hide capacity bars */
.plt-jd-row:not(.is-open) .plt-jd-meta.plt-jd-effective{
  display: none;
}

/* Collapsed header alignment */
.plt-jd-row:not(.is-open) .plt-jd-row-main {
  align-items: center;
  margin-bottom: 0;
}

/* Keep your existing cancelled/rejected rules; also make them non-toggleable visually */
.plt-jd-row--rejected,
.plt-jd-row--cancelled {
  cursor: default;
}




.plt-jd-row-name{
  display: flex;
  align-items: center;
  gap: 8px;
}

.plt-jd-row-chevron{
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 400ms ease;
}

/* rotate when row is open */
.plt-jd-row.is-open .plt-jd-row-chevron{
  transform: rotate(-135deg);
}


.plt-jd-qty-comment {
    margin-top: 4px;
    text-align: right;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
}


.qty-up {
    color: #1565c0; /* blue */
}

.qty-down {
    color: #1565c0; /* blue */
}

.qty-cancel {
    color: #c62828; /* red */
}


/* Capacity / loading bars per content */
.plt-jd-capacity {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.plt-jd-capacity-bar {
    position: relative;
    background-color: #eee;
    /*
    background: radial-gradient(circle, #999 1.5px, transparent 1.5px);
background-size: 12px 12px;
    background:
  repeating-linear-gradient(-30deg, transparent, transparent 3px, var(--color-bar2) 3px, var(--color-bar2) 6px); */
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.plt-jd-capacity-fill {
    flex: 0 0 auto;         /* width is controlled via inline style (%, from JS) */
    height: 100%;
    width: 0%;
    transition: width .25s ease;
}

.plt-jd-capacity-fill--qty {
    background-color: var(--color-bar1);
}
.plt-jd-capacity-fill--margin {
    background-color: var(--color-bar2);
}





.plt-jd-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


.plt-jd-order {
    border-bottom: 3px solid #000;
    margin-bottom: 30px;
}

.plt-jd-order-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
}

/* layout for title + date on one line */
.plt-jd-order-header-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



/* keep your existing order title styling */
.plt-jd-order-title {
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 2rem;
}

.plt-jd-order-desc {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

.plt-jd-order-date {
    color: #000;
    font-weight: 600;
}





/* Closed orders section */
.plt-jd-order-closed {
    margin-top: 0px;
}


.plt-jd-closed-title {
    font-style: italic;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 80px;
    margin-bottom: 10px;
    border-top: 2px solid #000;
    padding-top: 8px;
}

/* Passed rows (closed orders) */
.plt-jd-row-passed {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.plt-jd-row-passed-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.plt-jd-row-passed-name {
    text-transform: uppercase;
    font-weight: 600;
}

.plt-jd-row-passed-right {
    text-align: right;
    white-space: nowrap;
    font-size: 0.9rem;
}


/* ======================
INVITE WIZARD
========================= */

/* Basic step switch */
.plt-invite-step {
    display: none;
}
.plt-invite-step.is-active {
    display: flex;
    flex-direction: column;
}
/* Typo hooks */
.plt-invite-title {
    line-height: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.plt-invite-text {
    line-height: 1.5rem;
}



/* =========================================
   ADMIN WRAPPER
   ========================================= */

.plt-wrap {
    max-width: 800px;
    margin: 80px auto 60px;
    padding: 0 10px 40px;
}

/* Logout form (top right) */
.plt-logout {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Headings */
.plt-header-2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.plt-header-0 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 40px 0 10px;
}

/* Empty-state text */
.plt-empty {
    font-style: italic;
    opacity: 0.75;
    margin: 10px 0 20px;
}





/* =========================================
   CARDS (CLIENTS / ORDERS)
   ========================================= */

.plt-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: #fff;
}

.plt-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 6px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

/* Text inside card header */
.plt-list-text {
    font-size: 1rem;
}

.plt-list-description {
    font-size: 0.9rem;
    color: #555;
}

/* Inner list section for order contents */
.plt-list {
    margin-top: 6px;
}



/* =========================================
   TABLES (ORDER CONTENTS)
   ========================================= */

   .plt-order-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
   }

   .plt-order-category-row {
    font-style: italic;
    padding: 8px 0 4px;
    border-bottom: 1px solid #000;
    font-size: .95rem;
   }
    .plt-order-content-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: 10px;
     padding-bottom: 5px;
     border-bottom: 1px solid #eee;
    }

    .plt-order-row-name {
        flex: 1 1 30%;
    }
    .plt-order-row {
        flex: 1 1 45%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .plt-order-row-details {
        font-size: 0.9rem;
        color: #555;
    }
    .plt-order-row-details:last-child {
        justify-content: flex-end;
    }

.plt-order-row-actions {
    flex: 0 0 25%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.plt-order-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.plt-order-header-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

@media screen and (max-width: 600px) {
    .plt-order-content-row {
        flex-direction: column;
        gap: 4px;
    }
}

/* Container for the current répartition loop */
.plt-order-repartition {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    background-color: #333;
    color: #fff;
    border-radius: 6px;

}

/* Each line in the répartition loop */
.plt-order-repartition-item {
    
    padding: 4px 8px;
    margin: 2px;
}





/* =========================================
   MESSAGES (ERRORS / SUCCESS)
   ========================================= */

.plt-admin-errors,
.plt-admin-messages {
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.plt-admin-errors {
    background: #ffe4e1;
    border: 1px solid #ac1a17;
}

.plt-admin-messages {
    background: #e7f5e9;
    border: 1px solid #2e7d32;
}




/* =========================================
    MARGIN OVERLAY
    ========================================= */

    /* Info overlay */
.plt-jd-info-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  pointer-events: none;
}

.plt-jd-info-overlay.is-open {
  display: block;
  pointer-events: auto;
}

.plt-jd-info-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.plt-jd-info-overlay__panel {
  position: absolute;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 32px));
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.plt-jd-check {
  font-size: 0.8rem;
    color: #555;
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 14px;
  user-select:none;
}



/* =========================================
   OVERLAY FORMS (ADD / EDIT)
   ========================================= */

/* Full-screen overlay container (hidden by default, shown via JS) */
.plt-overlay-form {
    display: none;                 /* JS sets style.display = 'block' */
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    padding: 20px 10px;
}

/* Inner popup */
.plt-inner-form {
    max-width: 420px;
    margin: 40px auto;
    padding: 16px 14px 18px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Basic layout for fields inside overlay */
.plt-inner-form p {
    margin: 6px 0;
}

.plt-inner-form input,
.plt-inner-form textarea,
.plt-inner-form select {
    width: 100%;
}

/* Close button alignment (🗙 inside overlay) */
.plt-inner-form .plt-close-overlay {
    display: block;
    margin-left: auto;
}



/* =========================================
   SMALL ADJUSTMENTS
   ========================================= */

.plt-logout button.plt-btn {
    background: #000;
    color: #fff;
}

.plt-logout button.plt-btn:hover {
    background: #333;
}

@media screen and (max-width: 480px) {
    .plt-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.plt-jd-info-banner {
    width: 100%;
    min-width: 480px;
    height: auto;
}


/* Accordion header */
.plt-jd-info-header{
  margin-bottom: 10px;
  padding: 8px 0;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.plt-jd-info-header:nth-last-child(1){
  border-bottom: 1px solid #ccc;
}

/* Details: closed by default */
.plt-jd-info-details{
  display: none;
  padding: 0 0 12px;
}

/* Open state */
.plt-jd-info-details.is-open{ display: block; }

/* Pure CSS chevron */
.plt-jd-info-chevron{
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 400ms ease;
}

.plt-jd-info-header.is-open .plt-jd-info-chevron{
  transform: rotate(-135deg);
}




.form-only{ display:none; }

/* animated hide state */
.form-only{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease;
}

/* shown state (when .form-only is removed) */
[data-toggle-group="order-details"]{
  max-height: 1000px;          /* large enough */
  opacity: 1;
  transform: translateY(0);
  transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease;
}


.form-only{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease;
}

/* shown state (only when the element does NOT have .form-only) */
[data-toggle-group="order-details"]:not(.form-only){
  max-height: 1000px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease;
}


/* add content form overlay */

.plt-pill-group{display:flex;flex-wrap:wrap;gap:8px;}
.plt-pill{
  border:1px solid #000;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  cursor:pointer;
  font:inherit;
}
.plt-pill.is-active{
  background:#000;
  color:#fff;
}

.plt-form-row{
    gap: 5px;
    display: flex;
    flex-direction: column;
    margin-bottom:10px;
}

.plt-form-row input, .plt-form-row textarea, .plt-form-row select{
    flex: 1;
}