/* 
 * ==========================================================================
 * TASKPANE.CSS - MAIN STYLESHEET
 * ==========================================================================
 * This file contains all the styling for the Outlook add-in task pane.
 * It is structured into the following main sections:
 * 1) GLOBAL STYLES & RESET: Basic margins, padding, and body fonts.
 * 2) HEADER & TYPOGRAPHY: Styling for the top bar and main text elements.
 * 3) LAYOUT COMPONENTS: Sections, buttons, breadcrumbs, search boxes.
 * 4) TABLES: Responsive table styling for folders and attachments.
 * 5) RESPONSIVENESS: Media queries for smaller screens and mobile devices.
 * 6) MODALS & OVERLAYS: Styling for the metadata modal and processing screens.
 * ==========================================================================
 */

/* 
 * ==========================================================================
 * GLOBAL STYLES & RESET
 * ==========================================================================
 * Standard box-sizing and margins to ensure everything starts from a clean 
 * slate before we apply our specific UI constraints.
 */
* {
  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 & TYPOGRAPHY
 * ==========================================================================
 * Setting up the top bar and our main text elements to feel native 
 * to the Outlook/Office UI style. 
 */
.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 */
}

/* ── Welcome Strip ── */
.welcome-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(90deg, #eef1f8 0%, #f3f2f1 100%);
  border-bottom: 2px solid #d0d8ea;
  box-shadow: 0 1px 4px rgba(36, 54, 101, 0.08);
}

.welcome-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-left: 7.6px;
  vertical-align: middle;
}

.welcome-text {
  font-size: 16px;
  font-weight: 600;
  color: #243665;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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: 10px 15px;
  /* Reduced padding */
  margin-bottom: 10px;
  /* Reduced 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: 0;
  /* 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;
}

/* Header Actions and Config Gear */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-gear {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
}

.config-gear:hover {
  color: #0078d4;
}

/* Breadcrumb Row and Favorite */
.breadcrumb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.favorite-container {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #333;
}

.favorite-container input[type="checkbox"] {
  cursor: pointer;
}

/* 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: #0078d4;
  /* Outlook blue color for folders */
  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: #0078d4;
  /* Match folder icon color (Outlook Blue) */
}

/* Selected Folder Styling */
.selected-folder {
  margin: 0 0 10px 0;
  /* Removed top margin */
  padding: 8px 12px;
  margin-left: -12px;
  /* Align text with the rest of the content by spanning full width */
  margin-right: -12px;
  background-color: #e6f2fa;
  /* Light blue background */
  border-top: 1px solid #cce0f4;
  border-bottom: 1px solid #cce0f4;
  font-size: 13px;
  color: #333;
}

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

/* 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;
}

/* Processing Overlay */
.processing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 9999;
  font-size: 14px;
  color: #333;
}

.processing-overlay .processing-spinner {
  font-size: 32px;
  margin-bottom: 15px;
  color: #0078d4;
  /* Outlook blue spinner */
}

/* Modal Styling */
.modal {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #ffffff;
  margin: auto;
  padding: 0;
  border: 1px solid #e1e1e1;
  width: 90%;
  max-width: 400px;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 10px 12px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.close-btn {
  color: #a6a6a6;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-btn:hover,
.close-btn:focus {
  color: #333;
  text-decoration: none;
}

.modal-body {
  padding: 0;
  max-height: 350px;
  overflow-y: auto;
  background-color: #ffffff;
}

.metadata-field {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f2f1;
  background-color: #ffffff;
  transition: background-color 0.2s ease, border-left 0.2s ease;
  border-left: 3px solid transparent;
}

.metadata-field:last-child {
  border-bottom: none;
}

.metadata-field:hover {
  background-color: #f0f0f0;
}

.metadata-field:focus-within {
  background-color: #e6f2fa;
  border-left: 3px solid #0078d4;
}

.metadata-field label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-weight: 600;
  font-size: 13px;
}

.metadata-field input,
.metadata-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 13px;
  color: #333;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.metadata-field input:focus,
.metadata-field select:focus {
  border-color: #0078d4;
}

.modal-footer {
  padding: 10px 12px;
  border-top: 1px solid #e1e1e1;
  text-align: right;
  background-color: #f8f8f8;
}