/* ============================================================
   DDSOC Storage Portal — components the dashboard didn't need
   (nav, forms, tables, buttons, flashes, auth layout).
   Built ONLY from the tokens in ddsoc.css (:root). Load after it.
============================================================ */

/* App shell is revealed by ddsoc.js adding .ready (same fade as dashboard). */
.no-js #app{opacity:1;transform:none;}

/* per-card sweep delays (dashboard used inline style=; CSP forbids that) */
.card-grid > .card:nth-child(6n+1){--sweep-delay:0s;}
.card-grid > .card:nth-child(6n+2){--sweep-delay:.8s;}
.card-grid > .card:nth-child(6n+3){--sweep-delay:1.6s;}
.card-grid > .card:nth-child(6n+4){--sweep-delay:2.4s;}
.card-grid > .card:nth-child(6n+5){--sweep-delay:3.2s;}
.card-grid > .card:nth-child(6n+6){--sweep-delay:4s;}
aside.side > .widget:nth-child(2){--sweep-delay:1.1s;}
aside.side > .widget:nth-child(3){--sweep-delay:1.9s;}
aside.side > .widget:nth-child(4){--sweep-delay:2.7s;}

/* ---------- header additions ---------- */
.brand{color:inherit;}
.user-pill{
  display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:999px;
  background:var(--accent2-faint);border:1px solid rgba(0,212,255,.28);
}
.user-pill .who{font-size:12px;color:var(--text-soft);letter-spacing:.4px;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-pill .role{font-family:var(--font-display);font-size:9px;letter-spacing:2px;color:var(--accent2);}
.user-pill form{display:inline;}

nav.portal-nav{
  max-width:2200px;margin:0 auto;padding:0 clamp(16px,2.4vw,44px);
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
}
nav.portal-nav::-webkit-scrollbar{display:none;}
nav.portal-nav a{
  position:relative;display:flex;align-items:center;gap:8px;flex:none;
  padding:11px 16px 13px;font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);
  transition:color .25s ease;
}
nav.portal-nav a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
nav.portal-nav a:hover{color:var(--text-soft);}
nav.portal-nav a.active{color:var(--accent);}
nav.portal-nav a.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:var(--glow-soft);
}

/* ---------- page heading ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:30px 0 6px;}
.page-head h2{font-family:var(--font-display);font-size:clamp(18px,1.8vw,24px);font-weight:700;letter-spacing:3px;}
.page-head p{color:var(--muted);font-size:13px;margin-top:6px;letter-spacing:.3px;}
.page-head .crumbs{font-family:var(--font-display);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.page-head .crumbs a{color:var(--muted);}
.page-head .crumbs a:hover{color:var(--accent);}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.content{padding-top:18px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--text-soft);background:rgba(255,255,255,.02);
  transition:border-color .25s,color .25s,background .25s,box-shadow .25s,transform .25s var(--easing);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.btn:hover{border-color:rgba(0,255,136,.45);color:var(--accent);background:var(--accent-faint);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn.primary{
  color:#04140C;border-color:transparent;
  background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:var(--glow-soft);
}
.btn.primary:hover{color:#04140C;box-shadow:var(--glow);}
.btn.danger:hover{border-color:var(--crit-dim);color:var(--crit);background:rgba(255,59,78,.08);}
.btn.warn:hover{border-color:var(--warn-dim);color:var(--warn);background:rgba(255,176,32,.08);}
.btn.sm{padding:6px 11px;font-size:9.5px;letter-spacing:1.6px;}
.btn.ghost{border-color:transparent;background:none;}
.btn.block{width:100%;}

/* ---------- panel (glass container for tables/forms) ---------- */
.panel{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:rise .6s var(--easing) both;
}
.panel::before{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-dim),transparent);
  animation:sweep 7s linear infinite;
}
.panel-pad{padding:22px 24px;}
.panel + .panel,.panel + .zone,.zone + .panel{margin-top:22px;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{
  text-align:left;padding:14px 18px;font-family:var(--font-display);font-size:9.5px;font-weight:600;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
table.data td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text-soft);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data tbody tr{transition:background .2s ease;}
table.data tbody tr:hover{background:rgba(0,255,136,.03);}
table.data td.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
table.data td.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;}
table.data td.right,table.data th.right{text-align:right;}
table.data td .actions{justify-content:flex-end;}
table.data a.file{color:var(--text);word-break:break-all;}
table.data a.file:hover{color:var(--accent);}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.4px;}
.empty b{color:var(--accent);font-weight:500;}

/* chips reuse ddsoc .chip; add states */
.chip.warn{background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.3);color:var(--warn);}
.chip.warn .dot{background:var(--warn);box-shadow:0 0 7px var(--warn);}
.chip.crit{background:rgba(255,59,78,.08);border:1px solid rgba(255,59,78,.3);color:var(--crit);}
.chip.crit .dot{background:var(--crit);box-shadow:0 0 7px var(--crit);}
.chip.muted{background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--muted);}
.chip.muted .dot{background:var(--muted);}
.chip.sm{padding:3px 10px;font-size:9px;letter-spacing:1.6px;}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:18px;}
.field label{
  display:block;margin-bottom:8px;font-family:var(--font-display);font-size:10px;font-weight:600;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);
}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field textarea,.field input[type=file]{
  width:100%;padding:13px 15px;border-radius:var(--radius-sm);
  background:rgba(5,7,10,.55);border:1px solid var(--line-strong);color:var(--text);
  font:inherit;font-size:15px;letter-spacing:.3px;outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field textarea:focus{border-color:rgba(0,255,136,.5);box-shadow:var(--glow-soft);}
.field input[type=file]{padding:11px;color:var(--text-soft);}
.field input[type=file]::file-selector-button{
  margin-right:14px;padding:7px 14px;border-radius:8px;border:1px solid var(--line-strong);
  background:var(--accent-faint);color:var(--accent);font-family:var(--font-display);font-size:10px;letter-spacing:1.6px;cursor:pointer;
}
.field .hint{margin-top:7px;font-size:12px;color:var(--muted);}
.field .hint.error{color:#FF7482;}
.field:has(.hint.error) input{border-color:var(--crit-dim);}
.field.otp input{font-family:var(--font-display);font-size:26px;letter-spacing:12px;text-align:center;}

/* ---------- flashes ---------- */
.flashes{display:grid;gap:10px;padding-top:22px;}
.flash{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13.5px;border:1px solid var(--line-strong);background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:rise .5s var(--easing) both;
}
.flash::before{content:"";width:8px;height:8px;flex:none;transform:rotate(45deg);background:var(--accent2);}
.flash.success{border-color:rgba(0,255,136,.3);color:var(--accent);}
.flash.success::before{background:var(--accent);box-shadow:0 0 8px var(--accent);}
.flash.info{border-color:rgba(0,212,255,.3);color:var(--accent2);}
.flash.warning{border-color:rgba(255,176,32,.3);color:var(--warn);}
.flash.warning::before{background:var(--warn);}
.flash.danger{border-color:rgba(255,59,78,.35);color:#FF7482;}
.flash.danger::before{background:var(--crit);}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:calc(100vh - 44px);display:grid;place-items:center;padding:40px 16px 60px;}
.auth-card{width:min(440px,100%);}
.auth-card.wide{width:min(560px,100%);}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:26px;text-align:center;}
.auth-brand .brand-mark{width:64px;height:64px;}
.auth-brand .brand-mark svg{width:32px;height:32px;}
.auth-brand h1{
  font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:7px;line-height:1;
  background:linear-gradient(90deg,#fff 0%,var(--accent) 55%,var(--accent2) 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:titleSheen 7s ease-in-out infinite;
}
.auth-brand p{font-size:11px;letter-spacing:3.4px;text-transform:uppercase;color:var(--muted);}
.auth-card .panel-pad{padding:30px 30px 26px;}
.auth-card h2{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--text-soft);margin-bottom:20px;}
.auth-foot{margin-top:18px;text-align:center;font-size:13px;color:var(--muted);}
.auth-foot a{color:var(--accent2);}
.auth-foot a:hover{color:var(--accent);}
.qr-box{display:grid;place-items:center;margin:4px 0 18px;}
.qr-box img{width:208px;height:208px;border-radius:12px;padding:8px;background:#fff;box-shadow:0 0 0 1px rgba(0,255,136,.35),var(--glow);image-rendering:pixelated;}
.secret{
  display:block;text-align:center;padding:12px;border-radius:var(--radius-sm);margin-bottom:20px;
  background:rgba(5,7,10,.55);border:1px dashed rgba(0,255,136,.3);color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;letter-spacing:2px;word-break:break-all;
}
.steps{counter-reset:s;display:grid;gap:10px;margin-bottom:22px;font-size:13.5px;color:var(--text-soft);}
.steps li{list-style:none;display:flex;gap:12px;align-items:flex-start;}
.steps li::before{
  counter-increment:s;content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-size:10px;font-weight:700;
  color:var(--accent);border:1px solid rgba(0,255,136,.35);background:var(--accent-faint);
}

/* ---------- one-time API key reveal ---------- */
.keybox{
  display:flex;align-items:stretch;gap:0;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid rgba(0,255,136,.4);box-shadow:var(--glow-soft);margin:16px 0 12px;
}
.keybox code{
  flex:1;padding:16px 18px;background:rgba(5,7,10,.7);color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.6px;word-break:break-all;
}
.keybox .btn{border-radius:0;border:none;border-left:1px solid rgba(0,255,136,.3);}
.callout{
  padding:14px 16px;border-radius:var(--radius-sm);font-size:13px;line-height:1.6;
  border:1px solid rgba(255,176,32,.3);background:rgba(255,176,32,.06);color:#FFD27A;
}
.callout.info{border-color:rgba(0,212,255,.3);background:var(--accent2-faint);color:var(--text-soft);}
pre.code{
  margin-top:12px;padding:16px 18px;border-radius:var(--radius-sm);overflow-x:auto;
  background:rgba(5,7,10,.7);border:1px solid var(--line-strong);color:var(--text-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65;
}
dl.meta{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;font-size:13.5px;}
dl.meta dt{font-family:var(--font-display);font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);padding-top:3px;}
dl.meta dd{color:var(--text-soft);overflow-wrap:anywhere;}
.mt{margin-top:18px;}

/* ---------- error page ---------- */
.err-code{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,9vw,110px);letter-spacing:10px;
  color:var(--accent);text-shadow:0 0 24px rgba(0,255,136,.6),0 0 70px rgba(0,255,136,.25);line-height:1;}

/* page layout for list + sidebar reuses .layout from ddsoc.css;
   min-width:0 stops wide tables stretching the 1fr column on phones */
.layout > main,.layout > aside{min-width:0;}
@media (max-width:720px){
  .user-pill .who{max-width:140px;}
  table.data th,table.data td{padding:11px 12px;}
  .hide-sm{display:none;}
}

/* ---------- policy bar (retention / encryption notice under the nav) ---------- */
.policy-bar{
  max-width:2200px;margin:0 auto;padding:8px clamp(16px,2.4vw,44px);
  display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-soft);
}
.policy-item{display:inline-flex;align-items:center;gap:8px;letter-spacing:.3px;}
.policy-item svg{width:14px;height:14px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.policy-item.warn svg{stroke:var(--warn);} .policy-item.warn b{color:var(--warn);font-weight:500;}
.policy-item.ok svg{stroke:var(--accent);}

/* ---------- encrypted marker ---------- */
.lock{display:inline-flex;vertical-align:-2px;margin-left:6px;}
.lock svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.8;}

/* ---------- danger zone ---------- */
.panel.danger-zone{border-color:rgba(255,59,78,.25);}
.panel.danger-zone::before{background:linear-gradient(90deg,transparent,var(--crit-dim),transparent);}
.dz-row{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 24px;}
.dz-row + .dz-row{border-top:1px solid var(--line);}
.dz-row h3{font-family:var(--font-display);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#FF7482;margin-bottom:6px;}
.dz-row p{font-size:13px;color:var(--muted);max-width:560px;}
.dz-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.dz-form input{
  width:260px;max-width:100%;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(5,7,10,.55);
  border:1px solid var(--line-strong);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;outline:none;
}
.dz-form input:focus{border-color:var(--crit-dim);}
.btn[disabled]{opacity:.4;pointer-events:none;}
.ack{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--warn);}
.ack input{margin-top:3px;accent-color:var(--warn);}

/* filter inputs inside .search-box (ddsoc.css only styles #search) */
.search-box input[type=text]{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:15px;padding:16px 8px;letter-spacing:.4px;
}
.search-box input[type=text]::placeholder{color:var(--muted);}
.field input[type=number]{max-width:200px;}

/* ---------- audit filters / selects / checkboxes ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:22px 0 4px;}
.filter-bar select,.filter-bar input[type=text],.field select{
  padding:10px 12px;border-radius:var(--radius-sm);background:rgba(5,7,10,.55);border:1px solid var(--line-strong);
  color:var(--text);font:inherit;font-size:14px;outline:none;
}
.filter-bar input[type=text]{flex:1;min-width:200px;}
.field select{width:100%;padding:13px 15px;font-size:15px;}
.filter-bar select:focus,.filter-bar input:focus,.field select:focus{border-color:rgba(0,255,136,.5);}
select option{background:var(--bg-raised);color:var(--text);}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:720px){.form-2col{grid-template-columns:1fr;}}
.check{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--text-soft);}
.check input{accent-color:var(--accent);width:16px;height:16px;}
.detail-cell{max-width:420px;overflow-wrap:anywhere;font-size:11.5px;color:var(--muted);}