@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  input.numeric-input-component[type="number"]::-webkit-inner-spin-button,
  input.numeric-input-component[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    -moz-appearance:textfield;
  }
}

@layer components {
  .button_to {
    @apply flex shrink;
  }

  .toggle-checkbox {
    @apply focus:outline-none focus:ring-0 focus:ring-offset-0 border-2 border-concrete hover:border-concrete;
    height: 22px;
    width: 22px;
    margin-left: 2px;
    margin-top: 2px;
    border: none;
  }

  .toggle-checkbox:checked {
    @apply right-0 focus:outline-none focus:ring-0 focus:ring-offset-0 border-2 border-canua-green hover:border-canua-green focus:border-canua-green;
    color: white;
    margin-right: 2px;
  }

  .toggle-checkbox:checked + .toggle-label {
    @apply bg-canua-green;
  }

  .date-picker-component input::-webkit-calendar-picker-indicator{
    display: none;
  }
}

@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: theme("colors.pickled-bluewood");
    @apply font-semibold;
  }

  /* Sign in page radio buttons */
  input[type="radio"].signup-radio {
    @apply hidden;
  }
  label.signup-radio-label {
    @apply p-4 border rounded-md mb-2 block cursor-pointer hover:bg-canua-green/20;
  }
  input[type="radio"]:checked + label.signup-radio-label {
    @apply border-canua-green border
  }
  input[type="radio"]:checked + label.signup-radio-label + div.more-info {
    @apply !block
  }
  input[type="radio"]:checked + label.signup-radio-label > div > div > svg.check-circle-filled {
    @apply !block
  }

  div.more-info-line {
    @apply ml-[38px] mt-[-9px] border-b border-l border-aluminium absolute h-[53px] w-[27px] rounded-bl
  }
  /* -------------------------- */

  h1.page-header {
    @apply mx-4 md:mx-0 pt-12 pb-10 text-2xl leading-6 font-semibold;
  }

  nav {
    color: theme("colors.steel-blue");
  }

  nav > a > svg {
    @apply h-6 w-6 mr-4 md:mr-3 group-hover:text-canua-green;
  }

  nav a.current,
  nav a.current svg {
    @apply text-canua-green;
  }

  .green-button-inline {
    @apply py-1 px-6 mr-1 shadow-sm bg-canua-green text-white rounded-md hover:bg-teal-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-canua-green;
  }

  .green-button {
    @apply py-2 px-5 shadow-sm text-base leading-6 rounded-md text-white bg-canua-green hover:bg-teal-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-canua-green;
  }

  .green-button:disabled {
    @apply hover:bg-canua-green opacity-50;
  }

  .secondary-green-button {
    @apply bg-canua-green/10 hover:bg-canua-green/20 text-teal-green rounded-md leading-6 font-medium transition-colors;
  }

  .secondary-button {
    @apply py-2 px-5 shadow-sm text-base font-medium leading-6 rounded-md border border-concrete hover:bg-horizon;
  }

  .green-ringed {
    @apply ring-2 ring-canua-green;
  }

  .outline-button {
    @apply border bg-white text-sm rounded-md text-pickled-bluewood py-2 px-3 transition-colors;
  }

  .outline-button:hover:not(:disabled) {
    @apply bg-horizon;
  }

  .outline-button:active:not(:disabled), .outline-button:focus:not(:disabled) {
    @apply green-ringed;
  }

  .side-panel-button {
    @apply flex justify-center text-base leading-6 font-medium rounded-md transition-colors py-3 text-center;
  }

  .side-panel-button:hover {
    @apply bg-opacity-20;
  }

  .blue-button {
    @apply text-science-blue bg-science-blue bg-opacity-10;
  }

  .red-button {
    @apply text-candy-red bg-candy-red bg-opacity-10;
  }

  .red-button-inline {
    @apply py-1 px-6 mr-1 shadow-sm text-candy-red bg-candy-red bg-opacity-10 rounded-md hover:bg-teal-green focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-canua-green;
  }

  .red-button-complete {
    @apply py-1 px-5 shadow-sm text-base leading-6 rounded-md text-candy-red bg-candy-red bg-opacity-10 hover:bg-candy-red hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .disabled-button {
    @apply text-pewter bg-nimbus-gray cursor-default;
  }

  /* Kaminari pagination styles */
  .pagination {
    @apply text-pewter text-sm border rounded-md flex items-center justify-items-center overflow-hidden;
    border-color: rgb(100, 111, 167, 0.2);
  }

  .pagination span {
    @apply py-2 px-2 border-r inline-block text-center;
    border-color: rgb(100, 111, 167, 0.2);
  }

  .pagination span.last,
  .pagination span.first {
    display: none;
  }

  .pagination span.next {
    border: none;
    @apply font-semibold;
  }

  .pagination span.prev {
    @apply font-semibold;
  }

  .pagination span.current {
    @apply text-teal-green;
    background-color: rgb(6, 204, 135, 0.2);
  }

  #arrow,
  #arrow::before {
    position: absolute;
    width: 10px;
    height: 10px;
    background: inherit;
  }

  .tooltip-arrow {
    visibility: hidden;
  }

  .tooltip-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  #tooltip[data-popper-placement^='top'] > .tooltip-arrow {
    bottom: -4px;
  }

  #tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
    top: -4px;
  }

  #tooltip[data-popper-placement^='left'] > .tooltip-arrow {
    right: -4px;
  }

  #tooltip[data-popper-placement^='right'] > .tooltip-arrow {
    left: -4px;
  }

  .tooltip p {
    @apply my-2;
  }

  .tooltip p.title {
    @apply font-semibold mt-0 mb-4;
  }

  /* Tooltip that shows on the user edit page */
  .emailtooltip {
    position: relative;
  }

  .emailtooltip .emailtooltiptext {
    visibility: hidden;
    top: 11.5%;
    right: 0.5%;
    margin-left: -60px;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    font-size: 0.8rem;
    position: absolute;
    z-index: 1;
  }

  .emailtooltip:hover .emailtooltiptext {
    visibility: visible;
  }

  .selected-dashboard-balance-card-option {
    @apply border-b-2 border-canua-green;
  }
}

.round-padded-icon {
  @apply border border-concrete flex flex-none w-11 h-11 rounded-full p-2 items-center justify-center bg-nimbus-gray;
}

.round-padded-icon img {
  @apply rounded-full;
}

.table-header {
  @apply pl-7 pr-4 py-5 text-aluminium text-sm font-medium tracking-wide hidden md:grid md:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 border-concrete rounded-t-md only:hidden;
}

.bordered-table-row {
  @apply border border-t-0 last:rounded-b-md border-concrete text-pickled-bluewood;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/* Loading Spinner CSS */
@keyframes loading-spinner {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.loading-spinner div {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 16px solid #06cc87;
  border-top-color: transparent;
  border-radius: 50%;
}
.loading-spinner div {
  animation: loading-spinner 2s linear infinite;
  top: 50px;
  left: 50px;
}
.loading-spinner-container {
  width: 96px;
  height: 96px;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
}
.loading-spinner {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.96);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.loading-spinner div { box-sizing: content-box; }

.turbo-busy[busy] {
  display: none;
}
.turbo-loading {
  display: none;
}
.turbo-busy[busy] + .turbo-loading {
  display: block;
}

.canua-input {
  @apply border border-gray-300 rounded-md focus:outline-none focus:ring-canua-green focus:border-canua-green placeholder-gray-400;
}

.connect-grid {
  grid-template-areas:
    "title    title    callout"
    "subtitle subtitle callout"
    "connect  connect  callout";
}
.title-area {
  grid-area: title;
}
.subtitle-area {
  grid-area: subtitle;
}
.connect-area {
  grid-area: connect;
}
.callout-area {
  grid-area: callout;
}

@media only screen and (max-width: 768px)   {
  .connect-grid {
    grid-template-areas:
      "title"
      "subtitle"
      "callout"
      "connect";
  }
}

.title-area {
  grid-area: title;
}

.bar-area {
  grid-area: bar;
}

.current-value-area {
  grid-area: current-value;
}

.investments-area {
  grid-area: investments;
}

.chart-area {
  grid-area: chart;
}

/* Airtable-style grid for transaction splits */
.airtable-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 800px; /* Ensure minimum width to trigger scrolling on smaller screens */
}

.transaction-splits-container {
  overflow-x: auto; /* Container for horizontal scrolling */
  border: 1px solid #e5e7eb; /* Concrete border */
  border-radius: 0.375rem;
  margin-bottom: 2rem;
}

.transaction-split-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #f9fafb; /* Light gray background */
}

.transaction-split-row {
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #e5e7eb;
}

.transaction-split-row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Fixed width columns with proper alignment */
.transaction-split-header-cell,
.transaction-split-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* Prevent columns from shrinking */
}

/* Color indicators for categories and entities */
.category-indicator,
.entity-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* Shadow effect for scrolling indication */
.transaction-splits-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,0.05));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.transaction-splits-container.has-overflow::after {
  opacity: 1;
}

*[id$="_feedback"] {
  @apply truncate;
}

@media screen(xl) {
  .xl\:grid-breakdown {
    grid-template-areas:
       "title current-value . ."
       "bar bar bar bar"
       "investments investments chart chart";
  }
}

/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url(/fonts/inter-v7-latin-300.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(/fonts/inter-v7-latin-300.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url(/fonts/inter-v7-latin-regular.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(/fonts/inter-v7-latin-regular.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-500 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url(/fonts/inter-v7-latin-500.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(/fonts/inter-v7-latin-500.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-600 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url(/fonts/inter-v7-latin-600.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(/fonts/inter-v7-latin-600.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url(/fonts/inter-v7-latin-700.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(/fonts/inter-v7-latin-700.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */