/* ==========================================================================
   Hệ thống nhận diện thương hiệu Đại học Kinh tế Thành phố Hồ Chí Minh (UEH)
   Màu chủ đạo: Mallard Teal (#005f69) & UEH Orange (#f26f33)
   Quy tắc chữ viết: Tuân thủ nghiêm ngặt chính tả tiếng Việt (không dùng capitalize)
   ========================================================================== */

:root {
    --ueh-primary: #005f69;
    --ueh-primary-dark: #00464e;
    --ueh-primary-light: #007b88;
    --ueh-primary-soft: #e6f2f3;
    --ueh-secondary: #f26f33;
    --ueh-secondary-dark: #d85a20;
    --ueh-secondary-soft: #fef1eb;
    --ueh-bg: #f4f7f8;
    --ueh-surface: #ffffff;
    --ueh-text: #1e293b;
    --ueh-text-muted: #64748b;
    --ueh-border: #e2e8f0;
    --ueh-success: #0d9488;
    --ueh-danger: #dc2626;
    --ueh-warning: #d97706;
    --ueh-info: #0284c7;
    --ueh-radius: 10px;
    --ueh-shadow-sm: 0 2px 8px rgba(0, 45, 50, 0.06);
    --ueh-shadow-md: 0 6px 20px rgba(0, 45, 50, 0.1);
}

* {
    box-sizing: border-box;
    text-transform: none;
}

body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background-color: var(--ueh-bg);
    color: var(--ueh-text);
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--ueh-primary);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover {
    color: var(--ueh-secondary);
}

/* Thanh thông tin trên cùng (UEH Topbar) */
.ueh-topbar {
    background-color: var(--ueh-primary-dark);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ueh-topbar a {
    color: rgba(255, 255, 255, 0.92);
}

.ueh-topbar a:hover {
    color: var(--ueh-secondary);
}

/* Thanh điều hướng chính (UEH Header Navbar) */
.ueh-navbar {
    background-color: var(--ueh-primary);
    box-shadow: 0 4px 14px rgba(0, 45, 50, 0.14);
    border-bottom: 3px solid var(--ueh-secondary);
    padding: 10px 0;
}

.ueh-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.ueh-brand-logo {
    height: 42px;
    width: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.ueh-brand-divider {
    width: 1.5px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.28);
    flex-shrink: 0;
}

.ueh-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.22;
}

.ueh-brand-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.ueh-brand-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    white-space: nowrap;
}

.ueh-navbar .navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.ueh-navbar .nav-item {
    white-space: nowrap;
}

.ueh-navbar .nav-link {
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 12px !important;
    border-radius: 8px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ueh-navbar .nav-link:hover,
.ueh-navbar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

.ueh-navbar .dropdown-menu {
    border: 1px solid var(--ueh-border);
    border-radius: var(--ueh-radius);
    box-shadow: var(--ueh-shadow-md);
    padding: 8px;
    margin-top: 8px;
}

.ueh-navbar .dropdown-item {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.92rem;
    color: var(--ueh-text);
    font-weight: 500;
}

.ueh-navbar .dropdown-item:hover {
    background-color: var(--ueh-primary-soft);
    color: var(--ueh-primary);
}

/* Nút bấm chuẩn thương hiệu UEH */
.btn-ueh-primary {
    background-color: var(--ueh-primary);
    border-color: var(--ueh-primary);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    transition: all 0.2s ease;
}

.btn-ueh-primary:hover,
.btn-ueh-primary:focus {
    background-color: var(--ueh-primary-dark);
    border-color: var(--ueh-primary-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 95, 105, 0.25);
}

.btn-ueh-secondary {
    background-color: var(--ueh-secondary);
    border-color: var(--ueh-secondary);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    transition: all 0.2s ease;
}

.btn-ueh-secondary:hover,
.btn-ueh-secondary:focus {
    background-color: var(--ueh-secondary-dark);
    border-color: var(--ueh-secondary-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(242, 111, 51, 0.3);
}

.btn-ueh-outline {
    background-color: transparent;
    border: 1.5px solid var(--ueh-primary);
    color: var(--ueh-primary);
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 16px;
}

.btn-ueh-outline:hover {
    background-color: var(--ueh-primary);
    color: #ffffff;
}

/* Thẻ giao diện (Cards) */
.ueh-card {
    background: var(--ueh-surface);
    border: 1px solid var(--ueh-border);
    border-radius: var(--ueh-radius);
    box-shadow: var(--ueh-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.ueh-card-header {
    background: linear-gradient(135deg, var(--ueh-primary) 0%, var(--ueh-primary-dark) 100%);
    color: #ffffff;
    padding: 15px 22px;
    font-weight: 600;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--ueh-secondary);
}

.ueh-card-header-light {
    background-color: #ffffff;
    color: var(--ueh-primary);
    padding: 16px 22px;
    font-weight: 700;
    font-size: 1.02rem;
    border-bottom: 2px solid var(--ueh-primary-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ueh-card-body {
    padding: 22px;
}

/* Huy hiệu trạng thái (Badges) */
.badge-ueh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.badge-ueh-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-ueh-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-ueh-warning {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-ueh-info {
    background-color: #e0f2fe;
    color: #075985;
}

.badge-ueh-primary {
    background-color: var(--ueh-primary-soft);
    color: var(--ueh-primary);
}

.badge-ueh-orange {
    background-color: var(--ueh-secondary-soft);
    color: var(--ueh-secondary-dark);
}

/* Bảng dữ liệu (Tables) */
.table-ueh {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.table-ueh thead th {
    background-color: var(--ueh-primary-soft);
    color: var(--ueh-primary-dark);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 13px 14px;
    border-bottom: 2px solid #cbd5e1;
    vertical-align: middle;
}

.table-ueh tbody td {
    padding: 13px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ueh-border);
    font-size: 0.92rem;
}

.table-ueh tbody tr:hover {
    background-color: #f8fafc;
}

/* Biểu mẫu (Forms) */
.form-label {
    font-weight: 600;
    color: #334155;
    font-size: 0.92rem;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 0.94rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ueh-primary);
    box-shadow: 0 0 0 3px rgba(0, 95, 105, 0.14);
}

/* Khu vực Hero trang chủ */
.ueh-hero {
    background: linear-gradient(130deg, var(--ueh-primary-dark) 0%, var(--ueh-primary) 65%, #00828f 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ueh-shadow-md);
    border-bottom: 4px solid var(--ueh-secondary);
}

.ueh-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(242, 111, 51, 0.15);
    pointer-events: none;
}

/* Thẻ chọn loại hình công tác */
.trip-option-card {
    background: #ffffff;
    border: 1px solid var(--ueh-border);
    border-top: 4px solid var(--ueh-primary);
    border-radius: 12px;
    padding: 24px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    box-shadow: var(--ueh-shadow-sm);
}

.trip-option-card.orange-accent {
    border-top-color: var(--ueh-secondary);
}

.trip-option-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ueh-shadow-md);
}

.trip-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background-color: var(--ueh-primary-soft);
    color: var(--ueh-primary);
    margin-bottom: 16px;
}

.trip-option-card.orange-accent .trip-icon-box {
    background-color: var(--ueh-secondary-soft);
    color: var(--ueh-secondary);
}

/* Sơ đồ tiến trình phê duyệt (Workflow Stepper) */
.workflow-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}

.workflow-step-item {
    flex: 1;
    min-width: 135px;
    background: #f8fafc;
    border: 1px solid var(--ueh-border);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
}

.workflow-step-item.step-completed {
    background-color: #ecfdf5;
    border-color: #6ee7b7;
}

.workflow-step-item.step-active {
    background-color: var(--ueh-secondary-soft);
    border: 2px solid var(--ueh-secondary);
}

.workflow-step-item.step-rejected {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

/* Giao diện Quản trị (Admin Sidebar Layout) */
.admin-wrapper {
    display: flex;
    min-height: calc(100vh - 56px);
}

.admin-sidebar {
    width: 265px;
    background: linear-gradient(180deg, var(--ueh-primary-dark) 0%, var(--ueh-primary) 100%);
    color: #ffffff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
}

.admin-sidebar-brand {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(0, 0, 0, 0.12);
}

.admin-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.88);
    padding: 11px 18px;
    margin: 3px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.93rem;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: all 0.2s ease;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
    background-color: var(--ueh-secondary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(242, 111, 51, 0.35);
}

.admin-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--ueh-border);
    padding: 12px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-content {
    padding: 26px;
    flex: 1;
}

/* Thẻ thống kê Dashboard */
.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--ueh-border);
    border-left: 5px solid var(--ueh-primary);
    box-shadow: var(--ueh-shadow-sm);
    height: 100%;
}

.stat-card.stat-orange {
    border-left-color: var(--ueh-secondary);
}

.stat-card.stat-success {
    border-left-color: var(--ueh-success);
}

.stat-card.stat-danger {
    border-left-color: var(--ueh-danger);
}

.stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--ueh-primary-dark);
    line-height: 1.2;
}

/* Chân trang (UEH Footer) */
.ueh-footer {
    background-color: var(--ueh-primary-dark);
    color: rgba(255, 255, 255, 0.86);
    padding: 32px 0 22px;
    margin-top: auto;
    border-top: 4px solid var(--ueh-secondary);
    font-size: 0.9rem;
}

.ueh-footer h6 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 12px;
}

.ueh-footer a {
    color: rgba(255, 255, 255, 0.85);
}

.ueh-footer a:hover {
    color: var(--ueh-secondary);
}

@media (max-width: 991.98px) {
    .admin-wrapper {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
    }
}

/* Smart Office Timeline */
.smartoffice-timeline {
    position: relative;
    padding-left: 10px;
}

.so-timeline-item {
    display: flex;
    position: relative;
    gap: 16px;
}

.so-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
}

.so-timeline-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.85rem;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.so-timeline-circle.so-circle-active {
    background-color: var(--ueh-primary);
}

.so-timeline-circle.so-circle-success {
    background-color: var(--ueh-success);
}

.so-timeline-line {
    width: 2px;
    background-color: var(--ueh-border);
    flex-grow: 1;
    margin: 6px 0;
}

.so-timeline-content {
    flex-grow: 1;
    min-width: 0;
}

/* ==========================================================================
   GIAO DIỆN MỞ RỘNG TOÀN MÀN HÌNH (FULLWIDTH LAYOUT) - SANG TRỌNG & CHUẨN MỰC
   Mở rộng tỷ lệ ngang giúp bảng biểu và trường nhập liệu thông thoáng,
   chống tình trạng chữ bị đè chồng, rớt dòng hoặc bị che khuất bởi icon/arrow.
   ========================================================================== */

/* 1. Mở rộng vùng chứa container trên toàn hệ thống */
.container-ueh,
.container-xxl {
    width: 100% !important;
    max-width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(16px, 2.5vw, 40px) !important;
    padding-right: clamp(16px, 2.5vw, 40px) !important;
}

@media (min-width: 1920px) {
    .container-ueh,
    .container-xxl {
        max-width: 1820px !important;
    }
}

/* 2. Bảng thành viên đoàn công tác & đối tác: Chống co rút & đè chữ */
#membersTable,
.table-member-editor {
    min-width: 1180px !important;
    width: 100% !important;
    table-layout: auto !important;
}

#membersTable th,
#membersTable td,
.table-member-editor th,
.table-member-editor td {
    vertical-align: middle !important;
    padding: 9px 10px !important;
}

#membersTable .form-control-sm,
#membersTable .form-select-sm,
.table-member-editor .form-control-sm,
.table-member-editor .form-select-sm {
    font-size: 0.88rem !important;
    min-height: 36px !important;
    border-radius: 6px !important;
}

/* 3. Tối ưu dropdown select: Tách biệt rõ ràng khoảng cách chữ và mũi tên dropdown */
#membersTable .form-select,
#membersTable .form-select-sm,
.table-member-editor .form-select,
.table-member-editor .form-select-sm,
.table-ueh .form-select-sm {
    padding-left: 10px !important;
    padding-right: 30px !important;
    background-position: right 10px center !important;
    background-size: 12px 10px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* 4. Khắc phục bảng dữ liệu và thẻ bao ngoài */
.table-responsive {
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-ueh {
    min-width: 980px;
}

.table-ueh th,
.table-ueh td {
    white-space: normal;
    word-break: break-word;
}

/* Thẻ card mở rộng độ thoáng */
.ueh-card-body {
    padding: clamp(18px, 2vw, 32px) !important;
}

.ueh-card-header,
.ueh-card-header-light {
    padding: 16px clamp(18px, 2vw, 32px) !important;
}