/* CHROME, EDGE, SAFARI */
*::-webkit-scrollbar {
  width: var(--space-sm);
  height: var(--space-sm);
}

.mainContent::-webkit-scrollbar-track {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb {
  background: #393838;
  border-radius: var(--radius-sm);
  border: 2px solid var(--card-bg);
}

.mainContent::-webkit-scrollbar-thumb:hover {
  background: #555; /* slightly brighter primary */
}

.contentHeader {
  white-space: nowrap;
  backdrop-filter: var(--filter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--header-height);
  margin-bottom: var(--space-md);
  padding: var(--space-xs) calc(var(--space-md) - 4px);
  overflow-x: auto;
}
/* CHROME, EDGE, SAFARI */
.contentHeader::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

.contentHeader::-webkit-scrollbar-track {
  background: var(--main-bg);
  border-radius: var(--radius-sm);
}

.contentHeader::-webkit-scrollbar-thumb {
  background: var(--bg);
  opacity: 0.1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-bg);
}

.contentHeader::-webkit-scrollbar-thumb:hover {
  background: #0393d626; /* slightly brighter primary */
}
.headerLeft {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--space-xs) + 1px);
}
.headerRight {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
/*SIDEBAR TOGGLE MENU ICON*/
/*NAVICATION ICON SVG*/
.navIcon svg,
.menuIcon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
}
.workspaceMemberMenuBtn {
  position: absolute;
  right: 0;
  color: var(--primary);
  background: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.workspaceMemberMenuBtn:hover {
  background: var(--bg-hover);
}
.menuBtn {
  padding: 0 var(--space-xs);
  font-size: 0.9rem;
  font-weight: 600;
  background: none;
  color: var(--color);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: calc(var(--space-xs) + 1px);
}
.menuBtn:hover {
  opacity: 0.8;
}

#closeSidebar {
  position: sticky;
  margin: calc(var(--space-xs) + 1px);
  margin-left: auto;
  background: none;
  justify-content: center;
  align-items: center;
}

.closeModalBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.closeModalBtn:hover {
  opacity: 0.6;
}
@media (min-width: 800px) {
  .menuBtn {
    display: none;
  }
}

.navBtn.active {
  font-weight: 900;
  background: var(--active);
  color: var(--active-color);
}

#logoutBtn {
  background: none;
  border: none;
  margin-left: auto;
  height: 100%;
  cursor: pointer;
  color: var(--color);
  transition: all 0.4s ease;
}
#logoutBtn:hover {
  color: #ff0000;
}
.showFlex {
  display: flex;
}
.hide {
  display: none;
}
.show {
  display: block !important;
}
.closed {
  cursor: not-allowed;
}
.modalActions {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) auto;
}
.modalActions button {
flex: 1;
}
.lockScroll {
  overflow: hidden;
}

/*LOADER*/
.preLoaderContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--card-bg);

  z-index: 999;
  width: 100vw;
  height: 100dvh;
}
.preLoaderContainer .label {
  font-weight: 800;
}
.preLoaderContainer .label span {
  color: var(--primary);
}
.tt-wave-loader {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--space-sm) - 2px);
  height: 32px;
}

.tt-wave-loader span {
  border: 1px solid var(--color);
  width: 6px;
  height: 100%;
  background: var(--primary);
  border-radius: 6px;
  animation: tt-wave 1.2s ease-in-out infinite;
}

.tt-wave-loader span:nth-child(2) {
  animation-delay: 0.15s;
}
.tt-wave-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes tt-wave {
  0% {
    height: 20%;
    opacity: 0.6;
  }
  40% {
    height: 100%;
    opacity: 1;
  }
  80% {
    height: 20%;
    opacity: 0.6;
  }
  100% {
    height: 20%;
    opacity: 0.6;
  }
}

button:has(.btnLoaderContainer) {
  padding: 0;
}
.btnLoaderContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}

.step-indicator {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  position: absolute;
  right: 20px;
  max-width: 300px;
}

/* Text: "1 / 2" */
.step-indicator::before {
  content: "Step: " attr(data-step) " / " attr(data-total);
  display: block;
  margin-bottom: 0;
}

/* Bar background */
.step-indicator-bar-container {
  width: 100%;
  height: 4px;
  background: var(--navBtn-bg);
  border-radius: 3px;
  overflow: hidden;
}

/* Actual progress bar */
.step-bar {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 3s ease;
}

/* Step widths */
.step-1 {
  width: 50%;
}
.step-2 {
  width: 100%;
}

input.error {
  border: #ff0000 soldid 2px;
}

#personalCreatedLogs.isLoading {
  pointer-events: none;
  position: relative;
}

#personalCreatedLogs.isLoading::after {
  content: "Loading...";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  color: #757474;
  font-size: 0.9rem;
}

.taskContainer {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.taskContainer.show {
  opacity: 1;
  transform: translateY(0);
  padding: var(--space-md) var(--space-sm);
}

.taskContainer.removing {
  opacity: 0;
  transform: translateY(-4px);
}

#personalCreatedLogs.reordering .taskContainer {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

#actionsMessage {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  left: 50%;
  top: -100%;
  transform: translateX(-50%);
  max-width: 300px ;
  width: 100% ;
  padding: var(--space-xs);
  height: fit-content;
  transition: top 0.5s ease;
}
.actionMessageContainer {
  width: 100%;
  text-align: center;
}
#actionsMessage .card {
    display: flex;
  justify-content: center;   
  align-items: center;   
  background: var(--bg-primary);
  margin: 0;
  min-height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}
#actionsMessage.slideIn {
  top: 30px;
}
#actionsMessage.error .card {
  border: 0.5px solid var(--danger);
}
.error {
  color: var(--danger);
}
#actionsMessage.success .card {
  border: 1px solid var(--success);
}
.success {
  color: var(--success);
}

#confirmActionModal {
align-self: center;
  width: 100%;
  max-width: 300px;
  height: fit-content;
}
#confirmActionModal p {
  margin: 0;
  padding: 0;
}

/*NOTIFICATIONS*/

#notificationsContainer {
  border-radius: var(--radius-sm);
  position: absolute;
    top: 50px;
    right: var(--space-sm);
  z-index: 2;
  width: 100%;
  max-width: 600px;
  max-height: 600px;
  overflow: auto;
  padding: var(--space-md) 0;
  pointer-events: auto;
  background: var(--card-bg);
  box-shadow: 0 0 15px var(--active-color);
  animation: fadeIn .18s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
#notificationsList{
  padding-top: var(--space-md);
list-style: none;
display: flex;
flex-direction: column;
}
#notificationsList .notificationsItem{
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--notif-border);
  margin-bottom: var(--space-xs);
}
#notificationsList .notificationsItem:hover {
  background: var(--active);
  cursor: pointer;
}
#notificationsList  .notificationsItem a {
  position: relative;
  color: var(--notif-text);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
}
#notificationsList  .notificationsItem a:hover {
  text-decoration: none;
}
#notificationToggleBtn {
  position: relative;
}
.notificationsItem.unread {
    background: var(--notif-bg-unread); /* light blue for unread */
  font-weight: 600;  
}
.notificationsItem .timestamp {
    display: block;
    position: absolute;
    bottom: 0;

    margin: var(--space-sm) 0;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: calc(var(--space-sm) + 2px);
  text-align: right;
  position: absolute;
  right: var(--space-sm);
}
#notifBadge {
  position: absolute;
  top: 0;
  right: 0;
  width: 17px;
  height: 17px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  color: #ffffff;
  background-color: red;
  border: 1px solid var(--border);
}
.profileAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.profileAvatarContainer {
  position: relative;
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
}
.profileAvatarContainer.Free::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
background: radial-gradient(
  circle at 30% 30%,
  #e9d7c9,
  #cd6318
);
box-shadow: 0 0 6px rgba(159, 122, 95, 0.18);
}
.profileAvatarContainer.Pro::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f4f4f4, #979797);
  box-shadow: 0 0 4px rgba(160, 160, 160, 0.35);
}
.profileAvatarContainer.Team::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
 background: radial-gradient(
  circle at 30% 30%,
  #f7e7a6,
  #fdbf17,
  #ffbb00
);

box-shadow: 0 0 5px rgba(214, 178, 76, 0.25);
}
.profileAvatar:hover {
  border-color: var(--border-light);
}
/* Container */
.tableContainer {
  overflow: auto;
  max-width: 100%;
  margin: 20px 5px;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  color: var(--color);
}

/* Header */
thead th {
  text-align: left;
  padding: 12px 0;
  background: var(--active);
  font-weight: 600;
  border-bottom: 1px solid var(--color);
}

/* Rows */
 tbody tr {
  transition: background 0.15s ease;
}

 tbody tr:hover {
  background: var(--bg);
}

/* Cells */
tbody td {
  padding: 12px 6px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

/* URL Cell */
.urlCell {
  max-width: 300px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.urlCell:hover {
  overflow-x: auto;
}

/* URL Wrapper */
.urlWrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.urlText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy Button */
.copyBtn {
   color: var(--secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
  display: flex;
  font-weight: 600;
  min-width: fit-content;
  align-items: center;
}

.copyBtn:hover {
  opacity: 1;
}

/* Status Colors */
.status {
  font-weight: 600;
}

.status.active {
  background: none;
  color: var(--success);
}

.status.used {
  color: var(--warning);
}

.status.full {
  color: var(--danger);
}

/* Actions */
 .revoke, .revokeApiBtn {
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  opacity: 0.7;
  padding: 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--danger);
}

.revoke:hover, .revokeApiBtn:hover {
  opacity: 1;
  backdrop-filter: blur(30px);
}
.restoreApiBtn {
  color: var(--success);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  opacity: 0.7;
  padding: 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--success);
}
.restoreApiBtn:hover {
  opacity: 1;
    backdrop-filter: blur(30px);

}
button:active {
transform: scale(0.9);
}
/* Mobile */
@media (max-width: 600px) {
  .inviteTable,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: 12px;
    border: 1px solid var(--border-light);
    padding: 12px;
    border-radius: 6px;
  }

  td {
    padding: 8px 0;
    border-bottom: none;
  }

  td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
  }
}
.danger.settingsCard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  border: 1px solid var(--danger);
  overflow-x: auto;
}
@media (max-width: 600px) {
  div.danger.settingsCard {
  display: flex;
  flex-direction: column;
grid-template-columns: 1fr;
}
}
.settingsCard .card {
  min-width: 300px;
}
.deleteCard {
  background: var(--bg);
}
.deleteCard::before {
  content: "";
  font-size: 1.5rem;
}
.docLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 6px;
text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: var(--lh-text-strong);
  text-decoration: none;

  background: var(--active);
  color: var(--color);
  border: 1px solid var(--lh-border);

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.docLink:hover {
  background: var(--bg);
  border-color: var(--lh-blue);
  color: var(--lh-blue);
}

.docLink:active {
  background: var(--lh-surface-4);
  border-color: var(--lh-blue-strong);
  color: var(--lh-blue-strong);
}

.docLink svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Base container must be relative */
section.isLoading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

/* Overlay */
section.isLoading::after,
#recentLogs.isLoading::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px) brightness(90%);
  z-index: 10;
}

/* Spinner */
section.isLoading::before,
#recentLogs.isLoading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 4px solid #d4fffa;
  border-top-color: var(--primary-light);
  border-radius: 50%;
  animation: tt-spin 0.8s linear infinite;
  z-index: 11;
}
@keyframes tt-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);  }
}

/* ============================
   DOCUMENTS SECTION
   ============================ */

/* Document List */
.documentsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Document Item */
.documentItem {
  display: grid;
grid-template-columns: 1fr minmax(50px, 50px) minmax(50px, 100px) minmax(50px, 60px);  
gap: var(--space-md);
  padding: 14px 16px;
  background: var(--lh-surface-2);
  border: 1px solid var(--lh-border);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 600px) {
  .documentItem {
display: flex;
flex-wrap: wrap;
}
.docAction {
  max-width: fit-content;
}
}
.documentItem:hover {
  background: var(--active);
  border-color: var(--primary-light);
}

/* Left side */
.docLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.docLeft svg {
  stroke: currentColor;
}

/* Info */
.docInfo {
  display: flex;
  flex-direction: column;
}

.docTitle {
  font-weight: 600;
  color: var(--lh-text-strong);
}

.docMeta {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Download Button */
.docAction {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--lh-surface-4);
  border: 1px solid var(--border);
  color: var(--lh-text-strong);
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
}

.docAction:hover {
  border: 1px solid var(--border-light);
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.statusBadge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: #ff6b3520;
  color: #ff6b35;
  font-size: 0.75rem;
  font-weight: 600;
}

.inprogress {
  background: #ff6b3520;
  color: #ff6b35;
}