/* =========================================================
   DicomSend | Share a study
   - Dark glass UI, accent red
   - Study grid + verify overlay + upload progress + success list
   - DataTable styles (if used)
   ========================================================= */


/* =========================================================
   Tokens
   ========================================================= */
:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --bg2:#0F1A2E;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);

  --text:#F8FAFC;
  --muted: rgba(248,250,252,.65);

  --accent:#e51b48;
  --accent2:#ff3b6a;
  --good:#22c55e;
  --warn:#f59e0b;

  --r: 18px;
  --rs: 14px;

  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --shadow2: 0 14px 40px rgba(0,0,0,.38);
}


/* =========================================================
   Base
   ========================================================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg0), var(--bg1), var(--bg2));
  overflow: auto;
  user-select: none;
}

/* Remove default focus ring (you’re managing focus styles yourself) */
*:focus,
*:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}


/* =========================================================
   App shell + top bar
   ========================================================= */
.shell{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 18px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brandline{
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 240px;
}

.brandline img{
  width: 100px;
  height: auto;
  display: block;
}

.brandline .sub{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brandline .sub strong{
  font-size: 13px;
  letter-spacing: .02em;
}

.brandline .sub span{
  font-size: 12px;
  color: var(--muted);
}


/* =========================================================
   Layout containers
   ========================================================= */
.page{
  width: 100%;
  margin: 0;
  padding: 18px 16px 24px;

  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 16px;
  flex: 1;
}

.panel{
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.panel .bd{
  padding: 16px;
}


/* =========================================================
   Left panel: form controls
   ========================================================= */
.kicker{
  margin: 2px 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  font-weight: 900;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.input{
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  color: rgba(255,255,255,.92);
}
.input::placeholder{ color: rgba(255,255,255,.42); }

.check{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);

  margin-bottom: 12px;
}
.check label{ margin: 0; }
.check input{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}


/* =========================================================
   Dropzone + file picker
   ========================================================= */
#filepicker2{ display: none; }
#filepicker2_{ display: none; } /* you trigger it via dropzone click */

.dropzone{
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  padding: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dropzone .left{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dropzone .title{
  font-weight: 950;
  font-size: 13px;
}

.dropzone .sub{
  font-size: 12px;
  color: var(--muted);
}

.dropzone .pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

.dropzone.dragover{
  border-color: rgba(255,59,106,.70);
  background: rgba(229,27,72,.12);
  box-shadow: 0 0 0 4px rgba(229,27,72,.18);
}

.help{
  margin: 8px 0 0;
  padding: 5px;

  font-size: 11px;
  color: rgba(255,255,255,.60);
  line-height: 1.35;
}

#send{
  margin-top: 12px;
  width: 100%;
  padding: 12px;

  border-radius: 14px;
  border: none;

  color: white;
  font-weight: 950;
  letter-spacing: .02em;

  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 40px rgba(229,27,72,.22);
}
#send:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}


/* Left panel progress */
.side-progress{
  display: none; /* shown by JS */
  margin-top: 12px;
  padding: 10px 12px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.side-progress .progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.side-progress .progress-bar{
  width: 0%;
  transition: width .2s ease;
}

.side-progress .pct{
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.78);
}


/* =========================================================
   Right panel: workspace + placeholder
   ========================================================= */
.workspace{
  display: flex;
  flex-direction: column;
}

.workspace .toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}

.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);

  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.82);
}

.badge-soft .b{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 6px rgba(245,158,11,.12);
}

.workspace .stage{
  position: relative;
  flex: 1;
  overflow: hidden;
}


/* Placeholder */
.main-placeholder{
  position: absolute;
  inset: 16px;

  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(0,0,0,.16);

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,.70);
  padding: 18px;
}

.main-placeholder .ph{
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.main-placeholder .ph strong{
  font-size: 16px;
  font-weight: 950;
}

.main-placeholder .ph span{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* Placeholder step guide */
.ph-steps{
  align-items: stretch;
  text-align: left;
}

.ph-steps > strong{
  text-align: center;
  font-size: 18px;
}

.ph-sub{
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.steps{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.steps li{
  display: flex;
  gap: 12px;
  align-items: flex-start;

  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.step-num{
  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 13px;
  color: white;

  background: linear-gradient(135deg, var(--accent), var(--accent2));
  flex-shrink: 0;
}

.steps strong{
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 2px;
}

.steps span{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}


/* =========================================================
   Study grid (cards)
   ========================================================= */
.study-grid{
  position: relative; /* required for scan overlay */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
}

.study-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 14px;

  cursor: pointer;
  transition: border .15s ease, box-shadow .15s ease;
}

.study-card:hover{
  border-color: rgba(229,27,72,.45);
}

.study-card.selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229,27,72,.25);
}

.study-title{
  font-weight: 950;
  font-size: 15px;
}

.study-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.study-meta{
  margin-top: 10px;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.study-pill{
  display: inline-block;
  font-weight: 900;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.files-count-div{
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.sel-pill{
  margin-left: auto;
  color: var(--accent);
  font-weight: normal !important;
}


/* =========================================================
   Study grid scanning overlay (spinner centered)
   ========================================================= */
#grid-scan.grid-scan{
  position: absolute;
  inset: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;

  border-radius: 16px;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(1px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .15s ease, visibility .15s ease;
}

.study-grid.is-scanning #grid-scan{
  opacity: 1;
  visibility: visible;
  pointer-events: all; /* blocks clicks */
}

.grid-scan .spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.55);
  animation: spin .9s linear infinite;
}

.grid-scan .txt{
  font-size: 12px;
  font-weight: 900;
  color: rgba(248,250,252,.72);
  text-align: center;
}

@keyframes spin{ to { transform: rotate(360deg); } }


/* =========================================================
   DataTable (Professional grid)
   ========================================================= */
#import-table_wrapper{
  position: absolute;
  inset: 0;
  padding: 12px;

  overflow: auto;
  display: none;
  background: rgba(0,0,0,.10);

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

#import-table_wrapper::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

#import-table_wrapper::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#import-table{
  width: 100% !important;
  margin: 0 !important;

  border-collapse: collapse !important;
  border-spacing: 0 !important;

  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px;
  overflow: hidden;
}

/* Header */
#import-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;

  background: rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.85) !important;

  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 900;

  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
#import-table thead th:last-child{ border-right: none !important; }

/* Rows + cells */
#import-table tbody tr{
  background: transparent !important;
  border: none !important;
}

#import-table tbody td{
  padding: 10px 12px !important;
  color: rgba(255,255,255,.90) !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

#import-table tbody tr:hover{
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* Column emphasis */
#import-table tbody td:nth-child(2){
  font-weight: 700;
  color: rgba(255,255,255,.95) !important;
}
#import-table tbody td:nth-child(3){
  font-weight: 900;
  letter-spacing: .04em;
}
#import-table tbody td:nth-child(6){
  text-align: center !important;
  font-weight: 900;
  color: rgba(255,255,255,.85) !important;
}

#import-table thead th.col-selected{
  width: 90px;
  text-align: center !important;
}
#import-table tbody td.col-selected{
  text-align: center !important;
  font-weight: 900;
}

/* Empty table */
.dataTables_empty{
  padding: 14px !important;
  color: rgba(255,255,255,.70) !important;
  text-align: center !important;
}


/* =========================================================
   Upload progress overlay
   ========================================================= */
#upload-progress-div{
  position: absolute;
  inset: 16px;
  display: none;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  background-size: cover;
  background-position: center;

  box-shadow: var(--shadow2);
  padding: 18px;

  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-direction: column;

  isolation: isolate;
}

#upload-progress-div::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
  z-index: 0;
}

#upload-progress-div > *{
  position: relative;
  z-index: 1;
}

#per{
  margin: 0;
  font-size: 36px;
  font-weight: 950;
}

.progress-wrap{
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.progress-bar{
  width: 0%;
  transition: width .2s ease;
}

#progress-text{
  display: none;
  color: rgba(255,255,255,.70) !important;
}


/* =========================================================
   Verify overlay (professional)
   ========================================================= */
#verify-div{
  position: absolute;
  inset: 16px;
  display: none;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(900px 380px at 50% 0%, rgba(229,27,72,.22), transparent 65%),
    radial-gradient(700px 300px at 10% 20%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.26);

  backdrop-filter: blur(14px);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;

  padding: 26px 22px;

  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-direction: column;

  text-align: center;
}

#verify-div::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
  pointer-events: none;
}

#verify-div > *{
  position: relative;
  z-index: 1;
}

#verify-div .info{
  margin: 0;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
}

#verify-div #info{
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.70);
  margin-top: -8px;
}

#timer{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(229,27,72,.14);
  border: 1px solid rgba(229,27,72,.28);

  color: rgba(255,255,255,.90);
  font-weight: 950;
}

.vcode{
  display: flex;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.vcode-input{
  width: 52px;
  height: 60px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);

  color: rgba(255,255,255,.95);
  font-size: 22px;
  font-weight: 950;
  text-align: center;

  -webkit-appearance: none;
  appearance: none;

  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.vcode-input:focus{
  border-color: rgba(255,59,106,.75);
  box-shadow: 0 0 0 4px rgba(229,27,72,.20);
  transform: translateY(-1px);
}

.vcode-input::selection{ background: rgba(229,27,72,.35); }

#verify{
  width: min(360px, 92%);
  padding: 12px 16px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);

  color: white;
  font-weight: 950;
  letter-spacing: .02em;

  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 40px rgba(229,27,72,.22);

  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

#verify:hover{
  filter: brightness(1.03);
  box-shadow: 0 22px 52px rgba(229,27,72,.26);
}

#verify:active{
  transform: translateY(1px);
}

#expired_p,
#expired_p-2{
  display: none;
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

#expired_a{
  font-weight: 900;
  text-decoration: none;
}
#expired_a:hover{
  cursor: pointer;
  text-decoration: underline;
}


/* =========================================================
   Success screen + list
   ========================================================= */
#study-list{
  position: absolute;
  inset: 0;
  display: none;

  align-items: center;
  justify-content: center;
  padding: 16px;

  overflow: hidden;
  background-size: cover;
  background-position: center;

  border-radius: 0 0 var(--r) var(--r);
}

#study-list::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.78));
}

#uploaded-studies{
  position: relative;
  z-index: 2;

  width: min(840px, 94%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);

  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);

  box-shadow: var(--shadow);
  padding: 22px;

  display: none;
  flex-direction: column;
  gap: 14px;
}

#uploaded-studies h2{
  margin: 0;
  font-size: 24px;
  font-weight: 950;
}

#uploaded-studies h2::after{
  content: "Files uploaded successfully. You can safely close this tab or send more.";
  display: block;
  margin-top: 6px;

  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

#list{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 10px;

  max-height: 360px;
  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

#list li{
  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);

  display: flex;
  gap: 10px;
  align-items: baseline;

  font-weight: 900;
}

#list li::before{
  content:"✓";
  width: 22px;
  height: 22px;

  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(34,197,94,.86);
  border: 1px solid rgba(255,255,255,.14);
}

#list .list-light{
  margin-left: auto;
  max-width: 55%;

  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.70);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reset{
  width: 100%;
  padding: 12px 14px;

  border-radius: 14px;
  border: 1px solid rgba(229,27,72,.30);
  background: rgba(229,27,72,.12);

  color: rgba(255,255,255,.95);
  font-weight: 950;
}


/* =========================================================
   Email status notice (inside success card)
   ========================================================= */
.notice{
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);

  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.notice .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;

  margin-top: 4px;
  flex-shrink: 0;

  background: rgba(255,255,255,.45);
  box-shadow: 0 0 0 6px rgba(255,255,255,.08);
}

.notice .txt{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.notice strong{
  font-size: 13px;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}

.notice span{
  font-size: 12px;
  color: rgba(248,250,252,.70);
  line-height: 1.35;
}

/* Variants */
.notice.success{
  border-color: rgba(34,197,94,.28);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(34,197,94,.16), transparent 60%),
    rgba(0,0,0,.18);
}
.notice.success .dot{
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}

.notice.error{
  border-color: rgba(229,27,72,.30);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(229,27,72,.18), transparent 60%),
    rgba(0,0,0,.18);
}
.notice.error .dot{
  background: rgba(229,27,72,.95);
  box-shadow: 0 0 0 6px rgba(229,27,72,.16);
}

.notice.info{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

/* Retry button inside notice */
.notice-btn{
  margin-top: 8px;
  align-self: flex-start;

  padding: 6px 10px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);

  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
  transition: background .15s ease, transform .08s ease, border-color .15s ease;
}

.notice-btn:hover{ background: rgba(255,255,255,.10); }
.notice-btn:active{ transform: translateY(1px); }

.notice.error .notice-btn{
  border-color: rgba(229,27,72,.35);
  background: rgba(229,27,72,.14);
}
.notice.error .notice-btn:hover{
  background: rgba(229,27,72,.22);
}

.kb-sub{
  display:block;
  margin-top:6px;
  opacity:.75;
  font-size:12px;
  line-height:1.2;
}



/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .page{ grid-template-columns: 1fr; }
  .workspace{ height: 70vh; }
}

@media (max-width: 480px){
  .vcode{ gap: 8px; padding: 10px; }
  .vcode-input{ width: 46px; height: 56px; border-radius: 14px; }
}