/* ─── Toyota Deck Dashboard · Material Design 3 · Light ──────────────────
   Color palette echoes the slide deck: warm off-white surfaces, Toyota
   neutral grays, ToyotaVIS type — with MD3 structure and elevation.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Toyota brand fonts (same CDN as slides) ── */
@font-face {
    font-display: fallback;
    font-family: "ToyotaVIS";
    font-weight: 400;
    src: url("https://saatchinydrive.blob.core.windows.net/batcdn/BAT_LP/fsf/fsf_dev/assets/fonts/ToyotaBat/ToyotaType-Regular.woff");
}
@font-face {
    font-display: fallback;
    font-family: "ToyotaVIS";
    font-weight: 600;
    src: url("https://saatchinydrive.blob.core.windows.net/batcdn/BAT_LP/fsf/fsf_dev/assets/fonts/ToyotaBat/ToyotaType-Semibold.woff");
}
@font-face {
    font-display: fallback;
    font-family: "ToyotaVIS";
    font-weight: 700;
    src: url("https://saatchinydrive.blob.core.windows.net/batcdn/BAT_LP/fsf/fsf_dev/assets/fonts/ToyotaBat/ToyotaType-Bold.woff") format("woff");
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

/* ── Design tokens ── */
:root {
  /* Surfaces — warm neutral light, matching the slide bg palette */
  --bg:           #efede8;      /* app background — warm off-white */
  --surface:      #f9f7f4;      /* card / topbar surface */
  --surface-2:    #f0ede8;      /* slightly deeper fill */
  --surface-3:    #e8e4de;      /* input / chip fill */
  --outline:      #c9c4bc;      /* borders */
  --outline-dim:  #dedad4;      /* subtle dividers */

  /* Text */
  --on-bg:        #3c3938;      /* primary text */
  --on-surface:   #3c3938;
  --on-mid:       #6b6763;      /* secondary text */
  --on-dim:       #9a9590;      /* placeholder / disabled */

  /* Accent — Toyota red, used sparingly */
  --accent:       #eb0a1e;
  --accent-dim:   rgba(235,10,30,.08);
  --accent-text:  #c0000f;

  /* Active/selected — neutral charcoal to echo slide header colors */
  --active:       #3c3938;
  --active-cont:  rgba(60,57,56,.07);

  --md-elevation-1: 0 1px 2px rgba(60,57,56,.12), 0 1px 4px rgba(60,57,56,.08);
  --md-elevation-2: 0 2px 6px rgba(60,57,56,.14), 0 1px 2px rgba(60,57,56,.1);
  --md-elevation-3: 0 4px 12px rgba(60,57,56,.15), 0 1px 3px rgba(60,57,56,.1);

  --radius-s:  4px;
  --radius-m:  10px;
  --radius-l:  16px;
  --radius-xl: 28px;
  --radius-pill: 99px;

  --topbar-h: 56px;
  --strip-h:  152px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  font-family: 'ToyotaVIS', sans-serif;
  color: var(--on-bg);
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────
   Top App Bar
   ───────────────────────────────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--surface);
  height: var(--topbar-h);
  flex-shrink: 0;
  gap: 12px;
  border-bottom: 1px solid var(--outline-dim);
  box-shadow: var(--md-elevation-1);
  z-index: 100;
}

/* ── Nav buttons ── */
.nav-btns { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--on-mid);
  padding: 0 14px;
  height: 30px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: 'ToyotaVIS', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: background .12s, color .12s;
  user-select: none;
  white-space: nowrap;
}
.nav-btn:hover:not(:disabled) {
  background: var(--active-cont);
  color: var(--on-surface);
}
.nav-btn:active:not(:disabled) { background: rgba(60,57,56,.13); }
.nav-btn:disabled { opacity: .35; cursor: default; }
.nav-btn .material-icons-round { font-size: 18px; }

/* ── Slide info chip — centered ── */
#slide-info {
  flex: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
#slide-info-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1px solid var(--outline);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--on-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 640px;
}
#slide-counter {
  color: var(--accent-text);
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* separator dot */
#slide-info-inner::after {
  display: none; /* handled by gap */
}
#slide-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: .4px;
  color: var(--on-mid);
}

/* ── Export button ── */
#export-menu-wrap { position: relative; flex-shrink: 0; }

#btn-export {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
}
#btn-export:hover:not(:disabled) { background: #c8000e; color: #fff; }
#btn-export:active:not(:disabled) { background: #a80009; }

#export-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-l);
  padding: 8px;
  z-index: 200;
  min-width: 230px;
  box-shadow: var(--md-elevation-3);
}
#export-dropdown.open { display: flex; }

.export-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--on-surface);
  padding: 10px 12px;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-family: 'ToyotaVIS', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3px;
  text-align: left;
  width: 100%;
  transition: background .1s;
  white-space: nowrap;
}
.export-opt .material-icons-round { font-size: 18px; color: var(--on-dim); }
.export-opt:hover { background: var(--active-cont); }
.export-opt:hover .material-icons-round { color: var(--on-mid); }

/* ─────────────────────────────────────────────────────────
   Main viewer
   ───────────────────────────────────────────────────────── */
#viewer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 16px 16px 12px;
}

#main-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  box-shadow: var(--md-elevation-3), 0 0 0 1px var(--outline-dim);
}

#main-frame {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  border: none;
  transform-origin: top left;
  display: block;
  background: #fff;
}

/* ─────────────────────────────────────────────────────────
   Thumbnail strip — centered
   ───────────────────────────────────────────────────────── */
#thumbstrip {
  height: var(--strip-h);
  display: flex;
  align-items: center;
  justify-content: center;   /* center thumbnails */
  gap: 10px;
  padding: 10px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
  border-top: 1px solid var(--outline-dim);
  flex-shrink: 0;
}

#thumbstrip::-webkit-scrollbar { height: 4px; }
#thumbstrip::-webkit-scrollbar-track { background: transparent; }
#thumbstrip::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 2px;
}

.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.thumb-frame-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  border: 2px solid var(--outline-dim);
  transition: border-color .15s, box-shadow .15s;
}
.thumb-item:hover .thumb-frame-wrapper {
  border-color: var(--outline);
  box-shadow: var(--md-elevation-2);
}
.thumb-item.active .thumb-frame-wrapper {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(235,10,30,.15);
}

.thumb-frame {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  border: none;
  pointer-events: none;
  transform-origin: top left;
  display: block;
  background: #fff;
}

.thumb-num {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(60,57,56,.7);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'ToyotaVIS', sans-serif;
  letter-spacing: .6px;
  padding: 1px 6px;
  border-radius: 3px;
  line-height: 1.5;
  text-transform: uppercase;
}

.thumb-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3px;
  color: var(--on-dim);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .15s;
}
.thumb-item.active .thumb-label {
  color: var(--accent-text);
  font-weight: 600;
}
.thumb-item:hover:not(.active) .thumb-label { color: var(--on-mid); }

/* ─────────────────────────────────────────────────────────
   Export progress dialog
   ───────────────────────────────────────────────────────── */
#export-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(60,57,56,.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
#export-overlay.active { display: flex; }

#export-modal {
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-xl);
  padding: 28px 28px 20px;
  width: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--md-elevation-3);
}

#export-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: .5px;
  text-transform: uppercase;
}

#export-bar-wrap {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  height: 4px;
  overflow: hidden;
}
#export-bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  width: 0%;
  transition: width .35s ease;
}

#export-status {
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--on-dim);
  min-height: 16px;
}

#export-modal-actions { display: flex; justify-content: flex-end; }

#btn-cancel-export {
  background: none;
  border: none;
  color: var(--accent-text);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: 'ToyotaVIS', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: background .12s;
}
#btn-cancel-export:hover { background: var(--accent-dim); }