/* Shared responsive helpers for DataSell pages */
:root{
  --container-max: 1100px;
  --gutter: 16px;
}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#0f172a;background:#fff}
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}
.row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
.col{padding:0 8px;box-sizing:border-box}
.col-1{flex:0 0 8.333333%;max-width:8.333333%}
.col-2{flex:0 0 16.666667%;max-width:16.666667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-6{flex:0 0 50%;max-width:50%}
.col-12{flex:0 0 100%;max-width:100%}
img,video,iframe{max-width:100%;height:auto;display:block}
/* forms */
input,select,textarea,button{font:inherit}
.form-control{width:100%;box-sizing:border-box}
/* responsive tables */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;text-align:left}
/* common buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:.375rem;border:0;cursor:pointer}
.btn-full{width:100%}
/* utility spacing */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
/* bottom nav fix for mobile */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1100;background:rgba(255,255,255,0.98);box-shadow:0 -4px 12px rgba(2,6,23,0.06);display:flex;justify-content:space-around;padding:.5rem 8px;border-top:1px solid rgba(15,23,42,0.04)}
.bottom-nav .nav-item{flex:1;text-align:center}
/* overlay support */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:999;display:none}
.overlay.active{display:block}
/* admin sidebar adjustments */
.sidebar{transition:transform .28s ease,box-shadow .28s ease}
/* make sure cards and main content adapt */
.card{box-sizing:border-box}
.main-content{padding:1rem}
/* small screens */
@media (max-width: 900px){
  .col-4,.col-3{flex:0 0 50%;max-width:50%}
  .col-6{flex:0 0 100%;max-width:100%}
  .sidebar{width:280px}
}
@media (max-width: 560px){
  :root{--gutter:12px}
  .col-3,.col-4{flex:0 0 100%;max-width:100%}
  .header{flex-direction:column;align-items:flex-start}
  .header .header-actions{width:100%;display:flex;justify-content:space-between}
  .main-content{padding:.75rem}
  .login-card,.card{padding:1rem}
  .btn{padding:.5rem .7rem}
}
/* accessibility focus outlines */
:focus{outline:3px solid rgba(37,99,235,0.14);outline-offset:2px}