/* Font Import (Pretendard) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* Root Variables - Light Mode (Default) */
:root {
    /* Colors - Light */
    --bg-main: #F9FAFB;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;

    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;

    --primary-color: #F97316;
    /* Orange based on specific Figma analysis */
    --primary-hover: #EA580C;
    --accent-gradient-start: #F97316;
    --accent-gradient-end: #22C55E;

    --border-color: #E5E7EB;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Sidebar specifics */
    --sidebar-width: 260px;
    --header-height: 70px;

    --sidebar-menu-hover: #FFF7ED;
    --sidebar-menu-active: #FFF7ED;
    --sidebar-border-active: #F97316;
}

/* Dark Mode Variables */
[data-theme='dark'] {
    /* Colors - Dark */
    --bg-main: #0B0E11;
    --bg-sidebar: #151A21;
    --bg-card: #151A21;
    --bg-header: #151A21;

    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --text-tertiary: #6B7280;

    --primary-color: #3B82F6;
    --primary-hover: #2563EB;
    --accent-gradient-start: #3B82F6;
    --accent-gradient-end: #8B5CF6;

    --border-color: #2D333B;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

    --sidebar-menu-hover: #1E293B;
    --sidebar-menu-active: #1E293B;
    --sidebar-border-active: #3B82F6;
}

/* Fix Date Picker Icon in Dark Mode */
[data-theme='dark'] ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Adjust date input and select dropdown text color in dark mode to be less glaring */
[data-theme='dark'] input[type="date"],
[data-theme='dark'] select {
    color: var(--text-secondary);
}

/* Restore primary text color when date is selected (optional, but hard to detect pure selection in CSS only without required/valid hack. 
   For now, a softer text color for the date is acceptable or we can just stick to secondary color for the placeholder look.) 
   Actually, let's just target the specific fields if possible, or leave it as secondary color which is readable but not stark white.
*/

/* Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

[data-theme='dark'] .skeleton {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Theme Toggle Icons Logic */
.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

[data-theme='dark'] .sun-icon {
    display: block;
}

[data-theme='dark'] .moon-icon {
    display: none;
}

/* Responsive Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 45;
    /* Below sidebar (50) but above header (40) */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout Wrapper */
.layout-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid transparent;
    /* Optional */
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
    border-radius: 8px;
    display: block;
}

.sidebar-menu {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
}

.menu-category {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-left: 12px;
    letter-spacing: 0.5px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    /* For active state indicator */
}

.menu-item svg {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    stroke-width: 1.5;
    /* If using feathers or similar */
}

.menu-item:hover {
    background-color: var(--sidebar-menu-hover);
    color: var(--text-primary);
}

.menu-item.active {
    background-color: var(--sidebar-menu-active);
    color: var(--sidebar-border-active);
    /* Unique text color for active */
    border-left-color: var(--sidebar-border-active);
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
}

/* Main Content Styles */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent flex overflow */
    transition: margin-left 0.3s ease;
}

/* Header Styles */
.top-header {
    height: var(--header-height);
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 40;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-left h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-bar {
    position: relative;
    width: 300px;
}

.search-bar input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.search-bar svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    width: 18px;
    height: 18px;
}

.search-bar input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
    /* Match primary */
}

/* Dark mode toggle & Icons */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background-color: var(--sidebar-menu-hover);
    color: var(--text-primary);
}

.notification-btn {
    position: relative;
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #EF4444;
    border-radius: 50%;
    border: 2px solid var(--bg-header);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #E5E7EB;
}

/* Page Content */
.page-content {
    padding: 32px;
    flex: 1;
}

/* Utility / Components */
.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 24px;
}

/* Filter Card */
.filter-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-card form {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.filter-input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    min-width: 160px;
}

.filter-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    height: 42px;
    /* Match input height roughly */
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--border-color);
    color: var(--text-primary);
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    height: 42px;
}

.btn-secondary:hover {
    filter: brightness(0.95);
}

[data-theme='dark'] .btn-secondary:hover {
    filter: brightness(1.2);
}

/* Data Table */
.table-container {
    background-color: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* For rounded corners */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th {
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-size: 13px;
    /* Optional: text-transform: uppercase; letter-spacing: 0.05em; */
}

.data-table td {
    background-color: var(--bg-main);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
    font-size: 14px;
}

.data-table tr:hover {
    background-color: var(--sidebar-menu-hover);
}

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

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.badge-blue {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.badge-green {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.badge-red {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.badge-yellow {
    background-color: rgba(234, 179, 8, 0.1);
    color: #EAB308;
}

.badge-gray {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--bg-card);
    border-radius: 12px;
    width: 500px;
    max-width: 90%;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    animation: slideUp 0.3s ease;
}

.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.modal-body {
    padding: 24px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Icon Button in Table */
.action-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.action-icon:hover {
    background-color: var(--bg-main);
    color: var(--primary-color);
}

/* Active State Effects */
.btn-primary:active,
.menu-item:active,
.icon-btn:active,
.action-icon:active,
.modal-close:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.active {
        transform: translateX(0);
        box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
    }

    .main-content {
        margin-left: 0;
    }

    .top-header {
        padding: 0 16px;
    }

    .page-content {
        padding: 16px;
    }

    /* Show hamburger menu */
    #sidebar-toggle {
        display: flex !important;
    }

    /* Adjust grids for mobile */
    .user-grid,
    .center-grid {
        grid-template-columns: 1fr;
        /* Full width cards */
    }

    .filter-card {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-input {
        width: 100% !important;
    }

    .search-bar {
        display: none;
        /* Hide search on mobile for space, or make compact */
    }
}

/* 13 Status Badges - Detailed Colors */
.badge-status-1 {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

/* 접수 - Blue */
.badge-status-2 {
    background-color: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

/* 처리중 - Indigo */
.badge-status-3 {
    background-color: rgba(168, 85, 247, 0.1);
    color: #A855F7;
}

/* 심사중 - Purple */
.badge-status-4 {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

/* 발급완료 - Green */
.badge-status-5 {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* 거절 - Red */
.badge-status-6 {
    background-color: rgba(249, 115, 22, 0.1);
    color: #F97316;
}

/* 부재1 - Orange */
.badge-status-7 {
    background-color: rgba(234, 179, 8, 0.1);
    color: #EAB308;
}

/* 부재2 - Yellow */
.badge-status-8 {
    background-color: rgba(161, 98, 7, 0.1);
    color: #A16207;
}

/* 부재3 - Bronze */
.badge-status-9 {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

/* 취소 - Gray */
.badge-status-10 {
    background-color: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

/* 보류 - Pink */
.badge-status-11 {
    background-color: rgba(20, 184, 166, 0.1);
    color: #14B8A6;
}

/* 확인요망 - Teal */
.badge-status-12 {
    background-color: rgba(6, 182, 212, 0.1);
    color: #06B6D4;
}

/* 대체 - Cyan */
.badge-status-13 {
    background-color: rgba(132, 204, 22, 0.1);
    color: #84CC16;
}

/* 기타 - Lime */

/* Slide-over Panel */
.slide-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.slide-over-overlay.active {
    opacity: 1;
    visibility: visible;
}

.slide-over-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100%;
    background-color: var(--bg-card);
    z-index: 51;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
}

.slide-over-panel.active {
    right: 0;
}

.slide-over-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide-over-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.slide-over-footer {
    padding: 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Tooltips & Ellipsis */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    /* Show above */
    right: 0;
    /* Align right or center */
    transform: translateY(-8px);
    background-color: #1F2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 250px;
    z-index: 60;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    text-align: left;
}

/* refined Input Styles */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    height: 42px;
    /* Fixed height for consistency */
    transition: all 0.2s;
}

textarea {
    height: auto;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Customer Number Input Guide */
.input-guide-container {
    position: relative;
    width: 100%;
}

.input-guide-text {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 12px;
    pointer-events: none;
}

/* Segmented Control */
.segmented-control {
    display: flex;
    background-color: var(--bg-main);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: fit-content;
}

.segmented-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control input[type="radio"]:checked+label {
    background-color: var(--bg-card);
    color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

[data-theme='dark'] .segmented-control input[type="radio"]:checked+label {
    background-color: #374151;
    /* Darker bg for active state in dark mode */
}

/* Dropzone & Progress Bar */
.dropzone-area {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    background-color: var(--bg-main);
    /* Slight contrast */
    cursor: pointer;
    transition: all 0.2s;
}

.dropzone-area:hover,
.dropzone-area.dragover {
    border-color: var(--primary-color);
    background-color: rgba(59, 130, 246, 0.05);
    /* Very light blue tint */
}

.dropzone-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.dropzone-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dropzone-subtext {
    font-size: 13px;
    color: var(--text-secondary);
}

.progress-container {
    margin-top: 24px;
    display: none;
    /* Hidden by default */
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    width: 0%;
    transition: width 0.3s ease;
}

/* File List Item */
.file-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: var(--bg-main);
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid var(--border-color);
}