/* Lightweight Bootstrap-like mobile utilities (mobile-first)
   Purpose: provide responsive grid and utility classes used in views without pulling full Bootstrap.
   Keep small and focused on mobile responsiveness (col-*, d-flex, flex utilities, gap, table-responsive, img-fluid).
*/
:root{--gutter:8px}
/* Container */
.container{width:100%;padding-left:12px;padding-right:12px;margin-left:auto;margin-right:auto}
@media (min-width:576px){.container{max-width:540px;padding-left:16px;padding-right:16px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}

/* Row / cols */
.row{display:flex;flex-wrap:wrap;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.row > [class*="col-"]{padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
.col-12{flex:0 0 100%;max-width:100%}
/* small breakpoint (sm = 576px) */
@media (min-width:576px){
  .col-sm-6{flex:0 0 50%;max-width:50%}
}
/* medium breakpoint (md = 768px) */
@media (min-width:768px){
  .col-md-5{flex:0 0 41.66666667%;max-width:41.66666667%}
  .col-md-7{flex:0 0 58.33333333%;max-width:58.33333333%}
}

/* Flex utilities */
.d-flex{display:flex!important}
.flex-column{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.flex-sm-row{flex-direction:column}
@media (min-width:576px){.flex-sm-row{flex-direction:row!important}}
.align-items-center{align-items:center!important}
.justify-content-center{justify-content:center!important}
.w-100{width:100%!important}
.gap-2{gap:.5rem}

/* Images and tables */
.img-fluid{max-width:100%;height:auto;display:block}
.table-responsive{overflow-x:auto;width:100%}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid rgba(0,0,0,0.05)}
.table-sm th,.table-sm td{padding:.35rem .5rem}
.table-hover tbody tr:hover{background:rgba(0,0,0,0.02)}

/* Buttons small helpers (keep minimal; project has own .btn) */
.btn{display:inline-block;padding:.375rem .75rem;border-radius:.25rem;text-decoration:none}
.btn-sm{padding:.25rem .5rem;font-size:.875rem}
.btn-link{background:none;border:none;padding:0;color:inherit}
.btn-primary{background:#1a73e8;color:#fff}
.btn-outline-primary{color:#1a73e8;border:1px solid #1a73e8;background:transparent}

/* Text */
.small{font-size:.85em}
.text-muted{color:#6c757d}

/* Utilities */
.align-middle{vertical-align:middle}

/* Spacing utilities (added)
   Lightweight set of Bootstrap-like helpers used in views: m-*, p-*, mt-*, mb-*, ml-*, mr-*, mx-*, my-*, px-*, py-*, and auto variants.
   Scale maps roughly to: 0=0, 1=4px, 2=8px, 3=12px, 4=16px
*/
:root{
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
}

/* margin helpers */
.m-0{margin:var(--sp-0) !important}
.m-1{margin:var(--sp-1) !important}
.m-2{margin:var(--sp-2) !important}
.m-3{margin:var(--sp-3) !important}
.m-4{margin:var(--sp-4) !important}
.mt-0{margin-top:var(--sp-0) !important}
.mt-1{margin-top:var(--sp-1) !important}
.mt-2{margin-top:var(--sp-2) !important}
.mt-3{margin-top:var(--sp-3) !important}
.mt-4{margin-top:var(--sp-4) !important}
.mb-0{margin-bottom:var(--sp-0) !important}
.mb-1{margin-bottom:var(--sp-1) !important}
.mb-2{margin-bottom:var(--sp-2) !important}
.mb-3{margin-bottom:var(--sp-3) !important}
.mb-4{margin-bottom:var(--sp-4) !important}
.ml-0{margin-left:var(--sp-0) !important}
.ml-1{margin-left:var(--sp-1) !important}
.ml-2{margin-left:var(--sp-2) !important}
.ml-3{margin-left:var(--sp-3) !important}
.ml-4{margin-left:var(--sp-4) !important}
.mr-0{margin-right:var(--sp-0) !important}
.mr-1{margin-right:var(--sp-1) !important}
.mr-2{margin-right:var(--sp-2) !important}
.mr-3{margin-right:var(--sp-3) !important}
.mr-4{margin-right:var(--sp-4) !important}
.mx-0{margin-left:var(--sp-0) !important;margin-right:var(--sp-0) !important}
.mx-1{margin-left:var(--sp-1) !important;margin-right:var(--sp-1) !important}
.mx-2{margin-left:var(--sp-2) !important;margin-right:var(--sp-2) !important}
.mx-3{margin-left:var(--sp-3) !important;margin-right:var(--sp-3) !important}
.mx-4{margin-left:var(--sp-4) !important;margin-right:var(--sp-4) !important}
.my-0{margin-top:var(--sp-0) !important;margin-bottom:var(--sp-0) !important}
.my-1{margin-top:var(--sp-1) !important;margin-bottom:var(--sp-1) !important}
.my-2{margin-top:var(--sp-2) !important;margin-bottom:var(--sp-2) !important}
.my-3{margin-top:var(--sp-3) !important;margin-bottom:var(--sp-3) !important}
.my-4{margin-top:var(--sp-4) !important;margin-bottom:var(--sp-4) !important}

/* auto centering helpers */
.m-auto{margin: auto !important}
.mx-auto{margin-left:auto !important;margin-right:auto !important}
.my-auto{margin-top:auto !important;margin-bottom:auto !important}

/* padding helpers */
.p-0{padding:var(--sp-0) !important}
.p-1{padding:var(--sp-1) !important}
.p-2{padding:var(--sp-2) !important}
.p-3{padding:var(--sp-3) !important}
.p-4{padding:var(--sp-4) !important}
.pt-0{padding-top:var(--sp-0) !important}
.pt-1{padding-top:var(--sp-1) !important}
.pt-2{padding-top:var(--sp-2) !important}
.pt-3{padding-top:var(--sp-3) !important}
.pt-4{padding-top:var(--sp-4) !important}
.pb-0{padding-bottom:var(--sp-0) !important}
.pb-1{padding-bottom:var(--sp-1) !important}
.pb-2{padding-bottom:var(--sp-2) !important}
.pb-3{padding-bottom:var(--sp-3) !important}
.pb-4{padding-bottom:var(--sp-4) !important}
.pl-0{padding-left:var(--sp-0) !important}
.pl-1{padding-left:var(--sp-1) !important}
.pl-2{padding-left:var(--sp-2) !important}
.pl-3{padding-left:var(--sp-3) !important}
.pl-4{padding-left:var(--sp-4) !important}
.pr-0{padding-right:var(--sp-0) !important}
.pr-1{padding-right:var(--sp-1) !important}
.pr-2{padding-right:var(--sp-2) !important}
.pr-3{padding-right:var(--sp-3) !important}
.pr-4{padding-right:var(--sp-4) !important}
.px-0{padding-left:var(--sp-0) !important;padding-right:var(--sp-0) !important}
.px-1{padding-left:var(--sp-1) !important;padding-right:var(--sp-1) !important}
.px-2{padding-left:var(--sp-2) !important;padding-right:var(--sp-2) !important}
.px-3{padding-left:var(--sp-3) !important;padding-right:var(--sp-3) !important}
.px-4{padding-left:var(--sp-4) !important;padding-right:var(--sp-4) !important}
.py-0{padding-top:var(--sp-0) !important;padding-bottom:var(--sp-0) !important}
.py-1{padding-top:var(--sp-1) !important;padding-bottom:var(--sp-1) !important}
.py-2{padding-top:var(--sp-2) !important;padding-bottom:var(--sp-2) !important}
.py-3{padding-top:var(--sp-3) !important;padding-bottom:var(--sp-3) !important}
.py-4{padding-top:var(--sp-4) !important;padding-bottom:var(--sp-4) !important}

/* File drop specific tweaks to keep previous look */
.file-drop{display:flex;align-items:center;border-radius:8px;padding:12px;border:1px dashed #cfd8dd;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.01))}
.file-drop.over{border-color:#2563eb;background:rgba(37,99,235,0.03)}
.file-drop-inner{display:flex;gap:12px;align-items:center}
.file-drop-emoji{font-size:22px}
.file-drop-text{font-size:13px;color:#6c757d}

/* Small helpers used by views */
.container-fluid{width:100%;padding-left:0;padding-right:0}
.card{background:var(--card-bg,#fff);border-radius:8px;padding:12px}
.h2,.h3,.h4,.h5{margin:0}

/* Modal helper to preserve existing animations */
@media (max-width:520px){#clientModal .modal-dialog{width:calc(100% - 24px);}}