/* Gridz ERP - self-contained stylesheet (no external CDN dependency,
   so the app looks right even on a machine with no internet access) */

:root{
  /* Gridz brand colors (from Brand Identity / business card) */
  --navy:#03005b; --green:#54c52b;
  --primary:var(--navy); --primary-dark:#1c1670; --dark:var(--navy); --muted:#6c757d;
  --border:#dee2e6; --bg:#f4f6f9; --success:#198754; --danger:#dc3545;
  --warning:#fd7e14; --info:#0dcaf0; --radius:12px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:#212529; font-size:.95rem;}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}
h3,h4,h5,h6{margin:0 0 .5rem 0; font-weight:700;}
hr{border:none; border-top:1px solid var(--border); margin:1rem 0;}
small,.small{font-size:.82rem;}
.text-muted{color:var(--muted) !important;}
.text-end{text-align:right;}
.text-center{text-align:center;}
.fw-bold{font-weight:700;}
.fs-3{font-size:1.75rem;}
.fs-5{font-size:1.15rem;}

/* layout */
.container-fluid{width:100%; padding:0 1rem;}
.py-4{padding-top:1.5rem; padding-bottom:1.5rem;}
.px-4{padding-left:1.5rem; padding-right:1.5rem;}
.p-3{padding:1rem;}
.p-4{padding:1.5rem;}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:.35rem;} .mb-2{margin-bottom:.6rem;}
.mb-3{margin-bottom:1rem;} .mb-4{margin-bottom:1.5rem;} .mt-2{margin-top:.6rem;}
.mt-3{margin-top:1rem;} .mt-4{margin-top:1.5rem;} .mt-5{margin-top:3rem;} .me-2{margin-right:.5rem;} .me-3{margin-right:1rem;}
.row{display:flex; flex-wrap:wrap; margin:0 -.5rem;}
.row.g-2 > *{padding:.35rem;}
.row.g-3 > *{padding:.5rem;}
.col,[class^="col-"]{padding:0 .5rem; width:100%;}
.col-4{width:33.33%;} .col-6{width:50%;} .col-12{width:100%;}
@media (min-width:768px){
  .col-md-2{width:16.66%;} .col-md-3{width:25%;} .col-md-4{width:33.33%;}
  .col-md-5{width:41.66%;} .col-md-6{width:50%;} .col-md-7{width:58.33%;}
  .col-md-8{width:66.66%;}
}
.justify-content-center{justify-content:center;}
.justify-content-between{justify-content:space-between;}
.justify-content-end{justify-content:flex-end;}
.align-items-center{align-items:center;}
.align-items-start{align-items:flex-start;}
.d-flex{display:flex;}
.d-inline{display:inline;}
.d-none{display:none;}
.gap-1{gap:.3rem;}
.gap-2{gap:.5rem;}
.gap-3{gap:1rem;}
.flex-wrap{flex-wrap:wrap;}
.text-start{text-align:left;}
.w-100{width:100%;}
.position-sticky{position:sticky;}

/* card */
.card{background:#fff; border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.03);}
.stat-card{border-radius:14px; border-top:3px solid var(--green);}

/* navbar */
.navbar{background:var(--dark); color:#fff; padding:.6rem 0;}
.navbar-dark.bg-dark{background:var(--dark) !important;}
.navbar .container-fluid{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.navbar{padding:.8rem 0;}
.navbar-brand{color:#fff !important; font-weight:700; font-size:1.25rem; letter-spacing:.5px; padding:.3rem 0; display:flex; align-items:center; gap:.5rem;}
.navbar-brand:hover{text-decoration:none;}
.navbar-brand img{height:44px; display:block;}
.brand-accent{color:var(--green);}
.navbar-nav{list-style:none; display:flex; flex-wrap:wrap; gap:.15rem; margin:0; padding:0;}
.navbar-nav .nav-link{color:#cfd6dd; padding:.5rem .8rem; border-radius:8px; display:inline-block;}
.navbar-nav .nav-link:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none;}
.navbar-text{color:#cfd6dd;}
.navbar-toggler{display:none;}

/* buttons */
.btn{display:inline-block; font-weight:500; text-align:center; vertical-align:middle; cursor:pointer;
  padding:.45rem 1rem; border-radius:8px; border:1px solid transparent; font-size:.9rem; line-height:1.3;}
.btn:hover{text-decoration:none;}
.btn-sm{padding:.25rem .6rem; font-size:.8rem; border-radius:6px;}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline-primary{background:transparent; border-color:var(--primary); color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary); color:#fff;}
.btn-outline-secondary{background:transparent; border-color:#adb5bd; color:#495057;}
.btn-outline-secondary:hover{background:#e9ecef;}
.btn-outline-danger{background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-outline-danger:hover{background:var(--danger); color:#fff;}
.btn-outline-light{background:transparent; border-color:#adb5bd; color:#e9ecef;}
.btn-outline-light:hover{background:rgba(255,255,255,.15);}
.btn-warning{background:var(--warning); border-color:var(--warning); color:#fff;}
.btn-warning:hover{background:#e06a00;}
.btn-outline-warning{background:transparent; border-color:var(--warning); color:var(--warning);}
.btn-outline-warning:hover{background:var(--warning); color:#fff;}
.btn-outline-success{background:transparent; border-color:var(--success); color:var(--success);}
.btn-outline-success:hover{background:var(--success); color:#fff;}

/* forms */
.form-label{display:block; margin-bottom:.3rem; font-weight:600; font-size:.85rem; color:#495057;}
.form-control,.form-select{display:block; width:100%; padding:.45rem .7rem; font-size:.9rem;
  border:1px solid #ced4da; border-radius:8px; background:#fff; color:#212529;}
.form-control:focus,.form-select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 .2rem rgba(84,197,43,.2);}
.form-control:disabled{background:#e9ecef;}
.form-check{display:flex; align-items:center; gap:.4rem;}
.form-check-input{width:1.1rem; height:1.1rem;}

/* table */
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table{width:100%; border-collapse:collapse; margin-bottom:1rem;}
.table th,.table td{padding:.55rem .5rem; border-top:1px solid var(--border); vertical-align:middle;}
.table thead th{border-top:none; border-bottom:2px solid var(--border); font-size:.78rem; text-transform:uppercase; color:var(--muted); text-align:left;}
.table-sm th,.table-sm td{padding:.35rem .5rem; font-size:.88rem;}
.table-hover tbody tr:hover{background:#f8f9fb;}
.table-bordered th,.table-bordered td{border:1px solid var(--border);}
.table-light{background:#f8f9fa;}
.border-top{border-top:2px solid var(--border);}

/* badges & alerts */
.badge{display:inline-block; padding:.3em .6em; font-size:.75rem; font-weight:600; border-radius:6px;}
.bg-secondary{background:#6c757d; color:#fff;}
.bg-info-subtle{background:#cff4fc;}
.text-dark{color:#212529 !important;}
.text-success{color:var(--success) !important;}
.bg-success-subtle{background:#d1e7dd;}
.alert{padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; border:1px solid transparent; position:relative;}
.alert-success{background:#d1e7dd; border-color:#a3cfbb; color:#0a3622;}
.alert-danger{background:#f8d7da; border-color:#f1aeb5; color:#58151c;}
.alert-info{background:#cff4fc; border-color:#9eeaf9; color:#055160;}
.alert-warning{background:#fff3cd; border-color:#ffe69c; color:#664d03;}
.btn-close{position:absolute; top:.7rem; right:.9rem; background:none; border:none; font-size:1.1rem; cursor:pointer;}

/* icon replacement (unicode, no icon-font CDN needed) */
.icon::before{margin-right:.35rem;}

/* ============================================================
   Color-coded form sections (Order form redesign)
   Each section gets its own accent color + soft icon chip so the
   page reads as clearly separated groups at a glance instead of one
   long wall of fields. Navy/green stay the two "primary" colors
   (brand identity); the rest are a muted secondary palette chosen to
   sit comfortably alongside navy/green without competing with them.
   ============================================================ */
.section-card{
  background:#fff; border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.03); border-left:4px solid var(--sec-color, var(--navy));
  margin-bottom:1.1rem; overflow:hidden;
}
.section-head{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--border); background:#fbfbfd;
}
.section-icon{
  width:2.1rem; height:2.1rem; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:var(--sec-tint, #eef0fb); color:var(--sec-color, var(--navy));
}
.section-titles{min-width:0;}
.section-title{font-weight:700; font-size:.95rem; color:#212529;}
.section-sub{font-size:.76rem; color:var(--muted); margin-top:.05rem;}
.section-body{padding:1.1rem;}

.section-customer{--sec-color:var(--navy); --sec-tint:#e7e6f4;}
.section-product{--sec-color:#2f8a1f; --sec-tint:#e3f5db;}
.section-frame{--sec-color:#a3730f; --sec-tint:#faf0d9;}
.section-delivery{--sec-color:#6f42c1; --sec-tint:#eee6fa;}
.section-costs{--sec-color:#0d8aa6; --sec-tint:#dff4f8;}
.section-packaging{--sec-color:#6c757d; --sec-tint:#eef0f2;}

/* collapsible sub-group for descriptive/secondary fields (keeps the
   primary fields uncluttered; still one click away, nothing hidden
   behind a separate page) */
.details-toggle{
  border:1px dashed var(--border); border-radius:10px; padding:.15rem .9rem; margin-top:.3rem; background:#fcfcfd;
}
.details-toggle[open]{padding-bottom:.9rem;}
.details-toggle summary{
  cursor:pointer; font-weight:600; font-size:.85rem; color:var(--sec-color, var(--primary));
  list-style:none; padding:.65rem 0; display:flex; align-items:center; gap:.4rem;
}
.details-toggle summary::-webkit-details-marker{display:none;}
.details-toggle summary::before{content:"▸"; display:inline-block; transition:transform .15s; font-size:.75rem;}
.details-toggle[open] summary::before{transform:rotate(90deg);}

.field-hint{font-size:.78rem; color:var(--muted); margin-top:.3rem;}