@charset "UTF-8";
:root{--green:#145c43;--green-dark:#104734;--mint:#edf6f0;--text:#25392f;--muted:#6f7e75;--line:#e3e9e5;--bg:#f6f8f7;--white:#fff;--radius:10px;--shadow:0 12px 32px #163d251c;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);line-height:1.5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #40a478;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:1.875rem;font-weight:650;letter-spacing:-1px;line-height:1.2}h2{font-size:1.0625rem;font-weight:650;letter-spacing:-.2px}h3{font-size:1rem;font-weight:600}.muted{color:var(--muted)}.small{font-size:.8125rem}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip-link{position:fixed;top:-60px;left:20px;padding:12px 20px;background:var(--green);color:white;z-index:100}.skip-link:focus{top:10px}
.sidebar{position:fixed;top:0;bottom:0;left:0;width:240px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20;padding:34px 18px 0}.brand{display:flex;align-items:center;gap:10px;font-size:1.75rem;font-weight:750;letter-spacing:-1.5px;margin:0 12px 31px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--green);color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:-1px}.brand-dot{color:var(--green)}.workspace{padding:13px 10px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;margin-bottom:32px}.workspace-icon{width:33px;height:33px;display:grid;place-items:center;background:var(--mint);border-radius:8px;font-size:.75rem;color:var(--green);font-weight:700}.workspace strong{display:block;font-size:.875rem;font-weight:600}.workspace div>span{display:block;font-size:.75rem;color:var(--muted)}.workspace-chevron{margin-left:auto;color:var(--muted)}.nav-label{font-size:.75rem;font-weight:650;letter-spacing:1.15px;color:#839187;margin:0 12px 10px}nav{display:grid;gap:5px}.nav-link{display:flex;align-items:center;gap:11px;padding:12px 13px;color:#6c7971;font-size:.875rem;border-radius:8px;font-weight:500;transition:background .15s,color .15s}.nav-link:hover{background:#f5f8f6;color:var(--green)}.nav-link.active{background:var(--mint);color:var(--green);font-weight:650}.nav-count{margin-left:auto;background:#dfebe3;min-width:24px;border-radius:6px;text-align:center;font-size:.75rem;padding:1px 5px}.sidebar-bottom{margin-top:auto;padding-top:30px}.demo-note{padding:17px 14px;border:1px solid var(--line);background:#fbfcfb;border-radius:8px;margin-bottom:24px;font-size:.8125rem}.demo-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#43a172;margin-right:7px}.demo-note strong{font-weight:600}.demo-note p{font-size:.75rem;color:var(--muted);margin-top:8px;line-height:1.7}.profile{border-top:1px solid var(--line);padding:20px 0;display:flex;align-items:center;gap:10px}.profile strong{display:block;font-size:.8125rem;font-weight:600}.profile div>span{font-size:.75rem;color:var(--muted)}.profile-lock{margin-left:auto}.avatar{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;flex-shrink:0;background:#e8eee9;color:#36513f;font-size:.8125rem;font-weight:650}.avatar-small{width:32px;height:32px;background:#dae9df}.avatar-admin{background:#e3eee6}.avatar.coral{background:#f9ebe5;color:#9b6550}.avatar.blue{background:#e8eef9;color:#55769c}.avatar.lilac{background:#efe9f5;color:#826997}.avatar.gold{background:#f6f0df;color:#97844b}.avatar.pink{background:#f7e9ec;color:#a27079}
.app-shell{margin-left:240px;min-height:100vh}.topbar{height:74px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff;gap:12px}.breadcrumb{display:flex;align-items:center;gap:13px;font-size:.8125rem}.breadcrumb-root{color:var(--muted)}.breadcrumb-slash{color:#b9c3bd}.topbar-right{display:flex;align-items:center;gap:19px}.demo-badge{font-size:.75rem;color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:5px}.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--muted);flex-shrink:0}.icon-button:hover{background:var(--mint);color:var(--green)}.mobile-menu{display:none}.sidebar-backdrop{display:none}main{padding:35px 36px 20px;max-width:1540px;margin:auto;outline:0}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:27px}.page-heading p{font-size:.875rem;color:var(--muted);margin-top:9px}.heading-actions{display:flex;align-items:center;gap:10px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:.875rem;font-weight:550;line-height:1.3;min-height:41px;white-space:nowrap}.button .icon{width:17px;height:17px}.button:hover{background:#f4f8f5;border-color:#bbcfc1}.button.primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 2px 3px #145c4310}.button.primary:hover{background:var(--green-dark)}.button.subtle{background:transparent}.button.small-button{padding:7px 10px;min-height:34px;font-size:.8125rem}.button.selected{background:var(--mint);border-color:#b7d1c1;color:var(--green)}.text-button{border:0;background:transparent;font-size:.8125rem;color:var(--green);font-weight:550;display:inline-flex;align-items:center;gap:5px;padding:5px 0}.text-button .icon{width:15px;height:15px}.text-button:hover{text-decoration:underline}.period-control{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:.8125rem;color:#67786d}.period-control .icon{width:16px;height:16px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.25fr 1.15fr;gap:14px;margin-bottom:24px}.metric{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:19px 19px 16px;text-align:left;min-width:0;display:block;width:100%;transition:transform .15s,border-color .15s}.metric:hover{transform:translateY(-2px);border-color:#b8cfc1}.metric-label{font-size:.8125rem;display:flex;align-items:center;gap:8px;color:#6b7d70;font-weight:500;white-space:nowrap}.metric-label .icon{width:17px;height:17px}.metric-value{font-size:1.85rem;letter-spacing:-1px;font-weight:600;line-height:1.2;margin-top:20px;display:block;font-variant-numeric:tabular-nums;white-space:nowrap}.metric-foot{font-size:.75rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:11px}.metric-foot .icon{width:14px;height:14px}.metric.emphasis{background:var(--green);color:#fff;border-color:var(--green)}.metric.emphasis .metric-label{color:#d2e5d9}.metric.emphasis .metric-foot{color:#cfdfd5}.metric-profit .metric-value{color:var(--green)}.positive{color:var(--green)}.negative{color:#a2593b}.overview-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:24px;margin-bottom:24px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:hidden}.panel-header{padding:22px 23px 17px;display:flex;align-items:center;justify-content:space-between;gap:16px}.panel-header p{font-size:.8125rem;color:var(--muted);margin-top:4px}.panel-header .title-group{display:flex;align-items:center;gap:9px}.count-bubble{background:#f1f5f2;padding:2px 7px;border-radius:5px;font-size:.75rem;color:var(--muted);font-weight:500}.task-tabs{display:flex;gap:18px;padding:0 23px;border-bottom:1px solid var(--line)}.task-tab{font-size:.8125rem;padding:0 0 11px;border:0;background:none;color:var(--muted);border-bottom:2px solid transparent}.task-tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:600}.task-tab span{margin-left:5px;font-size:.75rem;color:var(--muted)}.task-list{padding:3px 23px 12px}.task-row{display:flex;align-items:center;gap:13px;min-height:77px;border-bottom:1px solid #edf0ed;padding:14px 0}.task-row:last-child{border-bottom:0}.task-check{appearance:none;width:19px;height:19px;border:1.5px solid #cbd6cf;border-radius:5px;margin:0;flex-shrink:0;cursor:pointer;display:grid;place-items:center}.task-check:checked{background:var(--green);border-color:var(--green)}.task-check:checked:after{content:"";width:8px;height:4px;border:2px solid white;border-top:0;border-right:0;transform:rotate(-45deg);margin-top:-2px}.task-main{min-width:0}.task-title{font-size:.875rem;font-weight:500;line-height:1.45}.task-row.done .task-title{text-decoration:line-through;color:#94a098}.task-meta{margin-top:5px;font-size:.75rem;display:flex;align-items:center;gap:7px;color:var(--muted);flex-wrap:wrap}.task-meta button{border:0;background:none;padding:0;color:var(--green);font-size:inherit}.task-date{margin-left:auto;font-size:.75rem;padding:4px 8px;border-radius:5px;background:#f7f8f7;color:var(--muted);white-space:nowrap}.task-date.urgent{color:#ac6f36;background:#fcf4e8}.task-row .avatar{width:26px;height:26px;font-size:.75rem}.account-list{padding:0 23px 4px}.account-row{display:flex;align-items:center;gap:11px;border:0;border-bottom:1px solid var(--line);padding:17px 0;width:100%;background:none;text-align:left}.account-row:last-child{border-bottom:0}.bank-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;flex-shrink:0;background:#f7faf8;color:var(--green)}.bank-icon.dark{background:#263c33;border-color:#263c33;color:white}.bank-icon.light{background:#f1f3f1;color:#7e8d82}.account-name{font-size:.875rem;font-weight:550}.account-sub{font-size:.75rem;color:var(--muted);margin-top:2px}.account-amount{margin-left:auto;font-size:.9375rem;font-weight:600}.account-row>.icon{width:15px;height:15px;color:#94a599}.panel-bottom{padding:13px 23px;border-top:1px solid var(--line);display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--muted);background:#fcfdfc}.panel-bottom .icon{width:15px;height:15px;color:#548367}.account-pending{display:flex;align-items:center;gap:9px;margin:9px 23px 18px;background:#f8f6ef;border:1px solid #f0ecdf;border-radius:8px;padding:10px 12px;color:#927447;font-size:.75rem}.account-pending .icon{width:16px;height:16px}.table-wrap{overflow:auto;width:100%}table{border-collapse:collapse;width:100%;font-size:.875rem;text-align:left}th{font-weight:500;font-size:.75rem;color:var(--muted);background:#fafcfb;white-space:nowrap;padding:12px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:16px 22px;border-bottom:1px solid #edf0ee;vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr.interactive:hover{background:#fafcfb;cursor:pointer}.ref-link{font-size:.875rem;font-weight:600;letter-spacing:.2px;background:none;border:0;padding:4px 0;color:#345840}.ref-link:hover{text-decoration:underline}.client-cell{display:flex;align-items:center;gap:9px;white-space:nowrap}.client-cell .avatar{width:28px;height:28px;font-size:.75rem}.table-sub{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}.shop-label{display:flex;align-items:center;gap:8px}.shop-mark{width:25px;height:25px;border:1px solid var(--line);background:white;display:grid;place-items:center;border-radius:6px;font-size:.75rem;font-weight:750;color:#39423d}.status{font-size:.75rem;font-weight:500;padding:5px 8px;display:inline-flex;align-items:center;gap:6px;border-radius:5px;white-space:nowrap}.status .icon{width:12px;height:12px;stroke-width:2}.status-todo{background:#f0f2f4;color:#74818a}.status-ordered{background:#eff1fb;color:#6875b0}.status-delivery{background:#edf4fb;color:#6085ac}.status-ready{background:#fbf2e5;color:#a57c37}.status-collected{background:#f1edfa;color:#87709e}.status-closed{background:#edf6ef;color:#478365}.status-open{background:#fff1ea;color:#b7794a}.align-right{text-align:right}.table-footer{padding:13px 22px;display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line)}.page-footer{max-width:1540px;margin:auto;padding:8px 36px 24px;display:flex;justify-content:space-between;color:#87968b;font-size:.75rem;gap:16px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.search-field{position:relative;flex:1;min-width:230px;max-width:380px}.search-field .icon{position:absolute;left:12px;top:12px;width:17px;height:17px;color:#8b9a90}.search-field input{height:42px;width:100%;padding:10px 13px 10px 38px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--text);font-size:.875rem}.search-field input::placeholder{color:#94a198}select{appearance:none;background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2376877b' stroke-width='1.5'/%3E%3C/svg%3E") right 11px center/15px no-repeat;padding:10px 33px 10px 13px;border:1px solid var(--line);border-radius:8px;font-size:.875rem;color:#576e5f;min-height:42px}.filter-pills{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:20px}.filter-pill{padding:7px 12px;background:transparent;border:1px solid transparent;border-radius:8px;font-size:.8125rem;color:var(--muted);display:flex;gap:7px;align-items:center}.filter-pill.active{background:white;border-color:var(--line);color:var(--green);font-weight:600}.filter-pill:hover{background:#fff}.filter-pill>span{font-size:.75rem;background:#eaf0ec;min-width:19px;text-align:center;border-radius:4px;padding:1px 4px}.empty-state{padding:50px 20px;text-align:center;color:var(--muted)}.empty-state .icon{width:32px;height:32px;color:#a3b6a8;margin-bottom:12px}.empty-state h3{color:#465e4f;margin-bottom:6px}.empty-state p{font-size:.875rem}.client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.client-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:left;padding:24px;transition:box-shadow .15s,border-color .15s}.client-card:hover{box-shadow:0 4px 16px #234b3416;border-color:#b5cdbd}.client-card-top{display:flex;align-items:center;gap:13px;margin-bottom:25px}.client-card-top>.avatar{width:46px;height:46px;font-size:1rem}.client-card-top>.icon{margin-left:auto;color:#94a398;width:17px}.client-card h2{font-size:1rem}.client-card p{font-size:.75rem;color:var(--muted);margin-top:4px}.client-card-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:18px;gap:15px}.client-card-stats span{display:block;font-size:.75rem;color:var(--muted)}.client-card-stats strong{font-size:1.0625rem;font-weight:600;display:block;margin-top:4px}.section-title{display:flex;justify-content:space-between;align-items:center;margin:28px 0 16px}.accounts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.account-card{padding:23px;text-align:left;border:1px solid var(--line);border-radius:var(--radius);background:white;color:var(--text);transition:transform .15s}.account-card:hover{transform:translateY(-2px);border-color:#b8d0c0}.account-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.account-card-name{font-size:.875rem;font-weight:550}.account-card-value{font-size:1.875rem;letter-spacing:-.6px;font-weight:600;margin:8px 0 21px}.account-card-footer{border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem}.account-card.primary-account{background:var(--green);color:white;border-color:var(--green)}.primary-account .bank-icon{border-color:#679a803d;background:#ffffff17;color:white}.primary-account .account-card-footer{border-color:#ffffff24;color:#d4e7db}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:8px 23px 23px}.team-card{padding:17px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:11px}.team-card strong{font-size:.875rem;font-weight:550}.team-card span:not(.avatar){display:block;font-size:.75rem;color:var(--muted);margin-top:3px}.finance-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:25px}.finance-metrics .metric{padding:22px}.finance-metrics .metric-value{font-size:1.875rem}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:25px;overflow:auto}.tab{border:0;background:none;white-space:nowrap;padding:13px 0;font-size:.875rem;color:var(--muted);border-bottom:2px solid transparent;font-weight:500}.tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:600}.finance-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.flow-list{padding:8px 24px 20px}.flow-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:.875rem}.flow-row strong{font-weight:600}.flow-row.total{border-top:1px solid var(--line);margin-top:5px;padding-top:19px;font-weight:600}.flow-label{display:flex;align-items:center;gap:11px}.flow-label .icon{width:16px;height:16px}.flow-accent{width:33px;height:33px;background:var(--mint);color:var(--green);border-radius:8px;display:grid;place-items:center}.flow-accent.out{background:#fbf0e9;color:#a6784d}.finance-explain{font-size:.8125rem;line-height:1.7;padding:0 24px 22px;color:var(--muted)}.stat-list{padding:0 24px 20px}.stat-list>div{padding:17px 0;border-bottom:1px solid var(--line)}.stat-list>div:last-child{border-bottom:0}.stat-line{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;margin-bottom:10px}.stat-line strong{font-weight:600}.bar-track{height:6px;border-radius:4px;background:#eef3ef;overflow:hidden}.bar-value{height:100%;background:#699680;border-radius:4px}.inline-note{font-size:.8125rem;color:var(--muted);padding:15px 19px;border-radius:8px;background:#edf3ef;border:1px solid #e1e9e4;margin-bottom:22px;display:flex;gap:9px;align-items:flex-start}.inline-note .icon{width:17px;height:17px;margin-top:2px;flex-shrink:0}
dialog{color:var(--text);padding:0;border:0;border-radius:8px;box-shadow:0 14px 44px #0b231e26;max-height:90dvh;overscroll-behavior:contain}dialog::backdrop{background:#172c244d;backdrop-filter:blur(3px)}.detail-dialog{width:min(930px,calc(100vw - 48px));max-width:930px}.dialog-top{padding:28px 30px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.dialog-top h2{font-size:1.45rem;letter-spacing:-.5px;font-weight:600;margin-top:5px}.dialog-top p{font-size:.875rem;color:var(--muted);margin-top:6px}.dialog-title-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.eyebrow{font-size:.75rem;letter-spacing:1.2px;color:#84968a;font-weight:650}.detail-tabs{padding:0 30px;gap:25px;margin-bottom:0}.detail-body{padding:26px 30px 30px;min-height:270px}.detail-footer{padding:15px 30px;background:#fafcfb;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted);display:flex;justify-content:space-between;gap:12px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}.field label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:7px}.field p{font-size:.875rem;line-height:1.65}.field.full{grid-column:1/-1}.field .avatar{width:25px;height:25px;font-size:.75rem}.field-heading{grid-column:1/-1;font-size:.875rem;font-weight:600;padding-bottom:11px;border-bottom:1px solid var(--line);margin-top:4px}.detail-person{display:flex;gap:9px;align-items:center}.detail-note{background:#f6f9f7;border:1px solid var(--line);padding:15px 18px;border-radius:8px;margin-top:26px;font-size:.8125rem;color:#6c7f72}.article{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}.article:last-child{border-bottom:0}.article-icon{height:52px;width:52px;background:#f3f6f3;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:#82998a;flex-shrink:0}.article-icon .icon{height:26px;width:26px}.article-info{flex:1}.article-info strong{font-size:.875rem;font-weight:550}.article-info p{font-size:.75rem;color:var(--muted);margin-top:4px}.article-quantity{font-size:.8125rem;color:var(--muted);margin-right:15px}.article-price{font-size:.875rem;font-weight:600}.parcel-card{border:1px solid var(--line);padding:20px;border-radius:8px;margin-bottom:15px}.parcel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.parcel-header h3{font-size:.875rem}.parcel-header>span{display:inline-flex;align-items:center;gap:10px}.parcel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.detail-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:25px}.detail-total{background:#f6f9f7;padding:17px;border-radius:8px;border:1px solid var(--line)}.detail-total span{font-size:.75rem;color:var(--muted);display:block}.detail-total strong{font-size:1.25rem;font-weight:600;display:block;margin-top:8px}.timeline{padding:0 0 0 9px}.timeline-item{position:relative;padding:0 0 28px 25px;border-left:1px solid var(--line);font-size:.875rem}.timeline-item:before{content:"";width:8px;height:8px;border-radius:50%;background:#a1bcab;position:absolute;left:-4.5px;top:6px;box-shadow:0 0 0 5px white}.timeline-item:first-child:before{background:var(--green)}.timeline-item:last-child{padding-bottom:0;border-left-color:transparent}.timeline-item p{font-size:.75rem;color:var(--muted);margin-top:5px}.info-dialog{width:min(530px,calc(100vw - 40px));padding-bottom:28px}.info-dialog>p{padding:0 30px;font-size:.875rem;line-height:1.8;margin-bottom:16px;color:var(--muted)}.info-dialog>.button{margin-left:30px}.section-gap{margin-top:25px}.summary-strip{display:flex;align-items:center;gap:20px;padding:19px 23px;border-bottom:1px solid var(--line);background:#fcfdfc}.summary-strip>div{font-size:.75rem;color:var(--muted)}.summary-strip strong{display:block;font-size:1.25rem;font-weight:600;color:var(--text);margin-top:4px}.check-row{display:flex;align-items:flex-start;gap:10px;font-size:.875rem;padding:18px 0;border-bottom:1px solid var(--line)}.check-row .icon{width:17px;height:17px;color:#aa8853;margin-top:2px}.check-row p{font-size:.75rem;color:var(--muted);margin-top:4px}.check-row strong{font-weight:550}.check-row>span{margin-left:auto;font-size:.875rem;white-space:nowrap}#toast{position:fixed;bottom:25px;left:calc(50% + 120px);transform:translate(-50%,15px);background:#213d2e;color:white;border-radius:8px;padding:12px 19px;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:calc(100vw - 35px);box-shadow:var(--shadow)}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){main{padding-top:40px}.metrics{gap:18px}.metric{padding:23px}.metric-value{font-size:2rem}.overview-grid{grid-template-columns:1.8fr 1fr}}
@media(max-width:1200px){.sidebar{width:215px;padding-left:14px;padding-right:14px}.app-shell{margin-left:215px}main{padding:28px 24px 20px}.topbar{padding:0 24px}.page-footer{padding-left:24px;padding-right:24px}.metrics{gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}.metric{padding:16px 13px}.metric-label{font-size:.75rem;gap:6px;white-space:normal}.metric-value{font-size:1.55rem}.metric-label .icon{width:15px;height:15px}.metric-foot{font-size:.75rem}.overview-grid{grid-template-columns:1.45fr 1fr;gap:18px}.panel-header{padding:20px 19px 16px}.task-tabs{padding:0 19px}.task-list{padding-left:19px;padding-right:19px}.task-row>.avatar{display:none}.account-list{padding:0 19px}.account-amount{font-size:.8125rem}.bank-icon{width:33px;height:33px}.account-name{font-size:.8125rem}.account-pending{margin-left:19px;margin-right:19px}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}th,td{padding-left:17px;padding-right:17px}.finance-metrics{gap:12px}.finance-metrics .metric{padding:18px}.finance-metrics .metric-value{font-size:1.5rem}#toast{left:calc(50% + 107px)}}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric:nth-child(4),.metric:nth-child(5){grid-column:auto}.metric{min-height:125px}.metric-value{margin-top:12px}.metric.emphasis{grid-column:span 2}.overview-grid{grid-template-columns:1fr}.account-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.account-row{flex-wrap:wrap;border:0;padding:5px 0 18px}.account-amount{margin-left:0;width:100%;font-size:1.1rem}.account-row>.icon{display:none}.account-pending{margin-top:0}.accounts-grid{grid-template-columns:1fr}.account-card-head{margin-bottom:12px}.account-card-value{margin-bottom:16px}.team-grid{grid-template-columns:1fr}.finance-layout{grid-template-columns:1fr}.finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-metrics .metric.emphasis{grid-column:auto}.page-heading{align-items:flex-start}.heading-actions .button span{display:none}.task-row>.avatar{display:inline-grid}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);width:250px;transition:transform .2s;padding-top:25px}.sidebar.open{transform:translateX(0)}.sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:19;background:#18322866;border:0}.app-shell{margin-left:0}.topbar{height:63px;padding:0 18px}.mobile-menu{display:inline-flex}.breadcrumb{gap:9px}.breadcrumb-root,.breadcrumb-slash{display:none}.topbar-right{gap:10px}.demo-badge{font-size:.75rem}.topbar-right .avatar{display:none}main{padding:24px 18px 15px}h1{font-size:1.65rem}.page-heading{margin-bottom:21px;flex-wrap:wrap;gap:15px}.page-heading p{font-size:.8125rem}.heading-actions{width:100%;justify-content:space-between}.heading-actions .button span{display:inline}.period-control{font-size:.75rem}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:18px}.metric{border-radius:8px;padding:14px 11px;min-height:119px}.metric-label{font-size:.75rem;display:block}.metric-label .icon{display:none}.metric-value{font-size:1.5rem;margin-top:13px}.metric-foot{font-size:.75rem}.metric-foot .icon{display:none}.metric.emphasis{grid-column:span 2}.metric.emphasis .metric-label{display:flex}.metric.emphasis .metric-label .icon{display:block}.metric-profit .metric-label{white-space:normal}.metric-profit .metric-value{font-size:1.5rem}.overview-grid{gap:18px;margin-bottom:18px}.panel-header{padding:19px 17px 16px}.task-tabs{padding:0 17px}.task-list{padding-left:17px;padding-right:17px}.task-row{gap:10px}.task-title{font-size:.875rem}.task-date{font-size:.75rem;padding:4px 5px}.task-row>.avatar{display:none}.account-list{display:block;padding:0 17px}.account-row{flex-wrap:nowrap;border-bottom:1px solid var(--line);padding:16px 0}.account-amount{width:auto;margin-left:auto;font-size:.9375rem}.account-row>.icon{display:block}.account-name{font-size:.875rem}.bank-icon{width:38px;height:38px}.account-pending{margin-top:10px}.panel-bottom{padding:13px 17px}.page-footer{padding:10px 18px 22px;font-size:.75rem;flex-direction:column;gap:4px}.client-grid{grid-template-columns:1fr;gap:15px}.search-field{max-width:none;min-width:100%;width:100%}.toolbar{gap:9px}.toolbar select{flex:1;min-width:0}.filter-pills{gap:3px}.filter-pill{font-size:.75rem;padding:6px 8px}.finance-metrics{gap:11px}.finance-metrics .metric{padding:16px}.finance-metrics .metric-value{font-size:1.55rem}.tabs{gap:20px}.tab{font-size:.8125rem}.table-footer{padding:12px 17px}.table-wrap table{min-width:630px}.detail-dialog{width:calc(100vw - 20px);max-height:94dvh;border-radius:8px}.dialog-top{padding:23px 20px 18px}.detail-tabs{padding:0 20px;gap:23px}.detail-body{padding:22px 20px}.detail-footer{padding:14px 20px;flex-direction:column;gap:4px}.field-grid{gap:21px 20px}.detail-totals{grid-template-columns:1fr 1fr;gap:10px}.detail-total{padding:13px}.detail-total strong{font-size:1.1rem}.detail-totals .detail-total:last-child{grid-column:1/-1}.article{gap:10px}.article-icon{width:40px;height:40px}.article-quantity{margin-right:0}.article-price{font-size:.8125rem}.parcel-card{padding:16px}.parcel-grid{grid-template-columns:1fr;gap:16px}.info-dialog>p{padding:0 20px}.info-dialog>.button{margin-left:20px}#toast{left:50%;width:max-content}.finance-layout{gap:18px}.metric-foot{line-height:1.5}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.metric-label,.task-tab,.filter-pill,.tab,.account-name{font-size:.875rem}.info-dialog>p{font-size:1rem}.account-card-head .small{display:flex;align-items:center;gap:8px}.client-card-top{text-align:left}.account-pending{cursor:pointer}.task-check{min-width:19px;min-height:19px}
/* V0.4: order workflow, creation forms and a separate cash balance. */
.overview-metrics{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-bottom:25px}.group-label{font-size:.75rem;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:11px}.order-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.money-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.overview-metrics .metric{min-height:157px;padding:19px 16px}.overview-metrics .metric-label{min-height:22px;font-size:.875rem}.overview-metrics .metric-value{font-size:1.7rem}.status-processing{background:#fbf0e6;color:#a16f38}.accounts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.balance-summary{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:white;border-radius:10px;padding:23px 27px;gap:25px}.balance-summary>div+div{border-left:1px solid var(--line);padding-left:27px}.balance-summary span{display:block;font-size:.875rem;color:var(--muted)}.balance-summary strong{display:block;margin:8px 0;font-size:1.8rem;font-weight:600;letter-spacing:-.6px}.balance-summary small{font-size:.75rem;color:var(--muted)}.balance-caption{font-size:.8125rem;color:var(--muted);margin:12px 0 23px}.account-immobilized{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 17px;font-size:.875rem;opacity:.82}.account-immobilized strong{font-weight:550}.bank-icon.cash{background:#fff6e8;color:#a0783d;border-color:#f0e4cc}.create-dialog{width:min(780px,calc(100vw - 40px));max-width:780px}.creation-form{padding:0 28px 25px}.form-intro{padding:12px 15px;margin-bottom:23px;border:1px solid #e0e9e3;border-radius:8px;background:#f5f9f6;font-size:.8125rem;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 19px}.form-field{display:flex;flex-direction:column;gap:7px;min-width:0}.form-field.wide{grid-column:1/-1}.form-field>label{font-size:.875rem;font-weight:500}.form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid #d9e3dc;border-radius:8px;padding:10px 12px;background-color:white;color:var(--text);font-size:.875rem;min-height:42px}.form-field select{padding-right:35px}.form-field textarea{resize:vertical;min-height:78px;font:inherit;font-size:.875rem}.form-field small{font-size:.75rem;color:var(--muted)}.form-section-label{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:.875rem;font-weight:600;margin-top:9px;padding-bottom:11px;border-bottom:1px solid var(--line)}.form-articles{grid-column:1/-1;display:grid;gap:12px}.form-article{display:grid;grid-template-columns:minmax(130px,1.4fr) minmax(80px,1fr) 60px 100px 28px;gap:9px;align-items:end}.form-article label{font-size:.75rem;font-weight:500}.form-article .form-field input{padding:9px;min-height:40px}.form-article>.icon-button{margin-bottom:3px;width:28px;height:34px}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:11px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.form-error{font-size:.875rem;color:#a04d3b;background:#fff1ec;border:1px solid #efcec3;padding:11px 14px;border-radius:8px;margin-top:18px}.form-error[hidden]{display:none}.form-total{font-size:.875rem;background:#f3f7f4;border:1px solid var(--line);border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.dialog-title-line select{min-height:35px;padding-top:7px;padding-bottom:7px;font-size:.8125rem}.detail-footer .text-button{white-space:nowrap}.demo-note p{line-height:1.6}.movement-chip{font-size:.75rem;padding:2px 7px;border-radius:5px;background:#f4f0e6;color:#8a6e40}
@media(max-width:1200px){.overview-metrics{grid-template-columns:1fr;gap:18px}.overview-metrics .metric{min-height:135px}.money-metrics .metric.emphasis{grid-column:auto}.overview-metrics .metric-value{font-size:1.7rem}.money-metrics{grid-template-columns:1.3fr 1fr}}
@media(max-width:760px){.overview-metrics{gap:17px}.order-metrics{gap:8px}.money-metrics{gap:10px}.overview-metrics .metric{padding:14px 12px;min-height:119px}.overview-metrics .metric-value{font-size:1.5rem}.overview-metrics .metric-label{font-size:.8125rem}.group-label{margin-bottom:8px}.accounts-grid{grid-template-columns:1fr}.balance-summary{padding:20px;gap:18px;grid-template-columns:1fr}.balance-summary>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:17px}.balance-summary strong{font-size:1.65rem}.create-dialog{width:calc(100vw - 18px);max-height:94dvh}.creation-form{padding:0 19px 22px}.form-grid{grid-template-columns:1fr}.form-field.wide,.form-section-label,.form-articles{grid-column:1}.form-article{grid-template-columns:1fr 1fr 32px;padding:12px;border:1px solid var(--line);border-radius:8px}.form-article .form-field:nth-child(1){grid-column:1/3}.form-article .form-field:nth-child(2){grid-column:1/3}.form-article .form-field:nth-child(3){grid-column:1}.form-article .form-field:nth-child(4){grid-column:2}.form-article>.icon-button{grid-column:3;grid-row:1}.form-actions .button{white-space:normal}.page-heading .heading-actions{flex-wrap:wrap}}
.detail-totals.two-totals{grid-template-columns:1fr 1fr}.detail-totals.two-totals .detail-total:last-child{grid-column:auto}.form-total.wide{grid-column:1/-1}.form-article .form-field{grid-column:auto}
/* Order information, independent snapshots and editable tracking. */
.status-fail{background:#fbeceb;color:#a33f37}.filter-pill[data-order-filter="fail"].active{background:#fbeceb;color:#a33f37;border-color:#e7beb9}.form-section-label h3{font-size:.875rem;color:var(--green)}.form-disclosure{border:1px solid var(--line);border-radius:8px;padding:14px 16px}.form-disclosure summary{cursor:pointer;font-size:.875rem;font-weight:550}.form-disclosure[open] summary{margin-bottom:16px}.form-parcels{display:grid;gap:12px}.form-parcel{border:1px solid var(--line);background:#f8faf8;border-radius:8px;padding:16px}.parcel-form-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:.8125rem}.article-help{align-self:center}.address-copy{margin-top:-6px}.dialog-title-line{flex-wrap:wrap}.field p,.detail-note,.external-link{overflow-wrap:anywhere}.form-field input,.form-field textarea,.form-field select{min-width:0}.form-grid>.wide{grid-column:1/-1}.form-parcel .form-grid{padding:0}.form-disclosure .form-total{margin-top:12px}.form-disclosure .form-articles:empty{display:none}textarea:focus-visible,summary:focus-visible{outline:3px solid #40a478;outline-offset:3px}
@media(max-width:600px){.dialog-title-line .button{flex-basis:100%;margin-top:6px}.form-parcel{padding:12px}.form-disclosure{padding:12px}.parcel-form-heading{align-items:flex-start}.form-article{row-gap:10px}}
.parcel-status-select{width:100%;max-width:300px;cursor:pointer}
.parcel-card .section-title{margin-top:15px}
.task-tab[aria-disabled="true"]{cursor:default;pointer-events:none}
button.team-card{background:#fff;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;transition:border-color .15s}
button.team-card:hover{border-color:var(--green)}
.timeline-item textarea{width:100%;box-sizing:border-box;margin-top:8px}
.timeline-item .form-actions{margin-top:8px}
.copy-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.copy-value{font-variant-numeric:tabular-nums;word-break:break-all}
.demo-badge.hors-ligne{background:#fbeceb;color:#a33f37}
.demo-dot.hors-ligne{background:#a33f37}
.task-delete{opacity:.45;transition:opacity .15s,color .15s}
.task-row:hover .task-delete,.task-delete:focus-visible{opacity:1;color:#a33f37}
.stock-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px}
.sav-postit{display:block;margin-top:7px;max-width:290px;background:#fdf6e3;border:1px solid #e8d9a8;border-left:3px solid #c9a227;border-radius:6px;padding:7px 9px;font-size:.78rem;line-height:1.45}
.sav-postit strong{display:flex;align-items:center;gap:4px;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:#8a6d1b}
.sav-postit strong .icon{width:13px;height:13px}
.sav-postit p{margin:3px 0 0;color:#5c4a12;white-space:normal}
.sav-postit .text-button{margin-top:4px;font-size:.72rem;color:#8a6d1b}
.stock-ligne{display:flex;align-items:center;gap:10px}
.stock-vignette{width:46px;height:46px;border-radius:7px;object-fit:cover;border:1px solid var(--line);background:#f4f7f5;flex:none}
.stock-vignette.vide{display:inline-flex;align-items:center;justify-content:center;color:#9bb0a3}
.stock-vignette.vide .icon{width:20px;height:20px}
.repartition{display:flex;flex-wrap:wrap;gap:4px 12px}
.repartition .detenteur{white-space:nowrap;font-size:.82rem}
.stock-actions-ligne{display:inline-flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.chip-archive{display:inline-block;margin-left:7px;font-size:.66rem;font-weight:700;letter-spacing:.03em;background:#eef1ef;color:#6b7d72;border-radius:4px;padding:2px 6px;vertical-align:middle}
.photo-grid{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0 10px}
.photo-case{margin:0;width:130px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.photo-case.principale{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.photo-case img{display:block;width:100%;height:110px;object-fit:cover;background:#f4f7f5}
.photo-case figcaption{display:flex;flex-direction:column;gap:3px;padding:7px 8px;font-size:.74rem}
.photo-case figcaption strong{color:var(--green)}
.reserve{color:#8a6d1b;font-size:.76rem;white-space:nowrap}
/* ── Lisibilité sur téléphone ──────────────────────────────────────────────
Les tableaux de l'application ont jusqu'à huit colonnes. Sur un écran de
téléphone ils défilaient horizontalement : on perdait le fil d'une ligne.
Chaque ligne devient donc une fiche empilée, et chaque cellule affiche son
intitulé grâce à l'attribut data-label déjà présent dans le HTML.
Aucune information n'est masquée : tout reste lisible, autrement disposé. */
@media (max-width: 760px) {
.table-wrap { overflow: visible; border: 0; }
.table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
.table-wrap thead { display: none; }
.table-wrap table { border-collapse: separate; border-spacing: 0; }
.table-wrap tr {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 15px;
margin-bottom: 11px;
}
.table-wrap tr.interactive:active { border-color: var(--green); }
/* La première cellule fait office de titre de fiche. */
.table-wrap td:first-child {
padding: 0 0 9px;
margin-bottom: 8px;
border-bottom: 1px solid var(--line);
font-size: .95rem;
font-weight: 600;
}
.table-wrap td:first-child::before { content: none; }
.table-wrap td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 5px 0;
border: 0;
text-align: left;
}
.table-wrap td::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: .71rem;
letter-spacing: .03em;
text-transform: uppercase;
color: #7b8f82;
font-weight: 650;
white-space: nowrap;
}
/* Cellule d'actions : pas d'intitulé, boutons sur toute la largeur. */
.table-wrap td[data-label=""] { display: block; padding-top: 10px; }
.table-wrap td[data-label=""]::before { content: none; }
.table-wrap td:not([data-label]) { display: block; }
.table-wrap td:not([data-label])::before { content: none; }
.table-wrap td.align-right { text-align: left; }
.table-wrap td > .table-sub { display: block; }
/* Éléments qui doivent reprendre toute la largeur dans la fiche. */
.table-wrap td .sav-postit,
.table-wrap td .repartition,
.table-wrap td .stock-actions-ligne,
.table-wrap td .stock-ligne { width: 100%; }
.table-wrap td .stock-actions-ligne { justify-content: flex-start; gap: 14px; padding-top: 2px; }
.table-wrap td .sav-postit { max-width: none; margin-top: 9px; }
/* Barres d'outils et de filtres : une ligne par contrôle, pleine largeur. */
.toolbar { flex-direction: column; align-items: stretch; gap: 9px; }
.toolbar > * { width: 100%; margin-left: 0 !important; }
.toolbar .muted.small { text-align: left; }
/* Actions de stock et boutons d'en-tête : lisibles au pouce. */
.stock-actions { gap: 9px; }
.stock-actions .button { flex: 1 1 46%; }
.heading-actions { flex-wrap: wrap; gap: 9px; }
.photo-case { width: calc(50% - 6px); }
}
/* ── Lisibilité sur téléphone, 2e passe (22 septembre 2026) ────────────────
Constat à l'écran, pas supposé : une règle plus ancienne imposait
`min-width:630px` à tous les tableaux sous 760px. Les fiches empilées
étaient donc larges de 630 px sur un écran de 375 : la moitié de chaque
ligne — dont le total détenu du stock — sortait de l'écran, et la page
défilait latéralement. C'est la cause principale du « je n'arrive pas à
tout suivre ». On l'annule ici.
Ensuite, trois listes ont trop de colonnes pour la disposition générique
« un intitulé, une valeur » : six pour les commandes, sept pour les ventes.
Empilées, elles font une fiche de douze lignes pour quatre informations
utiles. Elles reçoivent donc une disposition propre, en deux colonnes. */
@media (max-width: 760px) {
.table-wrap table { min-width: 0; }
main { overflow-x: hidden; }
/* Fiches à deux colonnes : la valeur importante à droite, sur la même
ligne que ce qu'elle qualifie. */
.table-wrap tr.carte-liste {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 14px;
row-gap: 0;
align-items: baseline;
padding: 12px 14px;
}
.table-wrap tr.carte-liste td { display: block; padding: 3px 0; min-width: 0; }
.table-wrap tr.carte-liste td::before { content: none; }
.table-wrap tr.carte-liste td:first-child {
border: 0; margin: 0; padding: 0 0 2px; font-size: .95rem;
}
.table-wrap tr.carte-liste td.cellule-vide { display: none; }
/* Une valeur seule n'est pas compréhensible : on lui rend son intitulé,
mais en préfixe court sur la même ligne, pas sur une ligne à elle. */
.table-wrap tr.carte-liste td.avec-intitule::before,
.table-wrap tr.carte-commande td[data-label="Responsable"]::before,
.table-wrap tr.carte-vente td[data-label="Quantité"]::before,
.table-wrap tr.carte-vente td[data-label="À reverser"]::before,
.table-wrap tr.carte-vente td[data-label="Expédition"]::before {
content: attr(data-label) " ";
display: inline;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .03em;
color: #7b8f82;
font-weight: 650;
margin-right: 5px;
}
.table-wrap tr.carte-liste td.col-droite { text-align: right; }
/* Commandes : référence + prix, client + boutique, statut, responsable. */
.carte-commande td[data-label="Référence"] { grid-column: 1; grid-row: 1; }
.carte-commande td[data-label="Prix client"] { grid-column: 2; grid-row: 1;
text-align: right; font-weight: 600; font-size: .95rem; padding: 0; }
.carte-commande td[data-label="Client"] { grid-column: 1; grid-row: 2; }
.carte-commande td[data-label="Boutique"] { grid-column: 2; grid-row: 2; }
.carte-commande td[data-label="Boutique"] .shop-label { justify-content: flex-end; }
.carte-commande td[data-label="Statut"] { grid-column: 1 / -1; grid-row: 3; padding-top: 7px; }
.carte-commande td[data-label="Responsable"] { grid-column: 1 / -1; grid-row: 4; }
.carte-commande .client-cell { white-space: normal; }
/* Ventes : article + montant, quantité + à reverser, état + argent. */
.carte-vente td[data-label="Vente"] { grid-column: 1; grid-row: 1; }
.carte-vente td[data-label="Montant"] { grid-column: 2; grid-row: 1;
text-align: right; font-weight: 600; font-size: .95rem; padding: 0; }
.carte-vente td[data-label="Quantité"] { grid-column: 1; grid-row: 2; }
.carte-vente td[data-label="À reverser"] { grid-column: 2; grid-row: 2; text-align: right; }
.carte-vente td[data-label="État"] { grid-column: 1; grid-row: 3; }
.carte-vente td[data-label="Argent"] { grid-column: 2; grid-row: 3; text-align: right; }
.carte-vente td[data-label="Expédition"] { grid-column: 1 / -1; grid-row: 4; padding-top: 5px; }
/* Stock : la disposition empilée générique lui convient — un intitulé à
gauche, sa valeur à droite — une fois la largeur corrigée. La ligne ne
prend donc PAS la grille à deux colonnes : seules deux retouches
restent. */
.table-wrap tr.carte-stock td[data-label="Actions"] { display: block; padding-top: 9px; }
.table-wrap tr.carte-stock td[data-label="Actions"]::before { content: none; }
.table-wrap tr.carte-stock td[data-label="Où il est"] { align-items: flex-start; }
.table-wrap tr.carte-stock .repartition { justify-content: flex-end; }
.table-wrap tr.carte-stock .stock-actions-ligne { gap: 8px 16px; }
/* En-tête de page : les phrases d'aide écrites pour la souris coûtent une
demi-page sur un téléphone. Elles disparaissent ici, sans rien retirer
au contenu de travail. */
.toolbar > .muted.small { display: none; }
.filter-pills { gap: 4px; }
.filter-pill { font-size: .74rem; padding: 5px 8px; }
}
/* Le détail du calcul d'une vente se lit comme un ticket : l'intitulé à
gauche, le montant à droite, la précision dessous. Empilé en quatre lignes
par poste, il occupait un écran entier pour trois montants. */
@media (max-width: 760px) {
.table-calcul tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
padding: 11px 14px;
}
.table-calcul td { display: block; padding: 1px 0; border: 0; }
.table-calcul td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600;
border: 0; margin: 0; padding: 0; font-size: .9rem; }
.table-calcul td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right;
font-weight: 600; font-size: .9rem; }
.table-calcul td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.table-calcul td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
.table-calcul td.cellule-vide { display: none; }
.table-calcul tr.total { border-color: var(--green); }
}
/* `.inline-edit-row` n'avait aucune règle : ses champs débordaient simplement
à droite sur un écran étroit (le bouton « Ajouter ce frais » était coupé).
`.detail-note` affichait son icône collée au texte, faute d'espacement. */
.inline-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-edit-row input, .inline-edit-row select { flex: 1 1 130px; min-width: 0; }
.inline-edit-row .button { flex: 0 0 auto; }
/* DÉFAUT CONSTATÉ LE 22/09/2026, à l'écran.
`.inline-note` était en `display:flex`. Or un encadré comme
« Détenu : ... Réservé : ... » a plusieurs
enfants : chacun devenait une COLONNE de la flexbox. Le texte s'affichait en
trois colonnes étroites qui débordaient de l'écran. Un flottant place
l'icône sans transformer le texte en colonnes. */
.inline-note, .detail-note { display: block; }
.inline-note > .icon, .detail-note > .icon {
float: left; width: 16px; height: 16px; margin: 2px 9px 0 0;
}
.inline-note::after, .detail-note::after { content: ""; display: block; clear: both; }
@media (max-width: 760px) {
/* Un libellé sur une ligne à lui : « Ex. Envoi, emballage » tronqué à
« Ex. Envoi, e » ne dit plus ce qu'on attend. */
.inline-edit-row input[type="text"] { flex: 1 1 100%; }
}
/* Cellule « Rémunération » de la fiche article : un champ de saisie ne tient
pas à côté de son intitulé dans une fiche de téléphone. Il prend sa ligne. */
@media (max-width: 760px) {
.table-wrap td[data-label="Rémunération"] { display: block; }
.table-wrap td[data-label="Rémunération"]::before {
content: attr(data-label); display: block; margin-bottom: 4px;
}
.table-wrap td[data-label="Rémunération"] .inline-edit-row input { flex: 1 1 100%; }
}
/* `.field-grid` était en `1fr 1fr`. Un `1fr` a pour largeur minimale le
min-content de son contenu : un refuse de descendre sous sa taille
par défaut (~170 px), donc la grille débordait de la fiche sur un écran de
téléphone — la colonne de droite était coupée. `minmax(0, 1fr)` autorise la
colonne à rétrécir. */
.field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field-grid input, .field-grid select, .field-grid textarea { max-width: 100%; }
/* ── Écran de connexion ────────────────────────────────────────────────────
Affiché seulement quand la porte est active et que personne n'est connecté.
La barre latérale et l'en-tête disparaissent : rien à explorer tant qu'on
n'est pas entré. */
body.non-connecte .sidebar,
body.non-connecte .topbar,
body.non-connecte .page-footer { display: none; }
body.non-connecte .app-shell { margin-left: 0; }
body.non-connecte main { padding: 0; max-width: none; }
.connexion-page {
min-height: 100dvh; display: flex; align-items: center; justify-content: center;
padding: 24px 16px; background: var(--fond, #f4f7f5);
}
.connexion-carte { width: 100%; max-width: 380px; padding: 32px 28px 26px; overflow: visible; }
.connexion-marque {
font-weight: 750; letter-spacing: .12em; font-size: .75rem;
color: var(--green); margin-bottom: 18px;
}
.connexion-carte h1 { font-size: 1.5rem; margin-bottom: 8px; }
.connexion-carte > p { font-size: .8125rem; margin-bottom: 22px; }
.connexion-carte .form-field { margin-bottom: 16px; }
.connexion-carte .form-field label {
display: block; font-size: .8125rem; font-weight: 550; margin-bottom: 6px;
}
.connexion-carte input { width: 100%; min-height: 44px; }
.connexion-carte .button.primary { width: 100%; min-height: 46px; margin-top: 4px; }
.connexion-erreur {
background: #fdf1ec; border: 1px solid #f2d9cd; color: #9a4f2c;
border-radius: 8px; padding: 10px 12px; font-size: .8125rem; margin-bottom: 14px;
}
.connexion-aide { margin-top: 18px; line-height: 1.5; }
/* Écran Accès : une carte par personne. */
.acces-carte { padding: 22px 24px; margin-bottom: 18px; }
.acces-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.acces-nom { font-size: 1.05rem; }
.acces-etiquettes { display: flex; gap: 7px; flex-wrap: wrap; flex-shrink: 0; }
.acces-carte .stock-actions { margin-top: 18px; }
@media (max-width: 760px) { .acces-carte { padding: 18px 16px; } }
/* Tableau des droits : neuf parties par personne. Empilé, chaque partie
occupait 175 px — on scrollait pendant dix secondes pour une seule personne.
La partie fait le titre, les deux réglages se partagent la ligne suivante. */
@media (max-width: 760px) {
.table-droits tr {
display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 4px;
padding: 11px 14px;
}
.table-droits td { display: block; padding: 0; border: 0; }
.table-droits td[data-label="Partie"] {
grid-column: 1 / -1; font-weight: 600; font-size: .875rem; margin: 0 0 4px;
}
.table-droits td[data-label="Partie"]::before { content: none; }
.table-droits td[data-label="Accès"]::before,
.table-droits td[data-label="Portée"]::before {
content: attr(data-label); display: block; font-size: .68rem;
text-transform: uppercase; letter-spacing: .03em; color: #7b8f82;
font-weight: 650; margin-bottom: 3px;
}
.table-droits select { width: 100%; min-width: 0; }
}
.commande-bloc {
display: block; margin: 10px 0 12px; padding: 10px 12px; border-radius: 8px;
background: #f1f5f2; border: 1px solid var(--line); font-size: .78rem;
line-height: 1.7; overflow-wrap: anywhere;
}
/* Bouton de copie à côté d'une valeur. Discret au repos, net au survol :
il ne doit pas concurrencer la valeur elle-même. */
.field .copy-row { display: flex; align-items: flex-start; gap: 8px; }
.field .copy-value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.icon-button.copier {
width: 28px; height: 28px; flex: 0 0 auto; margin-top: -2px;
color: #9aa8a0; border-radius: 6px;
}
.icon-button.copier .icon { width: 15px; height: 15px; }
.icon-button.copier:hover { background: var(--mint); color: var(--green); }
/* Au doigt il n'y a pas de survol : la cible doit rester assez grande. */
@media (max-width: 760px) { .icon-button.copier { width: 34px; height: 34px; } }
/* Fiche de récupération : elle se lit à bout de bras, devant un guichet,
souvent d'une seule main. Grand, sobre, rien de superflu. */
.fiche-recup { padding: 22px 24px; margin-bottom: 16px; }
.fiche-recup-tete {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 14px; margin-bottom: 16px;
}
.fiche-recup-nom { display: block; font-size: 1.15rem; line-height: 1.3; margin-top: 4px; }
.fiche-recup .field { margin-bottom: 12px; }
.code-barres-cadre {
background: #fff; border: 1px solid var(--line); border-radius: 10px;
padding: 14px 10px 10px; margin: 16px 0 4px; text-align: center;
/* Un code trop large ne doit pas être écrasé : on le fait défiler plutôt
que de le rétrécir, un code rétréci ne se scanne plus. */
overflow-x: auto;
}
.code-barres { display: block; margin: 0 auto; max-width: none; }
.code-barres-legende {
display: block; margin-top: 8px; font-size: .8rem; letter-spacing: .12em;
color: #5c6b62; font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) { .fiche-recup { padding: 18px 16px; } }
/* À l'impression, on ne veut que la fiche : ni menu, ni barre du haut. */
@media print {
.sidebar, .topbar, .page-footer, .page-heading .heading-actions,
.section-title button, .form-actions { display: none !important; }
.app-shell { margin-left: 0; }
.fiche-recup { page-break-inside: avoid; border: 1px solid #000; }
.code-barres-cadre { border-color: #000; }
}
/* Le code-barres prend toute la largeur utile : un code rétréci ne se scanne
plus, et un code qui déborde ne se scanne pas non plus. */
.code-barres-cadre { overflow: visible; }
.code-barres { width: 100%; height: auto; max-width: 520px; }
/* La valeur et son bouton restent sur la même ligne, même pour une adresse
longue : le bouton renvoyé à la ligne suivante ne se rattache plus à rien. */
.field .copy-row { flex-wrap: nowrap; }
@media print { .code-barres { max-width: 100%; } }
/* Sur téléphone, le cadre du code-barres sort des marges de la fiche : chaque
millimètre gagné compte pour un lecteur. Mesuré : 283 px dans la carte,
~350 px bord à bord, soit 0,29 mm par module contre 0,37 mm — la différence
entre « ça devrait passer » et « ça passe ». */
@media (max-width: 760px) {
.fiche-recup .code-barres-cadre {
margin-left: -16px; margin-right: -16px;
border-radius: 0; border-left: 0; border-right: 0;
padding-left: 6px; padding-right: 6px;
}
.fiche-recup .code-barres { max-width: none; }
}
/* Le cadre du code devient un bouton : il doit rester un cadre à l'œil. */
button.code-barres-cadre {
display: block; width: 100%; border: 1px solid var(--line); background: #fff;
cursor: zoom-in; font: inherit; color: inherit;
}
.code-barres-aide {
display: block; margin-top: 4px; font-size: .7rem; color: #9aa8a0;
}
@media (min-width: 761px) { .code-barres-aide { display: none; } }
/* Code-barres agrandi : tourné d'un quart de tour pour prendre la hauteur de
l'écran, qui est la plus grande dimension disponible sur un téléphone. */
.code-plein-ecran {
position: fixed; inset: 0; z-index: 60; background: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.code-plein-contenu {
transform: rotate(90deg);
display: flex; flex-direction: column; align-items: center; gap: 14px;
width: 100dvh;
}
.code-plein-contenu .code-barres { width: 96%; max-width: none; height: auto; }
.code-plein-numero {
font-size: 1rem; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: #000;
}
.code-plein-fermer {
position: fixed; bottom: 14px; left: 0; right: 0; text-align: center;
font-size: .75rem; color: #9aa8a0;
}
/* Sur un écran large, inutile de tourner : la largeur suffit largement. */
@media (min-width: 761px) {
.code-plein-contenu { transform: none; width: min(90vw, 900px); }
}
/* Un colis dans le bloc de sa commande. La bande de gauche dit d'un coup d'œil
si on peut y aller : vert = prêt au retrait, gris = encore en route. C'est la
distinction que l'utilisateur ne voyait pas assez. */
.colis-recup {
border-left: 4px solid #d6ddd8; background: #fbfcfb;
border-radius: 0 10px 10px 0; padding: 14px 16px; margin: 14px 0 0;
}
.colis-recup.pret { border-left-color: var(--green); background: #f4f9f6; }
.colis-recup.declare { border-left-color: #c8a24a; background: #fdfaf2; }
.colis-recup-tete {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.colis-recup-actions {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.colis-recup .field { margin-bottom: 10px; }
.fiche-recup.a-valider { border-color: #e8d7a8; }
@media (max-width: 760px) {
.colis-recup { padding: 12px 12px; }
.colis-recup-actions .button { flex: 1 1 100%; }
}
/* Le voyant d'un colis : vert, rouge, ou récupéré. Il remplace les cinq
statuts manuels — deux systèmes d'avancement en parallèle se
contredisaient. L'avancement est porté par le statut de la COMMANDE. */
.voyant {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
border-radius: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.voyant .icon { width: 14px; height: 14px; stroke-width: 2.2; }
/* Le voyant est parfois un