/*!
 * DigiFabrix OEE Intelligence — Industrial HMI design system (v3.1)
 *
 * Philosophy:
 * ISA-101 / EEMUA 191 inspired industrial HMI.
 *
 * Neutral interface.
 * Color is reserved for:
 * - machine state
 * - alarms
 * - primary actions
 *
 * Load AFTER bootstrap.min.css.
 */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {

  --sidebar-w: 264px;
  --sidebar-collapsed-w: 72px;


  /* =======================================================
     LIGHT THEME
     ======================================================= */

  /* Page */

  --bg: #f5f7ff;
  --bg-elevated: #ffffff;


  /* Cards / surfaces */

  --panel: #ffffff;
  --panel-2: #f8f9ff;
  --panel-3: #f0f3ff;


  /* Borders */

  --border: #dfe5f5;
  --border-soft: #edf0f8;


  /* Text */

  --text: #040b18;
  --text-soft: #05070a;
  --text-mute: #6f7f9d;


  /* Scrollbar */

  --scroll-color: #cedaeb;


  /* Primary blue */

  --accent: #4b86f7;
  --accent-strong: #2f6fe4;

  --accent-soft: rgba(75, 134, 247, .10);
  --accent-border: rgba(75, 134, 247, .25);


  /* =======================================================
     MACHINE STATES
     ======================================================= */

  --s-running: #18ad78;
  --s-idle: #e8a51c;
  --s-stopped: #e34d61;
  --s-offline: #7b879b;
  --s-changeover: #7567d9;
  --s-noplan: #527da7;
  --s-plannedstop: #527da7;

  --running-soft: rgba(24, 173, 120, .10);
  --idle-soft: rgba(232, 165, 28, .11);
  --stopped-soft: rgba(227, 77, 97, .10);
  --offline-soft: rgba(123, 135, 155, .12);
  --changeover-soft: rgba(117, 103, 217, .10);
  --noplan-soft: rgba(82, 125, 167, .10);

  --good: #18ad78;
  --bad: #e34d61;
  --warn: #e8a51c;


  /* Shadows */

  --shadow-sm: 0 1px 3px rgba(31, 51, 91, .04);
  --shadow-md: 0 5px 18px rgba(31, 51, 91, .06);
  --shadow-lg: 0 15px 40px rgba(31, 51, 91, .10);


  /* Radius */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;


  /* Typography */

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}


/* =========================================================
   DARK THEME
   ========================================================= */

html[data-theme="dark"] {

  /* Page */

  --bg: #081427;
  --bg-elevated: #0c1a34;


  /* Cards / surfaces */

  --panel: #102445;
  --panel-2: #0e1f3a;
  --panel-3: #142b50;


  /* Borders */

  --border: #213c63;
  --border-soft: #182f50;


  /* Text */

  --text: #f2f6ff;
  --text-soft: #dbe0e9;
  --text-mute: #cedaeb;


  /* Primary */

  --accent: #4d8df7;
  --accent-strong: #69a4ff;

  --accent-soft: rgba(77, 141, 247, .14);
  --accent-border: rgba(77, 141, 247, .35);


  /* Status backgrounds */

  --running-soft: rgba(38, 194, 135, .14);
  --idle-soft: rgba(238, 171, 37, .14);
  --stopped-soft: rgba(232, 79, 101, .14);
  --offline-soft: rgba(120, 137, 164, .15);
  --changeover-soft: rgba(126, 109, 225, .14);
  --noplan-soft: rgba(82, 125, 167, .16);


  /* Status colors */

  --s-running: #26c287;
  --s-idle: #f0ad25;
  --s-stopped: #e84f65;
  --s-offline: #7889a4;
  --s-changeover: #7e6de1;
  --s-noplan: #5c8bb8;
  --s-plannedstop: #5c8bb8;

  --good: #26c287;
  --bad: #e84f65;
  --warn: #f0ad25;


  /* Scrollbar */

  --scroll-color: #272f3f;


  /* Shadows */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .20);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .35);
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  color-scheme: light;
}


html[data-theme="dark"] {
  color-scheme: dark;
}


body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  transition:
    background-color .2s ease,
    color .2s ease;
}


a {
  color: var(--accent-strong);
}


a:hover {
  color: var(--accent);
}


::selection {
  background: var(--accent-soft);
  color: var(--text);
}


code,
pre,
.mono {
  font-family: var(--mono);
}


hr {
  border-color: var(--border);
}


.clockTime {
  color: var(--text);
  font-weight: 700;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 4px;
  height: 5px;
}


::-webkit-scrollbar-track {
  background: transparent;
}


::-webkit-scrollbar-thumb {
  background: var(--scroll-color);
  border-radius: 8px;
}


/* =========================================================
   APP SHELL
   ========================================================= */

.df-shell {
  display: flex;
  min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.df-sidebar {
  position: fixed;

  left: 0;
  top: 0;
  bottom: 0;

  width: var(--sidebar-w);

  background: var(--bg-elevated);

  border-right: 1px solid var(--border);

  overflow-y: auto;
  overflow-x: hidden;

  z-index: 40;

  display: flex;
  flex-direction: column;

  transition:
    width .25s ease,
    background-color .2s ease,
    border-color .2s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


/* =========================================================
   BRAND
   ========================================================= */

.df-brand {
  display: flex;
  align-items: center;

  gap: 11px;

  min-height: 76px;

  padding: 18px 20px;

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

  white-space: nowrap;

  overflow: hidden;

  transition:
    padding .25s ease,
    gap .25s ease;
}


.df-brand-mark {
  width: 44px;
  height: 38px;

  flex: 0 0 44px;

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


.df-brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
}


.df-brand-text {
  min-width: 0;

  opacity: 1;

  transition:
    opacity .15s ease,
    width .25s ease,
    transform .25s ease;
}


.df-brand-text h1 {
  margin: 0;

  font-size: 15.5px;
  font-weight: 800;

  letter-spacing: .2px;

  color: var(--text);
}


.df-brand-text small {
  display: block;

  color: var(--text-mute);

  font-size: 11px;

  letter-spacing: .4px;

  text-transform: uppercase;

  margin-top: 1px;
}


/* =========================================================
   SIDEBAR COLLAPSE BUTTON
   ========================================================= */

.df-sidebar-collapse {
  position: absolute;

  top: 2px;
  right: 0px;

  width: 16px;
  height: 72px;

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

  padding: 0;

  background: var(--panel);
  color: var(--text-mute);

  border: 1px solid var(--border);
  border-radius: 12%;

  cursor: pointer;

  z-index: 50;

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

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.df-sidebar-collapse:hover {
  background: var(--accent-soft);

  border-color: var(--accent-border);

  color: var(--accent);
}


.df-sidebar-collapse i {
  font-size: 12px;

  transition: transform .25s ease;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.df-nav {
  padding: 14px 12px 24px;

  flex: 1;

  overflow-x: hidden;
}


.df-nav-section {
  padding: 16px 10px 6px;

  color: var(--text-mute);

  font-size: 10.5px;

  text-transform: uppercase;

  letter-spacing: 1.1px;

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  transition:
    opacity .15s ease,
    height .25s ease,
    padding .25s ease;
}


.df-nav-section:first-child {
  padding-top: 6px;
}


/* ---------- Nav link ---------- */

.df-nav a {
  position: relative;

  display: flex;
  align-items: center;

  gap: 11px;

  width: 100%;

  padding: 9px 12px;

  margin: 2px 0;

  color: var(--text-soft);

  text-decoration: none;

  border-radius: 7px;

  border: 1px solid transparent;

  font-size: 13.5px;

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    padding .25s ease,
    gap .25s ease;
}


.df-nav a:hover {
  background: var(--panel-2);

  color: var(--text);
}


.df-nav a.active {
  background: var(--accent-soft);

  color: var(--text);

  border-color: var(--accent-border);
}


/* ---------- Nav icon ---------- */

.df-nav a i {
  width: 18px;
  min-width: 17px;

  text-align: center;

  font-size: 14px;

  transition:
    color .2s ease,
    transform .2s ease;
}


.df-nav a.active i {
  color: var(--accent-strong);
}


/* =========================================================
   SIDEBAR ICON COLORS
   ========================================================= */


/* Command Centre */

.df-nav a .bi-speedometer2 {
  color: #4b86f7;
}


.df-nav a .bi-exclamation-triangle {
  color: #e45a68;
}


/* Planning */

.df-nav a .bi-calendar2-check {
  color: #20a978;
}


/* Masters */

.df-nav a .bi-diagram-3 {
  color: #8068d9;
}
.df-nav a .bi-tools {
  color: #18df11;
}


.df-nav a .bi-clock-history {
  color: #e3a32b;
}


.df-nav a .bi-box-seam {
  color: #38a9d6;
}


.df-nav a .bi-list-nested {
  color: #8a6fce;
}


.df-nav a .bi-key {
  color: #d36b9b;
}


.df-nav a .bi-gear {
  color: #71809b;
}


.df-nav a .bi-check2-circle {
  color: #26b985;
}


/* Reports */

.df-nav a .bi-graph-up-arrow {
  color: #4b86f7;
}


.df-nav a .bi-bar-chart-line {
  color: #5c8fe8;
}


.df-nav a .bi-activity {
  color: #9a70dc;
}


/* Testing & System */

.df-nav a .bi-cpu {
  color: #3ca8c9;
}


.df-nav a .bi-braces {
  color: #e09b3d;
}


.df-nav a .bi-file-text {
  color: #6d88ad;
}
.df-nav a .bi-file-text {
  color: #6d88ad;
}
.df-nav a .bi-graph-down-arrow {
  color: #df1919;
}
.df-nav a .bi-people {
  color: #0092d6;
}
.df-nav a .bi-display {
  color: #ff6435;
}
.df-nav a .bi-boxes {
  color: #237bff;
}

.df-nav a .bi-speedometer{
  color: #3bfc00;
}

.df-nav a .bi-building-gear{
  color: #fc002a;
}
.df-nav a .bi-bell{
  color: #ff3419;
}
.df-nav a .bi-book{
  color: #71fc00;
}
.df-nav a .bi-hammer{
  color: #fc7a00;
}
.df-nav a .bi-stars{
  color: #fcf800;
}
.df-nav a .bi-diagram-2{
  color: #e700fc;
}
.df-nav a .bi-arrow-repeat{
  color: #7600fc;
}



/* =========================================================
   NAV BADGE
   ========================================================= */

.df-nav a .df-count {
  margin-left: auto;

  background: var(--stopped-soft);

  color: var(--s-stopped);

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

  padding: 1px 8px;

  flex-shrink: 0;
}


/* =========================================================
   COLLAPSED SIDEBAR
   ========================================================= */

.df-sidebar.collapsed {
  width: var(--sidebar-collapsed-w);
}


/* ---------- Brand ---------- */

.df-sidebar.collapsed .df-brand {
  justify-content: center;

  padding-left: 10px;
  padding-right: 10px;
}


.df-sidebar.collapsed .df-brand-text {
  width: 0;

  opacity: 0;

  transform: translateX(-8px);

  overflow: hidden;

  pointer-events: none;
}


/* ---------- Nav ---------- */

.df-sidebar.collapsed .df-nav {
  padding-left: 10px;
  padding-right: 10px;
}


.df-sidebar.collapsed .df-nav-section {
  height: 0;

  padding-top: 0;
  padding-bottom: 0;

  opacity: 0;

  overflow: hidden;
}


.df-sidebar.collapsed .df-nav a {
  justify-content: center;

  gap: 0;

  padding: 10px 0;

  margin: 4px 0;
}


.df-sidebar.collapsed .df-nav a i {
  width: 20px;
  min-width: 20px;

  font-size: 16px;
}


/* ---------- Navigation label ---------- */

.df-sidebar.collapsed .df-nav-label {
  display: none;
}


/* ---------- Badge ---------- */
html.df-sidebar-precollapsed .df-sidebar {
  width: var(--sidebar-collapsed-w);
  transition: none !important;
}

html.df-sidebar-precollapsed .df-main {
  margin-left: var(--sidebar-collapsed-w);
  transition: none !important;
}

html.df-sidebar-precollapsed .df-sidebar * {
  transition: none !important;
}

html.df-sidebar-precollapsed .df-sidebar .df-nav-label,
html.df-sidebar-precollapsed .df-sidebar .df-brand-text,
html.df-sidebar-precollapsed .df-sidebar .who {
  display: none;
}

html.df-sidebar-precollapsed .df-sidebar .df-nav a {
  justify-content: center;
}

html.df-sidebar-precollapsed .df-sidebar .df-count {
  /* your collapsed badge styling */
}

html.df-sidebar-precollapsed .df-sidebar .df-brand {
  justify-content: center;
}

.df-sidebar.collapsed .df-nav a .df-count {
  position: absolute;

  top: 3px;
  right: 4px;

  width: 7px;
  height: 7px;

  padding: 0;

  font-size: 0;

  border-radius: 50%;
}




/* =========================================================
   COLLAPSE BUTTON STATE
   ========================================================= */

.df-sidebar.collapsed .df-sidebar-collapse i {
  transform: rotate(180deg);
}


/* =========================================================
   FOOTER USER
   ========================================================= */

.df-footer-user {
  padding: 14px 18px;

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

  display: flex;
  align-items: center;

  gap: 10px;

  overflow: hidden;

  transition:
    padding .25s ease;
}


.df-footer-user .av {
  width: 30px;
  height: 30px;

  border-radius: 50%;

  background: var(--panel-3);

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

  font-weight: 700;
  font-size: 12px;

  color: var(--text-soft);

  flex: none;
}


.df-footer-user .who {
  min-width: 0;

  transition:
    opacity .15s ease,
    width .25s ease;
}


.df-footer-user .who b {
  display: block;

  font-size: 12.5px;

  color: var(--text);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


.df-footer-user .who span {
  font-size: 11px;

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


.df-footer-user form {
  margin-left: auto;
}


.df-footer-user .logout {
  background: none;

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

  color: var(--text-mute);

  border-radius: 7px;

  padding: 5px 7px;

  cursor: pointer;

  font-size: 12px;
}


.df-footer-user .logout:hover {
  color: var(--bad);

  border-color: var(--bad);
}


/* ---------- Collapsed footer ---------- */

.df-sidebar.collapsed .df-footer-user {
  justify-content: center;

  padding-left: 10px;
  padding-right: 10px;
}


.df-sidebar.collapsed .df-footer-user .who {
  width: 0;

  opacity: 0;

  overflow: hidden;
}


.df-sidebar.collapsed .df-footer-user form {
  display: none;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.df-main {
  margin-left: var(--sidebar-w);

  flex: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;

  transition:
    margin-left .25s ease;
}


.df-sidebar.collapsed~.df-main {
  margin-left: var(--sidebar-collapsed-w);
}


/* =========================================================
   TOPBAR
   ========================================================= */

.df-topbar {
  position: sticky;

  top: 0;

  z-index: 30;

  background: var(--bg-elevated);

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

  padding: 16px 28px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 16px;
}


.df-topbar h2 {
  margin: 0;

  font-size: 17px;

  font-weight: 700;

  color: var(--text);
}


.df-topbar .df-sub {
  color: var(--text-mute);

  font-size: 12.5px;

  margin-top: 2px;
}


.df-topbar-right {
  display: flex;

  align-items: center;

  gap: 8px;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.df-menu-toggle {
  display: none;

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

  width: 36px;
  height: 36px;

  background: var(--panel-2);

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

  color: var(--text);

  border-radius: 8px;

  padding: 0;

  cursor: pointer;
}


.df-menu-toggle:hover {
  background: var(--accent-soft);

  border-color: var(--accent-border);

  color: var(--accent);
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.df-theme-toggle {
  width: 36px;
  height: 36px;

  display: inline-flex;

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

  padding: 0;

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

  border-radius: 8px;

  background: var(--panel);

  color: var(--text-soft);

  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}


.df-theme-toggle:hover {
  background: var(--accent-soft);

  border-color: var(--accent-border);

  color: var(--accent);
}


.df-theme-toggle i {
  font-size: 16px;
}


/* =========================================================
   PAGE
   ========================================================= */

.df-page {
  padding: 20px 28px 46px;

  width: 100%;

  max-width: none;
}


/* =========================================================
   SURFACES
   ========================================================= */

.card,
.panel,
.cardx,
.gauge-card,
.stat-card,
.machine-card {
  background: var(--panel);

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

  border-radius: var(--radius-md);

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

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.card-flat {
  background: var(--panel-2);

  border: 1px solid var(--border-soft);

  border-radius: var(--radius-md);
}


.card-hover {
  transition:
    transform .2s,
    border-color .2s;
}


.card-hover:hover {
  transform: translateY(-4px);

  border-color: var(--accent-border);
}


/* =========================================================
   KPI SCOREBOARD
   ========================================================= */

.kpi-row {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

  gap: 12px;
}


.kpi-tile {
  background: var(--panel);

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

  border-radius: var(--radius-md);

  padding: 16px 18px;

  position: relative;

  overflow: hidden;
}


.kpi-tile .kpi-label {
  color: var(--text-mute);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .6px;

  font-weight: 700;
}


.kpi-tile .kpi-value {
  font-size: 30px;

  font-weight: 800;

  margin-top: 6px;

  color: var(--text);

  font-variant-numeric: tabular-nums;
}


.kpi-tile .kpi-delta {
  font-size: 12px;

  color: var(--text-mute);

  margin-top: 2px;
}


.kpi-tile.state-running .kpi-value {
  color: var(--s-running);
}


.kpi-tile.state-idle .kpi-value {
  color: var(--s-idle);
}


.kpi-tile.state-stopped .kpi-value {
  color: var(--s-stopped);
}


.kpi-tile.state-offline .kpi-value {
  color: var(--s-offline);
}


.kpi-tile.state-changeover .kpi-value {
  color: var(--s-changeover);
}


.kpi-tile.state-noplan .kpi-value {
  color: var(--s-noplan);
}



.sub-heading{
  color: var(--text-soft);
}

/* =========================================================
   OEE HERO
   ========================================================= */

.oee-hero {
  background:
    linear-gradient(135deg,
      var(--panel) 0%,
      var(--panel-2) 100%);

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

  border-radius: var(--radius-lg);

  padding: 26px 28px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

  box-shadow: var(--shadow-md);
}


.oee-hero .big {
  font-size: 52px;

  font-weight: 800;

  color: var(--text);

  line-height: 1;

  font-variant-numeric: tabular-nums;
}


.oee-hero .big small {
  font-size: 22px;

  color: var(--text-mute);

  font-weight: 600;
}


.oee-hero .apq {
  display: flex;

  gap: 26px;

  flex-wrap: wrap;
}


.oee-hero .apq div small {
  display: block;

  color: var(--text-mute);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .6px;
}


.oee-hero .apq div b {
  font-size: 19px;

  color: var(--text);

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   STATUS
   ========================================================= */

.status-pill {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 3px 10px 3px 8px;

  border-radius: 999px;

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: .3px;

  text-transform: uppercase;
}


.status-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  flex: none;

  box-shadow:
    0 0 0 3px currentColor;
}


.status-dot.pulse {
  animation: df-pulse 1.8s infinite;
}


@keyframes df-pulse {

  0% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }

  100% {
    opacity: 1;
  }

}


.st-RUNNING {
  background: var(--running-soft);
  color: var(--s-running);
}


.st-IDLE {
  background: var(--idle-soft);
  color: var(--s-idle);
}


.st-STOPPED {
  background: var(--stopped-soft);
  color: var(--s-stopped);
}


.st-OFFLINE {
  background: var(--offline-soft);
  color: var(--s-offline);
}


.st-CHANGEOVER {
  background: var(--changeover-soft);
  color: var(--s-changeover);
}


.st-NO_PLAN {
  background: var(--noplan-soft);
  color: var(--s-noplan);
}


.st-PLANNED_STOP {
  background: var(--noplan-soft);
  color: var(--s-noplan);
}


/* =========================================================
   MACHINE CARDS
   ========================================================= */

.machine-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));

  gap: 14px;
}


.machine-card {
  background: var(--panel);

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

  border-radius: var(--radius-md);

  padding: 16px 18px;

  position: relative;

  padding-left: 20px;

  transition:
    border-color .2s,
    transform .2s;
}


.machine-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  border-radius:
    var(--radius-md) 0 0 var(--radius-md);

  background:
    var(--state, var(--s-offline));
}


.machine-card:hover {
  border-color: var(--accent-border);

  transform: translateY(-2px);
}


.machine-card .mc-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;
}


.machine-card .mc-head h3 {
  margin: 0;

  font-size: 15px;

  font-weight: 700;

  color: var(--text);
}


.machine-card .mc-sub {
  color: var(--text-mute);

  font-size: 12px;

  margin-top: 1px;
}


.machine-card .mc-metrics {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-top: 14px;
}


.machine-card .mc-metrics div {
  background: var(--panel-2);

  border-radius: 9px;

  padding: 9px 6px;

  text-align: center;
}


.machine-card .mc-metrics small {
  display: block;

  color: var(--text-mute);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .4px;
}


.machine-card .mc-metrics b {
  font-size: 16px;

  color: var(--text);

  font-variant-numeric: tabular-nums;
}


.machine-card .mc-foot {
  display: flex;

  justify-content: space-between;

  font-size: 11.5px;

  color: var(--text-mute);

  margin-top: 12px;
}


/* =========================================================
   PROGRESS / BARS
   ========================================================= */

.bar-track {
  height: 7px;

  background: var(--panel-3);

  border-radius: 99px;

  overflow: hidden;

  margin-top: 8px;
}


.bar-fill {
  height: 100%;

  border-radius: 99px;

  background: var(--accent);

  transition: width .6s ease;
}


.bar-fill.good {
  background: var(--good);
}


.bar-fill.warn {
  background: var(--warn);
}


.bar-fill.bad {
  background: var(--bad);
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
  display: flex;

  height: 22px;

  border-radius: 6px;

  overflow: hidden;

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


.timeline span {
  height: 100%;
}


.timeline-legend {
  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 8px;

  font-size: 11.5px;

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


.timeline-legend i {
  display: inline-block;

  width: 9px;
  height: 9px;

  border-radius: 2px;

  margin-right: 5px;

  vertical-align: 1px;
}


/* =========================================================
   PARETO
   ========================================================= */

.pareto-row {
  display: grid;

  grid-template-columns:
    150px 1fr 60px;

  gap: 10px;

  align-items: center;

  padding: 7px 0;

  font-size: 13px;
}


.pareto-row .label {
  color: var(--text-soft);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


.pareto-row .track {
  background: var(--panel-3);

  border-radius: 6px;

  height: 14px;

  overflow: hidden;
}


.pareto-row .fill {
  height: 100%;

  background:
    linear-gradient(90deg,
      var(--accent),
      #e6535d);

  border-radius: 6px;
}


.pareto-row .val {
  text-align: right;

  color: var(--text-mute);

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   TABLES
   ========================================================= */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}


.table thead th {
  color: var(--text-mute);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .5px;

  font-weight: 700;

  border-bottom-width: 1px;
}


.table td,
.table th {
  vertical-align: middle;

  padding: 11px 12px;
}


.table tbody tr:hover {
  background: var(--panel-2);
}


.table-sticky thead th {
  position: sticky;

  top: 0;

  background: var(--bg-elevated);

  z-index: 1;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {
  background: var(--panel-2);

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

  color: var(--text);

  border-radius: 9px;

  padding: 9px 12px;
}


.form-control:focus,
.form-select:focus {
  background: var(--panel-2);

  color: var(--text);

  border-color: var(--accent);

  box-shadow:
    0 0 0 .2rem var(--accent-soft);
}


.form-control::placeholder {
  color: var(--text-mute);
}


.form-select option {
  background: var(--panel-2);

  color: var(--text);
}


label,
.form-label {
  color: var(--text-soft);

  font-size: 12.5px;

  font-weight: 600;

  margin-bottom: 5px;
}


.form-text {
  color: var(--text-mute) !important;
}


.form-check-input {
  background-color: var(--panel-2);

  border-color: var(--border);
}


.form-check-input:checked {
  background-color: var(--accent);

  border-color: var(--accent);
}


.input-group-text {
  background: var(--panel-3);

  border-color: var(--border);

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


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  border-radius: 9px;

  font-weight: 600;

  letter-spacing: .1px;
}


.btn-primary,
.btn-info,
.btn-cyan {
  background: var(--accent);

  border-color: var(--accent);

  color: #fff;

  font-weight: 700;
}


.btn-primary:hover,
.btn-info:hover,
.btn-cyan:hover {
  background: var(--accent-strong);

  border-color: var(--accent-strong);

  color: #fff;
}


.btn-outline-info,
.btn-outline-light,
.btn-outline-primary {
  border-color: var(--border);

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


.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-primary:hover {
  background: var(--panel-2);

  color: var(--text);

  border-color: var(--accent);
}


.btn-outline-secondary {
  border-color: var(--border);

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


.btn-outline-secondary:hover {
  background: var(--panel-2);

  color: var(--text);
}


.btn-outline-danger {
  border-color: rgba(230, 83, 93, .5);

  color: var(--s-stopped);
}


.btn-outline-danger:hover {
  background: var(--stopped-soft);
}


.btn-danger {
  background: var(--s-stopped);

  border-color: var(--s-stopped);
}


.btn-warning {
  background: var(--s-idle);

  border-color: var(--s-idle);

  color: #241a00;
}


/* =========================================================
   BADGES / ALERTS
   ========================================================= */

.badge-on {
  background: var(--running-soft);

  color: var(--s-running);
}


.badge-off {
  background: var(--offline-soft);

  color: var(--s-offline);
}


.badge-soft {
  background: var(--panel-3);

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


.alert {
  border-radius: var(--radius-md);

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

  background: var(--panel-2);

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


.alert-success {
  border-color: rgba(51, 195, 124, .35);

  background: var(--running-soft);

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


.alert-danger {
  border-color: rgba(230, 83, 93, .35);

  background: var(--stopped-soft);

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


.alert-warning {
  border-color: rgba(230, 168, 58, .35);

  background: var(--idle-soft);

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


.alert-info {
  border-color: var(--accent-border);

  background: var(--accent-soft);

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


/* =========================================================
   NAV PILLS / TABS
   ========================================================= */

.nav-pills .nav-link {
  color: var(--text-soft);

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

  margin-right: 8px;

  border-radius: 9px;

  font-weight: 600;

  font-size: 13px;
}


.nav-pills .nav-link.active {
  background: var(--accent);

  color: #04121c;
}


.nav-pills .badge-count {
  color: var(--text);

  margin-left: 6px;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
  background: var(--panel);

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

  color: var(--text);

  border-radius: var(--radius-lg);
}


.modal-header,
.modal-footer {
  border-color: var(--border);
}


.btn-close {
  color: var(--text-mute);
}


/* =========================================================
   MISC UTILITIES
   ========================================================= */

.muted,
.text-secondary {
  color: var(--text-mute) !important;
}


.text-soft {
  color: var(--text-soft) !important;
}


.section-title {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 14px;
}


.section-title h3,
h4 {
  margin: 0;

  font-size: 16px;

  font-weight: 700;

  color: var(--text);
}



.divider {
  height: 1px;

  background: var(--border);

  border: 0;

  margin: 18px 0;
}


.empty-state {
  padding: 40px 20px;

  text-align: center;

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


.chip {
  display: inline-block;

  background: var(--panel-3);

  color: var(--text-soft);

  border-radius: 999px;

  padding: 3px 10px;

  font-size: 11.5px;

  font-weight: 600;
}


.hierarchy {
  color: var(--text-mute);

  font-size: 11.5px;
}


/* =========================================================
   DASHBOARD TOP
   ========================================================= */

.dash-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

  margin-bottom: 20px;
}


.dash-title {
  grid-area: title;

  text-align: left;

  min-width: 0;
}


.dash-top select.form-select,
.dash-top input.form-control {
  background: var(--panel);

  border-color: var(--border);

  width: auto;
}


.dash-title h1 {
  margin: 0;

  font-size: 24px;

  font-weight: 700;

  letter-spacing: -.3px;

  color: var(--text);

  text-transform: none;
}


.dash-title .muted {
  font-size: 12px;

  margin-top: 2px;
}


.dash-clock {
  grid-area: actions;

  margin-right: 8px;
}


.dash-top>form {
  grid-area: filters;
}


.dash-refresh {
  width: 36px;
  height: 36px;

  border-radius: 9px;

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

  background: var(--panel);

  color: var(--text-soft);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: .2s;
}


.dash-refresh:hover {
  color: var(--text);

  border-color: var(--accent);
}


.dash-refresh.spin i {
  animation: df-spin .7s linear;
}


@keyframes df-spin {

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   GAUGES
   ========================================================= */

.gauge-row {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

  gap: 14px;
}


.gauge-card {
  background: var(--panel);

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

  border-radius: var(--radius-lg);

  padding: 18px 18px 16px;

  text-align: center;

  box-shadow: var(--shadow-sm);
}


.gauge-title {
  font-size: 12px;

  font-weight: 700;

  letter-spacing: .7px;

  color: var(--gc, var(--accent-strong));

  text-transform: uppercase;
}


.gauge-wrap {
  position: relative;

  margin: 8px auto 0;

  width: 100%;

  max-width: 210px;
}


.gauge-svg {
  width: 100%;

  display: block;

  overflow: visible;

  transform: translateY(-20px);
}


.gauge-track {
  fill: none;

  stroke: var(--panel-3);

  stroke-width: 14;

  stroke-linecap: butt;
}


.gauge-fill {
  fill: none;

  stroke: var(--gc, var(--accent));

  stroke-width: 14;

  stroke-linecap: butt;

  transition:
    stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}


.gauge-center {
  position: absolute;

  left: 0;
  right: 0;

  bottom: 24px;

  text-align: center;
}


.gauge-value {
  font-size: 28px;

  font-weight: 800;

  color: var(--text);

  font-variant-numeric: tabular-nums;
}


.gauge-range {
  display: flex;

  justify-content: space-between;

  margin-top: -4px;

  padding: 0 12px;

  color: var(--text-mute);

  font-size: 12px;
}


.gauge-delta {
  font-size: 12px;

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


.gauge-delta span {
  display: inline-block;

  margin-top: 3px;
}


.gauge-delta.up {
  color: var(--good);
}


.gauge-delta.down {
  color: var(--bad);
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.stat-row {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(230px, 1fr));

  gap: 14px;
}


.stat-card {
  display: flex;

  gap: 14px;

  align-items: flex-start;

  background: var(--panel);

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

  border-radius: var(--radius-lg);

  padding: 16px 18px;
}


.stat-icon {
  width: 44px;
  height: 44px;

  border-radius: 12px;

  display: flex;

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

  font-size: 19px;

  flex: none;

  background:
    var(--sc-soft, var(--accent-soft));

  color:
    var(--sc, var(--accent-strong));
}


.stat-body {
  min-width: 0;
}


.stat-label {
  font-size: 10.5px;

  text-transform: uppercase;

  letter-spacing: .5px;

  color: var(--text-mute);

  font-weight: 700;
}


.stat-value {
  font-size: 23px;

  font-weight: 800;

  color: var(--text);

  margin-top: 2px;

  font-variant-numeric: tabular-nums;
}


.stat-delta {
  font-size: 11.5px;

  margin-top: 3px;

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


.stat-delta.up {
  color: var(--good);
}


.stat-delta.down {
  color: var(--bad);
}


/* =========================================================
   TARGET TRACK
   ========================================================= */

.target-track {
  height: 8px;

  background: var(--panel-3);

  border-radius: 99px;

  margin-top: 8px;

  position: relative;

  overflow: visible;
}


.target-track .fill {
  width: 0;

  height: 100%;

  border-radius: 99px;

  background: var(--accent);

  animation:
    target-track-fill 1.2s cubic-bezier(.22, 1, .36, 1) forwards;

  will-change: width;
}


@keyframes target-track-fill {

  from {
    width: 0;
  }

  to {
    width: var(--fill-width);
  }

}


.target-track .mark {
  position: absolute;

  top: -3px;

  width: 2px;

  height: 14px;

  background: var(--text);

  opacity: .7;
}


/* =========================================================
   REASON LIST
   ========================================================= */

.reason-list {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.reason-item {
  display: grid;

  grid-template-columns:
    14px 1fr auto;

  gap: 10px;

  align-items: center;

  font-size: 12.5px;
}


.reason-item .dot {
  width: 9px;
  height: 9px;

  border-radius: 3px;
}


.reason-item .name {
  color: var(--text-soft);
}


.reason-item .track {
  grid-column: 1 / -1;

  background: var(--panel-3);

  border-radius: 6px;

  height: 6px;

  overflow: hidden;

  margin-top: -4px;
}


.reason-item .track i {
  display: block;

  height: 100%;

  border-radius: 6px;

  transition:
    width 1s cubic-bezier(.22, 1, .36, 1);
}


.reason-item .val {
  color: var(--text);

  font-weight: 700;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;
}


.reason-item .sub {
  color: var(--text-mute);

  font-size: 11px;
}


/* =========================================================
   LINE PERFORMANCE
   ========================================================= */

.line-status {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  font-weight: 600;

  font-size: 13px;
}


.line-status i {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  flex: none;

  box-shadow:
    0 0 0 3px currentColor;

  opacity: .9;
}


.delta-cell {
  font-weight: 700;
}


.delta-cell.up {
  color: var(--good);
}


.delta-cell.down {
  color: var(--bad);
}


/* =========================================================
   LOSS HIERARCHY TREE
   ========================================================= */

.loss-l1 {
  background: var(--panel);

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

  border-radius: var(--radius-lg);

  margin-bottom: 14px;

  overflow: hidden;
}


.loss-l1.is-inactive {
  opacity: .55;
}


.loss-l1-head {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  flex-wrap: wrap;
}


.loss-l1-head .seq {
  width: 28px;
  height: 28px;

  border-radius: 8px;

  background: var(--accent-soft);

  color: var(--accent-strong);

  display: flex;

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

  font-weight: 800;

  font-size: 12.5px;

  flex: none;
}


.loss-l1-head .titles {
  flex: 1;

  min-width: 180px;
}


.loss-l1-head .titles b {
  color: var(--text);

  font-size: 15px;
}


.loss-l1-head .titles .code {
  color: var(--text-mute);

  font-size: 11.5px;

  margin-left: 6px;
}


.loss-l1-head .meta {
  color: var(--text-mute);

  font-size: 11.5px;
}


.loss-l1-actions {
  display: flex;

  gap: 6px;

  flex-wrap: wrap;
}


.loss-l2-wrap {
  border-top: 1px solid var(--border-soft);

  background: var(--bg-elevated);
}


.loss-l2 {
  padding: 12px 18px 12px 40px;

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


.loss-l2:last-child {
  border-bottom: 0;
}


.loss-l2.is-inactive {
  opacity: .55;
}


.loss-l2-head {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}


.loss-l2-head::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 2px;

  background: var(--s-changeover);

  flex: none;
}


.loss-l2-head b {
  color: var(--text);

  font-size: 13.5px;
}


.loss-l2-head .code {
  color: var(--text-mute);

  font-size: 11px;
}


.loss-l2-actions {
  display: flex;

  gap: 6px;

  margin-left: auto;

  flex-wrap: wrap;
}


.loss-l3-list {
  margin: 8px 0 0 18px;

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.loss-l3 {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 7px 12px;

  background: var(--panel-2);

  border-radius: 8px;

  flex-wrap: wrap;
}


.loss-l3.is-inactive {
  opacity: .55;
}


.loss-l3::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--s-idle);

  flex: none;
}


.loss-l3 b {
  color: var(--text);

  font-size: 12.5px;

  font-weight: 600;
}


.loss-l3 .code {
  color: var(--text-mute);

  font-size: 10.5px;
}


.loss-l3-actions {
  display: flex;

  gap: 6px;

  margin-left: auto;
}


.loss-empty-branch {
  color: var(--text-mute);

  font-size: 12px;

  padding: 6px 0 2px;

  font-style: italic;
}


.loss-search {
  max-width: 320px;
}


.tree-node[hidden] {
  display: none !important;
}


/* =========================================================
   DEVICE SIMULATOR
   ========================================================= */

.sim-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(320px, 1fr));

  gap: 14px;
}


.sim-card-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 12px;
}


.sim-card-head b {
  color: var(--text);

  font-size: 15px;
}


.sim-fields {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;
}


.sim-fields label {
  font-size: 10.5px;

  margin-bottom: 3px;

  text-transform: uppercase;

  letter-spacing: .4px;
}


.sim-status {
  margin-top: 10px;

  min-height: 38px;

  border-radius: 8px;

  padding: 8px 10px;

  background: var(--panel-2);

  color: var(--text-mute);

  font-size: 11.5px;

  white-space: pre-wrap;
}


.sim-status.success {
  background: var(--running-soft);

  color: #bdf3d6;
}


.sim-status.error {
  background: var(--stopped-soft);

  color: #ffd3d6;
}


/* =========================================================
   BRAND IMAGE
   ========================================================= */

.df-brand-mark img {
  width: 34px;

  height: auto;
}


/* =========================================================
   ENTRANCE ANIMATION
   ========================================================= */

@keyframes df-fade-up {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.df-anim {
  opacity: 0;

  animation:
    df-fade-up .55s cubic-bezier(.22, 1, .36, 1) forwards;
}


.df-anim-1 {
  animation-delay: .02s;
}


.df-anim-2 {
  animation-delay: .09s;
}


.df-anim-3 {
  animation-delay: .16s;
}


.df-anim-4 {
  animation-delay: .23s;
}


.df-anim-5 {
  animation-delay: .30s;
}

.spreadsteet-btn,.filter-btn {
  display: flex;
  padding: 9px 12px;
  gap: 4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1080px) {

  /* -----------------------------------------
     Sidebar becomes mobile drawer
     ----------------------------------------- */

  .df-sidebar {
    width: var(--sidebar-w);

    transform: translateX(-100%);

    box-shadow: var(--shadow-lg);
  }


  .df-sidebar.open {
    transform: translateX(0);
  }


  /*
   * Collapsed state has no meaning on mobile.
   * The hamburger controls the drawer.
   */

  .df-sidebar.collapsed {
    width: var(--sidebar-w);
  }


  .df-sidebar.collapsed .df-brand {
    justify-content: flex-start;

    padding-left: 20px;
    padding-right: 20px;
  }


  .df-sidebar.collapsed .df-brand-text {
    width: auto;

    opacity: 1;

    transform: none;
  }


  .df-sidebar.collapsed .df-nav {
    padding-left: 12px;
    padding-right: 12px;
  }


  .df-sidebar.collapsed .df-nav-section {
    height: auto;

    padding: 16px 10px 6px;

    opacity: 1;
  }


  .df-sidebar.collapsed .df-nav a {
    justify-content: flex-start;

    gap: 11px;

    padding: 9px 12px;

    margin: 2px 0;
  }


  .df-sidebar.collapsed .df-nav a i {
    width: 17px;
    min-width: 17px;

    font-size: 14px;
  }


  .df-sidebar.collapsed .df-nav-label {
    display: inline;
  }


  .df-sidebar.collapsed .df-nav a .df-count {
    position: static;

    width: auto;
    height: auto;

    padding: 1px 8px;

    font-size: 11px;

    border-radius: 999px;
  }


  .df-sidebar.collapsed .df-footer-user {
    justify-content: flex-start;

    padding: 14px 18px;
  }


  .df-sidebar.collapsed .df-footer-user .who {
    width: auto;

    opacity: 1;
  }


  .df-sidebar.collapsed .df-footer-user form {
    display: block;
  }


  /* Hide desktop collapse button */

  .df-sidebar-collapse {
    display: none;
  }


  /* Main */

  .df-main,
  .df-sidebar.collapsed~.df-main {
    margin-left: 0;
  }


  /* Hamburger */

  .df-menu-toggle {
    display: inline-flex;
  }


  /* Page */

  .df-page {
    padding: 18px;
  }


  
}




@media(max-width:768px) {

  .df-topbar {
    padding: 13px 16px;
  }


  .df-topbar h2 {
    font-size: 15px;
  }


  .df-topbar .df-sub {
    display: none;
  }


  .df-page {
    padding: 16px 14px 36px;
  }


  .dash-top {
    flex-direction: column;

    align-items: stretch;
  }


  .dash-top select.form-select,
  .dash-top input.form-control {
    width: 100%;
  }


  .oee-hero {
    padding: 20px;
  }


  .oee-hero .big {
    font-size: 42px;
  }


  .oee-hero .apq {
    gap: 18px;
  }


  .machine-grid {
    grid-template-columns: 1fr;
  }


  .gauge-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .stat-row {
    grid-template-columns: 1fr;
  }


  .pareto-row {
    grid-template-columns:
      110px 1fr 50px;
  }

}


@media(max-width:560px) {

  .gauge-row {
    grid-template-columns: 1fr;
  }


  .gauge-card {
    max-width: none;
  }


  .machine-card .mc-metrics {
    grid-template-columns:
      repeat(3, 1fr);
  }


  .sim-grid {
    grid-template-columns: 1fr;
  }


  .sim-fields {
    grid-template-columns: 1fr;
  }


  .loss-l2 {
    padding-left: 20px;
  }


  .loss-l3-list {
    margin-left: 8px;
  }


  .pareto-row {
    grid-template-columns:
      90px 1fr 45px;

    gap: 7px;

    font-size: 12px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }


  .df-anim {
    animation: none;

    opacity: 1;
  }


  .gauge-fill {
    transition: none;
  }


  .target-track .fill {
    animation: none;

    width: var(--fill-width);
  }


  .reason-item .track i {
    transition: none;
  }


  .df-sidebar,
  .df-main,
  .df-brand,
  .df-nav a,
  .df-sidebar-collapse {
    transition: none;
  }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .df-sidebar,
  .df-topbar,
  .df-menu-toggle,
  .no-print {
    display: none !important;
  }


  .df-main,
  .df-sidebar.collapsed~.df-main {
    margin-left: 0;
  }


  .df-page {
    padding: 0;
  }

}