/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


* {
  /* border: 1px solid #ff000022 */
}

/* ! Default overrides */

textarea {
  font-feature-settings: "tnum";
  font-feature-settings: "ss06" 1;   /* turn the set on */
}

body {
  padding: 3rem;
}

td {
  font-feature-settings: "tnum";
}

  td a {
    text-decoration: none;
  }

  td a:hover {
    text-decoration: underline
  }

input[type="file"] {
  padding: 1rem;
  height: auto;
  background-color: var(--pico-form-element-background-color);
  border: 1px dashed var(--pico-form-element-border-color);
  border-radius: 8px;

  &:hover {
    border: 1px dashed var(--pico-form-element-active-border-color);
  }
}

tbody tr:hover td {
  /* background-color: lightyellow; */
}

/* ! Classes */

button.as-link {
  padding: 0;
  margin-bottom: 0;
  border:none;
  background: none;

  --pico-color: var(--pico-primary);
  --pico-background-color: transparent;

  --pico-underline: var(--pico-primary-underline);
  outline: none;

  color: var(--pico-color);
  -webkit-text-decoration: var(--pico-text-decoration);
  text-decoration: var(--pico-text-decoration);
  text-decoration-color: var(--pico-underline);
  text-underline-offset: 0.125em;

  &:hover {
    --pico-color: var(--pico-primary-hover);
    --pico-underline: var(--pico-primary-hover-underline);
    --pico-text-decoration: underline;
  }
}

button.as-link.critical {
  padding: 0;
  margin-bottom: 0;
  border:none;
  background: none;
  color: crimson;

  &:hover {
    text-decoration: none;
    color: darkred;
    background-color: mistyrose
  }
}

button.critical {
  background-color: crimson;
  color: white;
  border: none;

  &:hover {
    text-decoration: none;
    background-color: darkred
  }
}

.table-divider {
  position: sticky;
  top: 0px;
  background-color: var(--pico-background-color);
}

  .table-divider td {
    background-color: var(--pico-table-row-stripped-background-color);
  }

/* ! Components */
.table-actions {
  gap: 1rem;
}

/* ! Utilities */

.secondary {
  color: var(--pico-secondary);
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.critical {
  color: crimson;
}
.positive {
  color: rgb(37, 175, 88)
}
.mono {
  font-family: ui-monospace, monospace;
  /* white-space: pre; */
}
.space-between {
  justify-content: space-between;
}
.hidden { display: none; }
.opacity-test {
  opacity: 0.5
}



/* ! Punch cards */

main.punch-card-area {
  gap: 2rem;
}

.punch-creation {
  width: 50%
}

.punch-card-tabs {
  position: sticky;
  top: 1rem;
  height: 90vh;
  width: 50%;
  resize: horizontal;
  overflow: auto;
  border: 2px solid var(--pico-color);
  border-radius: 3px;
}
  .punch-card-tabs .punch-card-header {
    display: flex;
    justify-content:space-between;
    padding: 0.5rem;
    border-bottom: 1px solid var(--pico-color);
  }
  
  .tabs-head {
    position: sticky;
    top: 0px;
    background-color: var(--pico-background-color);
    border-bottom: 1px solid var(--pico-color);
    z-index: 5;
  }
    .tab-list {
      width: 100%;
    }
      [role="tab"] {
        padding: 0.5rem;
        cursor: default;
      }
      [role="tab"]:hover {
        text-decoration: underline
      }
      [role="tab"][aria-selected="false"] {
        opacity: 0.5
      }
      
  .tab-panels {
    /* padding: 2px; */
  }
    .tab-panels * {
      width: 100%
    }



  img.tab-content {
    /* width: 25%; */
  }

  label.certification {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: 8px
  }
  
  p.certification {
    /* display: flex; */
    /* flex-direction: row; */
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: 8px
  }


  /* globally hide the Turbo-Frame loading overlay & spinner */
  turbo-frame[busy]::before,
  turbo-frame[busy]::after {
    display: none !important;
    content: none !important; /* just in case */
  }

/* ! Tooltips */
[data-tooltip] {
  text-decoration: none !important;
  cursor: default !important;
  border-bottom: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
}

[data-tooltip]:hover,
[data-tooltip]:focus {
  text-decoration: none !important;
  cursor: default !important;
  border-bottom: none !important;
  text-decoration-line: none !important;
  text-decoration-style: none !important;
}

/* More specific overrides for Pico's tooltip styles */
span[data-tooltip],
div[data-tooltip],
*[data-tooltip] {
  text-decoration: none !important;
  cursor: default !important;
  border-bottom: none !important;
}

span[data-tooltip]:hover,
div[data-tooltip]:hover,
*[data-tooltip]:hover {
  text-decoration: none !important;
  cursor: default !important;
  border-bottom: none !important;
}

code.shortcut-key {
  background-color: #ffffff11;
  border: 1px solid #ffffff33;
  color: white;
  padding: 2px 4px;
}


/* ! SORT ME */

.alert {
  padding: 0.75rem;
  border-radius: 8px;
}

.alert-warning {
  background-color: hsl(47, 100%, 90%);
  color: hsl(30, 82%, 22%)
}

.person-row {
  
}

.contextual {
  opacity: 0
}

.person-row:hover .contextual {
  opacity: 1
}