/* Global responsive helpers for the app */
:root{
  --container-padding:16px;
  --max-width:1100px;
  --gap:16px;
  --break-sm:640px;
  --break-md:880px;
}

html,body{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
*,*:before,*:after{box-sizing:inherit}

.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding)}

.content{padding:28px}
.card{padding:20px;border-radius:10px}

/* Fluid headings */
h1{font-size:clamp(20px,4vw,44px);line-height:1.08;margin:0 0 .5rem}
h2{font-size:clamp(18px,3.2vw,28px);margin:0 0 .5rem}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;margin-bottom:24px;border:1px solid #e6efe3;border-radius:12px;background:#fff}
.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}
.table-wrap thead th, .table-wrap tbody td{padding:10px}

/* Images */
img, .thumb{max-width:100%;height:auto;display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem}
/* Ensure full clickable area: position above overlays and allow pointer events */
.btn{position:relative;z-index:200;pointer-events:auto}

/* Form elements */
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;max-width:100%;box-sizing:border-box}

/* Landing tweaks */
.page-wrap{max-width:820px;margin:0 auto;padding:var(--gap)}
.card{overflow:hidden}
.blob.a{transition:all .28s ease}

.blob.b{transition:all .28s ease}
.title{margin:6px 0 6px}
.cta-wrap{margin-top:18px}

/* Admin layout helpers */
.app{display:flex;min-height:100vh}
.content{flex:1;padding:28px}

/* Utility: grid for forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* Responsive adjustments */
@media (max-width: var(--break-md)){
  .container{padding:0 12px}
  .content{padding:18px}
  .card{padding:14px}
  .table-wrap table{min-width:600px}
}

@media (max-width: var(--break-sm)){
  .container{padding:0 10px}
  .content{padding:12px}
  .card{padding:12px}
  .table-wrap table{min-width:480px}
  .btn{width:100%;justify-content:center;padding:10px 12px}

  /* Landing blobs scale down on small screens */
  .blob.a{width:160px;height:160px;left:-70px;top:-40px;filter:blur(20px);opacity:.7}
  .blob.b{width:100px;height:100px;right:-30px;bottom:-20px;filter:blur(18px);opacity:.7}

  /* Tables: reduce padding and wrap long text */
  .table-wrap thead th, .table-wrap tbody td{padding:8px;font-size:13px}
  td, th{word-break:break-word}
}

/* Helpers for small thumbnails in tables */
.table-thumb{max-width:96px;border-radius:6px}

/* Truncate long sidebar link text */
.admin-sidebar nav a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Small-screen nav spacing */
.social .links a span{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis}

/* Global responsive helpers for the app */
:root{--container-padding:16px}
html,body{box-sizing:border-box}
*,:before,:after{box-sizing:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 var(--container-padding)}

/* Generic card/content spacing */
.content{padding:28px}
.card{padding:20px;border-radius:10px}

/* Tables: allow horizontal scroll on small screens */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.table-wrap table{width:100%;border-collapse:collapse;min-width:800px}
.table-wrap thead th, .table-wrap tbody td{padding:10px}

/* Images */
img, .thumb{max-width:100%;height:auto;display:block}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem}

/* Forms */
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;max-width:100%;box-sizing:border-box}

/* Responsive adjustments */
@media (max-width: 880px){
  .container{padding:0 12px}
  .content{padding:16px}
  .card{padding:14px}
  .table-wrap table{min-width:600px}
}

@media (max-width:640px){
  .container{padding:0 10px}
  .content{padding:12px}
  .card{padding:12px}
  .table-wrap table{min-width:480px}
  .btn{width:100%;justify-content:center;padding:10px 12px}
}

/* Admin-specific mobile fixes */
@media (max-width:640px){
  .app{flex-direction:column;min-height:auto}
  .app .content{padding:12px}
  .app .card{padding:14px;border-radius:12px}

  /* Keep table scroll instead of squeezing columns */
  .app .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .app .table-wrap table{min-width:640px}
  .app .table-wrap thead th,
  .app .table-wrap tbody td{padding:9px;font-size:13px}

  /* Prevent admin action buttons from becoming tiny circles in narrow table cells */
  .app .content .btn,
  .app .content .btn-secondary,
  .app .content .btn-danger,
  .app .content .btn-toggle,
  .app .content .btn-back{
    width:auto !important;
    min-width:96px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    white-space:nowrap;
    font-size:13px;
    padding:8px 12px;
    margin-right:6px;
    margin-bottom:6px;
  }

  .app .top,
  .app .page-header,
  .app .header-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

  .app .actions,
  .app .header-actions{display:flex;flex-wrap:wrap;gap:8px}
}