/* File: countdown-builder/css/app.css
   Compact, neutral, professional UI:
   - No blue theme
   - Less round
   - Less padding
   - Buttons smaller
   - Not ultra-dark
   - Output textareas wrap long lines (no sideways scroll for huge lines)
*/

:root{
  /* Lightened neutral dark (not OLED-black) */
  --bg:#14171c;
  --panel:#1b2028;
  --panel2:#171b22;
  --stroke:rgba(255,255,255,0.10);
  --stroke2:rgba(255,255,255,0.07);

  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.62);
  --muted2:rgba(255,255,255,0.46);

  /* Tighter geometry */
  --radius:6px;
  --radius2:5px;

  /* Tight spacing */
  --gap:10px;
  --pad:10px;
  --topbar-h:52px;

  /* Neutral accent (not blue) */
  --accent:rgba(255,255,255,0.20);
  --accent2:rgba(255,255,255,0.12);

  --focus:rgba(255,255,255,0.30);
  --focusRing:rgba(255,255,255,0.10);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}

/* Topbar */
.dc-topbar{
  height:var(--topbar-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 12px;
  border-bottom:1px solid var(--stroke);
  background:var(--panel2);
}
.dc-brand-title{font-weight:800;font-size:12px;letter-spacing:0.2px;}
.dc-brand-sub{margin-top:1px;font-size:11px;color:var(--muted);}

.dc-project-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.dc-topbar-center{justify-self:center;width:min(1020px,100%);}
.dc-topbar-right{justify-self:end;}

/* Layout shell */
.dc-shell{
  height:calc(100vh - var(--topbar-h));
  display:grid;
  grid-template-columns:340px 1fr 430px;
  gap:var(--gap);
  padding:var(--gap);
  overflow:hidden;
}

/* Closed rails */
body.dc-left-closed .dc-shell{grid-template-columns:52px 1fr 430px;}
body.dc-right-closed .dc-shell{grid-template-columns:340px 1fr 52px;}
body.dc-left-closed.dc-right-closed .dc-shell{grid-template-columns:52px 1fr 52px;}

/* Asides */
.dc-panel,
.dc-output{
  overflow:hidden;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  background:var(--panel);
  position:relative;
  overflow: auto;
}

.dc-panel{display:block;}
.dc-panel::-webkit-scrollbar{width:10px;height:10px;}
.dc-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:999px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;}

/* Aside header bar */
.dc-asidebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  background:var(--panel2);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.dc-asidebar-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.82);
}
.dc-asidebar-actions{display:flex;align-items:center;gap:8px;}

/* Open rail button (shows only when closed) */
.dc-railbtn{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  height:34px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.88);
  border-radius:6px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.dc-railbtn:hover{background:rgba(255,255,255,0.09);}
.dc-hide{display:none !important;}

/* Collapse content visibility */
body.dc-left-closed .dc-panel > :not(#btn-controls-open){display:none;}
body.dc-left-closed .dc-panel #btn-controls-open{display:block;}
body.dc-right-closed .dc-output > :not(#btn-output-open){display:none;}
body.dc-right-closed .dc-output #btn-output-open{display:block;}

/* Cards */
.dc-card{
  border-top:1px solid rgba(255,255,255,0.06);
  margin:0;
}
.dc-card + .dc-card{margin-top:10px;}
.dc-card[data-tier="1"]{background:rgba(255,255,255,0.03);}
.dc-card[data-tier="2"]{background:rgba(255,255,255,0.02);}
.dc-card[data-tier="3"]{background:transparent;border-top-color:rgba(255,255,255,0.05);}

.dc-card-hd{
  padding:10px 10px 8px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.dc-card-title{font-size:10px;font-weight:900;letter-spacing:0.8px;text-transform:uppercase;}
.dc-card-note{font-size:11px;color:var(--muted);}
.dc-card-bd{padding:10px;}

/* Form */
.dc-label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;}
.dc-label-inline{font-size:11px;color:var(--muted);}

.dc-input,.dc-select,.dc-textarea{
  width:100%;
  color:var(--text);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius2);
  padding:8px 9px;
  outline:none;
}
.dc-input-sm{padding:8px 9px;min-width:240px;}
.dc-select{padding:8px 9px;}
.dc-select-sm{padding:7px 9px;min-width:170px;}

.dc-input::placeholder,.dc-textarea::placeholder{color:rgba(255,255,255,0.35);}
.dc-input:focus,.dc-select:focus,.dc-textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px var(--focusRing);
}

.dc-fieldblock{margin-bottom:10px;}

.dc-input-row{display:grid;grid-template-columns:auto 1fr;align-items:stretch;}
.dc-prefix{
  display:flex;align-items:center;
  padding:0 9px;
  border:1px solid rgba(255,255,255,0.14);
  border-right:none;
  border-radius:var(--radius2) 0 0 var(--radius2);
  color:rgba(255,255,255,0.70);
  background:rgba(255,255,255,0.03);
  font-size:11px;
  white-space:nowrap;
}
.dc-input-row .dc-input{border-radius:0 var(--radius2) var(--radius2) 0;}

/* Buttons (smaller, less round) */
.dc-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border-radius:6px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.dc-btn:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);}
.dc-btn:active{transform:translateY(1px);}
.dc-btn:focus{outline:none;box-shadow:0 0 0 3px var(--focusRing);border-color:var(--focus);}

.dc-btn-primary{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
}

.dc-btn-sm{padding:6px 9px;font-size:10.5px;}

/* Icon close button */
.dc-iconbtn{
  width:30px;height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.88);
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.dc-iconbtn:hover{background:rgba(255,255,255,0.10);}

.dc-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.dc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.dc-mt-10{margin-top:10px;}
.dc-mt-8{margin-top:8px;}

.dc-divider{height:1px;background:rgba(255,255,255,0.08);margin:10px 0;}
.dc-hint{font-size:11px;color:var(--muted2);line-height:1.35;}

.dc-check{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,0.80);font-size:11px;user-select:none;}
.dc-check input{transform:translateY(1px);}

.dc-status{
  font-size:11px;color:var(--muted);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
}

.dc-inline-error{margin-top:6px;font-size:11px;color:rgba(255,140,140,0.92);min-height:14px;}

.dc-field{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:6px;
  padding:9px;
  background:rgba(255,255,255,0.03);
}
.dc-field-label{font-size:10px;color:var(--muted);margin-bottom:6px;}
.dc-field-value{font-size:11px;font-weight:900;color:rgba(255,255,255,0.88);}

/* Segment tabs */
.dc-seg{
  display:flex;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
}
.dc-seg-btn{
  flex:1;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.72);
  padding:8px 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.dc-seg-btn:hover{background:rgba(255,255,255,0.05);}
.dc-seg-btn.is-active{color:var(--text);background:rgba(255,255,255,0.08);}

/* Preview */
.dc-preview{
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.10);
  background:#1a1f27;
}
.dc-preview-hd{
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:var(--panel2);
}
.dc-preview-title{font-size:11px;font-weight:900;letter-spacing:0.2px;}
.dc-preview-tools{display:flex;align-items:center;gap:8px;}

.dc-stage-outer{height:100%;padding:12px;overflow:auto;}
.dc-stage-outer::-webkit-scrollbar{width:10px;height:10px;}
.dc-stage-outer::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:999px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;}

.dc-stage{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  background:rgba(255,255,255,0.02);
}
.dc-stage.is-mobile{min-height:620px;}
.dc-stage.is-tablet{min-height:420px;}
.dc-stage.is-desktop{min-height:420px;}

.dc-stage-bg{width:100%;}
.dc-clock{
  position:absolute;
  z-index:3;
  user-select:none;
  touch-action:none;
}

.dc-days{
  position:absolute;
  z-index:4;
  user-select:none;
  touch-action:none;
}
.dc-days-inner{display:flex;align-items:flex-end;justify-content:center;}
.dc-days-unit{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.dc-days.is-label-side .dc-days-unit{flex-direction:row;gap:0.35em;align-items:baseline;}
.dc-days.is-label-side .dc-lbl{margin-top:0;}

.dc-clock-row{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;}
.dc-unit{flex:1;text-align:center;}
.dc-num{line-height:1;}
.dc-lbl{line-height:1.05;}

.dc-resize-handle{
  position:absolute;
  width:14px;height:14px;
  right:-2px;bottom:-2px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,0.30);
  background:rgba(255,255,255,0.10);
  cursor:nwse-resize;
}

/* Output */
.dc-output{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
.dc-tabs{
  display:flex;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.dc-tab{
  flex:1;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.70);
  padding:8px 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.dc-tab:hover{background:rgba(255,255,255,0.05);}
.dc-tab.is-active{color:var(--text);background:rgba(255,255,255,0.08);}

.dc-output-bd{padding:10px;height:100%;overflow:hidden;}

/* CRITICAL: output wraps long lines so it doesn’t blow out horizontally */
.dc-textarea{
  min-height:520px;
  resize:none;
  line-height:1.35;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  overflow:auto;
}

@media (max-width: 1200px){
  .dc-shell{grid-template-columns:320px 1fr 400px;}
  body.dc-left-closed .dc-shell{grid-template-columns:52px 1fr 400px;}
  body.dc-right-closed .dc-shell{grid-template-columns:320px 1fr 52px;}
}
@media (max-width: 980px){
  body{overflow:auto;}
  .dc-shell{height:auto;grid-template-columns:1fr;}
  .dc-textarea{min-height:360px;}
}

/* Image library under Output */
.dc-imglib{
  margin-top:10px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:grid;
  grid-template-rows:auto auto 1fr;
  min-height:240px;
}
.dc-imglib-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.dc-imglib-title{font-size:11px;font-weight:900;letter-spacing:0.2px;}
.dc-imglib-list{
  margin-top:10px;
  overflow:auto;
  max-height:320px;
  padding-right:2px;
}
.dc-imglib-list::-webkit-scrollbar{width:10px;height:10px;}
.dc-imglib-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:999px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;}

.dc-imgcard{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:10px;
  padding:9px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:6px;
  background:rgba(255,255,255,0.03);
  margin-bottom:10px;
}
.dc-imgthumb{
  width:78px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.20);
}
.dc-imgthumb img{width:100%;object-fit:cover;display:block;}
.dc-imgmeta{min-width:0;}
.dc-imgname{
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,0.86);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dc-imgbtns{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}