/* Compact Typography System */
/* Base font size reduction to 13px for increased information density */
html {
  font-size: 13px;
}

body {
  font-size: 1rem;
  line-height: 1.4;
}

/* Heading size normalization - minimal difference from body text */
h1 {
  font-size: 1.4em;
}

h2 {
  font-size: 1.3em;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.15em;
}

h5 {
  font-size: 1.1em;
}

h6 {
  font-size: 1.05em;
}

/* Table/Grid density improvements - reduced padding */
.table td,
.table th {
  padding: 0.4rem;
}

.grid-view table td,
.grid-view table th {
  padding: 0.4rem;
}

/* Form spacing reductions */
.form-group {
  margin-bottom: 0.8rem;
}

.form-control {
  padding: 0.4rem 0.6rem;
}

.form-label {
  margin-bottom: 0.3rem;
}

/* Button compact styling — uses ds- tokens where available, falls back to literals */
.btn {
  padding: 0.4rem 0.8rem;           /* ERP density: tighter than Notion's 10px/18px */
  font-size: 0.95em;
  border-radius: var(--ds-radius-md, 8px);   /* Notion: rectangular buttons (not pills) */
  font-family: var(--ds-font, inherit);
}

/* Navigation compact styling */
.nav-link {
  padding: 0.4rem 0.8rem;
}

.navbar-nav .nav-link {
  padding: 0.4rem 0.8rem;
}

main > .container,
main > .container-fluid {
  padding: 70px 15px 20px;
}

/* Container max-width override: 1360px */
@media (min-width: 1200px) {
  main > .container {
    max-width: 1360px;
  }
}

/* Expanded container mode */
main > .container.container-expanded {
  max-width: 100%;
}

/* Container width toggle in shortcuts sidebar */
.container-width-toggle.shortcut-item {
  cursor: pointer;
}

.footer {
  background-color: #f5f5f5;
  font-size: 0.9em;
  height: 60px;
}

.footer > .container,
.footer > .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}

.not-set {
  color: #c55;
  font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
  content: "";
  left: 3px;
  display: inline-block;
  width: 0;
  height: 0;
  border: solid 5px transparent;
  margin: 4px 4px 2px 4px;
  background: transparent;
}

a.asc:after {
  border-bottom: solid 7px #212529;
  border-top-width: 0;
}

a.desc:after {
  border-top: solid 7px #212529;
  border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
  white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
  min-width: 50px;
}

.hint-block {
  display: block;
  margin-top: 5px;
  color: #999;
}
.help-block {
  color: #ef4444 !important;
}
.help-block ul {
  margin-bottom: 0;
}
.help-block ul li {
  list-style: none;
  margin-left: 0;
}
.help-block ul li:before {
  content: "•";
  color: #ef4444;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.error-summary {
  color: #a94442;
  background: #fdf7f7;
  border-left: 3px solid #eed3d7;
  padding: 10px 20px;
  margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
  padding-top: 7px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 991px) {
  .navbar form > button.logout {
    display: block;
    text-align: left;
    width: 100%;
    padding: 10px 0;
  }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
  outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
  background-color: var(--bs-gray-200);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
}

.breadcrumb-item {
  white-space: nowrap;
  flex-shrink: 0;
}

.breadcrumb-item > a {
  text-decoration: none;
}

/* Breadcrumb wrapper - prevent line break */
.breadcrumb-wrapper {
  flex-wrap: nowrap !important;
}

.breadcrumb-wrapper .breadcrumb-content {
  min-width: 0;
  overflow: hidden;
}

.breadcrumb-wrapper .breadcrumb-content nav {
  display: inline-block;
}

.breadcrumb-wrapper .breadcrumb-content .breadcrumb {
  display: inline-flex !important;
  margin-bottom: 0;
}

/* ==================== Common Page Header ==================== */
/* Gradient header box used across all pages for consistent styling */
/* Text is always white regardless of light/dark mode */
.page-header-box {
  background: linear-gradient(135deg,
    var(--ds-color-primary, #5645d4) 0%,
    var(--ds-color-purple,  #7b3ff2) 100%);  /* Notion purple → brand purple */
  color: white;
  padding: 2rem;
  border-radius: var(--ds-radius-lg, 12px);
  margin-bottom: 2rem;
  box-shadow: rgba(86,69,212,0.22) 0px 4px 14px;
}

/* ── Flat/minimal page header variant (opt-in, modern style) ── */
/* Usage: add class="page-header-box page-header-flat" to the div  */
.page-header-box.page-header-flat {
  background: var(--ds-surface-canvas, #ffffff);
  color: var(--ds-text-ink, #1a1a1a);
  border: 1px solid var(--ds-border, #e5e3df);
  box-shadow: var(--ds-shadow-1, rgba(15,15,15,0.04) 0px 1px 2px);
  padding: 1.25rem 1.5rem;
}

.page-header-box.page-header-flat h1,
.page-header-box.page-header-flat h2,
.page-header-box.page-header-flat h3,
.page-header-box.page-header-flat h4,
.page-header-box.page-header-flat p,
.page-header-box.page-header-flat .page-header-title,
.page-header-box.page-header-flat .page-header-subtitle {
  color: var(--ds-text-ink, #1a1a1a) !important;
  text-shadow: none;
}

.page-header-box.page-header-flat .page-header-subtitle {
  color: var(--ds-text-steel, #787671) !important;
}

.page-header-box.page-header-flat .page-header-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ds-color-primary, #5645d4) !important;
  margin-bottom: 4px;
}

.page-header-box h1,
.page-header-box h2,
.page-header-box h3,
.page-header-box h4,
.page-header-box p,
.page-header-box > span:not(.project-code-badge):not(.status-badge),
.page-header-box div:not(.d-flex):not(.header-actions),
.page-header-box .page-header-title,
.page-header-box .page-header-subtitle {
  color: white !important;
}

.page-header-title {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 600;
  color: white !important;
}

.page-header-title span,
.page-header-title i,
.page-header-box .page-header-title span,
.page-header-box .page-header-title i {
  color: inherit !important;
}

/* Ensure header-actions button text/icons inherit color */
.page-header-box .header-actions a span,
.page-header-box .header-actions a i,
.page-header-box .header-actions .btn span,
.page-header-box .header-actions .btn i {
  color: inherit !important;
}

/* Ensure header-links text/icons inherit color */
.page-header-box .header-links a span,
.page-header-box .header-links a i,
.page-header-box .header-links .btn span,
.page-header-box .header-links .btn i,
.header-links span,
.header-links i {
  color: inherit !important;
}

.page-header-subtitle {
  margin: 0;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Muted text and small text in page header - should be visible on gradient */
.page-header-box .text-muted,
.page-header-box small,
.page-header-box small.text-muted {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Links in page header - high contrast for visibility on gradient
   .solis-btn은 자체 색상 시스템 사용 — 이 규칙에서 제외 */
.page-header-box a:not(.btn):not(.solis-btn),
.page-header-box .page-header-subtitle a {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-header-box a:not(.btn):not(.solis-btn):hover,
.page-header-box .page-header-subtitle a:hover {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
  opacity: 0.85;
}

/* Status colors in page header - high contrast variants */
.page-header-box .text-success,
.page-header-box .page-header-subtitle .text-success,
.page-header-box #gmail-status .text-success,
.page-header-box #gmail-status i.text-success,
.page-header-box #gmail-status span.text-success {
  color: #7fffaf !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-header-box .text-danger,
.page-header-box .page-header-subtitle .text-danger,
.page-header-box .page-header-subtitle a.text-danger,
.page-header-box #gmail-status .text-danger,
.page-header-box #gmail-status a.text-danger {
  color: #ffaaaa !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-header-box .text-warning,
.page-header-box .page-header-subtitle .text-warning,
.page-header-box #gmail-status .text-warning,
.page-header-box #gmail-status i.text-warning,
.page-header-box #gmail-status span.text-warning {
  color: #ffd866 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-header-box .text-info,
.page-header-box .page-header-subtitle .text-info {
  color: #99e6ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Gmail status link in page header */
.page-header-box #gmail-status a {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
}

/* Ensure white text in dark mode too */
[data-theme="dark"] .page-header-box,
[data-theme="light"] .page-header-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

[data-theme="dark"] .page-header-box h1,
[data-theme="dark"] .page-header-box h2,
[data-theme="dark"] .page-header-box h3,
[data-theme="dark"] .page-header-box h4,
[data-theme="dark"] .page-header-box p,
[data-theme="dark"] .page-header-box > span:not(.project-code-badge):not(.status-badge),
[data-theme="dark"] .page-header-box div:not(.d-flex):not(.header-actions),
[data-theme="dark"] .page-header-box .page-header-title,
[data-theme="dark"] .page-header-box .page-header-subtitle,
[data-theme="light"] .page-header-box h1,
[data-theme="light"] .page-header-box h2,
[data-theme="light"] .page-header-box h3,
[data-theme="light"] .page-header-box h4,
[data-theme="light"] .page-header-box p,
[data-theme="light"] .page-header-box > span:not(.project-code-badge):not(.status-badge),
[data-theme="light"] .page-header-box div:not(.d-flex):not(.header-actions),
[data-theme="light"] .page-header-box .page-header-title,
[data-theme="light"] .page-header-box .page-header-subtitle {
  color: white !important;
}

/* Dark mode - same high contrast colors for links and status text in page header */
[data-theme="dark"] .page-header-box a:not(.btn),
[data-theme="dark"] .page-header-box .page-header-subtitle a {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-theme="dark"] .page-header-box .text-success,
[data-theme="dark"] .page-header-box .page-header-subtitle .text-success {
  color: #7fffaf !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-danger,
[data-theme="dark"] .page-header-box .page-header-subtitle .text-danger,
[data-theme="dark"] .page-header-box .page-header-subtitle a.text-danger {
  color: #ffaaaa !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-warning,
[data-theme="dark"] .page-header-box .page-header-subtitle .text-warning {
  color: #ffd866 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-info,
[data-theme="dark"] .page-header-box .page-header-subtitle .text-info {
  color: #99e6ff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-muted,
[data-theme="dark"] .page-header-box small,
[data-theme="dark"] .page-header-box small.text-muted {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Page header with actions on the right */
.page-header-box.with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header-box .header-content {
  flex: 1;
}

.page-header-box .header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Buttons inside page header - base styling only
   Text color contrast is handled automatically by ContrastFixer */
.page-header-box .btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.page-header-box .btn-light {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 1);
}

.page-header-box .btn-light:hover {
  background: rgba(255, 255, 255, 1);
}

/* Primary button - white background for visibility on gradient */
.page-header-box .btn-primary {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 1);
}

.page-header-box .btn-primary:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* Secondary/Outline buttons - semi-transparent white */
.page-header-box .btn-secondary,
.page-header-box .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

.page-header-box .btn-secondary:hover,
.page-header-box .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Other outline variants */
.page-header-box .btn-outline-primary,
.page-header-box .btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}

.page-header-box .btn-outline-primary:hover,
.page-header-box .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Success button */
.page-header-box .btn-success,
.page-header-box .btn-outline-success {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.page-header-box .btn-success:hover,
.page-header-box .btn-outline-success:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Danger button - keep red tint */
.page-header-box .btn-danger {
  background: rgba(220, 53, 69, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

.page-header-box .btn-danger:hover {
  background: rgba(220, 53, 69, 1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Info button variants */
.page-header-box .btn-info {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: white !important;
}

.page-header-box .btn-info:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.8);
  color: white !important;
}

/* Info box within header */
.page-header-box .header-info-box {
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-header-box {
    padding: 1.5rem;
  }

  .page-header-title {
    font-size: 1.5rem;
  }

  .page-header-box.with-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-box .header-actions {
    justify-content: center;
  }

  /* Date input in header should be compact on mobile */
  .page-header-box .header-actions input[type="date"],
  .page-header-box .btn-group input[type="date"] {
    width: auto !important;
    min-width: 0;
    max-width: 140px;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
  }

  /* Work log header: date and button on two lines */
  .daily-work-log-index .page-header-box .btn-group {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .daily-work-log-index .page-header-box .btn-group input[type="date"] {
    max-width: none;
    width: 100%;
  }
}

/* ==================== Common Content Box ==================== */
/* Used for content sections like search panels, filter boxes, etc. */
.content-box {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.content-box h3,
.content-box h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.content-box h3 i,
.content-box h4 i {
  margin-right: 8px;
}

/* ==================== Common Tab Navigation ==================== */
.tab-navigation {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  border-bottom: 2px solid #dee2e6;
  overflow-x: auto;
}

.tab-navigation .tab-item {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tab-navigation .tab-item:hover {
  color: #0d6efd;
  background: #f8f9fa;
}

.tab-navigation .tab-item.active {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
}

.tab-navigation .tab-item i {
  margin-right: 5px;
}

/* ==================== Common Search Input ==================== */
.search-input-box {
  display: flex;
  gap: 10px;
  position: relative;
}

.search-input-box .input-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-box .input-icon {
  position: absolute;
  left: 15px;
  color: #6c757d;
  z-index: 1;
}

.search-input-box .form-control {
  flex: 1;
  font-size: 16px;
  padding: 14px 45px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.search-input-box .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
  outline: none;
}

.search-input-box .btn-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 5px;
  z-index: 1;
}

.search-input-box .btn-clear:hover {
  color: #333;
}

/* ==================== Common Chip/Tag Buttons ==================== */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 10px 20px;
  border: 2px solid #dee2e6;
  border-radius: 25px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
}

.chip:hover {
  border-color: #0d6efd;
  background: #e7f1ff;
  color: #0d6efd;
  transform: translateY(-2px);
}

.chip i {
  margin-right: 5px;
}

/* ==================== Common Tag Links ==================== */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-link {
  padding: 8px 16px;
  background: #f8f9fa;
  border-radius: 20px;
  color: #6c757d;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tag-link:hover {
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ==================== Common List Items ==================== */
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list .list-item {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}

.item-list .list-item:hover {
  background: #f8f9fa;
}

.item-list .list-item:last-child {
  border-bottom: none;
}

.item-list .list-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.item-list .list-item-icon {
  color: #6c757d;
  font-size: 14px;
}

.item-list .list-item-text {
  font-weight: 500;
  color: #333;
}

.item-list .list-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-list .list-item-time {
  color: #6c757d;
  font-size: 12px;
}

/* ==================== Common Help Text ==================== */
.help-text {
  margin-top: 12px;
  color: #6c757d;
  font-size: 13px;
}

.help-text strong {
  color: #0d6efd;
}

/* ==================== Common Suggestion Dropdown ==================== */
.suggestion-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 5px;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.suggestion-dropdown .dropdown-header {
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}

.suggestion-dropdown .dropdown-title {
  font-weight: 600;
  color: #6c757d;
  font-size: 12px;
  text-transform: uppercase;
}

.suggestion-dropdown .dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-dropdown .dropdown-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease;
  color: #333;
}

.suggestion-dropdown .dropdown-item:hover {
  background: #f8f9fa;
}

.suggestion-dropdown .dropdown-item:last-child {
  border-bottom: none;
}

.suggestion-dropdown .dropdown-item-icon {
  color: #6c757d;
  font-size: 14px;
}

.suggestion-dropdown .dropdown-item-text {
  flex: 1;
}

.suggestion-dropdown .dropdown-item-type {
  font-size: 11px;
  color: #6c757d;
  text-transform: uppercase;
}

/* ==================== Common Header with Actions ==================== */
.header-with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

/* ==================== Search Page Specific ==================== */
/* Search page uses standard page layout like other pages (document, dashboard) */
.search-index {
  /* Uses standard container from layout - no custom centering */
}

.search-container {
  /* Content flows naturally within the page container */
}

/* Quick suggestions */
.quick-suggestions {
  background: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.quick-suggestions h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.suggestion-chip {
  padding: 10px 20px;
  border: 2px solid #dee2e6;
  border-radius: 25px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
}

.suggestion-chip:hover {
  border-color: #0d6efd;
  background: #e7f1ff;
  color: #0d6efd;
  transform: translateY(-2px);
}

.suggestion-chip i {
  margin-right: 5px;
}

/* Search history */
.search-history {
  background: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.search-history h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-item {
  padding: 12px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s ease;
}

.history-item:hover {
  background: #f8f9fa;
}

.history-item:last-child {
  border-bottom: none;
}

.history-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.history-icon {
  color: #6c757d;
  font-size: 14px;
}

.history-query {
  font-weight: 500;
  color: #333;
}

.history-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-type {
  background: #0d6efd;
  font-size: 11px;
}

.history-time {
  color: #6c757d;
  font-size: 12px;
}

/* Popular searches */
.popular-searches {
  background: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

.popular-searches h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.popular-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.popular-tag {
  padding: 8px 16px;
  background: #f8f9fa;
  border-radius: 20px;
  color: #6c757d;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.popular-tag:hover {
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* Search bar component */
.search-bar-component {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.search-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  border-bottom: 2px solid #dee2e6;
  overflow-x: auto;
}

.search-tab {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.search-tab:hover {
  color: #0d6efd;
  background: #f8f9fa;
}

.search-tab.active {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
}

.search-tab i {
  margin-right: 5px;
}

.search-input-wrapper {
  display: flex;
  gap: 10px;
  position: relative;
}

.search-input-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 15px;
  color: #6c757d;
  z-index: 1;
}

.search-bar-component .search-input {
  flex: 1;
  font-size: 16px;
  padding: 14px 45px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #212529;
}

.search-bar-component .search-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
  outline: none;
}

.search-bar-component .search-input::placeholder {
  color: #6c757d;
}

.btn-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 5px;
  z-index: 1;
}

.btn-clear:hover {
  color: #333;
}

.btn-search {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn-search:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 70px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 5px;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.suggestions-header {
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}

.suggestions-title {
  font-weight: 600;
  color: #6c757d;
  font-size: 12px;
  text-transform: uppercase;
}

.suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease;
  color: #333;
}

.suggestion-item:hover {
  background: #f8f9fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-icon {
  color: #6c757d;
  font-size: 14px;
}

.suggestion-text {
  flex: 1;
}

.suggestion-type {
  font-size: 11px;
  color: #6c757d;
  text-transform: uppercase;
}

.search-help-text {
  margin-top: 12px;
  color: #6c757d;
  font-size: 13px;
}

.search-help-text strong {
  color: #0d6efd;
}

/* ==================== Mobile Responsive ==================== */
@media (max-width: 768px) {
  .content-box {
    padding: 15px;
  }

  .tab-navigation {
    gap: 2px;
  }

  .tab-navigation .tab-item {
    padding: 10px 12px;
    font-size: 13px;
  }

  .tab-navigation .tab-item i {
    margin-right: 3px;
  }

  .search-input-box {
    flex-direction: column;
  }

  .search-input-box .btn {
    width: 100%;
  }

  .chip-list {
    flex-direction: column;
  }

  .chip {
    width: 100%;
    text-align: center;
  }

  .item-list .list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .item-list .list-item-meta {
    width: 100%;
    justify-content: space-between;
  }

  /* Search page mobile */
  .search-tabs {
    gap: 2px;
  }

  .search-tab {
    padding: 10px 12px;
    font-size: 13px;
  }

  .search-tab i {
    margin-right: 3px;
  }

  .search-input-wrapper {
    flex-direction: column;
  }

  .btn-search {
    width: 100%;
  }

  .search-suggestions {
    right: 0;
  }

  .suggestion-chips {
    flex-direction: column;
  }

  .suggestion-chip {
    width: 100%;
    text-align: center;
  }

  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .history-meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==================== Dashboard Page Styles ==================== */
/* Dashboard Header - matches page-header-box styling */
.dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dashboard-subtitle {
  margin: 0.5rem 0 0 0;
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dashboard-time {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Widget Cards */
.widget-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.widget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.widget-header {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.widget-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.widget-body {
  padding: 1rem;
  flex: 1;
  overflow: hidden;
}

.widget-footer {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 0 0 1rem 1rem;
  border-top: 1px solid #f1f3f5;
  margin-top: auto;
}

/* Stats Cards */
.stat-card {
  background: white;
  border-radius: 0.75rem;
  padding: 0.85rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-card-clickable {
  cursor: pointer;
  position: relative;
}

.stat-card-clickable::after {
  content: "\F285";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.stat-card-clickable:hover::after {
  opacity: 0.5;
}

.stat-card-clickable:hover {
  border-color: currentColor;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  display: block;
}

.stat-label {
  color: #6c757d;
  font-size: 0.75rem;
  font-weight: 500;
}

.stat-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

/* Quick Actions */
.quick-action {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 1rem;
  padding: 1.5rem;
  text-decoration: none;
  color: #495057;
  transition: all 0.3s ease;
  display: block;
  text-align: center;
}

.quick-action:hover {
  border-color: #007bff;
  color: #007bff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}

.quick-action-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.quick-action-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.quick-action-desc {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0;
}

/* Todo Items */
.todo-item {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
  background: #f8f9fa;
}

.todo-checkbox {
  margin-right: 0.75rem;
}

.todo-content {
  flex: 1;
}

.todo-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.todo-meta {
  font-size: 0.8rem;
  color: #6c757d;
}

.todo-priority {
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.todo-priority.high {
  background: #fee2e2;
  color: #dc2626;
}

.todo-priority.medium {
  background: #fef3c7;
  color: #d97706;
}

.todo-priority.low {
  background: #dcfce7;
  color: #16a34a;
}

/* Notification Items */
.notification-item {
  padding: 0.75rem;
  border-bottom: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
}

.notification-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-right: 0.75rem;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.notification-message {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Mention Items */
.mention-item {
  padding: 0.75rem;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e9ecef;
}

.mention-item:hover {
  background: #f8f9fa;
  border-color: #dee2e6;
}

.mention-item.unread {
  border-left: 4px solid #007bff;
  background: #f8f9ff;
}

.mention-item.pinned {
  border-left: 4px solid #ffc107;
  background: #fffbf0;
}

/* Recent Activity */
.activity-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.activity-desc {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Placeholder Widgets */
.placeholder-widget {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 1rem;
  padding: 1.25rem;
  text-align: center;
  color: #6c757d;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.placeholder-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.placeholder-desc {
  font-size: 0.9rem;
  margin: 0;
}

/* Site Layout Improvements */
.site-index {
  min-height: calc(100vh - 120px);
  padding-bottom: 2rem;
}

/* Dashboard container - no max-width restriction, uses full layout width like other pages */

/* Card height consistency */
.row.g-3 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.row.g-3 > [class*="col-"] > .widget-card,
.row.g-3 > [class*="col-"] > .placeholder-widget {
  flex: 1;
}

/* Loading States */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 0.25rem;
  height: 1rem;
  margin-bottom: 0.5rem;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.loading-skeleton.wide {
  width: 100%;
}

.loading-skeleton.medium {
  width: 70%;
}

.loading-skeleton.narrow {
  width: 40%;
}

/* Dashboard Mobile Responsive */
@media (max-width: 768px) {
  .dashboard-header {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0 0 8px 8px;
  }

  .dashboard-title {
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 1.75rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .quick-action-icon {
    font-size: 2rem;
  }

  .widget-header,
  .widget-body,
  .widget-footer {
    padding: 0.75rem;
  }

  .stat-card {
    padding: 0.75rem;
  }

  .global-search-wrapper {
    padding: 0.5rem 1rem;
  }

  .global-search-input {
    font-size: 1.1rem;
  }

  .global-search-icon {
    font-size: 1.3rem;
  }
}

/* ==========================================
   Dashboard DM Widget Styles
   ========================================== */

.dm-widget-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.dm-widget-item:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: inherit;
}

.dm-widget-item:last-child {
  border-bottom: none;
}

.dm-widget-item.unread {
  background: #f0f7ff;
}

.dm-widget-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4a9eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.dm-widget-content {
  flex: 1;
  min-width: 0;
}

.dm-widget-name {
  font-weight: 600;
  font-size: 14px;
}

.dm-widget-preview {
  color: #6c757d;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-widget-time {
  color: #adb5bd;
  font-size: 11px;
  margin-top: 2px;
}

/* ==========================================
   Dashboard Announcement Widget Styles
   ========================================== */

.announcement-widget-item {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.announcement-widget-item:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: inherit;
}

.announcement-widget-item:last-child {
  border-bottom: none;
}

.announcement-widget-item.unread {
  background: #f0f7ff;
}

.announcement-widget-header {
  margin-bottom: 4px;
}

.announcement-widget-title {
  font-weight: 600;
  font-size: 14px;
}

.announcement-widget-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6c757d;
}

/* Announcement Widget Attachments */
.ann-widget-attachments {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
}

.ann-widget-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #dee2e6;
}

.ann-widget-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ann-widget-thumb.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  font-size: 16px;
}

.ann-widget-thumb-more {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
  padding: 0 2px;
}

/* ==========================================
   Dashboard Pinned Notes Widget Styles
   ========================================== */

.pinned-note-widget-item {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.pinned-note-widget-item:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: inherit;
}

.pinned-note-widget-item:last-child {
  border-bottom: none;
}

.pinned-note-title {
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #212529;
}

/* Note color variables */
:root {
  --note-color-red: #f28b82;
  --note-color-orange: #fbbc04;
  --note-color-yellow: #fff475;
  --note-color-green: #ccff90;
  --note-color-teal: #a7ffeb;
  --note-color-blue: #cbf0f8;
  --note-color-dark_blue: #aecbfa;
  --note-color-purple: #d7aefb;
  --note-color-pink: #fdcfe8;
  --note-color-brown: #e6c9a8;
  --note-color-gray: #e8eaed;
}

/* Dark Mode - DM Widget */
[data-theme="dark"] .dm-widget-item {
  border-color: #333;
}

[data-theme="dark"] .dm-widget-item:hover {
  background: #2d2d2d;
}

[data-theme="dark"] .dm-widget-item.unread {
  background: #1a2332;
}

[data-theme="dark"] .dm-widget-name {
  color: #fff;
}

[data-theme="dark"] .dm-widget-preview {
  color: #adb5bd;
}

/* Dark Mode - Announcement Widget */
[data-theme="dark"] .announcement-widget-item {
  border-color: #333;
}

[data-theme="dark"] .announcement-widget-item:hover {
  background: #2d2d2d;
}

[data-theme="dark"] .announcement-widget-item.unread {
  background: #1a2332;
}

[data-theme="dark"] .announcement-widget-title {
  color: #fff;
}

[data-theme="dark"] .announcement-widget-meta {
  color: #adb5bd;
}

[data-theme="dark"] .ann-widget-thumb {
  border-color: #444;
}

[data-theme="dark"] .ann-widget-thumb.file-icon {
  background: #2d2d2d;
}

[data-theme="dark"] .ann-widget-thumb-more {
  color: #adb5bd;
}

/* Dark Mode - Pinned Notes Widget */
[data-theme="dark"] .pinned-note-widget-item {
  border-color: #333;
}

[data-theme="dark"] .pinned-note-widget-item:hover {
  background: #2d2d2d;
}

[data-theme="dark"] .pinned-note-title {
  color: #fff;
}

[data-theme="dark"] {
  --note-color-red: #5c2b29;
  --note-color-orange: #614a19;
  --note-color-yellow: #635d19;
  --note-color-green: #345920;
  --note-color-teal: #16504b;
  --note-color-blue: #2d555e;
  --note-color-dark_blue: #1e3a5f;
  --note-color-purple: #42275e;
  --note-color-pink: #5b2245;
  --note-color-brown: #442f19;
  --note-color-gray: #3c3f43;
}

/* ==========================================
   Dashboard Calendar Widget Styles
   ========================================== */

.calendar-grid {
  width: 100%;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 4px;
}

.calendar-weekday {
  padding: 4px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  min-height: 32px;
}

.calendar-day:hover {
  background: #f0f0f0;
}

.calendar-day.other-month {
  color: #ccc;
}

.calendar-day.today {
  background: #4a9eff;
  color: white;
  font-weight: bold;
}

.calendar-day.today:hover {
  background: #3a8eef;
}

.calendar-day.sunday .day-number {
  color: #dc3545;
}

.calendar-day.saturday .day-number {
  color: #0d6efd;
}

.calendar-day.today .day-number {
  color: white;
}

.day-number {
  line-height: 1;
}

.event-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  min-height: 6px;
}

.event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.event-dot.meeting {
  background: #dc3545;
}

.event-dot.task {
  background: #0d6efd;
}

.event-dot.todo {
  background: #28a745;
}

.event-dot.custom {
  background: #3788d8;
}

.event-dot.worktask {
  background: #059669;
}

.event-dot.leave {
  background: #8b5cf6;
}

.event-dot.holiday {
  background: #ef4444;
}

.calendar-legend {
  font-size: 11px;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.legend-dot.meeting {
  background: #dc3545;
}

.legend-dot.task {
  background: #0d6efd;
}

.legend-dot.todo {
  background: #28a745;
}

.legend-dot.custom {
  background: #3788d8;
}

.legend-dot.worktask {
  background: #059669;
}

.legend-dot.leave {
  background: #8b5cf6;
}

.legend-dot.holiday {
  background: #ef4444;
}

/* Dark Mode - Calendar Widget */
[data-theme="dark"] .calendar-weekday {
  color: #adb5bd;
}

[data-theme="dark"] .calendar-day:hover {
  background: #2d2d2d;
}

[data-theme="dark"] .calendar-day.other-month {
  color: #555;
}

[data-theme="dark"] .calendar-day.today {
  background: #4a9eff;
  color: white;
}

[data-theme="dark"] .calendar-day.sunday .day-number {
  color: #f87171;
}

[data-theme="dark"] .calendar-day.saturday .day-number {
  color: #60a5fa;
}

[data-theme="dark"] .calendar-day.today .day-number {
  color: white;
}

[data-theme="dark"] .calendar-legend {
  border-color: #333 !important;
}

/* Calendar Events Modal Styles */
.calendar-events-list {
  max-height: 400px;
  overflow-y: auto;
}

.calendar-event-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border-left: 4px solid #6c757d;
  transition: background-color 0.2s ease;
}

.calendar-event-item:hover {
  background: #e9ecef;
}

.calendar-event-item:last-child {
  margin-bottom: 0;
}

.calendar-event-item.event-meeting {
  border-left-color: #0d6efd;
}

.calendar-event-item.event-task {
  border-left-color: #198754;
}

.calendar-event-item.event-todo {
  border-left-color: #6f42c1;
}

.event-type-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 16px;
}

.event-meeting .event-type-icon {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
}

.event-task .event-type-icon {
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

.event-todo .event-type-icon {
  background: rgba(111, 66, 193, 0.15);
  color: #6f42c1;
}

.event-details {
  flex: 1;
  min-width: 0;
}

.event-title {
  font-weight: 500;
  color: #212529;
  margin-bottom: 4px;
  word-wrap: break-word;
}

.event-title a {
  color: inherit;
  text-decoration: none;
}

.event-title a:hover {
  color: #0d6efd;
}

.event-meta {
  font-size: 13px;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.event-meta i {
  font-size: 12px;
}

.no-events-message {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.no-events-message i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-events-message p {
  margin: 0;
  font-size: 15px;
}

/* Dark mode styles for Calendar Events Modal */
[data-theme="dark"] .calendar-event-item {
  background: #2d2d2d;
}

[data-theme="dark"] .calendar-event-item:hover {
  background: #3a3a3a;
}

[data-theme="dark"] .event-title {
  color: #e0e0e0;
}

[data-theme="dark"] .event-title a:hover {
  color: #4a9eff;
}

[data-theme="dark"] .event-meta {
  color: #adb5bd;
}

[data-theme="dark"] .no-events-message {
  color: #adb5bd;
}

[data-theme="dark"] .event-meeting .event-type-icon {
  background: rgba(74, 158, 255, 0.2);
  color: #4a9eff;
}

[data-theme="dark"] .event-task .event-type-icon {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

[data-theme="dark"] .event-todo .event-type-icon {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

/* ==========================================
   Badge Text Color Fix for Light Mode
   Ensures badge text is always white on colored backgrounds
   ========================================== */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-secondary,
.badge.rounded-pill.bg-primary,
.badge.rounded-pill.bg-success,
.badge.rounded-pill.bg-danger,
.badge.rounded-pill.bg-info,
.badge.rounded-pill.bg-secondary {
  color: #fff !important;
}

/* Warning badge needs dark text for good contrast */
.badge.bg-warning,
.badge.rounded-pill.bg-warning {
  color: #212529 !important;
}

/* Unread count badges should always be red/danger color */
.badge.rounded-pill {
  font-size: 11px;
  font-weight: 600;
}

/* Mobile optimizations - Hide download buttons and links */
@media (max-width: 768px) {
  /* Hide download buttons in various contexts */
  .btn-download,
  a[href*="/download"],
  button[onclick*="download"],
  .download-link,
  .document-actions .btn:has(.bi-download),
  .file-attachment-actions .btn:has(.bi-download) {
    display: none !important;
  }

  /* Keep other action buttons visible */
  .btn-back,
  .btn-preview,
  .btn-view {
    display: inline-flex !important;
  }
}

/* Todo Widget Styles */
.todo-widget-item {
  display: block;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  color: inherit;
}

.todo-widget-item:hover {
  background: #e9ecef;
  transform: translateX(2px);
}

.todo-widget-item .fw-bold {
  color: #212529;
}

/* 소속 회사 배지 (나의 작업 위젯) — 파견 등으로 다른 회사 항목이 섞여 오므로
   행마다 회사를 표시한다. 활성 회사가 아니면 .is-other 로 노랗게. */
.todo-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.15em 0.5em;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  color: #6c757d;
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: middle;
}

.todo-company-badge.is-other {
  border-color: transparent;
  background: #fff3cd;
  color: #8a6100;
}

.todo-stat-box {
  transition: all 0.2s ease;
}

.todo-stat-box:hover {
  background-color: #e9ecef !important;
}

/* Todo Widget Tabs */
.todo-tabs {
  border-bottom: 1px solid #dee2e6;
}

.todo-tabs .nav-link {
  color: #6c757d;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.todo-tabs .nav-link:hover {
  color: #0d6efd;
  border-bottom-color: transparent;
}

.todo-tabs .nav-link.active {
  color: #0d6efd;
  background: transparent;
  border: none;
  border-bottom: 2px solid #0d6efd;
}

.todo-tabs .nav-link .badge {
  font-size: 0.7rem;
}

.todo-tab-content {
  padding-top: 0.5rem;
}

.todo-list-scrollable {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.todo-list-scrollable::-webkit-scrollbar {
  width: 6px;
}

.todo-list-scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.todo-list-scrollable::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.todo-list-scrollable::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ==========================================
   Global Search Bar on Dashboard
   ========================================== */
.global-search-container {
  width: 100%;
}

.global-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  padding: 0.84rem 1.68rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.global-search-wrapper:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.global-search-icon {
  color: #6c757d;
  font-size: 2rem;
  margin-right: 1.26rem;
  flex-shrink: 0;
}

.global-search-input {
  flex: 1;
  border: none;
  padding: 0.84rem 0;
  font-size: 1.68rem;
  background: transparent;
  box-shadow: none !important;
}

.global-search-input:focus {
  outline: none;
  box-shadow: none;
}

.global-search-input::placeholder {
  color: #adb5bd;
}

.global-search-clear {
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.global-search-clear:hover {
  background: #e9ecef;
  color: #495057;
}

.global-search-spinner {
  margin-left: 0.5rem;
}

/* Global Search Results Container */
.global-search-results {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.global-search-results .search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.global-search-results .search-results-header h5 {
  margin: 0;
  font-weight: 600;
  color: #212529;
}

#search-results-content {
  padding: 1rem;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

/* Search Results Grid */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
}

/* Search Result Section */
.search-result-section {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.search-result-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid #e9ecef;
}

.search-result-section .section-header h6 {
  font-weight: 600;
}

.search-result-section .section-items {
  padding: 0.5rem;
}

.search-result-section .section-header a.badge {
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-result-section .section-header a.badge:hover {
  opacity: 0.85;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Individual Search Result Item */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.search-result-item:hover {
  background: #fff;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateX(2px);
}

.search-result-item .result-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  border-radius: 8px;
  margin-right: 0.75rem;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.search-result-item .result-content {
  flex: 1;
  min-width: 0;
}

.search-result-item .result-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}

.search-result-item .result-meta {
  font-size: 0.8rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-item .result-arrow {
  color: #adb5bd;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* No Results Message */
.no-results-message {
  padding: 3rem;
}

.no-results-message h5 {
  color: #495057;
  margin-bottom: 0.5rem;
}

/* Text color for purple (Task) */
.text-purple {
  color: #9b59b6 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .global-search-wrapper {
    padding: 0.5rem 1rem;
  }

  .global-search-input {
    font-size: 1.1rem;
  }

  .global-search-icon {
    font-size: 1.3rem;
  }

  .global-search-input::placeholder {
    font-size: 1rem;
  }

  .search-results-grid {
    grid-template-columns: 1fr;
  }

  #search-results-content {
    max-height: calc(100vh - 250px);
    padding: 0.75rem;
  }

  .search-result-item .result-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

/* ==========================================
   Global Search Bar Compact (Breadcrumb Area)
   ========================================== */
.global-search-layout-container {
  width: 100%;
}

.global-search-wrapper-compact {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
}

.global-search-wrapper-compact:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.15);
}

.global-search-icon-compact {
  color: #6c757d;
  font-size: 0.95rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.global-search-input-compact {
  flex: 1;
  border: none;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  background: transparent;
  box-shadow: none !important;
  min-width: 0;
}

.global-search-input-compact:focus {
  outline: none;
  box-shadow: none;
}

.global-search-input-compact::placeholder {
  color: #adb5bd;
  font-size: 0.85rem;
}

.global-search-clear-compact {
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  margin-left: 0.35rem;
  font-size: 0.8rem;
}

.global-search-clear-compact:hover {
  background: #e9ecef;
  color: #495057;
}

/* Dark mode support for compact search */
[data-theme="dark"] .global-search-wrapper-compact {
  background: #2d2d2d;
  border-color: #444;
}

[data-theme="dark"] .global-search-wrapper-compact:focus-within {
  border-color: #4a9eff;
  box-shadow: 0 2px 6px rgba(74, 158, 255, 0.2);
}

[data-theme="dark"] .global-search-icon-compact {
  color: #9ca3af;
}

[data-theme="dark"] .global-search-input-compact {
  color: #e0e0e0;
  background: transparent;
}

[data-theme="dark"] .global-search-input-compact::placeholder {
  color: #6c757d;
}

[data-theme="dark"] .global-search-clear-compact {
  color: #9ca3af;
}

[data-theme="dark"] .global-search-clear-compact:hover {
  background: #3a3a3a;
  color: #e0e0e0;
}

/* ==========================================
   Global Pagination Styles
   Used across all pages with ListView/GridView
   ========================================== */
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 0;
  margin: 1rem 0 0 0;
  list-style: none;
}

ul.pagination li {
  display: inline-block;
}

ul.pagination li a,
ul.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

ul.pagination li a:hover {
  color: #0d6efd;
  background-color: #e9ecef;
  border-color: #0d6efd;
}

ul.pagination li a:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

ul.pagination li.active a,
ul.pagination li.active span {
  color: #ffffff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  cursor: default;
  box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.25);
}

ul.pagination li.disabled a,
ul.pagination li.disabled span {
  color: #adb5bd;
  background-color: #f8f9fa;
  border-color: #dee2e6;
  pointer-events: none;
  cursor: not-allowed;
}

/* First, Prev, Next, Last buttons */
ul.pagination li.first a,
ul.pagination li.prev a,
ul.pagination li.next a,
ul.pagination li.last a {
  font-weight: 600;
}

/* Page summary text */
ul.pagination li.page-summary {
  color: #6c757d;
  font-size: 0.85rem;
  padding: 0 0.5rem;
}

/* Responsive pagination */
@media (max-width: 576px) {
  ul.pagination {
    gap: 0.125rem;
  }

  ul.pagination li a,
  ul.pagination li span {
    min-width: 2rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }

  /* Hide page numbers on very small screens, show only nav buttons */
  ul.pagination li:not(.first):not(.prev):not(.next):not(.last):not(.active) {
    display: none;
  }

  ul.pagination li.active {
    display: inline-block;
  }
}

/* Dark Mode Pagination */
[data-theme="dark"] ul.pagination li a,
[data-theme="dark"] ul.pagination li span {
  color: #e0e0e0;
  background-color: #2d2d2d;
  border-color: #444;
}

[data-theme="dark"] ul.pagination li a:hover {
  color: #4a9eff;
  background-color: #3a3a3a;
  border-color: #4a9eff;
}

[data-theme="dark"] ul.pagination li a:focus {
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25);
}

[data-theme="dark"] ul.pagination li.active a,
[data-theme="dark"] ul.pagination li.active span {
  color: #ffffff;
  background-color: #4a9eff;
  border-color: #4a9eff;
  box-shadow: 0 0.125rem 0.25rem rgba(74, 158, 255, 0.25);
}

[data-theme="dark"] ul.pagination li.disabled a,
[data-theme="dark"] ul.pagination li.disabled span {
  color: #6c757d;
  background-color: #1e1e1e;
  border-color: #333;
}

[data-theme="dark"] ul.pagination li.page-summary {
  color: #adb5bd;
}

/* ── Classic Dashboard: Module Navigation Buttons ── */
.classic-module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-mod-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    border: 1.5px solid #dee2e6;
    background: #f8f9fa;
    color: #495057;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .13s, border-color .13s, transform .13s, background .13s;
}
.cl-mod-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transform: translateY(-1px);
    text-decoration: none;
}
.cl-mod-btn i { font-size: 0.95rem; }

.cl-mod-orange  { background:#fff3e0; border-color:#ffe0b2; color:#c85200; }
.cl-mod-orange:hover  { border-color:#dd5b00; color:#dd5b00; }
.cl-mod-neutral { background:#f0eeec; border-color:#ddd; color:#5d5b54; }
.cl-mod-neutral:hover { border-color:#999; color:#37352f; }
.cl-mod-purple  { background:#ede9fb; border-color:#c9c0f3; color:#5645d4; }
.cl-mod-purple:hover  { border-color:#5645d4; color:#3d30a8; }
.cl-mod-green   { background:#d9f3e1; border-color:#b2e8c0; color:#1aae39; }
.cl-mod-green:hover   { border-color:#1aae39; color:#14862c; }
.cl-mod-red     { background:#fde0ec; border-color:#f8b4d0; color:#c02b72; }
.cl-mod-red:hover     { border-color:#c02b72; color:#96205a; }
.cl-mod-yellow  { background:#fef7d6; border-color:#f5e075; color:#8a6a00; }
.cl-mod-yellow:hover  { border-color:#d4a017; color:#6b5200; }
.cl-mod-blue    { background:#dcecfa; border-color:#a8d3f5; color:#0075de; }
.cl-mod-blue:hover    { border-color:#0075de; color:#005ab5; }

[data-theme="dark"] .cl-mod-btn {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #adb5bd;
}
[data-theme="dark"] .cl-mod-btn:hover { border-color: rgba(255,255,255,.3); color: #e8e8e8; }
[data-theme="dark"] .cl-mod-orange  { background:rgba(221,91,0,.14);  border-color:rgba(221,91,0,.3);  color:#f59350; }
[data-theme="dark"] .cl-mod-purple  { background:rgba(86,69,212,.16); border-color:rgba(86,69,212,.35); color:#9d8ef7; }
[data-theme="dark"] .cl-mod-green   { background:rgba(26,174,57,.14); border-color:rgba(26,174,57,.3);  color:#4ad66d; }
[data-theme="dark"] .cl-mod-red     { background:rgba(192,43,114,.14);border-color:rgba(192,43,114,.3); color:#f07070; }
[data-theme="dark"] .cl-mod-yellow  { background:rgba(245,215,94,.1); border-color:rgba(245,215,94,.25);color:#e6c84a; }
[data-theme="dark"] .cl-mod-blue    { background:rgba(0,117,222,.14); border-color:rgba(0,117,222,.3);  color:#5aaeff; }
[data-theme="dark"] .cl-mod-neutral { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#999896; }