/* ==========================================================
   AJX UI GLOBAL (ALL PAGES) - Responsive + Neon/Glass + Anim
   - Works with existing HTML (no logic/route changes)
   - Mobile: stacks everything, prevents overflow
   ========================================================== */

:root{
  --bg:#07080b;
  --panel:rgba(18,22,32,.62);
  --panel2:rgba(14,18,28,.72);
  --text:#eaf1ff;
  --muted:#9bb0d0;
  --border:rgba(120,160,255,.16);
  --accent:#00f7ff;
  --accent2:#ff00ff;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --radius:16px;
  --maxw: 1100px;
  --btnGlow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 44px rgba(0,0,0,.22);
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:rgba(255,255,255,.82);
  --panel2:rgba(255,255,255,.92);
  --text:#0b1220;
  --muted:#42506a;
  --border:rgba(20,40,90,.14);
  --accent:#0066ff;
  --accent2:#7c3aed;
  --shadow:0 12px 34px rgba(20,35,80,.12);
  --btnGlow: 0 0 0 1px rgba(0,102,255,.14), 0 18px 36px rgba(20,35,80,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{max-width:100%; overflow-x:hidden;}
body{
  margin:0;
  padding:14px;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(760px 480px at 90% 8%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 88%, #000));
  overflow-x:hidden;
  /* do not let existing body flex layouts put blocks side-by-side */
  display:block !important;
}

a{color:var(--accent); text-decoration:none; transition:filter .15s ease}
a:hover{filter:brightness(1.08)}
small,.muted{color:var(--muted)}

@keyframes ajxFloatIn{
  from{transform:translateY(8px); opacity:.0}
  to{transform:translateY(0); opacity:1}
}
@keyframes ajxPulse{
  0%{box-shadow:0 0 0 0 rgba(0,247,255,.0)}
  50%{box-shadow:0 0 0 4px rgba(0,247,255,.10)}
  100%{box-shadow:0 0 0 0 rgba(0,247,255,.0)}
}

/* Common wrappers */
.top, .box, body > .box, .container, .wrap, .wrapper, main{
  width:100% !important;
  max-width:var(--maxw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Panels/cards */
.box, .panel, .card, .section{
  display:block !important;
  float:none !important;
  clear:both !important;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  margin:12px auto;
  animation: ajxFloatIn .25s ease both;
}

/* Topbar */
.top{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:sticky;
  top:0;
  z-index:9999;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
}

/* Menu container */
.links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.links a, .links button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--text);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.links a:hover, .links button:hover{
  transform:translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--btnGlow);
}

/* Injected UI buttons */
.ajx-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.ajx-menu-btn, .ajx-theme-btn, .ajx-snow-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
.ajx-menu-btn:hover,.ajx-theme-btn:hover,.ajx-snow-btn:hover{
  transform:translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--btnGlow);
}
.ajx-snow-btn.ajx-on{
  animation: ajxPulse 1.6s ease-in-out infinite;
}

/* Forms */
label{display:block; font-weight:800; margin:10px 0 6px}
input, select, textarea{
  width:100%;
  max-width:100%;
  border-radius:14px !important;
  border:1px solid var(--border) !important;
  background: color-mix(in srgb, var(--panel2) 92%, transparent) !important;
  color:var(--text) !important;
  padding:11px 12px !important;
  outline:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* Buttons */
button, .btn, input[type="submit"], input[type="button"], a.btn{
  border-radius:14px !important;
  border:1px solid var(--border) !important;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent)
  ) !important;
  color:var(--text) !important;
  padding:10px 14px !important;
  cursor:pointer !important;
  font-weight:900;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease !important;
}
button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover, a.btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border)) !important;
  box-shadow: var(--btnGlow);
}
button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active, a.btn:active{
  transform: translateY(0) scale(.99);
}

/* Tables wrap */
.table-wrap{width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-top:10px; border:1px solid var(--border); border-radius:16px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); scrollbar-width:thin}
.table-wrap table{
  width:100% !important;
  min-width:680px;
  border-collapse:separate;
  border-spacing:0;
  border:0;
  margin:0;
  background:transparent;
  display:table;
  max-width:none;
}
.table-wrap thead th{
  position:sticky;
  top:0;
  z-index:1;
  background: color-mix(in srgb, var(--panel) 97%, black 3%);
}
.table-wrap th, .table-wrap td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
  white-space:nowrap;
}
.table-wrap td{max-width:320px; overflow-wrap:anywhere}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap th{color:var(--muted); text-align:left; font-weight:900}
.table-wrap tr:hover td{background: color-mix(in srgb, var(--accent) 6%, transparent)}
.table-wrap .btn, .table-wrap button, .table-wrap a.btn{white-space:nowrap}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:transparent}

/* Media */
img, video, canvas, svg, iframe{max-width:100%; height:auto}
pre, code{max-width:100%; overflow:auto}

/* Strong "stack everything" for legacy layouts */
@media (max-width: 1200px){
  .row, .rows, .columns, .cols, .grid, .flex, .flex-row, .container,
  [style*="display:flex"], [style*="display: flex"]{display:block !important}
  .col, .column, [class*="col-"], [class*="column-"], .left, .right{
    width:100% !important; max-width:100% !important; flex:0 0 100% !important; float:none !important;
  }
}

/* Mobile menu */
@media (max-width: 900px){
  body{padding:10px}
  .top{border-radius:14px; margin-bottom:12px}
  .box{padding:12px; border-radius:14px; margin:10px auto}
  .links{display:none}
  .links.ajx-open{display:flex}
}

/* === Progress bars (dias / upload) === */
.ajx-sub{margin-top:6px;max-width:260px}
.ajx-progress{width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.ajx-progress-bar{height:100%;width:0%;background:linear-gradient(90deg, rgba(0,195,255,.9), rgba(0,255,170,.85));border-radius:999px;transition:width .12s ease}
.ajx-upload-msg{margin-top:6px}
.ajx-upload-msg.ok{color:#b8ffd0}
.ajx-upload-msg.err{color:#ffb8b8}

/* Snow canvas */
#ajxSnowCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 9998;
  opacity:.55;
}


/* ===== Hard overflow fix ===== */
html, body { overflow-x: hidden; }
.box, .card, .panel, .container, table { max-width: 100%; }
.table-wrap, .table-responsive, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
table td, table th { word-break: break-word; }
@media (max-width: 900px){
  body { padding: 12px !important; }
  .top, .ajx-top, .ajx-mini-top, .navbar { flex-wrap: wrap !important; gap: 10px !important; }
  .top a, .navbar a { display: inline-flex; }
  .box, .panel, .card { width: 100% !important; min-width: 0 !important; }
  input, select, textarea, button { max-width: 100%; }
}


@media (max-width: 900px){
  .table-wrap{border-radius:14px; margin-top:8px}
  .table-wrap table{min-width:620px}
  .table-wrap th, .table-wrap td{padding:10px 10px; font-size:13px}
}

@media (max-width: 640px){
  .table-wrap{margin-left:-2px; margin-right:-2px; border-radius:12px}
  .table-wrap table{min-width:560px}
  .table-wrap th, .table-wrap td{padding:9px 9px; font-size:12px}
  .table-wrap td{max-width:220px}
  .table-wrap .btn, .table-wrap button, .table-wrap a.btn{padding:7px 10px; font-size:12px}
}


/* === Mobile advanced responsiveness === */
.box, .panel, .card, .section{overflow:visible}
.table-wrap{position:relative}
.table-wrap::after{content:"";display:block;height:1px}
.table-wrap td form, .table-wrap td .toolbar, .table-wrap td [style*="display:flex"], .table-wrap td [style*="display: flex"]{max-width:100%}
.table-wrap td input, .table-wrap td select, .table-wrap td textarea, .table-wrap td button, .table-wrap td .btn{max-width:100%}

@media (max-width: 900px){
  :root{--maxw:100%}
  body{padding:8px}
  .top, .box, body > .box, .container, .wrap, .wrapper, main{max-width:100% !important}
  .box, .panel, .card, .section{padding:12px; border-radius:14px}
  .toolbar, .ajx-actions{gap:8px}
  .toolbar > *, .ajx-actions > *{flex:1 1 180px}
  .toolbar .btn, .toolbar button, .toolbar a, .toolbar input[type="submit"]{width:100%; justify-content:center}
  form[style*="grid-template-columns"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:2fr 1fr auto"],
  [style*="grid-template-columns: 2fr 1fr auto"],
  [style*="grid-template-columns:2fr 2fr auto"],
  [style*="grid-template-columns: 2fr 2fr auto"]{grid-template-columns:minmax(0,1fr) !important}
}

@media (max-width: 700px){
  .top{padding:10px 12px}
  .top > div:first-child{min-width:0}
  .top .links.ajx-open{display:grid;grid-template-columns:1fr; width:100%; margin-top:10px}
  .top{align-items:flex-start; flex-wrap:wrap}
  .ajx-actions{width:100%; justify-content:space-between}
  .ajx-actions .ajx-menu-btn, .ajx-actions .ajx-theme-btn, .ajx-actions .ajx-snow-btn{flex:1 1 0; justify-content:center}

  .table-wrap.mobile-cards{overflow:visible; border:0; background:transparent; box-shadow:none; margin-top:8px}
  .table-wrap.mobile-cards table,
  .table-wrap.mobile-cards thead,
  .table-wrap.mobile-cards tbody,
  .table-wrap.mobile-cards tr,
  .table-wrap.mobile-cards th,
  .table-wrap.mobile-cards td{display:block !important; width:100% !important}
  .table-wrap.mobile-cards table{min-width:0 !important}
  .table-wrap.mobile-cards thead{display:none !important}
  .table-wrap.mobile-cards tbody{display:grid; gap:10px}
  .table-wrap.mobile-cards tr{
    border:1px solid var(--border);
    border-radius:14px;
    padding:6px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: var(--shadow);
  }
  .table-wrap.mobile-cards td{
    white-space:normal !important;
    max-width:none !important;
    border-bottom:1px solid color-mix(in srgb, var(--border) 90%, transparent);
    padding:10px 10px 10px 44% !important;
    min-height:42px;
    position:relative;
    text-align:left;
    overflow-wrap:anywhere;
  }
  .table-wrap.mobile-cards td:last-child{border-bottom:0}
  .table-wrap.mobile-cards td::before{
    content:attr(data-label);
    position:absolute;
    left:10px;
    top:10px;
    width:38%;
    color:var(--muted);
    font-weight:800;
    font-size:12px;
    line-height:1.25;
    white-space:normal;
  }
  .table-wrap.mobile-cards td[data-label=""]{padding-left:10px !important}
  .table-wrap.mobile-cards td[data-label=""]::before{display:none}
  .table-wrap.mobile-cards td form,
  .table-wrap.mobile-cards td .toolbar,
  .table-wrap.mobile-cards td [style*="display:flex"],
  .table-wrap.mobile-cards td [style*="display: flex"]{display:grid !important; grid-template-columns:1fr !important; width:100% !important; min-width:0 !important}
  .table-wrap.mobile-cards td button,
  .table-wrap.mobile-cards td .btn,
  .table-wrap.mobile-cards td a.btn,
  .table-wrap.mobile-cards td input,
  .table-wrap.mobile-cards td select,
  .table-wrap.mobile-cards td textarea{width:100% !important; min-width:0 !important}
  .table-wrap.mobile-cards td > .muted, .table-wrap.mobile-cards td code{display:inline-block; max-width:100%}

  .box .table-wrap + .table-wrap{margin-top:10px}
}

@media (max-width: 420px){
  body{padding:6px}
  .box, .panel, .card, .section{padding:10px; border-radius:12px}
  .table-wrap.mobile-cards td{padding-left:10px !important; padding-top:30px !important}
  .table-wrap.mobile-cards td::before{position:static; display:block; width:auto; margin-bottom:6px}
}