/* Global Reset and Box-Sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Crucial for consistent sizing */
}

/* General Styling */
body {
  font-family:
    "Segoe UI",
    "Segoe UI Web (West European)",
    "Segoe UI",
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    "Helvetica Neue",
    sans-serif;
  color: #333;
  font-size: 14px;
  background-color: #f3f2f1; /* Light gray background, common in Outlook task panes */
  overflow-x: hidden; /* Prevent horizontal scroll from elements overflowing */
}

/* New class for hiding elements */
.hidden {
  display: none !important;
}

.header {
  background-color: #f3f2f1; /* Lighter background for the header */
  color: #333; /* Darker text for better contrast */
  text-align: center;
  padding: 10px;
  /* border-bottom: 1px solid #c8c8c8; */
}

.logo {
  width: 70px; /* Slightly smaller logo */
  height: auto;
  margin-bottom: 5px; /* Add some space below the logo */
}

.title {
  margin: 5px 0 0 0; /* Adjusted margin */
  font-size: 16px; /* Slightly smaller title */
  color: #333;
  font-weight: 600; /* Bolder for prominence */
}

.content {
  padding: 15px; /* Increased padding for more breathing room */
}

.app-body {
  margin-top: 0; /* No top margin needed here, content padding handles it */
}

.subtitle {
  font-size: 15px; /* Slightly smaller subtitle */
  margin-bottom: 15px; /* Increased margin for separation */
  color: #333;
  font-weight: 600;
}

/* Section Styling */
.section-container {
  background: #ffffff; /* White background for sections */
  border: 1px solid #e1e1e1; /* Lighter, more subtle border */
  border-radius: 2px; /* Sharper corners */
  padding: 15px; /* Increased padding */
  margin-bottom: 15px; /* Increased margin */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Very subtle shadow for depth */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px; /* Adjusted margin */
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  gap: 10px; /* Increased gap */
}

.section-header h3 {
  margin: 0;
  font-size: 14px;
  color: #212121; /* Darker shade for section titles */
  font-weight: 600;
}

/* Button Styling (Outlook-like subtle style) */
.btn-primary {
  background-color: transparent; /* Transparent background */
  color: #333; /* Default text color to dark gray/black */
  border: 1px solid #c8c8c8; /* Light gray border by default */
  padding: 8px 15px; /* More padding */
  font-size: 13px;
  cursor: pointer;
  border-radius: 2px; /* Sharper corners */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease; /* Smooth transitions */
  white-space: nowrap;
  min-width: 100px; /* Adjusted min-width for consistency */
}

.btn-primary:hover {
  background-color: #f0f0f0; /* Very light gray background on hover */
  border-color: #a6a6a6; /* Slightly darker border on hover */
  color: #0078d4; /* Outlook blue text on hover */
}

.btn-primary:active {
  background-color: #e6e6e6; /* Slightly darker gray on active */
  border-color: #7a7a7a; /* More pronounced border on active */
  color: #005a9e; /* Darker blue on active */
}

.btn-primary:disabled {
  background-color: transparent;
  color: #a6a6a6; /* Gray out disabled buttons */
  border-color: #e1e1e1; /* Lighter gray border for disabled */
  cursor: not-allowed;
  box-shadow: none;
}

/* Specific styling for the primary action button (Upload/View) */
#upload-btn {
  background-color: #0078d4; /* Keep the main action button distinctly blue */
  color: white; /* White text for this button */
  border: 1px solid #0078d4; /* Blue border for the main action button */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtle shadow for prominence */
}

#upload-btn:hover {
  background-color: #106ebe;
  border-color: #106ebe;
}

#upload-btn:active {
  background-color: #005a9e;
  border-color: #005a9e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

#upload-btn:disabled {
  background-color: #a6a6a6;
  color: #ffffff;
  border-color: #a6a6a6;
  cursor: not-allowed;
  box-shadow: none;
}

.action-buttons {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  gap: 10px; /* Increased gap */
  margin-top: 15px; /* Increased margin */
}

/* Breadcrumb Styling */
.breadcrumb {
  display: flex; /* Ensures it's visible by default if not hidden by .hidden */
  flex-wrap: wrap; /* Allows crumbs to wrap to next line */
  align-items: center;
  margin: 10px 0; /* Adjusted margin */
  font-size: 13px;
  gap: 6px; /* Increased gap */
}

.crumb {
  color: #0078d4; /* Outlook blue for active/clickable crumbs */
  cursor: pointer;
  padding: 3px 5px; /* Adjusted padding */
  border-radius: 2px;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.crumb:hover {
  background-color: #e6e6e6; /* Light hover background */
  text-decoration: none; /* Remove underline for cleaner hover */
}

.crumb.active {
  font-weight: 600; /* Bolder for active crumb */
  color: #333; /* Darker color for the active crumb */
  cursor: default;
  background-color: transparent; /* No background for active crumb */
}

.crumb.active:hover {
  background-color: transparent; /* No hover background for active crumb */
}

.crumb:first-child {
  margin-left: 0;
}

.divider {
  color: #666;
}

/* Search Box Styling */
.search-container {
  display: flex; /* Ensures it's visible by default if not hidden by .hidden */
  position: relative;
  margin: 10px 0 15px 0; /* Adjusted margins */
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 7px 7px 7px 30px; /* Adjusted padding for icon */
  border: 1px solid #ccc; /* Lighter border */
  border-radius: 2px; /* Sharper corners */
  font-size: 13px;
  box-sizing: border-box; /* Ensure padding is included in width */
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #0078d4; /* Outlook blue border on focus */
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 14px;
}

/* Table Styling */
.table-scroll-container {
  width: 100%;
  height: auto; /* Allow height to adjust to content */
  max-height: 285px; /* Keep max-height for scrollability */
  overflow-y: auto; /* Keep vertical scroll for long lists */
  overflow-x: hidden; /* Hide horizontal scrollbar always */
  margin: 15px 0; /* Adjusted margin */
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e1e1e1; /* Border around the scroll container */
  border-radius: 2px;
}

#folder-container {
  display: block; /* Ensures it's visible by default if not hidden by .hidden */
}

#attachments-preview {
  display: table; /* Ensures it's visible by default if not hidden by .hidden */
}

.responsive-table {
  width: 100%;
  background-color: white;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed; /* Use fixed layout for better control of columns */
}

.responsive-table th,
.responsive-table td {
  padding: 10px 12px; /* More padding in cells */
  text-align: left !important; /* Explicitly ensure left alignment for all content */
  border-bottom: 1px solid #f3f2f1; /* Lighter border between rows */
  word-break: break-word; /* Allow long words to break */
  white-space: normal; /* Allow text to wrap naturally */
  /* Removed overflow: hidden and text-overflow: ellipsis to enable wrapping */
}

.responsive-table th {
  background-color: #f8f8f8; /* Lighter header background */
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 1; /* Ensure header stays on top of content */
  border-bottom: 1px solid #e1e1e1; /* Header bottom border */
}

.responsive-table tbody tr:hover {
  background-color: #f0f0f0; /* Softer hover background */
}

/* Column specific styles */
.responsive-table th.folder-name,
.responsive-table td.folder-name {
  width: 100%; /* Make folder name take full available width, forcing others to be narrow */
  cursor: pointer; /* Indicate clickability */
}

.file-name {
  width: auto; /* Allow file name to take remaining width and wrap */
}

.file-type {
  width: 90px; /* Fixed width for type */
}

.file-size {
  width: 90px; /* Fixed width for size */
}

/* Folder Table Specific */
.folder-icon {
  color: #f7b600; /* A more "Outlook-like" folder yellow/orange */
  margin-right: 8px;
  font-size: 16px; /* Slightly larger icon */
}

/* Attachment Table Specific */
.file-icon {
  width: 18px;
  margin-right: 8px;
  color: #666; /* Muted color for generic file icons */
  font-size: 16px;
}

/* Styles for attachment checkboxes and selected rows */
.select-all-header {
  text-align: center !important;
  width: 40px; /* Fixed width for checkbox column */
  white-space: nowrap;
}

.select-all-header input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.responsive-table td input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.selected-attachment-row {
  background-color: #e6f2fa; /* Light blue background for selected rows */
  border-left: 3px solid #0078d4; /* Outlook blue left border for selected items */
}

/* NEW: Style for selected folder row */
.selected-folder-row {
  background-color: #e6f2fa; /* Light blue background for selected rows */
  border-left: 3px solid #0078d4; /* Outlook blue left border for selected items */
}

/* Message Styling */
.no-subfolder,
.no-attachments {
  display: flex; /* Ensures it's visible by default if not hidden by .hidden */
  align-items: center;
  color: #ff4f4f; /* Muted color for info messages */
  padding: 10px;
  background-color: #f8f8f8; /* Lighter background */
  border: 1px solid #e1e1e1;
  border-radius: 2px;
  margin: 10px 0; /* Adjusted margin */
  font-size: 13px;
}

.no-subfolder i,
.no-attachments i {
  margin-right: 8px;
  color: #999; /* Muted icon color */
  font-size: 16px;
}

.no-subfolder i.fa-folder-open {
  color: #f7b600; /* Match folder icon color */
}

/* Selected Folder Styling */
.selected-folder {
  margin: 10px 0;
  padding: 8px 12px;
  background-color: #e6f2fa; /* Light blue background */
  border: 1px solid #cce0f4; /* Slightly darker border */
  border-radius: 2px;
  font-size: 13px;
  color: #333;
}

.selected-folder p {
  margin: 0;
  font-weight: 500;
}

/* Input Group Styling */
#create-folder-input-container {
  display: block; /* Ensures it's visible by default if not hidden by .hidden */
}
.input-group {
  display: flex;
  gap: 10px; /* Increased gap */
  margin-top: 10px;
  flex-wrap: wrap; /* Allow input and button to wrap */
}

.input-group input {
  flex: 1; /* Allow input to grow and shrink */
  min-width: 180px; /* Adjusted min-width */
  padding: 7px 10px; /* Adjusted padding */
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 13px;
  transition: border-color 0.2s ease;
}

.input-group input:focus {
  outline: none;
  border-color: #0078d4; /* Outlook blue border on focus */
}

/* Result Container */
.result-container {
  margin-top: 15px; /* Increased margin */
  padding: 10px 12px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent; /* Default transparent border */
}

.success {
  background-color: #dff6dd; /* Light green for success */
  color: #107c10;
  border-color: #a8e6a8; /* Green border */
}

.error {
  background-color: #fde7e9; /* Light red for error */
  color: #a80000;
  border-color: #f1c7ca; /* Red border */
}

.warning {
  background-color: #fff4ce; /* Light yellow for warning */
  color: #8a6d3b;
  border-color: #faebcc; /* Yellow border */
}

.info {
  background-color: #eaf6fd; /* Light blue for info */
  color: #31708f;
  border-color: #bce8f1; /* Blue border */
}

/* ------------------------------------- */
/* RESPONSIVENESS */
/* ------------------------------------- */

/* Medium screens (e.g., larger tablets, compact desktop views) */
@media (max-width: 768px) {
  .content {
    padding: 12px;
  }

  .section-container {
    padding: 12px;
    margin-bottom: 12px;
  }

  .btn-primary {
    padding: 7px 12px;
    font-size: 12px;
    min-width: unset; /* Allow buttons to shrink */
  }

  .section-header {
    flex-direction: column; /* Stack header items on top of each other */
    align-items: flex-start; /* Align stacked items to the start */
    gap: 8px; /* Reduce gap */
  }

  .responsive-table th,
  .responsive-table td {
    padding: 8px 10px;
  }

  /* No min-width on responsive-table; let content clip if needed */
  /* overflow-x: hidden is already set for .table-scroll-container */
}

/* Small screens (e.g., mobile phones) */
@media (max-width: 480px) {
  .header {
    padding: 8px;
  }

  .logo {
    width: 70px;
  }

  .title {
    font-size: 14px;
  }

  /* .subtitle {
    font-size: 13px;
    text-align: center;
  } */

  .content {
    padding: 10px;
  }

  .section-container {
    padding: 10px;
    margin-bottom: 10px;
  }

  .section-header {
    /* Keep column direction for header, but center align the button if it's the only item */
    align-items: center;
  }

  .btn-primary {
    font-size: 11px;
    padding: 6px 10px;
    width: 100%; /* Make buttons take full width */
  }

  .action-buttons {
    gap: 8px;
  }

  .input-group {
    flex-direction: column; /* Stack input and button for create folder */
    gap: 8px;
  }

  .input-group input {
    width: 100%; /* Full width input */
  }

  .responsive-table {
    font-size: 11px; /* Smaller font size for table content */
  }

  .responsive-table th,
  .responsive-table td {
    padding: 6px 8px;
  }

  /* Adjustments for attachment table columns on mobile */
  .file-type {
    width: 60px; /* Narrower for file type and size */
  }

  .file-size {
    width: 60px;
  }

  /* Specific adjustment for the first column (checkbox in attachments table) */
  .responsive-table th.select-all-header,
  .responsive-table td:first-child {
    width: 30px; /* Keep checkbox column narrow */
    padding: 12px; /* Remove padding */
    text-align: left !important; /* Ensure checkbox is centered */
  }

  .responsive-table td input[type="checkbox"] {
    margin: auto; /* Center checzkbox */
  }
}

/* Version notification styling */
.version-notification {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.5s ease;
}

.version-notification.info {
  background-color: #eaf6fd; /* Light blue for info */
  color: #31708f;
  border-bottom: 1px solid #bce8f1;
}

.version-notification.fade-out {
  opacity: 0;
}

/* Version display styling */
.version-container {
  margin-top: 15px;
  text-align: center;
  font-size: 11px;
  color: #666;
}

#version-display {
  padding: 4px 8px;
  border-radius: 10px;
  background-color: #f0f0f0;
}