* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  .background {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
  }
  
  .background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
.main-panel {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  background-color: rgba(0, 0, 0, 0.596);
  align-items: center;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  height: 85%;
}

#iconG{
    height: 200px;
}

#googleBtn{
    padding: 10px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.178);
    transition: all 0.3s ease;
    cursor: pointer;
    margin: auto;
}

#googleBtn:hover{
    scale: 1.05;
}

#googleBtn label{
    color: rgb(228, 228, 228);
}


/* Main container */
.loggedin-panel {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column; /* Stack nav above order list */
}

.nav {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    top: -60px;
    left: 0px;
    gap: 5px;
}

.nav button {
    height: 50%;
    width: 100px;
    background-color: #444444;
    color: white;
    font-size: 1rem;
    border-top-right-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}


.nav button:hover{
    background-color: #55555533;
}


.nav .selected{
  background-color: #55555533;
}

/* Main container */
.panel {
    display: flex;
    width: 100%;
    height: 95%;
    background-color: #12121279; /* Darker panel background */
    padding: 20px;
    box-sizing: border-box;
}

/* Options panel - right side */
.options {
    width: 30%;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #ddd;
}

.options label {
    font-size: 24px;
    margin-bottom: 5px;
}

.options select, .options input, .options button {
    padding: 8px;
    font-size: 24px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #3333333f; /* Darker input and select fields */
    color: #fff;
}

.options button {
    cursor: pointer;
    background-color: #6200ea; /* Purple button */
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.options button:hover {
    background-color: #3700b3; /* Darker purple on hover */
}

/* Order list - left side */
.order-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    width: 70%;
    background-color: #44444473;
    padding: 20px;
    max-height: 800px;      /* ✅ Limits total height */
    overflow-y: auto;       /* ✅ Scroll if content exceeds 800px */
    align-items: start;     /* ✅ Prevent stretching */
    scrollbar-width: thin;            /* For Firefox */
    scrollbar-color: #888 #12121279;  /* thumb and track for Firefox */
}
  
.order-list::-webkit-scrollbar-track {
    background: #12121279;  /* Track background */
    border-radius: 5px;
}

.order-list::-webkit-scrollbar-thumb {
    background-color: #888; /* Thumb color */
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.order-list::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

.order-item {
    background-color: #222;
    color: white;
    padding: 15px;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
}  

.order-item:hover {
    background-color: #333;
}

#logoutBtn {
    position: fixed;
    font-size: 2rem;
    margin-top: auto;
    background-color: rgb(185, 0, 0);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    left: 100%;
    top: 100%;
    transform: translate(-100%, -100%);
    transition: all 0.3s ease;
}

#logoutBtn:hover {
    background-color: darkred; /* Darker red on hover */
}

/* Style for the options in the dropdown */
select {
    background-color: #333;  /* Dark background color */
    color: white;  /* White text color */
    padding: 8px;  /* Add some padding for better visual appeal */
    border: 1px solid #444;  /* Add a border for visibility */
    border-radius: 4px;  /* Slightly rounded corners */
    width: 100%;  /* Ensure it stretches across its container */
  }
  
  /* Style for the options inside the select dropdown */
  select option {
    background-color: #333;  /* Dark background for each option */
    color: white;  /* White text color */
  }
  
  /* Optional: Add hover effect for options */
  select option:hover {
    background-color: #555;  /* Lighter background color on hover */
  }
  
  .open-order {
    display: none;
    background-color: #121212ad;
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    gap: 20px;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    margin-top: -10px;
  }
  
  .uploaded-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4d4d4d #1a1a1a; /* Scroll thumb color and track color */
  }
  
  /* Webkit browsers (Chrome, Safari, Edge) */
  .uploaded-images::-webkit-scrollbar {
    width: 8px; /* Scrollbar width */
  }
  
  .uploaded-images::-webkit-scrollbar-thumb {
    background-color: #4d4d4d; /* Thumb color */
    border-radius: 4px; /* Rounded corners */
  }
  
  .uploaded-images::-webkit-scrollbar-track {
    background-color: #1a1a1a; /* Track color */
  }
  
  .uploaded-images img {
    width: 150px;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #555;
  }
  
  .uploaded-images img:hover {
    scale: 1.02;
    border-color: #888;
  }
  
  .uploaded-images img.add-image {
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 24px;
    border: 1px dashed #777;
  }
  
  .order-label {
    font-weight: bold;
    margin-top: 5px;
  }
  
  input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 8px;
    accent-color: #00bcd4;
  }
  
  .open-order{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 780px;
    overflow: hidden;
    gap: 30px;
  }
  
  .open-order .left{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 600px;
    gap: 20px;
  }
  
  .open-order .right{
    width: 100%;
    padding: 10px 20px;
  }

  .uploaded-images{
    width: 100%;
    height: 380px;
  }  

  .images {
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding: 20px;
  }

  .images img{
    margin: auto;
    border-radius: 10px;
    gap: 10px;
    width: 180px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .images img:hover{
    scale: 1.02;
  }
  
  .orderDetails{
    width: 100%;
    text-align: center;
  }

  #payment {
    width: 300px;
    height: 700px;
    object-fit: scale-down;
    text-align: center;
  }
  
  #email {
    display: block;  /* Make it a block element so text-align can work */
    margin: 0 auto;  /* Centers the span inside the paragraph */
    text-align: center;
  }  

  #receiptId{
    font-size: 1.5rem;
    margin: auto;
    text-align: center;
  }

  .receiptId{
    text-align: center;
    width: 100%;
    height: 50px;
    margin: auto;
    margin-top: -15px;
  }

  #orderDetails p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin-bottom: 5px;
    color: var(--text-color); /* Use theme variable if available */
  }
  
  #orderDetails label {
    flex: 1;
    margin-right: 10px;
    color: var(--label-color, #ffffff); /* fallback to dark gray */
  }
  
  #orderDetails input[type="number"]{
    width: 100px;
    text-align: center;
    padding: 2px 8px;
    border: 1px solid var(--border-color, #ccc);
    background-color: var(--input-bg, #fff);
    color: var(--input-color, #000);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s, background-color 0.3s;
  }
  
  #orderDetails input[type="number"]:focus,
  #orderDetails textarea:focus {
    border-color: var(--accent-color, #007BFF); /* fallback blue */
    outline: none;
    background-color: var(--focus-bg, #f0f8ff);
  }
  
  #instruction {
    padding: 5px;
    width: 100%;
    height: 80px;
    font-size: 14px;
    border-radius: 4px;
  }
  
  #orderDone{
    background-color: rgba(0, 95, 0, 0.993);
    color: white;
    font-size: 1.5rem;
    border: none;
    border-radius: 10px;
    position: fixed;
    width: 300px;
    padding: 10px;
    top: 101%;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  #orderDone:hover{
    background-color: rgba(1, 117, 1, 0.822);
  }

  #openEditedOutput {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    background-color: #4d4d4d;
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s ease;
  }

  #openEditedOutput:hover {
    background-color: var(--button-hover-bg, #0000003d);
  }

  #openEditedOutput:active {
    background-color: var(--button-active-bg, #2a005a);
  }

  #orderDetails select{
    width: 100%;
  }

  #uploadPaymentBtn{
    position: fixed;
    top: 91.5%;
    left: 3.1%;
    width: 300px;
    padding: 8px;
    border-radius: 10px;    
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #181818ee; /* matches scrollbar thumb */
    color: #f0f0f0; /* light text for contrast */
    z-index: 999;
  }

  #uploadPaymentBtn:hover{    
    background-color: #66666660; /* slightly lighter gray on hover */
  }

  .payments{
    background-color: #424242;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 320px;    
    scrollbar-width: thin;
    scrollbar-color: #4d4d4d #1a1a1a; /* Scroll thumb color and track color */
  }
  
  /* Webkit browsers (Chrome, Safari, Edge) */
  .payments::-webkit-scrollbar {
    width: 8px; /* Scrollbar width */
  }
  
  .payments::-webkit-scrollbar-thumb {
    background-color: #4d4d4d; /* Thumb color */
    border-radius: 4px; /* Rounded corners */
  }
  
  .payments::-webkit-scrollbar-track {
    background-color: #1a1a1a; /* Track color */
  }

  .done-link{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    background-color: #4d4d4d;
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
  }

  #done_link,
  #done_link a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    color: white;
  }

  .chats-panel{
    gap: 10px;
    padding: 5px;
  }

  .chats-panel .left{
    overflow-y: scroll;
    width: 30%;
    padding: 5px;
  }
  
  .chats-panel .right{
    background-color: #44444473;
    width: 70%;
    padding: 10px;
  }

  .email-button {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px 14px;
    background-color: #44444473;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
  }

  .email-button:hover {
    background-color: rgba(1, 150, 1, 0.9); /* Slightly brighter on hover */
  }

  /* Apply to all elements */
  *::-webkit-scrollbar {
    width: 8px; /* Scrollbar width */
  }

  *::-webkit-scrollbar-thumb {
    background-color: #4d4d4d; /* Thumb color */
    border-radius: 4px; /* Rounded corners */
  }

  *::-webkit-scrollbar-track {
    background-color: #1a1a1a; /* Track color */
  }

  .email-button {
    background-color: transparent;
    color: white;
    border: none;
    padding: 10px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .email-button:hover,
  .email-button.active {
    background-color: rgba(1, 150, 1, 0.9); /* Greenish theme color */
  }
  
  .email-button.flash {
    animation: flashHighlight 1s ease;
  }

  @keyframes flashHighlight {
    0%   { background-color: rgba(255, 255, 255, 0.534); }
    100% { background-color: transparent; }
  }

  .chats{
    height: 92%;
    transition: all 0.3s ease;
  }

  .inputs {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    height: 8%;
    gap: 10px;
  }

  #addImageMessage{
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  #addImageMessage:hover{
    scale: 1.02;
  }

  .inputs input {
    height: 95%;
    width: 80%;
    border-radius: 10px;
    background-color: #181818;
    border: 1px solid #4d4d4d;
    color: white;
    padding: 0 10px;
    transition: all 0.3s ease;
  }

  .inputs input::placeholder {
    color: #999;
  }

  .inputs button {
    width: 12%;
    height: 95%;
    border-radius: 10px;
    background-color: rgba(1, 117, 1, 0.822);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .inputs button:hover {
    background-color: rgba(1, 150, 1, 0.9);
  }


  .message {
    margin: 8px;
    padding: 10px 14px;
    max-width: 70%;
    border-radius: 10px;
    word-break: break-word;
    background-color: #2b2b2b;
    color: white;
  }

  .right-msg {
    align-self: flex-end;
    background-color: #333; /* theme for customer */
  }

  .left-msg {
    align-self: flex-start;
    background-color: rgba(1, 117, 1, 0.822); /* theme for chromations */
  }

  .chats {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 10px;
    height: 92%;
  }

  /* Image message */
  .chats img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    margin-top: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
    object-fit: scale-down;
  }


  .chats img:hover{
    transform: scale(1.02);
  }

  .faqs-chats-switch {
    position: fixed;
    bottom: 10px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
  }

  .faqs-chats-switch button {
    width: 100px;
    height: 35px;
    border-radius: 8px;
    background-color: #2e2e2e;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9rem;
  }

  .faqs-chats-switch button:hover {
    background-color: #3d3d3d;
  }

  .faqs-panel {
    position: fixed;
    display: flex;
    background-color: #444444;
    width: 40%;
    height: 50%;
    bottom: 50px;
    left: 25px;
    transform-origin: bottom left;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: 10px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .faqs-panel .left {
    width: 50%;
    height: 100%;
    background-color: #1f1f1f;
    border-radius: 10px;
    margin-right: 10px;
    padding: 10px;
    overflow-y: scroll;
    color: #fff;
  }

  .faqs-panel .right {
    width: 50%;
    height: 100%;
    background-color: #1f1f1f;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
  }

  .faqs-panel .right button {
    width: 100%;
    border: none;
    border-radius: 10px;
    height: 35px;
    background-color: #3a3a3a;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .faqs-panel .right button:hover {
    background-color: #555;
  }

  .faqs-panel .right textarea,
  .faqs-panel .right img {
    margin-top: 2px;
    width: 100%;
    height: 265px;
    border-radius: 8px;
    background-color: #2b2b2b;
    color: #ffffff;
    border: 1px solid #444;
    padding: 10px;
    object-fit: scale-down;
  }

  
  .faqs-panel .right img {
    height: 265px;
    margin-top:2px
  }

  .faqs-panel.show {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .faq-button, #showOriginalInstruction{
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background-color: #333;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .faq-button, #showOriginalInstruction:hover {
    background-color: #555;
  }

  #faqImg {
    cursor: pointer;
    border: 2px dashed transparent;
    transition: border 0.3s;
  }

  #faqImg:hover {
    border: 2px dashed #999;
  }

  .faq-button.active {
    background-color: #00920594;
    color: white;
  }

  .faqsButtons{
    display: flex;
    gap: 5px;
  }

  #deleteFaq{
    background-color: rgba(255, 0, 0, 0.329);
    width: 35%;
  }

  #deleteFaq:hover{
    background-color: rgba(255, 0, 0, 0.438);
  }

/* Tracker Panel Styles */
.tracker-panel {
  display: none; /* Initially hidden */
  flex-direction: column;
  gap: 30px;
  padding: 20px;
  overflow-y: auto;
}

/* When the panel is active/selected */
.tracker-panel.active,
.tracker-panel[style*="display: flex"] {
  display: flex !important;
}

.tracker-section {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  padding: 20px;
}

.section-title {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.tracker-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.tracker-card:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.15);
}

.tracker-card h3 {
  color: white;
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-align: center;
}

.tracker-value {
  color: #00ff88;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

.tracker-description {
  color: #aaa;
  font-size: 0.9rem;
  text-align: center;
}

/* Toggle button for options - hidden by default */
.options-toggle {
    display: none;
    position: relative;
    width: 100%;
    margin: 10px 0;
    background-color: #444444;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.chats-toggle {
  display: none; /* Hide by default on desktop */
}

#customerName{
  text-align: center;
}

.editors {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.editor-column {
  flex: 1.5;
  background-color: rgba(36, 36, 36, 0.3);
  border-radius: 8px;
  padding: 10px;
}

#editors-list{
  width: 15%;
}

#editors-list .editor-button, .staff-button{
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px 14px;
  background-color: rgba(68, 68, 68, 0.45);
  color: white;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

#editors-list .editor-button.selected {
  background-color: rgba(255, 255, 255, 0.35);
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

#editors-list {
  width: 8%;
  flex: 0.5;
  min-width: 120px;
}

.editor-column {
  flex: 1;
  background-color: rgba(58, 58, 58, 0.3);
  border-radius: 8px;
  padding: 10px;
}

.editor-button:hover {
  background-color: rgba(255, 255, 255, 0.205);
}

.editor-button.selected {
  background-color: rgba(1, 150, 1, 0.5);
}

/* Editor Info Form Styles */
.editor-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}

.editor-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.editor-info-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-left: 15px;
}

#editorStreak, #editorPenalty{
  width: 80px;
}

.profile-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

#editorProfilePic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #444;
  cursor: pointer;
  transition: all 0.3s ease;
}

#editorProfilePic:hover {
  border-color: #777;
  transform: scale(1.02);
}

#editorCommission, #editorQuota, #editorTasks, 
#editorActive, #editorEmergency, #editorLeaves, 
#editorEmergencies, #editorStreak, #editorPenalty{
  width: 115px;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.9rem;
}

.form-group label {
  color: #ddd;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.9rem;
}

.form-group textarea {
  height: 80px;
  resize: vertical;
}

/* Editor Stats Section */

.stats{
  width: 60%;
  padding-left: 15px;
}

.stats input{
  width: 180px;
}

.editor-stats-container {
  display: flex;
  margin-top: 20px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.stats-columns {
  display: flex;
  width: 60%;
  gap: 20px;
}

.stats-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.totalEdits {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.editor-stats-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.totalEdits {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stats-header {
  font-size: 1.2rem;
  color: #aaa;
  margin-bottom: 10px;
}

.stats-value {
  font-size: 4rem;
  font-weight: bold;
  color: #00ff88;
}

.statsTotalHeads{
  width: 100%;
  display: flex;
}

.editor-stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.editor-stat-item label {
  color: #aaa;
  font-size: 0.9rem;
}

.editor-stat-item input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
}

.total-heads {
  font-size: 3rem;
  font-weight: bold;
  color: #00ff88;
  text-align: center;
}

.total-heads-label {
  color: #aaa;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 5px;
}

/* Active toggle switch */
.active-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.active-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.active-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.active-toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.active-toggle input:checked + .active-toggle-slider {
  background-color: #00bcd4;
}

.active-toggle input:checked + .active-toggle-slider:before {
  transform: translateX(30px);
}

/* Payslip Styles */
#paySlip {
  background-color: rgba(36, 36, 36, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

/* Custom context menu for payslip */
.custom-context-menu {
  position: fixed;
  z-index: 9999;
  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  min-width: 180px;
  top: 7%;
  left: 65%;
}
.custom-context-menu[aria-hidden="false"] {
  display: flex;
}
.custom-context-menu button {
  background: transparent;
  color: #fff;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.custom-context-menu button:hover {
  background: rgba(255,255,255,0.04);
}

#paySlip h3 {
  color: white;
  margin-bottom: 15px;
  text-align: center;
}

.payDateSelector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.payDateSelector button {
  padding: 8px 15px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.payDateSelector button:hover {
  background-color: #555;
}

.date-range {
  color: white;
  font-weight: bold;
}

.payslip-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

.payslip-table th {
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 10px;
  text-align: left;
  font-size: 0.7rem;
}

.payslip-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.6rem;
}

.payslip-table tr:last-child td {
  border-bottom: none;
}

#totalCommission {
  background-color: rgba(36, 36, 36, 0.3);
  border-radius: 8px;
  padding: 15px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: white;
}

.total-row span:last-child {
  font-weight: bold;
}

/* Penalty displayed as a negative red value */
.total-penalty-negative {
  color: #ff4d4d; /* red */
  font-weight: 800;
}

/* Make the grand total row's value larger and more prominent */
.grand-total {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.1rem;
}

/* Specific bigger font for the numeric grand total value */
.grand-total .grand-total-value,
.grand-total-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
}

#editors-stats{
  overflow-y: scroll;
}

.sales-panel {
  display: flex;
  gap: 30px;
  padding: 20px;
}

.sales-column {
  flex: 1;
  background-color: #12121279;
  min-height: 380px;             /* a bit taller to match chart height */
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keep top content and bottom pill aligned */
  padding: 0;                     /* inner sections control their own padding */
  box-sizing: border-box;
}

#addExpenses{
  width: 100%;
  top: 0%;
  height: 50px;
  background-color: #6d6d6d62;
  color: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 12px 25px;
}

#expensesList{
  height: 85%;
  width: 100%;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#totalExpenses{
  /* Red background, full width; centered big text */
  text-align: center;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  padding: 16px 14px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(90deg, rgba(255,0,0,0.45), rgba(255,80,80,0.45));
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  box-sizing: border-box;
  color: #fff;
  font-size: 28px;        /* big (not as huge as ROI) */
  font-weight: 800;
  height: 50px;
}

/* sales */

#salesMonthNav{
  width: 100%;
  top: 0%;
  height: 50px;
  background-color: #6d6d6d62;
  color: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

#salesMonthNav button{
  padding: 8px 15px;
  width: 80px;
  background-color: #1a1a1a73;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Sales list container and rows */
#salesList{
  height: 85%;
  width: 100%;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual sales row */
.sales-row {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Interactive hover & focus affordances for rows and controls */
.sales-row {
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  will-change: transform, box-shadow, background-color;
}
.sales-row:hover,
.sales-row:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  background-color: rgba(255,255,255,0.02);
  cursor: pointer;
  outline: none;
}
.sales-row:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* Make add / navigation controls feel interactive */
#addExpenses,
#prevSales,
#nextSales,
#prevPayPeriod,
#nextPayPeriod,
#maxSalesBtn {
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  border-radius: 8px;
}
#addExpenses:hover,
#prevSales:hover,
#nextSales:hover,
#prevPayPeriod:hover,
#nextPayPeriod:hover,
#maxSalesBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  filter: brightness(1.06);
}
#addExpenses:active,
#prevSales:active,
#nextSales:active,
#prevPayPeriod:active,
#nextPayPeriod:active,
#maxSalesBtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  filter: none;
}

/* Accessibility: allow keyboard users to see focus on these controls */
#addExpenses:focus,
#prevSales:focus,
#nextSales:focus,
#prevPayPeriod:focus,
#nextPayPeriod:focus,
#maxSalesBtn:focus,
.sales-row:focus {
  outline: 3px solid rgba(0,181,230,0.14);
  outline-offset: 2px;
}
/* Slight variation for readability */
.sales-row:nth-child(odd) {
  background: rgba(255,255,255,0.01);
}

/* Columns */
.sales-col {
  font-size: 0.95rem;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-col.sales-date {
  color: #cfcfcf;
  font-size: 0.9rem;
}

.sales-col.sales-name {
  font-weight: 600;
  color: #ffffff;
}

.sales-col.sales-paid {
  text-align: right;
  font-weight: 800;
  color: #00ff88;
}

#expensesList .sales-col.sales-paid,
.expensesList .sales-col.sales-paid {
  text-align: right;
  font-weight: 800;
  color: #ff0000;
}

/* Tweak for very long names */
.sales-col.sales-name {
  min-width: 120px;
}

/* Responsive adjustments */
@media (max-width: 700px) {
  .sales-row {
    grid-template-columns: 1fr 110px;
  }
  .sales-col.sales-date {
    display: none;
  }
  .sales-col.sales-name {
    grid-column: 1 / 2;
  }
  .sales-col.sales-paid {
    grid-column: 2 / 3;
    text-align: right;
  }
  #salesList {
    padding: 8px;
    gap: 8px;
  }
}

/* Style for the "Maximum" button to match other nav buttons */
#salesMonthNav #maxSalesBtn {
  padding: 8px 12px;
  background-color: #5a5a5a73;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 120px;
}

#totalSales{
  /* Blue background, full width; centered big text */
  text-align: center;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  padding: 16px 14px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.45), rgba(0,160,255,0.45));
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  box-sizing: border-box;
  color: #fff;
  font-size: 28px;         /* big (not as huge as ROI) */
  font-weight: 800;
  height: 50px;
}

#salesGraph{
  background-color: transparent;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

/* Pie card wrapper — fill the column and align bottom pill with other columns */
.pie-card{
  width: 100%;
  max-width: none;               /* let column width control sizing */
  margin: 0 auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keeps ROI pill at the bottom */
  gap: 12px;
  align-items: center;
  position: relative;
  padding: 12px 18px;            /* match horizontal spacing used elsewhere */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  border-radius: 12px;
  box-shadow: 0 8px 30px rgb(0, 0, 0);
  height: 100%;
  box-sizing: border-box;
}

/* Legend (top) — compact grid layout for a neat arrangement */
.pie-legend{
  width: 100%;
  display: flex;
  justify-content: center; /* center the grid */
  align-items: center;
  padding-bottom: 4px;
}

/* grid with 3 columns, items will wrap on small screens */
.legend-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px 18px;
  width: 100%;
  align-items: center;
  justify-items: start;
  max-width: 420px;
}

/* single legend entry: colored dot + label stacked inline */
.legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* dot (keeps previous visual style but uses flex-friendly sizing) */
.legend-dot{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 14px;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* color helpers — unchanged */
.legend-dot.c-tools  { background: #9aa0a0; } /* Tools */
.legend-dot.c-salaries { background: #00b5e6; } /* Salaries */
.legend-dot.c-bills { background: #ffb000; } /* Bills */
.legend-dot.c-fbads { background: #4d8cff; } /* FB Ads */
.legend-dot.c-misc { background: #7f8c8f; } /* Misc (violet) */
.legend-dot.c-profit { background: #8cc800; } /* Profit (green) */

/* label inside each legend item */
.legend-label{
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: default;
}

/* Responsive: collapse to 2 columns on small screens, center items */
@media (max-width: 420px) {
  .legend-grid{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 6px 12px;
    justify-items: center;
  }
  .legend-item{
    font-size: 14px;
  }
}

/* Pie visual wrapper */
.pie-wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The pie itself
   - JS should set CSS variables:
     --c1..--c6  (colors)
     --d1..--d6  (slice angles, e.g. "144deg")
   - By default we provide fallback values.
*/
.pie{
  --c1: #9aa0a0;
  --c2: #00b5e6;
  --c3: #ffb000;
  --c4: #4d8cff;
  --c5: #8cc800;
  --c6: #7f8c8f;

  --d1: 144deg;
  --d2: 108deg;
  --d3: 36deg;
  --d4: 108deg;
  --d5: 25.2deg;
  --d6: 46.8deg;

  width: 100%;
  max-width: 420px;                 /* cap diameter so it fits the column neatly */
  aspect-ratio: 1 / 1;              /* keep perfect circle */
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;                        /* ensure slices reach center */
  box-shadow: 0 10px 30px rgba(0,0,0,0.12); /* reduced shadow opacity for softer look */
  border: 1px solid rgba(255,255,255,0.03);
  margin: 0 auto;                    /* center in column */

  /* conic gradient using cumulative stops computed with calc() */
  background:
    conic-gradient(
      var(--c2) 0 calc(var(--d1)),
      var(--c4) calc(var(--d1)) calc(calc(var(--d1) + var(--d2))),
      var(--c3) calc(calc(var(--d1) + var(--d2))) calc(calc(var(--d1) + var(--d2) + var(--d3))),
      var(--c4) calc(calc(var(--d1) + var(--d2) + var(--d3))) calc(calc(var(--d1) + var(--d2) + var(--d3) + var(--d4))),
      var(--c5) calc(calc(var(--d1) + var(--d2) + var(--d3) + var(--d4))) calc(calc(var(--d1) + var(--d2) + var(--d3) + var(--d4) + var(--d5))),
      var(--c1) calc(calc(var(--d1) + var(--d2) + var(--d3) + var(--d4) + var(--d5))) 100%
    );
  transition: background 400ms ease;
  overflow: visible;

  /* glass effect: slight blur + subtle translucency when supported */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: rgba(255,255,255,0.02);
}

/* remove glossy overlay — keep pseudo empty */
.pie::after{
  display: none;
}

/* remove bevel/emboss — keep empty */
.pie::before{
  display: none;
}

/* Inner circle — hidden so the pie is fully filled and smooth inside */
.pie-inner{
  display: none;
}

/* Center content */
.pie-center{
  text-align: center;
  color: #111;
}

.pie-percent{
  font-size: 36px;
  font-weight: 800;
  color: #0b0b0b;
  background: transparent;
}

.pie-caption{
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}

/* Slice labels — positioned absolute; JS may update the text and reposition if needed.
   These are placeholders with approximate positions to match a typical pie layout.
*/
.pie-label{
  position: absolute;
  font-weight: 700;
  color: #000;
  text-shadow: none;
  background: transparent;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

/* rough positions — JS can override exact placement */
.label-1 { left: 62%; top: 30%; transform: translate(-50%, -50%); }
.label-2 { left: 32%; top: 66%; transform: translate(-50%, -50%); }
.label-3 { left: 65%; top: 66%; transform: translate(-50%, -50%); }
.label-4 { left: 50%; top: 18%; transform: translate(-50%, -50%); }
.label-5 { left: 28%; top: 36%; transform: translate(-50%, -50%); }
.label-6 { left: 44%; top: 44%; transform: translate(-50%, -50%); }

/* Total ROI pill at bottom — match width/centering used by Expenses/Gross pills */
.total-roi{
  width: 100%;
  gap: 10px;
}
.roi-label{
  margin: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 60%;
  height: 30px;
  padding-top: 3px;
  background: linear-gradient(90deg, rgba(122, 120, 0, 0.95), rgba(95, 122, 0, 0.6));
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* Smooth transitions for roi-value so hover changes animate */
.roi-value{
  transition: background-color 240ms ease, background-image 240ms ease, color 180ms ease, transform 160ms ease;
}
/* Total ROI pill at bottom — match width/centering used by Expenses/Gross pills */
.roi-value{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* stack percent above label/value */
  align-items: center;
  padding: 12px 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,122,60,0.95), rgba(0,122,60,0.6));
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  box-sizing: border-box;
  gap: 6px;
  font-size: 50px;
}

/* Percent text shown above the ROI value (e.g., +73.5%) */
.roi-percent-text {
  color: rgba(255,255,255,0.95);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

/* Make the numeric ROI currency larger than the percent */
.total-roi .roi-value {
  font-size: 35px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

/* Keep existing label and value layout but center them */
.total-roi .roi-label,
.total-roi .roi-value {
  text-align: center;
}

/* Keep existing label and value layout but center them */
.total-roi .roi-label,
.total-roi .roi-value {
  text-align: center;
}

/* Ensure the Expenses and Gross bottom pills use the same width and centering */
.sales-column > #totalExpenses,
.sales-column > #totalSales,
.sales-column > #addExpenses,
.sales-column > #salesMonthNav {
  margin: 0 auto;
  box-sizing: border-box;
}

.roi-label{
  font-size: 20px;   /* make label large */
  font-weight: 700;
  color: #fff;
}

.roi-value{
  font-size: 30px;   /* make label large */
  font-weight: 700;
  color: #fff;
}

/* Responsive tweaks */
@media (max-width: 480px){
  .pie{
    width: 240px;
    height: 240px;
  }
  .pie-inner{ width: 60%; height: 60%; }
  .pie-percent{ font-size: 28px; }
  .pie-card{ padding: 12px; }
  .total-roi{ font-size: 14px; padding: 8px; }
}

/* Utility: allow JS to set an explicit gradient string if desired:
   e.g. document.getElementById('pieChart').style.setProperty('--pieGradient', 'conic-gradient(...)');
   then CSS rule below will use it when present.
*/
.pie.use-custom {
  background-image: var(--pieGradient);
}

#maxSalesBtn{
  position: fixed;
  top: 3%;
  width: 200px;
}

/* Expenses modal styles - centered, front, with backdrop blur */
.modal {
  position: fixed;
  inset: 0;
  display: none; /* shown by JS using flex */
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none; /* enabled when visible */
}

/* Add Sale modal specific tweaks: center title, match input/button theme */
#addSaleModal .modal-content {
  /* reuse same modal card styles; ensure a slightly tighter width for sale form */
  width: 480px;
  max-width: calc(100% - 32px);
  padding: 18px;
}

#addSaleModalTitle {
  text-align: center;
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

/* Make the Customer Name input match modal theme and other themed inputs */
#addSaleModal input#saleCustomer,
#addSaleModal input#salePrice,
#addSaleModal input#saleDate {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  height: 44px;
  margin-bottom: 10px;
}

/* Modal action buttons: primary and secondary matching theme */
#addSaleModal .modal-actions button#saleSave {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(90deg,#007bff,#00b5e6); /* blue primary */
  color: white;
  transition: transform 120ms ease, filter 120ms ease;
}

#addSaleModal .modal-actions button#saleSave:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

#addSaleModal .modal-actions button#saleCancel {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: #ddd;
  cursor: pointer;
  font-weight: 700;
  transition: transform 120ms ease, filter 120ms ease;
}

#addSaleModal .modal-actions button#saleCancel:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Overlay covers viewport and blurs background */
.modal .modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2000;
  pointer-events: auto;
}

/* Content card */
.modal .modal-content {
  position: relative;
  z-index: 2001;
  background-color: #141414;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  /* Wider by default so two columns fit comfortably */
  width: 720px;
  max-width: calc(100% - 40px);
  max-height: 80vh; /* limit modal height so inner columns can be 100% height */
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.35);
  box-sizing: border-box;
  pointer-events: auto;

  /* Layout: rows -> header | body | actions; columns -> left (image) | right (form) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  align-items: stretch; /* stretch columns to fill modal height */
  overflow: hidden; /* allow inner columns to manage overflow */
}

/* Ensure modal action buttons (Save/Cancel) span the full width under both columns */
.modal .modal-content .modal-actions {
  grid-column: 1 / -1;
  grid-row: 3; /* ensure actions sit at the bottom row */
  justify-content: flex-end;
}

/* Close button (X) */
.modal .modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  color: #ddd;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.modal .modal-close:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}

/* Center the modal title */
#expensesModalTitle {
  margin: 0 auto;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  grid-column: 1 / -1; /* span header across both columns */
  grid-row: 1;
  align-self: center;
}

/* Expenses modal columns (left = receipt/image, right = form) */
#expensesLeft,
#expensesRight {
  width: 100%;
}

/* Left column: center the receipt image */
#expensesLeft {
  display: flex;
  align-items: stretch; /* allow child image to fill height */
  justify-content: center;
  padding: 0; /* image will occupy full area */
  height: 100%;
  min-height: 320px; /* reasonable minimum so image isn't tiny */
  grid-column: 1 / 2;
  grid-row: 2; /* place in body row to span full available height */
}

/* Make receipt image fill the left column completely */
#expensesLeft img,
#expensesLeft img#expensesReceipt {
  width: 80%;
  height: 95%;
  margin-top: 5%;
  object-fit: cover; /* cover to fill area; use contain if you prefer letterboxing */
  border-radius: 8px;
  display: block;
  background-color: #0f0f0f;
  border: 1px solid rgba(255,255,255,0.04);
}

/* Right column: stack form controls */
#expensesRight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow-y: auto; /* allow the form to scroll if content exceeds column height */
  max-height: 100%;
  grid-column: 2 / -1;
  grid-row: 2; /* place in body row to stretch to the same height as left column */
}

/* Responsive: stack columns into a single column on small screens */
@media (max-width: 700px) {
  .modal .modal-content {
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
  }
  .modal .modal-content .modal-actions {
    justify-content: center;
  }
}

/* Form controls inside modal */
.modal label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  color: #ddd;
  font-size: 0.95rem;
}

/* Unified form control styles (inputs, selects, textarea, date) to match dark theme */
.modal select,
.modal textarea,
.modal input[type="number"],
.modal input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  height: 44px;
  line-height: 20px;
}

/* Make textarea taller (overrides height) */
.modal textarea {
  min-height: 88px;
  resize: vertical;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
}

/* Style the native date input to blend in */
.modal input[type="date"] {
  /* Remove native inner padding differences on some browsers */
  padding: 10px 12px;
  -webkit-appearance: none;
  appearance: none;
  background-image: none; /* fallback */
  position: relative;
}

/* Style the calendar icon for WebKit browsers */
.modal input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.9);
  cursor: pointer;
  margin-right: 6px;
  width: 20px;
  height: 20px;
}

/* Focus states */
.modal select:focus,
.modal textarea:focus,
.modal input[type="number"]:focus,
.modal input[type="date"]:focus {
  outline: none;
  border-color: rgba(0, 181, 230, 0.9); /* match blue accent used elsewhere */
  box-shadow: 0 0 0 3px rgba(0,181,230,0.08);
}

/* Placeholder color (for browsers that support it) */
.modal input::placeholder,
.modal textarea::placeholder {
  color: #9aa0a0;
}

.modal textarea {
  min-height: 88px;
  resize: vertical;
}

.modal .modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
}

.modal .modal-actions button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

#expenseSave {
  background: linear-gradient(90deg,#007bff,#00b5e6);
  color: white;
}

#expenseCancel {
  background: transparent;
  color: #ddd;
  border: 1px solid rgba(255,255,255,0.04);
}

/* Visible state helper (optional) */
.modal.show {
  display: flex;
  pointer-events: auto;
}

#expensesModalTitle{
  margin: auto;
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 1500px ) or (max-height: 900px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.8;
    transform: translate(-60%, -60%);
  }
   #logoutBtn{
    scale: 0.6;
    transform: translate(-135%, -130%);
   }

    #salesList::-webkit-scrollbar {
      width: 20px; /* pixel value works here */
    }

    #expensesList::-webkit-scrollbar {
      width: 20px; /* pixel value works here */
    }

    #editors-stats::-webkit-scrollbar {
      width: 20px; /* pixel value works here */
    }
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 1300px ) or (max-height: 700px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.6;
    transform: translate(-83%, -80%);
  }
   #logoutBtn{
    scale: 0.6;
    transform: translate(-140%, -150%);
   }
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 950px ) or (max-height: 600px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.45;
    transform: translate(-111%, -110%);
  }
   #logoutBtn{
    scale: 0.6;
    transform: translate(-140%, -150%);
   }
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 700px ) or (max-height: 387px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.35;
    transform: translate(-142%, -140%);
  }
   #logoutBtn{
    scale: 0.4;
    transform: translate(-175%, -170%);
   }
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 600px ) or (max-height: 350px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.25;
    transform: translate(-198%, -195%);
  }
   #logoutBtn{
    scale: 0.3;
    transform: translate(-220%, -210%);
   }
}

/* Mobile / small-screen layout for Sales panel */
@media (max-width: 450px ) or (max-height: 250px) {
  /* Make main panels stacked and full-width */
  .main-panel{
    scale: 0.2;
    transform: translate(-250%, -245%);
  }
   #logoutBtn{
    scale: 0.25;
    transform: translate(-250%, -240%);
   }
}