@import url('/css/colours.css?');
@import url('/css/overrides.css?');
@import url('/css/scanner.css?');

.flat .dijitContentPane.bannerPanel {
  padding: 4px;
  
  height: 38px;
  
  display: grid;
  grid-template-columns: 64px auto;
  
  img.bannerPanelLogo {
    margin-left: 8px;
    height: 28px;
    align-self: center;
  }

  .bannerPanelButtons {
    text-align: right;
  }
}

.buttonsRight {
  position: absolute;
  right: 8px;
  top: 8px;
}

/**********************************************************************************/

.dashboardTab {
  h1, h2 { margin: 0; }
  h1 { color: var(--colour-accent); font-size: 4em; }
  h2 { font-weight: 400; font-size: 2em; }
  
  .qvccHome {
    padding: 12px;
  }
  
  .qvccButtonGrid {
    margin: 12px 0;
  }
}

/**********************************************************************************/

.flat .dijitContentPane.uiTab,
.flat .dijitContentPane.uiPane {
  padding: 0;
}

.flat .smallTabs .dijitTab .tabLabel {
    padding: 0 6px;
    min-width: 80px;
}

/**********************************************************************************/

.flat .dijitContentPane.editPane {
    padding: 1px 4px 4px 0;
}

/**********************************************************************************/

.danger {
  color: #e53935;
}

/**********************************************************************************/

.qvccPorch {
  background: #666;
  padding: 12px;
  
  h1 {
    color: #FFF;
    margin: 0;
  }
}

/**********************************************************************************/

.flat .dijitContentPane.qvccFormPane {
  background: #EEE;
}

.argField {
  font-family: Consolas, Roboto Mono;
}

.qvccForm {
  padding: 12px;
  display: grid;
  grid-template-columns: [left labelStart] 120px [labelEnd f1Start] 2fr [f1End f2Start] 3fr [f2ShortEnd f4Start] 1fr [f4End f2End f3Start] 1fr [f3End];
  gap: 4px;
  
  .qvccFormLabel {
    grid-column: labelStart / labelEnd;
    text-align: right;
    align-content: center;
    padding-right: 12px;
    font-weight: bold;
    white-space: no-wrap;
    height: 30px;
  }
  
  .dijitTextBox, .dijitSelect {
    width: 100%;
  }
  
  .qvccFormField { grid-column: f1Start / f3End; }
  .qvccFormField1 { grid-column: f1Start / f1End; }
  .qvccFormField12 { grid-column: f1Start / f2End; }
  .qvccFormField2 { grid-column: f2Start / f2End; }
  .qvccFormField2Short { grid-column: f2Start / f2ShortEnd; }
  .qvccFormField4 { grid-column: f4Start / f4End; }
  .qvccFormField43 { grid-column: f4Start / f3End; }
  .qvccFormField23 { grid-column: f2Start / f3End; }
  .qvccFormField3 { grid-column: f3Start / f3End; }
  
  .qvccCheckboxField {
    align-content: center;
    padding: 5px;
  }
  
  .qvccFormField4.qvccCheckboxField,
  .qvccFormField3.qvccCheckboxField {
    text-align: center;
  }
  
  .qvccSubForm .dijitTitlePaneContentInner {
    display: grid;
    grid-template-columns: [left f1Start] 2fr [f1End f2Start] 3fr [f2ShortEnd f4Start] 1fr [f4End f2End f3Start] 1fr [f3End];
    gap: 4px;
  }
}

/**********************************************************************************/

.qvccButtonGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr) );
  gap: 8px;
  
  & > div > .dijitInline.dijitButton {
    display: block;
    margin: 0;
    
    .dijitButtonNode {
      aspect-ratio : 2 / 1;
      display: block;
      
      .dijitButtonContents {
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-direction: column;
        
        .dijitIcon {
          width: auto;
          height: auto;
          font-size: 2em;
        }
      }
    }
  }
}

.qvccButtonGrid.qvccButtonList,
.qvccButtonGrid.qvccActionButtons {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr) );
  
  & > div > .dijitInline.dijitButton {
    
    .dijitButtonNode {
      aspect-ratio : auto;
      display: block;
      
      .dijitButtonContents {
        flex-direction: row;
        
        .dijitIcon {
          font-size: 1em;
        }
      }
    }
  }
}

.qvccButtonGrid.qvccActionButtons {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr) );
}

/**********************************************************************************/

.qvccProgressBorder {
  position: relative;
  display: inline-block;
  img {
    display: block;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 4px solid var(--colour-accent);
    pointer-events: none;
    clip-path: inset(0 100% 100% 0);
    animation: progressBorder 30s linear forwards;
  }
}

@keyframes progressBorder {
  0%   { clip-path: inset(0 100% 0 0); }
  100%  { clip-path: inset(0 0 0 0); }
}