/**
 * NS Auto Manager - v2 Design System
 * Inter font, Indigo primary, mobile-first responsive
 */

/* ==================== Font Import ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==================== Design Tokens ==================== */
:root {
    /* Primary */
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-light: #EEF2FF;
    --gradient-end: #7C3AED;

    /* Semantic */
    --success: #10B981;
    --success-light: #D1FAE5;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;

    /* Connection */
    --connected: #059669;
    --connected-light: #ECFDF5;

    /* Text */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-white: #FFFFFF;

    /* Backgrounds */
    --bg-page: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-nav: #FFFFFF;
    --input-bg: #F1F5F9;

    /* Borders */
    --border: #E2E8F0;
    --border-light: #F1F5F9;

    /* Chips */
    --chip-bg: #F1F5F9;
    --chip-active: #EEF2FF;

    /* Shadows */
    --shadow-sm: 0 1px 3px #0F172A0A;
    --shadow-md: 0 4px 12px #0F172A10;
    --shadow-lg: 0 8px 32px #0F172A0C;
    --shadow-primary: 0 2px 8px #4F46E520;
    --shadow-danger: 0 2px 8px #EF444420;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Spacing */
    --touch-target-min: 44px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
}

/* ==================== Base Styles ==================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.1px;
}

/* Navigation spacer for fixed navbar */
.nav-spacer {
    height: 60px;
}

/* ==================== Typography ==================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* ==================== Links ==================== */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* ==================== Bootstrap Overrides - Colors ==================== */
.text-primary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-light {
    background-color: var(--bg-page) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* ==================== Buttons ==================== */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.2px;
    border-radius: var(--radius-md);
    padding: 0.6875rem 1.5rem;
    min-height: var(--touch-target-min);
    transition: all var(--transition-normal);
    border: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--text-white);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-hover);
    color: var(--text-white);
    box-shadow: 0 4px 12px #4F46E530;
}

.btn-primary:active {
    background-color: #3730A3;
}

.btn-success {
    background-color: var(--success);
    color: var(--text-white);
}

.btn-success:hover {
    background-color: #059669;
    color: var(--text-white);
}

.btn-danger {
    background-color: var(--danger);
    color: var(--text-white);
    box-shadow: var(--shadow-danger);
}

.btn-danger:hover {
    background-color: #DC2626;
    color: var(--text-white);
}

.btn-outline-primary {
    color: var(--primary);
    border: 1px solid var(--border);
    background-color: var(--bg-card);
}

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

.btn-outline-secondary {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background-color: var(--bg-card);
}

.btn-outline-secondary:hover {
    background-color: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border);
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
}

.btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    min-height: 32px;
    border-radius: var(--radius-sm);
}

/* Button spacing */
.btn + .btn {
    margin-left: 8px;
}

.btn-group .btn + .btn {
    margin-left: 0;
}

/* ==================== Cards ==================== */
.card {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    background-color: var(--bg-card);
    overflow: hidden;
}

.card-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 1rem 1.25rem;
    color: var(--text-primary);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}

/* ==================== Forms ==================== */
.form-control,
.form-select {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6875rem 0.875rem;
    min-height: var(--touch-target-min);
    color: var(--text-primary);
    background-color: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px #4F46E518;
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
    letter-spacing: -0.1px;
}

.form-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px #4F46E518;
    border-color: var(--primary);
}

/* Switch style */
.form-switch {
    display: flex;
    align-items: center;
    padding-left: 3.25rem;
}

.form-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    margin-top: 0;
    margin-left: -3.25rem;
    float: none;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary);
}

.form-switch .form-check-label {
    line-height: 1.5rem;
}

/* Input group */
.input-group-text {
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

/* ==================== Badges ==================== */
.badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.badge.bg-primary,
.bg-primary {
    background-color: var(--primary) !important;
}

.badge.bg-success,
.bg-success {
    background-color: var(--success) !important;
}

.badge.bg-danger,
.bg-danger {
    background-color: var(--danger) !important;
}

.badge.bg-warning,
.bg-warning {
    background-color: var(--warning) !important;
}

.badge.bg-secondary {
    background-color: var(--text-muted) !important;
}

/* Semantic badges (v2 style - colored background with matching text) */
.badge-primary {
    background-color: var(--primary-light);
    color: var(--primary);
}

.badge-success {
    background-color: var(--success-light);
    color: var(--success);
}

.badge-danger {
    background-color: var(--danger-light);
    color: var(--danger);
}

.badge-warning {
    background-color: var(--warning-light);
    color: var(--warning);
}

.badge-connected {
    background-color: var(--connected-light);
    color: var(--connected);
}

/* ==================== Status Indicators ==================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-connected {
    background-color: var(--connected-light);
    color: var(--connected);
}

.status-disconnected {
    background-color: var(--danger-light);
    color: var(--danger);
}

.status-idle {
    background-color: var(--success-light);
    color: var(--success);
}

.status-busy {
    background-color: var(--warning-light);
    color: var(--warning);
}

.status-error {
    background-color: var(--danger-light);
    color: var(--danger);
}

/* Blinking indicator */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-indicator.connected {
    background-color: var(--connected);
}

.status-indicator.idle {
    background-color: var(--success);
}

.status-indicator.disconnected {
    background-color: var(--danger);
}

.status-indicator.busy {
    background-color: var(--warning);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==================== Chip Selectors (v2 new component) ==================== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background-color: var(--chip-bg);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1.5px solid transparent;
    user-select: none;
}

.chip:hover {
    background-color: var(--border);
}

.chip.active,
.chip-active {
    background-color: var(--chip-active);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.chip.active::before,
.chip-active::before {
    content: '\2713';
    font-size: 0.75rem;
    font-weight: 700;
}

/* ==================== Progress Bar ==================== */
.progress {
    height: 8px;
    border-radius: var(--radius-sm);
    background-color: var(--border-light);
    overflow: hidden;
}

.progress-bar {
    background-color: var(--primary);
    border-radius: var(--radius-sm);
    transition: width 0.4s ease;
}

/* Circular progress (v2 mobile) */
.progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}

.progress-ring .track {
    stroke: var(--border-light);
}

.progress-ring .fill {
    stroke: var(--primary);
}

.progress-ring .value {
    position: absolute;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
}

/* ==================== Navbar ==================== */
.navbar {
    background-color: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border) !important;
    height: 60px;
    padding: 0 2rem;
    box-shadow: none;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--primary) !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-right: 0;
}

.navbar-brand i {
    font-size: 1.25rem;
}

/* Nav Pill Links (v2 desktop) */
.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-pill i {
    font-size: 1rem;
}

.nav-pill:hover {
    color: var(--primary);
    background-color: var(--primary-light);
}

.nav-pill.active {
    color: var(--primary);
    background-color: var(--primary-light);
    font-weight: 600;
}

/* Logout button */
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-page);
    border: none;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-logout:hover {
    background-color: var(--danger-light);
    color: var(--danger);
}

.navbar-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ==================== Mobile Bottom Tab Bar ==================== */
.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: 1040;
}

.tab-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
    padding: 0 8px;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    width: 64px;
    text-decoration: none;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.tab-item i {
    font-size: 1.375rem;
}

.tab-item span {
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
}

.tab-item.active {
    color: var(--primary);
}

.tab-item.active span {
    font-weight: 600;
}

.tab-safe-area {
    height: 0;
    background-color: var(--bg-card);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .tab-safe-area {
        height: env(safe-area-inset-bottom);
    }
}

/* ==================== Main Content ==================== */
.main-content {
    padding: 2rem 2.5rem;
    max-width: 1360px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .main-content {
        padding: 1.25rem 1rem;
        padding-bottom: calc(83px + 1.25rem); /* bottom tab bar height + padding */
    }
}

/* ==================== Dashboard v2 Layout ==================== */
.dashboard-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
}

.dash-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dash-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

/* ==================== App Cards v2 ==================== */
.apps-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.v2-app-card {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px #0F172A08;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.v2-app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px #0F172A12;
}

.v2-app-card.selected {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px #4F46E518;
}

.app-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212529;
}

.conn-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

.conn-badge--success {
    color: var(--success);
    background-color: var(--success-light);
}

.conn-badge--danger {
    color: var(--danger);
    background-color: var(--danger-light);
}

.app-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    font-size: 0.75rem;
    color: #6C757D;
}

.info-value {
    font-size: 0.75rem;
    font-weight: 500;
    color: #212529;
}

/* ==================== Current Job Info (App Card) ==================== */
.current-job-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: var(--primary-light, #EEF2FF);
    border-left: 3px solid var(--primary, #4F46E5);
}

.current-job-icon {
    color: var(--primary, #4F46E5);
    font-size: 1rem;
    flex-shrink: 0;
}

.current-job-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.current-job-type {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary, #4F46E5);
}

.current-job-detail {
    font-size: 0.6875rem;
    color: #6C757D;
}

/* ==================== Company Selection ==================== */
.company-check {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.company-check .form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    margin-top: 0;
    float: none;
}

.company-check .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.company-check .form-check-label {
    font-size: 0.875rem;
    color: var(--text-primary);
    padding-left: 0.5rem;
    line-height: 1.4;
}

/* ==================== Job Queue v2 ==================== */
.queue-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
}

.queue-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.queue-badge--active {
    background-color: var(--primary);
    color: #FFFFFF;
}

.queue-badge--pending {
    background-color: var(--border);
    color: #6C757D;
}

.queue-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.queue-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
}

.queue-sub {
    font-size: 0.75rem;
    color: #6C757D;
}

/* ==================== Recent Activity ==================== */
.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background-color: var(--bg-card);
    box-shadow: 0 2px 8px #0F172A08;
}

.activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 1rem;
}

.activity-icon--success {
    background-color: var(--success-light);
    color: var(--success);
}

.activity-icon--danger {
    background-color: var(--danger-light);
    color: var(--danger);
}

.activity-icon--warning {
    background-color: var(--warning-light);
    color: var(--warning);
}

/* P5: 작업은 성공했지만 카카오 전송이 실패한 항목의 식별 배지 */
.activity-badge--kakao {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 600;
    background-color: var(--danger-light);
    color: var(--danger);
    vertical-align: 1px;
}

.activity-info {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.activity-detail:empty {
    display: none;
}

.activity-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.activity-more {
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 0.5rem 0;
}

.activity-more:hover {
    color: var(--primary-hover);
}

/* ==================== List Group ==================== */
.list-group-item {
    border-color: var(--border-light);
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
}

.list-group-item-action:hover {
    background-color: var(--bg-page);
}

/* ==================== Manufacturer Order Grid ==================== */
.manufacturer-order-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.manufacturer-order-grid li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.625rem;
    font-size: 0.8125rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: grab;
    user-select: none;
}

.manufacturer-order-grid li:active {
    cursor: grabbing;
}

.manufacturer-order-grid li.dragging {
    opacity: 0.4;
}

.manufacturer-order-grid li .grip-label {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.manufacturer-order-grid li .badge {
    font-size: 0.6875rem;
    min-width: 1.375rem;
}

/* ==================== Alert ==================== */
.alert {
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    border: none;
}

.alert-warning {
    background-color: var(--warning-light);
    color: #92400E;
}

.alert-danger {
    background-color: var(--danger-light);
    color: #991B1B;
}

.alert-info {
    background-color: var(--primary-light);
    color: #3730A3;
}

.alert-success {
    background-color: var(--success-light);
    color: #065F46;
}

/* ==================== Toast Notifications (v2) ==================== */
.v2-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-card);
    box-shadow: 0 8px 24px #0F172A10;
    border: 1px solid transparent;
    max-width: 420px;
    width: 100%;
    margin-bottom: 0.5rem;
    animation: toastSlideIn 0.3s ease;
    position: relative;
}

.v2-toast.hiding {
    animation: toastSlideOut 0.25s ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

.v2-toast-icon {
    font-size: 1.375rem;
    flex-shrink: 0;
}

.v2-toast-body {
    flex: 1;
    min-width: 0;
}

.v2-toast-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.v2-toast-message {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}

.v2-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 1.125rem;
    transition: all var(--transition-fast);
}

.v2-toast-close:hover {
    background-color: var(--bg-page);
    color: var(--text-secondary);
}

/* Toast type variants */
.v2-toast.toast-success {
    border-color: var(--success);
}
.v2-toast.toast-success .v2-toast-icon { color: var(--success); }
.v2-toast.toast-success .v2-toast-title { color: var(--success); }

.v2-toast.toast-error {
    border-color: var(--danger);
}
.v2-toast.toast-error .v2-toast-icon { color: var(--danger); }
.v2-toast.toast-error .v2-toast-title { color: var(--danger); }

.v2-toast.toast-warning {
    border-color: var(--warning);
}
.v2-toast.toast-warning .v2-toast-icon { color: var(--warning); }
.v2-toast.toast-warning .v2-toast-title { color: #92400E; }

.v2-toast.toast-info {
    border-color: var(--primary);
}
.v2-toast.toast-info .v2-toast-icon { color: var(--primary); }
.v2-toast.toast-info .v2-toast-title { color: var(--primary); }

@media (max-width: 767.98px) {
    .v2-toast {
        max-width: calc(100vw - 2rem);
    }

    #toast-container {
        bottom: 90px !important; /* above bottom tab bar */
    }
}

/* ==================== Loading Overlay ==================== */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loading-overlay.d-none {
    display: none !important;
}

#loading-overlay .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
}

#loading-overlay .loading-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-2xl);
    padding: 2rem 3rem;
    box-shadow: 0 12px 40px #0F172A14;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 200px;
}

.loading-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin: 0;
}

.loading-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
}

/* ==================== Modal ==================== */
#job-detail-modal .modal-dialog {
    max-width: 560px;
}

.modal-content {
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: 0 12px 40px #0F172A20;
}

.modal-header {
    border-bottom: 1px solid var(--border-light);
    padding: 1.125rem 1.5rem;
}

.modal-header .modal-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.modal-body {
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--border-light);
    padding: 1rem 1.5rem;
}

/* Modal result box — 기본은 성공, .is-partial / .is-failed 상태에 따라 배경·아이콘·텍스트 색을 재지정합니다. */
.modal-result-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background-color: var(--success-light);
    border-radius: 8px;
}

.modal-result-box i {
    font-size: 1rem;
    color: var(--success);
    flex-shrink: 0;
}

.modal-result-box span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--success);
}

.modal-result-box.is-partial {
    background-color: var(--warning-light);
}

.modal-result-box.is-partial i,
.modal-result-box.is-partial span {
    color: var(--warning);
}

.modal-result-box.is-failed {
    background-color: var(--danger-light);
}

.modal-result-box.is-failed i,
.modal-result-box.is-failed span {
    color: var(--danger);
}

/* Modal param code box */
#detail-params {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 14px;
    background: var(--bg-page) !important;
    border-radius: 8px !important;
    border: none;
    margin: 0;
}

/* ==================== Pagination ==================== */
.pagination .page-link {
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 0 2px;
    font-size: 0.875rem;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-white);
}

.pagination .page-link:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--border);
}

/* ==================== Login Page ==================== */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--bg-page);
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-lg) !important;
    border: none;
}

.login-card .card-body {
    padding: 2.75rem;
}

.login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-logo i {
    font-size: 2.5rem;
    color: var(--primary);
    background-color: var(--primary-light);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-logo h1 {
    font-size: 1.375rem;
    font-weight: 700;
    margin-top: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.login-logo p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.login-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Login input with icon inside */
.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
}

.login-input-field {
    padding-left: 2.5rem !important;
}

.login-pw-toggle {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
    transition: all var(--transition-fast);
    z-index: 1;
}

.login-pw-toggle:hover {
    background-color: var(--bg-page);
    color: var(--text-secondary);
}

/* Login error box (v2 design) */
.login-error-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: var(--danger-light);
    border: 1px solid var(--danger);
    border-radius: 12px;
    margin-top: 1rem;
}

.login-error-box i {
    font-size: 1.125rem;
    color: var(--danger);
    flex-shrink: 0;
}

.login-error-box span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--danger);
}

/* ==================== Quick Action Cards (v2 horizontal) ==================== */
.quick-actions-grid {
    display: flex;
    gap: 0.75rem;
}

.quick-action-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px #0F172A04;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    min-height: var(--touch-target-min);
}

.quick-action-card i {
    font-size: 1.25rem;
}

.quick-action-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    color: var(--primary);
}

/* Legacy quick-action support */
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 500;
    gap: 0.25rem;
    min-height: 80px;
    justify-content: center;
}

.quick-action i {
    font-size: 1.5rem;
}

.quick-action:hover {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* ==================== Two-Column Layout (v2) ==================== */
.two-col-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.col-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.col-sidebar {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 92px; /* navbar height + padding */
}

@media (max-width: 991.98px) {
    .two-col-layout {
        flex-direction: column;
    }

    .col-main {
        width: 100%;
    }

    .col-sidebar {
        width: 100%;
        position: static;
    }
}

/* App info bar (selected app) */
.app-info-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    background-color: var(--primary-light);
    border: 1px solid var(--primary);
    font-size: 0.875rem;
}

.app-info-bar i {
    color: var(--primary);
}

.app-info-bar .app-info-name {
    font-weight: 600;
    color: var(--text-primary);
}


/* Section card used inside columns */
.section-card {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: 0 4px 16px #0F172A08;
    padding: 1.5rem;
}

.section-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-card-title i {
    color: var(--text-secondary);
}

/* ==================== Job List (v2 History Page) ==================== */
.job-list-card {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: 0 4px 16px #0F172A08;
    overflow: hidden;
}

.job-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--border);
}

.job-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color var(--transition-fast);
}

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

.job-list-item:hover {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* v2 Pagination Buttons */
.v2-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.v2-page-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.v2-page-btn.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
}

.v2-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==================== v2 Job Status Card ==================== */
.job-status-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
}

.v2-status-card {
    width: 480px;
    max-width: 100%;
    border-radius: var(--radius-2xl);
    background-color: var(--bg-card);
    box-shadow: 0 8px 24px #0F172A0C;
    padding: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.v2-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-2xl);
    font-size: 1.75rem;
}

.v2-status-icon.success {
    background-color: var(--success-light);
    color: var(--success);
}

.v2-status-icon.danger {
    background-color: var(--danger-light);
    color: var(--danger);
}

.v2-status-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.v2-status-title.success { color: var(--success); }
.v2-status-title.danger { color: var(--danger); }

.v2-status-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.v2-status-summary {
    width: 100%;
    background-color: var(--bg-page);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-status-error {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background-color: var(--danger-light);
    border: 1px solid var(--danger);
    font-size: 0.8125rem;
    color: var(--danger);
    text-align: left;
}

.v2-status-error i {
    flex-shrink: 0;
    margin-top: 1px;
}

.v2-status-buttons {
    width: 100%;
    display: flex;
    gap: 0.75rem;
}

.v2-status-buttons .btn {
    flex: 1;
}

.v2-status-progress {
    width: 100%;
}

/* v2 No App Warning */
.v2-no-app-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background-color: var(--warning-light);
    border: 1px solid var(--warning);
}

.v2-no-app-warning i {
    color: var(--warning);
    font-size: 1.375rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.v2-no-app-warning .warn-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.v2-no-app-warning .warn-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.v2-no-app-warning + .btn {
    width: 100%;
    margin-top: 1.25rem;
}

@media (min-width: 576px) {
    .v2-no-app-warning + .btn {
        width: auto;
        min-width: 200px;
    }
}

/* v2 Empty State */
.v2-empty-state {
    border-radius: var(--radius-xl);
    background-color: var(--bg-card);
    box-shadow: 0 4px 16px #0F172A08;
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.v2-empty-state .empty-icon {
    font-size: 3rem;
    color: var(--text-muted);
}

.v2-empty-state .empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.v2-empty-state .empty-subtitle {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==================== Spinner ==================== */
.spinner-border {
    color: var(--primary);
}

/* ==================== Utility Classes ==================== */
.text-primary-custom {
    color: var(--primary) !important;
}

.bg-primary-custom {
    background-color: var(--primary) !important;
}

.border-primary-custom {
    border-color: var(--primary) !important;
}

.bg-info-subtle {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* ==================== Selection highlight ==================== */
::selection {
    background-color: var(--primary-light);
    color: var(--primary);
}

/* ==================== Scrollbar ==================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==================== Safe area for iOS ==================== */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==================== Responsive - Mobile ==================== */
@media (max-width: 767.98px) {
    .nav-spacer {
        height: 56px;
    }

    .navbar {
        height: 56px;
        padding: 0 1rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
    }

    .form-control,
    .form-select {
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .nav-link {
        padding: 0.75rem 1rem;
    }

    .card {
        border-radius: var(--radius-lg);
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* 체크박스/토글 모바일 최적화 */
    .section-card {
        padding: 1.25rem;
    }

    .company-check {
        padding: 0.625rem 0;
        min-height: 44px;
    }

    .company-check .form-check-label {
        padding-left: 0.5rem;
    }

    .form-check {
        padding-left: 1.75em;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .form-switch {
        min-height: 44px;
    }

    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1.0625rem; }

    .login-card .card-body {
        padding: 1.5rem;
    }
}


/* ==================== Responsive - Large screens ==================== */
@media (min-width: 992px) {
    .container {
        max-width: 1200px;
    }
}

/* ==================== Dashboard v2 - Responsive ==================== */
@media (max-width: 767.98px) {
    .dash-title {
        font-size: 1.25rem;
    }

    .apps-grid {
        flex-direction: column;
    }

    .v2-app-card {
        min-width: unset;
    }

    .quick-actions-grid {
        flex-wrap: wrap;
    }

    .quick-actions-grid .quick-action-card {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 0;
    }
}

/* ==================== Windows Apps Sections (3-zone layout) ==================== */
.apps-count {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-left: auto;
}

.apps-count-online { color: var(--success, #28A745); }
.apps-count-offline { color: var(--text-muted, #6C757D); }
.apps-count-muted { color: var(--text-muted, #6C757D); }

.apps-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.apps-subsection {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.apps-subsection-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted, #6C757D);
    letter-spacing: -0.2px;
}

.apps-subsection-icon {
    color: #F5A623;
    font-size: 0.9375rem;
}

.apps-subsection-count {
    display: inline-flex;
    align-items: center;
    min-width: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bg-subtle, #F1F3F5);
    color: var(--text-muted, #6C757D);
    font-size: 0.6875rem;
    font-weight: 600;
}

.apps-toggle-more {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border, #E5E7EB);
    background: #FFFFFF;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary, #4F46E5);
    cursor: pointer;
    transition: background-color var(--transition-normal);
}

.apps-toggle-more:hover { background: var(--primary-light, #EEF2FF); }

.v2-app-card.is-recent {
    border-left: 3px solid var(--primary, #4F46E5);
}

/* Disconnected (collapsed) */
.apps-disconnected {
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    background: #FFFFFF;
}

.apps-disconnected-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-primary, #212529);
}

.apps-disconnected-summary::-webkit-details-marker { display: none; }

.apps-disconnected-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-muted, #6C757D);
    flex-shrink: 0;
}

.apps-disconnected-chevron {
    transition: transform var(--transition-normal);
    font-size: 0.75rem;
}

.apps-disconnected[open] .apps-disconnected-chevron {
    transform: rotate(90deg);
}

.apps-disconnected-preview {
    font-size: 0.75rem;
    color: var(--text-muted, #6C757D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.apps-disconnected[open] .apps-disconnected-preview {
    display: none;
}

.apps-disconnected-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border, #E5E7EB);
}

.apps-disconnected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border, #E5E7EB);
}

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

.apps-disconnected-name {
    color: var(--text-primary, #212529);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apps-disconnected-time {
    color: var(--text-muted, #6C757D);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Mobile: collapse connected section to 3 cards + toggle */
@media (max-width: 767.98px) {
    .apps-grid.is-collapsed > .v2-app-card:nth-child(n+4) {
        display: none;
    }

    .apps-disconnected-preview {
        font-size: 0.6875rem;
    }

    .apps-subsection-title {
        flex-wrap: wrap;
    }
}

/* ==================== Option rows (캡처 옵션 라디오 / 카카오톡·밴드 토글) ====================
   라디오(float 기반)와 토글(음수마진 기반)을 동일한 flex 레이아웃으로 통일해
   좌측 정렬을 맞추고, 컨트롤과 라벨 사이에 두 칸 정도의 간격을 둔다.
   데스크톱/모바일 모두 일관되도록 파일 끝에 배치(단일 클래스 source-order 우선). */
.option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;          /* 컨트롤 ↔ 라벨 두 칸 정도 간격 */
    padding-left: 0;       /* Bootstrap/모바일 .form-check 들여쓰기 무력화 */
    min-height: 44px;
}

.option-row .form-check-input {
    margin: 0;             /* 음수 마진(-3.25rem 등) 제거 → 컨트롤 좌측 정렬 */
    float: none;
    flex-shrink: 0;
}

.option-row .form-check-label {
    margin: 0;
}