/* Styles for the modules added in the Laravel build.
   Additive only - reuses the existing tokens/app/dash CSS for visual identity. */

.side-sep{height:1px;background:var(--line,#E8EAEE);margin:10px 8px}

/* Mobile bar: icon + text label, clear current state */
.tabbar .tab span{display:block;font-size:11px;line-height:1.2;margin-top:2px}
.tabbar .tab[aria-current="page"]{color:var(--green,#12B86A);font-weight:600}

/* --- shared module furniture --- */
.mod-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.mod-head p{margin:4px 0 0;color:var(--muted,#6B7280);font-size:14px;max-width:62ch}
.mod-actions{display:flex;gap:8px;flex-wrap:wrap}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card,#fff);border:1px solid var(--line,#E8EAEE);border-radius:14px;padding:14px}
.stat b{display:block;font-size:22px;line-height:1.2}
.stat span{display:block;font-size:12.5px;color:var(--muted,#6B7280);margin-top:2px}
.stat.warn b{color:#B42318}
.stat.ok b{color:#0A9A5E}

/* empty states + first-use guidance */
.empty-state{text-align:center;padding:34px 18px;border:1px dashed var(--line,#E8EAEE);border-radius:16px;background:var(--paper,#F7F8FA)}
.empty-state .es-ic{color:var(--muted,#9AA1AC);margin-bottom:8px}
.empty-state h4{margin:0 0 6px;font-size:17px}
.empty-state p{margin:0 auto 14px;max-width:48ch;color:var(--muted,#6B7280);font-size:14px;line-height:1.6}

/* data rows (products, rent) - touch friendly */
.row-list{display:flex;flex-direction:column;gap:8px}
.row-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card,#fff);
  border:1px solid var(--line,#E8EAEE);border-radius:12px;text-decoration:none;color:inherit;min-height:56px}
.row-item:hover{border-color:var(--green,#12B86A)}
.row-main{flex:1;min-width:0}
.row-main b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-main span{display:block;font-size:12.5px;color:var(--muted,#6B7280);margin-top:2px}
.row-amt{text-align:right;font-weight:600;white-space:nowrap}

.pill-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill-ok{background:#E3FBF0;color:#0A6E45}
.pill-warn{background:#FEF3C7;color:#92400E}
.pill-bad{background:#FEE4E2;color:#B42318}
.pill-mute{background:#F2F4F7;color:#475467}

/* mixed-currency notice */
.cur-note{font-size:12.5px;color:var(--muted,#6B7280);margin-top:6px}
.cur-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cur-list b{font-size:15px}

/* product picker inside the editor */
.pick-wrap{position:relative}
.pick-results{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);background:var(--card,#fff);
  border:1px solid var(--line,#E8EAEE);border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.12);
  max-height:260px;overflow:auto;display:none}
.pick-results.open{display:block}
.pick-opt{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;background:none;border:0;
  font:inherit;text-align:left;cursor:pointer;border-bottom:1px solid var(--line,#F0F1F4)}
.pick-opt:last-child{border-bottom:0}
.pick-opt:hover,.pick-opt:focus{background:var(--paper,#F7F8FA)}
.pick-opt .po-main{flex:1;min-width:0}
.pick-opt .po-main b{display:block;font-size:14px}
.pick-opt .po-main span{display:block;font-size:12px;color:var(--muted,#6B7280)}
.pick-opt .po-price{font-weight:600;font-size:13.5px;white-space:nowrap}

/* help articles */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.guide-card{display:block;padding:16px;background:var(--card,#fff);border:1px solid var(--line,#E8EAEE);
  border-radius:14px;text-decoration:none;color:inherit}
.guide-card:hover{border-color:var(--green,#12B86A)}
.guide-card b{display:block;margin:8px 0 4px;font-size:15.5px}
.guide-card p{margin:0;font-size:13.5px;color:var(--muted,#6B7280);line-height:1.55}
.guide-body{max-width:70ch;line-height:1.75;font-size:15.5px}
.guide-body h2{font-size:19px;margin:26px 0 8px}
.guide-body ol,.guide-body ul{padding-left:20px}
.guide-body li{margin:6px 0}

/* forms on small screens */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.form-grid .field{min-width:0}
@media (max-width:560px){
  .mod-head{flex-direction:column}
  .mod-actions .btn{flex:1}
}