/* =========================================================
   Physics Presentation Engine

   Main Layout System

   Structure:

   +-----------------------------+
   |         Top Bar             |
   +-----------------------------+
   | Thumb | Slide | Information |
   | Panel | Area  | Panel       |
   +-----------------------------+
   |       Control Bar           |
   +-----------------------------+

========================================================= */

/* =========================================================
   APPLICATION ROOT
========================================================= */

.app {
  width: 100vw;

  height: 100vh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: var(--background-color);

  color: var(--text-primary);
}

/* =========================================================
   TOP NAVIGATION BAR
========================================================= */

.topbar {
  height: var(--topbar-height);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 var(--space-5);

  background: var(--surface-color);

  border-bottom: 1px solid var(--border-color);

  box-shadow: var(--shadow-small);

  z-index: var(--z-controls);
}

.course-info {
  display: flex;

  align-items: center;

  gap: var(--space-4);
}

.course-info h1 {
  font-size: var(--font-size-large);

  color: var(--text-primary);
}

.top-actions {
  display: flex;

  align-items: center;

  gap: var(--space-3);
}

/* =========================================================
   MAIN WORKSPACE
========================================================= */

.workspace {
  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns:
    var(--left-panel-width)
    minmax(300px, 1fr)
    var(--right-panel-width);

  overflow: hidden;
}

/* =========================================================
   GENERIC PANELS
========================================================= */

.panel {
  background: var(--surface-color);

  overflow: hidden;

  display: flex;

  flex-direction: column;
}

.panel-header {
  height: 50px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  padding: 0 var(--space-4);

  border-bottom: 1px solid var(--border-color);
}

.panel-header h2 {
  font-size: var(--font-size-normal);

  color: var(--text-secondary);
}

/* =========================================================
   LEFT THUMBNAIL PANEL
========================================================= */

.thumbnail-panel {
  border-right: 1px solid var(--border-color);
}

.thumbnail-container {
  flex: 1;

  overflow-y: auto;

  padding: var(--space-3);
}

/* =========================================================
   CENTER SLIDE PANEL
========================================================= */

.slide-panel {
  background: #0c0f12;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* .slide-panel {
    position: relative;
    background: #0c0f12;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#annotation-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}

#annotation-canvas.drawing {
    pointer-events: auto;
} */


.slide-container {
    width:100%;
    height:100%;
    padding:30px;
    display:flex;
    justify-content:center;
    /* CHANGE THIS */
    align-items:flex-start;
    overflow:auto;
}
/* .slide-container {
  width: 100%;

  height: 100%;

  padding: var(--space-5);

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: auto;
} */

/*
   Actual slide content
   appears inside this area
*/




.slide {
  width: min(100%, 1200px);
  aspect-ratio: auto;
  min-height: 600px;
  background: var(--slide-background);
  color: var(--slide-text);
  padding: var(--slide-padding);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  overflow: auto;
  position: relative;
}



/* .slide {
  width: min(100%, 1200px);
  aspect-ratio: 16 / 9;
  background: var(--slide-background);
  color: var(--slide-text);
  padding: var(--slide-padding);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  overflow: hidden;
  position: relative;
} */

/* =========================================================
   RIGHT INFORMATION PANEL
========================================================= */

.information-panel {
  border-left: 1px solid var(--border-color);
}

.information-container {
  flex: 1;

  overflow-y: auto;

  padding: var(--space-4);
}

/* =========================================================
   CONTROL BAR
========================================================= */

.control-bar {
  height: var(--control-height);

  flex-shrink: 0;

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

  gap: var(--space-3);

  padding: 0 var(--space-5);

  background: var(--surface-color);

  border-top: 1px solid var(--border-color);

  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.progress-area {
  flex: 1;

  display: flex;

  align-items: center;
}

.progress-area input {
  width: 100%;
}

/* =========================================================
   FULLSCREEN MODE

========================================================= */

.app.fullscreen {
  position: fixed;

  inset: 0;

  z-index: 9999;
}

.app.fullscreen .thumbnail-panel,
.app.fullscreen .information-panel {
  display: none;
}

.app.fullscreen .workspace {
  grid-template-columns: 1fr;
}

/* =========================================================
   TRANSITIONS
========================================================= */

.panel,
.slide,
.control-bar,
.topbar {
  transition: var(--transition);
}