@striae-org/striae 3.0.4

package/app/components/sidebar/case-import/case-import.module.css

@@ -0,0 +1,626 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 600px;
+  max-height: 95vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  font-size: var(--fontSizeBodyL);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeH5);
+  cursor: pointer;
+  padding: var(--spaceS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover:not(:disabled) {
+  color: var(--text);
+}
+
+.closeButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.content {
+  padding: var(--spaceL);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+}
+
+/* Warning section for existing read-only cases */
+.warningSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spaceM);
+  background: color-mix(in lab, var(--warning) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--warning) 20%, transparent);
+  border-radius: var(--spaceXS);
+  gap: var(--spaceM);
+}
+
+.warningText {
+  flex: 1;
+  font-size: var(--fontSizeBodyS);
+  color: var(--warning);
+  font-weight: var(--fontWeightMedium);
+}
+
+.warningSubtext {
+  font-size: var(--fontSizeBodyXS);
+  color: color-mix(in lab, var(--warning) 80%, var(--black));
+  margin: var(--spaceXS) 0 0 0;
+  font-weight: normal;
+}
+
+.clearButton {
+  background: var(--warning);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  white-space: nowrap;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--warning) 30%, transparent);
+}
+
+.clearButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--warning) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--warning) 40%, transparent);
+}
+
+.clearButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+  box-shadow: none;
+  opacity: 0.6;
+}
+
+/* File selection section */
+.fileSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.fileInputGroup {
+  position: relative;
+}
+
+.clearFileButton {
+  position: absolute;
+  top: var(--spaceS);
+  right: var(--spaceS);
+  background: transparent;
+  color: var(--textLight);
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  z-index: 1;
+}
+
+.clearFileButton:hover:not(:disabled) {
+  color: var(--error);
+  background: transparent;
+}
+
+.clearFileButton:disabled {
+  color: var(--textLight);
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.fileInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.fileLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--spaceS);
+  padding: var(--spaceXL);
+  border: 2px dashed color-mix(in lab, var(--primary) 30%, transparent);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--primary) 5%, transparent);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  min-height: 120px;
+}
+
+.fileLabel:hover {
+  border-color: var(--primary);
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+}
+
+.fileLabel:focus-visible {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.fileLabelDragOver {
+  border-color: var(--accent) !important;
+  background: color-mix(in lab, var(--accent) 15%, transparent) !important;
+  transform: scale(1.02);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--accent) 30%, transparent);
+}
+
+.fileInput:focus + .fileLabel {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.fileInput:disabled + .fileLabel {
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: color-mix(in lab, var(--text) 15%, transparent);
+  background: color-mix(in lab, var(--background) 95%, transparent);
+}
+
+.fileInput:disabled + .fileLabel:hover {
+  border-color: color-mix(in lab, var(--text) 15%, transparent);
+  background: color-mix(in lab, var(--background) 95%, transparent);
+}
+
+.fileLabelIcon {
+  font-size: var(--fontSizeBodyL);
+  opacity: 0.7;
+}
+
+.fileLabelText {
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  flex: 1;
+}
+
+.fileInfo {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 var(--spaceS);
+}
+
+.fileSize {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Progress section */
+.progressSection {
+  margin: var(--spaceM) 0;
+  padding: var(--spaceM);
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.progressText {
+  font-size: var(--fontSizeBodyS);
+  color: var(--textTitle);
+  margin-bottom: var(--spaceS);
+  font-weight: var(--fontWeightMedium);
+}
+
+.progressDetails {
+  color: var(--textBody);
+  font-weight: normal;
+}
+
+.progressBar {
+  width: 100%;
+  height: 8px;
+  background: color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  overflow: hidden;
+  margin-bottom: var(--spaceXS);
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: var(--spaceXS);
+  transition: width var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.progressPercent {
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textLight);
+  text-align: right;
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Button group */
+.buttonGroup {
+  display: flex;
+  gap: var(--spaceM);
+  margin-top: var(--spaceL);
+}
+
+.importButton {
+  background: var(--success);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  flex: 1;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--success) 30%, transparent);
+}
+
+.importButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--success) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
+}
+
+.importButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.cancelButton {
+  background: color-mix(in lab, var(--error) 70%, white);
+  color: white;
+  border: 1px solid color-mix(in lab, var(--error) 50%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  flex: 1;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--error) 30%, transparent);
+}
+
+.cancelButton:hover:not(:disabled) {  
+  background: color-mix(in lab, var(--error) 80%, white);
+  border-color: color-mix(in lab, var(--error) 60%, transparent);
+  box-shadow: 0 2px 6px color-mix(in lab, var(--error) 40%, transparent);
+}
+
+.cancelButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Success and error messages */
+.success {
+  margin-top: var(--spaceM);
+  padding: var(--spaceM);
+  background: color-mix(in lab, var(--success) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--success) 20%, transparent);
+  border-radius: var(--spaceXS);
+  color: var(--success);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  white-space: pre-wrap;
+}
+
+.error {
+  margin-top: var(--spaceM);
+  padding: var(--spaceM);
+  background: color-mix(in lab, var(--error) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
+  border-radius: var(--spaceXS);
+  color: var(--error);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  white-space: pre-wrap;
+}
+
+/* Instructions section */
+.instructions {
+  margin-top: var(--spaceL);
+  padding: var(--spaceM);
+  background: color-mix(in lab, var(--primary) 5%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 15%, transparent);
+  border-radius: var(--spaceXS);
+}
+
+.instructionsTitle {
+  margin: 0 0 var(--spaceS) 0;
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.instructionsList {
+  margin: 0;
+  padding-left: var(--spaceM);
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+  line-height: 1.5;
+}
+
+.instructionsList li {
+  margin-bottom: var(--spaceXS);
+}
+
+.instructionsList li:last-child {
+  margin-bottom: 0;
+}
+
+/* Preview Section - Always Blue */
+.previewSection {
+  background: color-mix(in lab, var(--primary) 5%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 20%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM);
+  margin: var(--spaceM) 0;
+}
+
+.previewTitle {
+  margin: 0 0 var(--spaceM) 0;
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+/* Validation Section - Green/Red Based on Status */
+.validationSection {
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM);
+  margin: var(--spaceM) 0;
+  background: color-mix(in lab, var(--primary) 5%, transparent);
+  border: 1px solid color-mix(in lab, var(--primary) 15%, transparent);
+}
+
+.validationSectionValid {
+  background: color-mix(in lab, var(--success) 8%, transparent) !important;
+  border: 2px solid color-mix(in lab, var(--success) 25%, transparent) !important;
+  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 12%, transparent) !important;
+}
+
+.validationSectionInvalid {
+  background: color-mix(in lab, var(--error) 8%, transparent) !important;
+  border: 2px solid color-mix(in lab, var(--error) 25%, transparent) !important;
+  box-shadow: 0 2px 6px color-mix(in lab, var(--error) 12%, transparent) !important;
+}
+
+.validationTitle {
+  margin: 0 0 var(--spaceM) 0;
+  font-size: var(--fontSizeBodyM);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.validationItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceXS) 0;
+  font-size: var(--fontSizeBodyS);
+}
+
+.validationLabel {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.validationValue {
+  font-family: var(--fontMono);
+  font-size: var(--fontSizeBodyXS);
+}
+
+.validationSuccess {
+  color: var(--success);
+  font-weight: var(--fontWeightMedium);
+}
+
+.validationError {
+  color: var(--error);
+  font-weight: var(--fontWeightMedium);
+}
+
+.previewLoading {
+  text-align: center;
+  color: var(--textLight);
+  font-style: italic;
+  padding: var(--spaceM);
+}
+
+.previewGrid {
+  display: grid;
+  gap: var(--spaceS);
+}
+
+.previewItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceXS) 0;
+}
+
+.previewLabel {
+  font-weight: var(--fontWeightMedium);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.previewValue {
+  color: var(--textTitle);
+  font-size: var(--fontSizeBodyS);
+  text-align: right;
+  font-weight: var(--fontWeightMedium);
+}
+
+/* Confirmation Dialog */
+.confirmationOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--black) 60%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.confirmationModal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 var(--spaceM) var(--spaceXL) color-mix(in lab, var(--black) 20%, transparent);
+}
+
+.confirmationContent {
+  padding: var(--spaceL);
+}
+
+.confirmationTitle {
+  margin: 0 0 var(--spaceM) 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.confirmationText {
+  margin: 0 0 var(--spaceL) 0;
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.confirmationDetails {
+  background: color-mix(in lab, var(--background) 50%, transparent);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceM);
+  margin: 0 0 var(--spaceL) 0;
+}
+
+.confirmationItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceXS) 0;
+  font-size: var(--fontSizeBodyS);
+}
+
+.confirmationItem:not(:last-child) {
+  border-bottom: 1px solid color-mix(in lab, var(--text) 5%, transparent);
+}
+
+.confirmationItemValid {
+  background: color-mix(in lab, var(--success) 15%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  margin: var(--spaceXS) calc(-1 * var(--spaceM));
+  border: 2px solid color-mix(in lab, var(--success) 35%, transparent);
+  box-shadow: 0 2px 4px color-mix(in lab, var(--success) 10%, transparent);
+}
+
+.confirmationItemInvalid {
+  background: color-mix(in lab, var(--error) 8%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  margin: var(--spaceXS) calc(-1 * var(--spaceM));
+  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
+}
+
+.confirmationSuccess {
+  color: var(--success);
+  font-weight: var(--fontWeightMedium);
+}
+
+.confirmationError {
+  color: var(--error);
+  font-weight: var(--fontWeightMedium);
+}
+
+.confirmationButtons {
+  display: flex;
+  gap: var(--spaceM);
+  justify-content: flex-end;
+}
+
+.confirmButton {
+  background: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.confirmButton:hover {  
+  box-shadow: 0 2px 6px color-mix(in lab, var(--primary) 30%, transparent);
+}
+
+.hashWarning {
+  background: color-mix(in lab, var(--error) 10%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 30%, transparent);
+  color: var(--error);
+  padding: var(--spaceM);
+  border-radius: var(--spaceXS);
+  margin-top: var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+}