/* GLOBAL SETTINGS */
:root {
  --color-base: #14183f;
}
:root,
.theme-light {
  /* Light theme colors */
  --text-90: #4a4a4a;
  --text: #1c1c1c;
  --text-50: #000000;
  --text-20: #14183f;

  --back-90: #ffffff;
  --back: #f0f0f0;
  --back-50: #cfcfcf;
  --back-20: #222222;
}

.theme-dark {
  /* Dark theme colors */
  --text-90: #bebebe;
  --text: #dedede;
  --text-50: #fff;
  --text-20: #14183f;

  --back-90: #3c3c3c;
  --back: #1c1c1c;
  --back-50: #666;
  --back-20: #ddd;

  --scrollbar-thumb: #AAA;
  --scrollbar-background: #1c1c1c;
}

/* */
.--almacen {
  --color-light: #f3f4f6;
  --color-base:  #475569;
  --color-dark:  #334155;
  --color-fg:    #ffffff;
}
.--compras {
  --color-light: #ecfdf5;
  --color-base:  #047954;
  --color-dark:  #035d44;
  --color-fg:    #ffffff;
}
.--comercial {
  --color-light: #eff6ff;
  --color-base:  #2563eb;
  --color-dark:  #1e3a8a;
  --color-fg:    #ffffff;
}
.--taller {
  --color-light: #fff7ed;
  --color-base:  #ce500d;
  --color-dark:  #9a3412;
  --color-fg:    #ffffff;
}
.--requis {
  --color-light: #f5f3ff;
  --color-base:  #3f1e77;
  --color-dark:  #240d47;
  --color-fg:    #ffffff;
}
/* */


/* GLOBAL STYLE */
html,
body {
  background-color: rgb(227, 227, 227);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.head-bar {
  display: flex;
  justify-content: center;
  background-color: var(--color-base);
  padding: 0.5rem;
  position: relative;
  color: white;

  .back {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    padding: 0 16px;
    a {
      align-self: center;
      color: white;
    }
  }

  .center {
    display: flex;
    .name {
      align-self: center;
    }
  }

  .sep {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    align-self: center;
    margin: 0 16px;
  }

  .user {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 0 16px;

    .user-buttons {
      display: flex;
      align-self: center;

      > div {
        padding: 8px 16px;
        border: 2px solid rgb(186, 186, 186);
        border-radius: 8px;
        user-select: none;
      }
      .register, .login {
        scale: 0.9;
      }
      > div + div {
        margin-left: 8px;
      }
      .register {
        background-color: #059669;
      }
      .login {
        background-color: #056696;
      }
      a {
        color: white;
      }

      .user-label {
        display: flex;
        align-items: center;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        border: 2px solid rgb(186, 186, 186);
        border-radius: 8px;
        transition: all 0.2s ease;
        .pfp {
          margin-right: 8px;
        }
        &:hover {
          border-color: white;
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
      
      .notifications {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        border: 2px solid rgb(186, 186, 186);
        border-radius: 8px;
        user-select: none;
        color: white;
        text-decoration: none;
        transition: all 0.2s ease;
        margin-right: 10px;
        
        &:hover {
          border-color: rgb(255, 255, 255);
          background-color: rgba(255, 255, 255, 0.1);
        }
        
        &:active {
          background-color: rgba(255, 255, 255, 0.2);
          transform: scale(0.98);
        }
        &::after {
          content: none !important;
        }
        
        .notification-badge {
          display: none;
        }
        .notification-badge.active {
          position: absolute;
          top: 18px;
          right: 2px;
          background-color: #dc2626;
          color: white;
          border-radius: 50%;
          min-width: 18px;
          height: 18px;
          font-size: 11px;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 4px;
          border: 2px solid var(--color-base);
        }
      }
    }
  }
}

.u-a {
  display: flex;
  align-items: center;
  a {
    display: block;
  }
}

.a-pfp {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* BLOCKS */

.block {
  margin-bottom: 64px;
}

.block-head {
  padding: 8px 16px;
  background: var(--color-base);
  color: white;
}

.big-btn-container {
  /*display: flex;*/
}

.big-btn {
  padding: 2rem;
  margin: 1rem;
  border: 4px solid var(--color-base);
  border-radius: 8px;

  .title {
    font-size: 20px;
    color: var(--color-base);
    a { color: inherit; }
  }

  .info {
    font-style: italic;
    padding: 0.5rem 0;
  }

  .body {
    padding: 2rem;
    border-top: 2px solid var(--color-base);
    border-bottom: 2px solid var(--color-base);
  }
}

/* Some User Interfaces */

.ui-input-list {
  padding: 1rem 0;

  div.--item-list .--item {
    display: flex;
    padding: 0 2.5rem 0.5rem 0;
    align-items: center;

    input {
      width: auto;
      flex: auto;
      margin-right: 0.5rem;
    }
  }

  button.small {
    width: 36px;
    height: 36px;
  }
  button.delete {
    background-color: #e92222;
  }
  button.add {
    background-color: #39ab2d;
  }
}

.border-up {
  border-top: 4px solid var(--color-base);
}
.border-bot {
  border-bottom: 4px solid var(--color-base);
}

/* GLOBAL OVERRIDE */
wa-tab-group {
  --track-color: var(--color-base);
}

/* NOTIFICATIONS PAGE */
.notifications-block {
  .notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .notification-day-separator {
    display: flex;
    align-items: center;
    margin: 1.5rem 0 1rem 0;
    
    &:first-child {
      margin-top: 0;
    }
    
    span {
      font-weight: 600;
      color: var(--color-base);
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-right: 1rem;
      white-space: nowrap;
    }
    
    &::after {
      content: '';
      flex: 1;
      height: 2px;
      background: linear-gradient(to right, var(--color-base), transparent);
    }
  }

  .notification-item {
    display: flex;
    padding: 1.5rem;
    background-color: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;

    &:hover {
      border-color: var(--color-base);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .notification-icon {
      display: flex;
      align-items: flex-start;
      margin-right: 1rem;
      
      i {
        font-size: 1.5rem;
        color: var(--color-base);
        background-color: #e0e7ff;
        padding: 0.75rem;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .notification-content {
      flex: 1;
      
      .notification-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
      }

      .notification-message {
        color: #4b5563;
        line-height: 1.5;
        margin-bottom: 0.75rem;
      }

      .notification-time {
        font-size: 0.875rem;
        color: #9ca3af;
        font-style: italic;
      }
    }
  }

  .notification-item.unread {
    border-left: 4px solid var(--color-base);
    background-color: #f8fafc;
    
    .notification-title {
      color: var(--color-base);
    }
  }
}