/* Layout Base */
#layoutSidenav {
   display: flex;
   flex-direction: column;
}

#layoutSidenav_content {
   min-width: 0;
   flex-grow: 1;
   min-height: calc(100vh - 56px);
   margin: 70px auto 0;
   transition: margin 0.3s ease-in-out;
   width: 100%;
}

/* Sidebar Styles */
#layoutSidenav_nav {
   width: 0;
   height: 100vh;
   position: fixed;
   top: 0;
   z-index: 1038;
   transition: transform 0.3s ease-in-out;
}

.sb-sidenav {
   height: 100%;
   background-color: #f8f9fa;
   display: flex;
   flex-direction: column;
}

.sb-sidenav-menu {
   flex-grow: 1;

   overflow-y: auto;
}

/* Navigation Items */
.nav {
   display: flex;
   flex-direction: column;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
}

.sb-sidenav-menu-heading {
   padding: 1.75rem 1rem 0.75rem;
   font-size: 0.75rem;
   font-weight: bold;
   text-transform: uppercase;
   color: #adb5bd;
}

.nav-link {
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
   color: #212529;
   text-decoration: none;
   transition: color 0.2s ease;
}

.sb-nav-link-icon {
   margin-right: 0.5rem;
   color: #adb5bd;
}

/* Overlay for Mobile Menu */
.sidebar-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1037;
   transition: opacity 0.3s ease-in-out;
}

.sb-sidenav-toggled .sidebar-overlay {
   display: block;
}

/* header nav */
:root {
   --primary-color: #333d4b;
   --secondary-color: #3182f6;
   --hover-color: #f9fafb;
   --border-color: #eaecee;
   --text-primary: #191f28;
   --text-secondary: #8b95a1;

   /* OwnerFlow Modern Design System Tokens */
   --of-primary: #3182f6;
   --of-primary-light: #e8f3ff;
   --of-primary-dark: #1b64da;
   --of-success: #00c471;
   --of-success-light: #e8faf0;
   --of-warning: #f59f00;
   --of-warning-light: #fff8e6;
   --of-danger: #f04452;
   --of-danger-light: #ffe5e8;
   --of-purple: #8b5cf6;
   --of-purple-light: #f3f0ff;
   --of-orange: #ff6f61;
   --of-orange-light: #fff0ee;
   --of-blue-dark: #094cff;
   --of-blue-dark-light: #e6ecff;
   --of-lime: #6fba2c;
   --of-lime-light: #f0f9e8;
   --of-sky: #42a5f5;
   --of-sky-light: #e3f2fd;

   --of-text-primary: #191f28;
   --of-text-secondary: #4e5968;
   --of-text-muted: #8b95a1;
   --of-text-light: #b0b8c1;

   --of-bg-primary: #f7f8fa;
   --of-bg-white: #ffffff;
   --of-border: #e5e8eb;
   --of-border-light: #f2f4f6;

   --of-radius-sm: 8px;
   --of-radius-md: 12px;
   --of-radius-lg: 16px;
   --of-radius-xl: 20px;
   --of-radius-full: 9999px;

   --of-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
   --of-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
   --of-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

   --of-transition: all 0.2s ease;
}

.top-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 72px;
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
   z-index: 1000;
}

.nav-container {
   max-width: 92%;
   margin: 0 auto;
   padding: 0 24px;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.nav-left {
   display: flex;
   align-items: center;
   gap: 32px;
}

.menu-toggle {
   display: none;
   padding: 8px;
   background: none;
   border: none;
   color: var(--text-primary);
   cursor: pointer;
   transition: transform 0.2s ease;
}

.menu-toggle:hover {
   transform: scale(1.1);
}

.brand img {
   height: 40px;
   /* 원하는 높이로 조정 */
   width: auto;
   max-width: 150px;
   /* 최대 너비 제한 */
}

.brand {
   font-size: 22px;
   font-weight: 800;
   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-decoration: none;
   margin-right: 40px;
   letter-spacing: -0.5px;
}

.main-menu {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 12px;
   justify-content: center;
   align-items: center;
}

.menu-item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.menu-link {
   display: flex;
   align-items: center;
   padding: 10px 16px;
   color: var(--text-primary);
   background: #fff;
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   border-radius: 12px;
   transition: all 0.2s ease;
}

.menu-link:hover {
   background-color: var(--hover-color);
   transform: translateY(-1px);
}

.menu-link.active {
   color: var(--secondary-color);
   background-color: rgba(49, 130, 246, 0.1);
}

/* Highlighted menu item - 내 작업관리 (nav-right) */
.menu-link-highlight {
   color: #4841f1;
   font-weight: 600;
   font-size: 14px;
   padding: 6px 14px;
   border: 1.5px solid #4841f1;
   border-radius: 8px;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   transition: all 0.2s ease;
   margin-right: 8px;
}

.menu-link-highlight:hover {
   background-color: #4841f1;
   color: #fff !important;
}

/* Sidebar mobile highlight */
.nav-link-highlight {
   color: var(--secondary-color) !important;
   font-weight: 600 !important;
   border-left: 3px solid var(--secondary-color);
   background-color: rgba(49, 130, 246, 0.06);
}

.nav-link-highlight .sb-nav-link-icon,
.nav-link-highlight .sb-nav-link-icon i {
   color: var(--secondary-color) !important;
}

.nav-link-highlight:hover {
   background-color: rgba(49, 130, 246, 0.12) !important;
   color: var(--secondary-color) !important;
}

.menu-link2 {
   display: flex;
   align-items: center;
   padding: 10px 35px;
   color: #fff;
   background: #433bff;
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   border-radius: 12px;
   transition: all 0.2s ease;
}

.menu-link2:hover {
   background-color: var(--hover-color);
   transform: translateY(-1px);
}

.menu-link2.active {
   color: var(--secondary-color);
   background-color: rgba(49, 130, 246, 0.1);
}

.has-submenu {
   position: relative;
}

.has-submenu .menu-link {
   gap: 6px;
   cursor: pointer;
   border: 0;
}

.has-submenu .menu-link i {
   font-size: 12px;
   transition: transform 0.2s ease;
}

.has-submenu:hover .menu-link i {
   transform: rotate(-180deg);
}

.submenu {
   position: absolute;
   top: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   min-width: 220px;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   padding: 8px;
   display: none;
   list-style: none;
   opacity: 0;
   z-index: 1000;
}

.has-submenu::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 20px;
}

.submenu::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
   width: 16px;
   height: 16px;
   background: white;
   box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

.has-submenu:hover .submenu {
   display: block;
   animation: fadeInSubmenu 0.2s ease forwards;
}

.submenu a {
   display: flex;
   align-items: center;
   padding: 12px 16px;
   color: var(--text-primary);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   border-radius: 8px;
   transition: all 0.2s ease;
   white-space: nowrap;
}

.submenu a i {
   width: 20px;
   /* 아이콘 너비 고정 */
   margin-right: 8px;
   font-size: 14px;
   color: var(--text-secondary);
}

.submenu a:hover {
   background-color: var(--hover-color);
}

.nav-right {
   display: flex;
   align-items: center;
}

.user-menu {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 8px;
   align-items: center;
}

/**/

/* 알림 드롭다운 컨테이너 */
.notification-dropdown {
   position: relative;
   z-index: 1001;
}

/* 알림 토글 버튼 */
.notification-toggle {
   position: relative;
   padding: 8px;
   background: none;
   border: none;
   cursor: pointer;
   color: var(--text-primary);
   transition: transform 0.2s ease;
}

.notification-toggle:hover {
   transform: scale(1.1);
}

.notification-toggle.has-notifications {
   color: #ff4545;
}

/* 알림 카운트 뱃지 */
.notification-count-wrapper {
   position: absolute;
   top: 2px;
   right: 2px;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   background: #ff4545;
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   border-radius: 9px;
   border: 2px solid #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.notification-count {
   line-height: 1;
}

/* 알림 메뉴 컨테이너 */
.notification-menu {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   right: -16px;
   width: 450px;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   z-index: 1002;
}

.notification-menu.show {
   display: block;
   animation: fadeIn 0.2s ease;
}

/* 메뉴 화살표 */
.notification-menu::before {
   content: '';
   position: absolute;
   top: -8px;
   right: 24px;
   width: 16px;
   height: 16px;
   background: white;
   transform: rotate(45deg);
   box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
   z-index: 1001;
}

/* 알림 헤더 */
.notification-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-color);
}

.notification-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--text-primary);
}

/* 알림 리스트 */
.notification-list {
   max-height: 480px;
   overflow-y: auto;
   padding: 16px;
}

.notification-list::-webkit-scrollbar {
   width: 8px;
}

.notification-list::-webkit-scrollbar-track {
   background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
   background-color: #dfe3e8;
   border-radius: 4px;
}

/* 알림 섹션 */
.unread-section,
.read-section {
   margin-bottom: 24px;
}

.unread-section h6,
.read-section h6 {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-secondary);
   margin: 0 0 12px 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* 개별 알림 아이템 */
.notification-item {
   padding: 10px 16px;
   margin-bottom: 8px;
   border-radius: 12px;
   background: #fff;
   transition: all 0.2s ease;
   cursor: pointer;
   border: 1px solid var(--border-color);
}

.notification-item:hover {
   background-color: var(--hover-color);
   transform: translateY(-1px);
}

.notification-item.unread {
   background-color: #f8f9ff;
}

.notification-content {
   margin-bottom: 12px;
}

.notification-text {
   display: block;
   font-size: 14px;
   line-height: 1.5;
   color: var(--text-primary);
   margin-bottom: 4px;
}

.notification-time {
   display: inline-block;
   font-size: 12px;
   color: var(--text-secondary);
   margin-right: 8px;
}

/* 알림 상태 뱃지 */
.status-unread,
.status-read {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
}

.status-unread {
   background-color: #fef3f2;
   color: #dc2626;
}

.status-read {
   background-color: #f1f5f9;
   color: #64748b;
}

/* 알림 액션 버튼 */
.notification-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
}

.action-link,
.action-read {
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 13px;
   font-weight: 500;
   transition: all 0.2s ease;
   border: none;
   cursor: pointer;
}

.action-link {
   background-color: var(--secondary-color);
   color: white;
   text-decoration: none;
}

.action-link:hover {
   background-color: #2563eb;
}

.action-read {
   background-color: #f1f5f9;
   color: var(--text-primary);
}

.action-read:hover {
   background-color: #e2e8f0;
}

/* 모두 읽음 버튼 */
.read-all {
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 500;
   color: var(--secondary-color);
   background: rgba(49, 130, 246, 0.1);
   border-radius: 6px;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
}

.read-all:hover {
   background: rgba(49, 130, 246, 0.15);
}

/* 빈 상태 & 에러 상태 */
.empty-state,
.error-state {
   text-align: center;
   padding: 32px 16px;
   color: var(--text-secondary);
   font-size: 14px;
}

/**/
.user-profile {
   position: relative;
}

.user-profile .menu-link {
   display: flex;
   align-items: center;
   padding: 10px 0px 10px 0px;
   color: var(--text-primary);
   cursor: pointer;
   border-radius: 12px;
   transition: all 0.2s ease;
}

.user-profile .menu-link:hover {
   background-color: var(--hover-color);
}

.user-menu-dropdown {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   min-width: 200px;
   background: white;
   border-radius: 16px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   padding: 8px;
   display: none;
   opacity: 0;
   z-index: 1000;
}

.user-menu-dropdown::before {
   content: '';
   position: absolute;
   top: -8px;
   right: 24px;
   width: 16px;
   height: 16px;
   background: white;
   transform: rotate(45deg);
   box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

.user-menu-dropdown a {
   display: flex;
   align-items: center;
   padding: 12px 16px;
   color: var(--text-primary);
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
   border-radius: 8px;
   transition: all 0.2s ease;
}

.user-menu-dropdown .logout {
   color: #dc3545;
}

.user-profile::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 20px;
}

.user-menu-dropdown a:hover {
   background-color: var(--hover-color);
}

.user-menu-dropdown.show {
   display: block;
   animation: fadeIn 0.2s ease forwards;
}

.user-profile:hover .fa-chevron-down {
   transform: rotate(-180deg);
}

.fa-chevron-down {
   transition: transform 0.2s ease;
}

.read-all {
   background: none;
   border: none;
   color: var(--secondary-color);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   padding: 8px 12px;
   border-radius: 8px;
   transition: all 0.2s ease;
}

.read-all:hover {
   background-color: rgba(49, 130, 246, 0.1);
}

.notification-list {
   max-height: 700px;
   overflow-y: auto;
   padding: 8px;
}

/* New features - hover cards */
.menu-item .hover-card {
   position: absolute;
   top: calc(100% + 12px);
   left: 0;
   transform: none;
   background: white;
   border-radius: 16px;
   padding: 16px;
   width: 280px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
   display: none;
   opacity: 0;
   z-index: 1000;
}

.menu-item:hover .hover-card {
   display: block;
   animation: fadeInCard 0.2s ease forwards;
}

.menu-item .hover-card::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 24px;
   width: 16px;
   height: 16px;
   background: white;
   transform: rotate(45deg);
   box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

.menu-item:last-child .hover-card {
   left: auto;
   right: 0;
}

.menu-item:last-child .hover-card::before {
   left: auto;
   right: 24px;
}

/* Status indicator */
.status-indicator {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 8px;
   background: #433bff;
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   border-radius: 6px;
   margin-left: 12px;
}

.status-indicator::before {
   width: 6px;
   height: 6px;
   background: currentColor;
   border-radius: 50%;
}

/* Desktop Styles (992px and up) */
@media (min-width: 992px) {
   .nav-inner-container {
      width: 80%;
      margin: 0 auto;
   }

   .logged-in #layoutSidenav #layoutSidenav_nav {
      transform: translateX(0);
      left: 0;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
   }

   .logged-out #layoutSidenav #layoutSidenav_nav {
      display: none;
   }

   .sb-sidenav-toggled.logged-in #layoutSidenav #layoutSidenav_nav {
      transform: translateX(-225px);
   }

   .sb-sidenav-toggled.logged-in #layoutSidenav #layoutSidenav_content {
      margin-left: 0;
   }

   .desktop-nav {
      display: flex !important;
   }
}

/* Mobile Styles (less than 992px) */
@media (max-width: 991.98px) {
   .nav-inner-container {
      width: 100%;
      padding: 0 1rem;
   }

   .navbar-brand {
      font-size: 1.2rem;
   }

   .desktop-nav {
      display: none !important;
   }

   #layoutSidenav #layoutSidenav_nav {
      left: 0;
      transform: translateX(-225px);
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
   }

   .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
      transform: translateX(0);
   }

   #layoutSidenav #layoutSidenav_content {
      margin-left: 0 !important;
   }

   .logged-in #layoutSidenav #layoutSidenav_content,
   .logged-out #layoutSidenav #layoutSidenav_content {
      margin-left: 0;
   }
}

@media (max-width: 768px) {
   #layoutSidenav_content {
      width: 100%;
      margin: 0 auto 0;
   }

   .main-menu {
      display: none;
   }

   #mileage_point {
      display: none;
   }

   .nav-container {
      padding: 0;
      position: relative;
   }

   .menu-link {
      padding: 10px;
   }

   .menu-link2 {
      display: none;
   }

   .brand {
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
   }

   .menu-toggle {
      display: block;
      margin-right: 0;
      position: absolute;
      left: 16px;
      z-index: 2;
   }

   .user-menu-dropdown {
      position: absolute;
      right: 0;
      min-width: 120px;
   }

   .nav-left {
      flex: 1;
      justify-content: center;
   }

   /* 모바일에서 "내 작업관리" 버튼 숨김 (로고 겹침 방지) */
   .menu-link-highlight {
      display: none;
   }

   /* nav-right가 absolute 로고와 겹치지 않도록 z-index 설정 */
   .nav-right {
      position: relative;
      z-index: 2;
   }

   .notification-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      margin: 0;
      border-radius: 0;
      z-index: 1002;
   }

   .notification-menu::before {
      display: none;
   }

   .notification-header {
      padding: 15px 50px;
      position: relative;
   }

   .notification-close {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 32px;
      height: 32px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-primary);
   }

   .notification-list {
      height: calc(100vh - 65px);
      max-height: none;
      padding: 16px;
      -webkit-overflow-scrolling: touch;
   }

   .notification-item {
      padding: 16px;
   }

   /* Sidebar Styles */
   #layoutSidenav_nav {
      width: 225px;
      height: 100vh;
      position: fixed;
      top: 0;
      z-index: 1038;
      transition: transform 0.3s ease-in-out;
   }

   #layoutSidenav_nav {
      top: 72px;
      height: calc(100vh - 72px);
      width: 225px;
      left: 0;
      transform: translateX(-225px);
   }

   .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
      transform: translateX(0);
   }

   .sb-sidenav {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }

   .sidebar-overlay {
      top: 72px;
      height: calc(100vh - 72px);
   }

   .sb-sidenav-user {
      margin-top: 0;
   }

   .sb-sidenav-collapse-arrow {
      margin: 0 20px;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes fadeInSubmenu {
   from {
      opacity: 0;
      transform: translateX(-50%) translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
   }
}

@keyframes fadeInCard {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.tooltip-bubble {
   position: absolute;
   bottom: -30px;
   left: 30%;
   transform: translateX(-50%);
   background: #433bff;
   color: white;
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 14px;
   white-space: nowrap;
   z-index: 1000;
   animation: bounce 2s infinite;
}

.tooltip-bubble::before {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 5px solid transparent;
   border-bottom-color: #433bff;
}

@keyframes bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translateX(-50%) translateY(0);
   }

   40% {
      transform: translateX(-50%) translateY(5px);
   }

   60% {
      transform: translateX(-50%) translateY(3px);
   }
}

.deadline-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   background: #fee;
   color: #dc2626;
   border-radius: 10px;
   font-size: 11px;
   font-weight: 900;
   margin-left: 8px;
   animation: pulse-overdue 1.5s infinite;
}

.menu-link.has-deadline {
   color: #dc2626;
   font-weight: 700;
   animation: pulse-overdue 1.5s infinite;
}

@keyframes pulse-overdue {
   0%,
   100% {
      opacity: 1;
      box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
   }

   50% {
      opacity: 1;
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
   }
}