/* ============================================================

   HKFI FIS Application System - Stylesheet

   ============================================================ */



*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



:root {

    --primary:       #003087;

    --primary-light: #0050c8;

    --primary-dark:  #001f5c;

    --accent:        #c8a84b;

    --bg:            #f4f6f9;

    --white:         #ffffff;

    --border:        #ccd3de;

    --text:          #1a1a2e;

    --text-muted:    #6b7280;

    --success:       #16a34a;

    --warning:       #d97706;

    --danger:        #dc2626;

    --info:          #0284c7;

    --radius:        6px;

    --shadow:        0 2px 8px rgba(0,0,0,0.10);

    --shadow-lg:     0 4px 20px rgba(0,0,0,0.15);

}



body {

    font-family: 'Segoe UI', Arial, 'Microsoft YaHei', sans-serif;

    background: var(--bg);

    color: var(--text);

    font-size: 14px;

    line-height: 1.6;

}



a { color: var(--primary-light); text-decoration: none; }

a:hover { text-decoration: underline; }



/* ---- Layout ---- */

.page-wrapper {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



.topbar {

    background: var(--primary);

    color: var(--white);

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 60px;

    box-shadow: var(--shadow);

    position: sticky;

    top: 0;

    z-index: 100;

}



.topbar-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 16px;

    font-weight: 700;

    color: var(--white);

    text-decoration: none;

}



.topbar-brand .brand-sub {

    font-size: 11px;

    font-weight: 400;

    opacity: 0.8;

    display: block;

}



.topbar-right {

    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 13px;

}



.topbar-right .user-info {

    text-align: right;

}



.topbar-right .user-name {

    font-weight: 600;

}



.topbar-right .user-org {

    font-size: 11px;

    opacity: 0.75;

}



.main-content {

    flex: 1;

    padding: 28px 24px;

    max-width: 1100px;

    margin: 0 auto;

    width: 100%;

}



.main-content.wide {

    max-width: 1300px;

}



/* ---- Cards ---- */

.card {

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    margin-bottom: 20px;

    overflow: hidden;

}



.card-header {

    background: var(--primary);

    color: var(--white);

    padding: 14px 20px;

    font-size: 15px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.card-header.accent {

    background: var(--accent);

    color: var(--primary-dark);

}



.card-body {

    padding: 20px;

}



/* ---- Login Page ---- */

.login-page {

    min-height: 100vh;

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.login-box {

    background: var(--white);

    border-radius: 10px;

    box-shadow: var(--shadow-lg);

    width: 100%;

    max-width: 420px;

    overflow: hidden;

}



.login-header {

    background: var(--primary);

    color: var(--white);

    padding: 28px 32px 20px;

    text-align: center;

}



.login-header .logo-text {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 1px;

}



.login-header .logo-sub {

    font-size: 12px;

    opacity: 0.8;

    margin-top: 4px;

}



.login-header .scheme-name {

    font-size: 14px;

    margin-top: 10px;

    font-weight: 600;

    color: var(--accent);

}



.login-body {

    padding: 28px 32px;

}



.login-body h2 {

    font-size: 18px;

    margin-bottom: 20px;

    color: var(--primary);

}



.login-hint {

    color: var(--text-muted);

    font-size: 13px;

    margin: -8px 0 18px;

}



.otp-input {

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 10px;

    text-align: center;

    padding-left: 20px;

}



.login-actions {

    display: flex;

    gap: 10px;

    align-items: center;

    margin-top: 12px;

}



.spinner {

    display: inline-block;

    width: 14px;

    height: 14px;

    border: 2px solid rgba(255,255,255,0.3);

    border-top-color: #fff;

    border-radius: 50%;

    animation: spin 0.6s linear infinite;

    vertical-align: middle;

}



.btn-secondary .spinner,

.btn-outline .spinner {

    border-color: rgba(0,48,135,0.2);

    border-top-color: var(--primary);

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



/* ---- Forms ---- */

.form-group {

    margin-bottom: 16px;

}



.form-group label {

    display: block;

    font-weight: 600;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 13px;

}



.form-group label .required,

.question-label .required,

.required {

    color: var(--danger);

    margin-left: 2px;

    font-weight: 700;

}



.form-control {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    font-size: 14px;

    font-family: inherit;

    color: var(--text);

    background: var(--white);

    transition: border-color 0.2s, box-shadow 0.2s;

}



.form-control:focus {

    outline: none;

    border-color: var(--primary-light);

    box-shadow: 0 0 0 3px rgba(0,80,200,0.12);

}



.form-control[readonly],

.form-control[disabled],

fieldset[disabled] .form-control {

    background: #f0f2f5;

    color: var(--text-muted);

    cursor: not-allowed;

}



textarea.form-control {

    resize: vertical;

    min-height: 80px;

}



.form-control-sm {

    padding: 5px 9px;

    font-size: 13px;

}



.form-row {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}



.form-row .form-group {

    flex: 1;

    min-width: 180px;

}



.form-row .form-group.col-2 { flex: 2; }

.form-row .form-group.col-3 { flex: 3; }



.form-check {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 6px;

    cursor: pointer;

}



.form-check input[type="checkbox"],

.form-check input[type="radio"] {

    width: 16px;

    height: 16px;

    min-width: 16px;

    flex-shrink: 0;

    cursor: pointer;

    accent-color: var(--primary);

}



.form-check label {

    cursor: pointer;

    font-weight: 400;

    margin: 0;

}



.radio-group, .checkbox-group {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 4px;

}



.inline-field {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.inline-field label {

    white-space: nowrap;

    font-weight: 600;

    font-size: 13px;

}



/* ---- Buttons ---- */

.btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 18px;

    border: none;

    border-radius: var(--radius);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;

    text-decoration: none;

    white-space: nowrap;

    font-family: inherit;

}



.btn:active { transform: translateY(1px); }



.btn-primary {

    background: var(--primary);

    color: var(--white);

}

.btn-primary:hover { background: var(--primary-light); color: var(--white); text-decoration: none; }



.btn-success {

    background: var(--success);

    color: var(--white);

}

.btn-success:hover { background: #15803d; color: var(--white); text-decoration: none; }



.btn-warning {

    background: var(--warning);

    color: var(--white);

}

.btn-warning:hover { background: #b45309; color: var(--white); text-decoration: none; }



.btn-danger {

    background: var(--danger);

    color: var(--white);

}

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



.btn-secondary {

    background: #6b7280;

    color: var(--white);

}

.btn-secondary:hover { background: #4b5563; color: var(--white); text-decoration: none; }



.btn-outline {

    background: transparent;

    color: var(--primary);

    border: 2px solid var(--primary);

}

.btn-outline:hover { background: var(--primary); color: var(--white); text-decoration: none; }



.btn-sm {

    padding: 5px 12px;

    font-size: 12px;

}



.btn-lg {

    padding: 12px 28px;

    font-size: 16px;

}



.btn-block {

    width: 100%;

    justify-content: center;

}



.btn-group {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

}



/* ---- Badges ---- */

.badge {

    display: inline-block;

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



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

.badge-submitted    { background: #dbeafe; color: #1e40af; }

.badge-assessment   { background: #ede9fe; color: #5b21b6; }

.badge-supplementary { background: #ffedd5; color: #9a3412; }

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

.badge-approved     { background: #dcfce7; color: #166534; }



/* ---- Tables ---- */

.table-wrapper {

    overflow-x: auto;

}



table.data-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}



table.data-table th {

    background: var(--primary);

    color: var(--white);

    padding: 10px 14px;

    text-align: left;

    font-weight: 600;

    white-space: nowrap;

}



table.data-table td {

    padding: 10px 14px;

    border-bottom: 1px solid var(--border);

    vertical-align: middle;

}



table.data-table tr:last-child td {

    border-bottom: none;

}



table.data-table tr:hover td {

    background: #f8fafc;

}



table.form-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

    margin-bottom: 12px;

}



table.form-table th,

table.form-table td {

    border: 1px solid var(--border);

    padding: 8px 12px;

    vertical-align: top;

}



table.form-table th {

    background: #eef2f7;

    font-weight: 600;

    color: var(--primary-dark);

}



/* ---- Section Headers ---- */

.section-header {

    background: var(--primary);

    color: var(--white);

    padding: 12px 20px;

    font-size: 15px;

    font-weight: 700;

    border-radius: var(--radius) var(--radius) 0 0;

    margin-bottom: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.section-header .section-num {

    background: var(--accent);

    color: var(--primary-dark);

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 800;

    flex-shrink: 0;

}



.section-body {

    background: var(--white);

    border: 1px solid var(--border);

    border-top: none;

    border-radius: 0 0 var(--radius) var(--radius);

    padding: 20px;

    margin-bottom: 24px;

}



.question-label {

    font-weight: 700;

    color: var(--primary-dark);

    margin-bottom: 6px;

    font-size: 13px;

}



.question-note {

    font-size: 12px;

    color: var(--text-muted);

    font-style: italic;

    margin-top: 4px;

}



.question-block {

    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 1px dashed var(--border);

}



.question-block:last-child {

    border-bottom: none;

    margin-bottom: 0;

    padding-bottom: 0;

}



/* ---- Course Block ---- */

.course-block {

    border: 2px solid var(--primary);

    border-radius: var(--radius);

    margin-bottom: 24px;

    overflow: hidden;

}



.course-block-header {

    background: var(--primary);

    color: var(--white);

    padding: 10px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 700;

    font-size: 14px;

}



.course-block-body {

    padding: 20px;

    background: var(--white);

}



/* ---- Signature ---- */

.signature-area {

    border: 2px solid var(--border);

    border-radius: var(--radius);

    background: #fafafa;

    position: relative;

    overflow: hidden;

}



#signature-canvas {

    display: block;

    width: 100%;

    height: 180px;

    cursor: crosshair;

    touch-action: none;

}



.signature-placeholder {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #ccc;

    font-size: 13px;

    pointer-events: none;

    text-align: center;

}



/* ---- Alerts / Toast ---- */

.alert {

    padding: 12px 16px;

    border-radius: var(--radius);

    margin-bottom: 16px;

    font-size: 13px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.alert-danger  { background: #fef2f2; border-left: 4px solid var(--danger);  color: #991b1b; }

.alert-success { background: #f0fdf4; border-left: 4px solid var(--success); color: #166534; }

.alert-warning { background: #fffbeb; border-left: 4px solid var(--warning); color: #92400e; }

.alert-info    { background: #eff6ff; border-left: 4px solid var(--info);    color: #1e40af; }



.toast-container {

    position: fixed;

    bottom: 24px;

    right: 24px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    gap: 10px;

    pointer-events: none;

}



.toast {

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow-lg);

    padding: 14px 18px;

    min-width: 260px;

    max-width: 380px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    font-weight: 600;

    pointer-events: all;

    animation: slideIn 0.3s ease;

    border-left: 4px solid var(--success);

}



.toast.toast-error   { border-left-color: var(--danger); }

.toast.toast-warning { border-left-color: var(--warning); }

.toast.toast-info    { border-left-color: var(--info); }



.toast-icon { font-size: 18px; }



@keyframes slideIn {

    from { transform: translateX(120%); opacity: 0; }

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

}



@keyframes fadeOut {

    from { opacity: 1; }

    to   { opacity: 0; transform: translateX(60px); }

}



.toast.removing {

    animation: fadeOut 0.3s ease forwards;

}



/* ---- Sticky Form Actions ---- */

.form-actions-bar {

    position: sticky;

    bottom: 0;

    background: var(--white);

    border-top: 2px solid var(--border);

    padding: 14px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    z-index: 50;

    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);

}



.form-actions-bar .autosave-info {

    font-size: 12px;

    color: var(--text-muted);

}



/* ---- Declaration List ---- */

.declaration-list {

    background: #f8fafc;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 16px 20px;

    margin-bottom: 16px;

}



.declaration-list ol {

    padding-left: 20px;

}



.declaration-list li {

    margin-bottom: 10px;

    font-size: 13px;

    line-height: 1.7;

}



/* ---- Instalment Table ---- */

.instalment-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

    margin-top: 10px;

}



.instalment-table th,

.instalment-table td {

    border: 1px solid var(--border);

    padding: 8px 12px;

    text-align: left;

}



.instalment-table th {

    background: #eef2f7;

    font-weight: 600;

}



.instalment-table td input {

    width: 100%;

    border: none;

    background: transparent;

    font-size: 13px;

    font-family: inherit;

    padding: 2px 0;

}



.instalment-table td input:focus {

    outline: 1px solid var(--primary-light);

    border-radius: 3px;

    padding: 2px 4px;

}



/* ---- Readonly overlay ---- */

.readonly-notice {

    background: #fffbeb;

    border: 1px solid #fcd34d;

    border-radius: var(--radius);

    padding: 12px 16px;

    margin-bottom: 20px;

    font-size: 13px;

    color: #92400e;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* ---- Page Title ---- */

.page-title {

    font-size: 22px;

    font-weight: 800;

    color: var(--primary);

    margin-bottom: 6px;

}



.page-subtitle {

    font-size: 13px;

    color: var(--text-muted);

    margin-bottom: 24px;

}



/* ---- Divider ---- */

hr.section-divider {

    border: none;

    border-top: 2px solid var(--border);

    margin: 24px 0;

}



/* ---- Utility ---- */

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

.text-danger  { color: var(--danger); }

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

.text-center  { text-align: center; }

.mt-1 { margin-top: 6px; }

.mt-2 { margin-top: 12px; }

.mt-3 { margin-top: 20px; }

.mb-1 { margin-bottom: 6px; }

.mb-2 { margin-bottom: 12px; }

.mb-3 { margin-bottom: 20px; }

.d-flex { display: flex; }

.align-center { align-items: center; }

.gap-2 { gap: 12px; }

.flex-1 { flex: 1; }

.hidden { display: none !important; }



/* ---- Responsive ---- */

@media (max-width: 768px) {

    .topbar { padding: 0 14px; }

    .main-content { padding: 16px 12px; }

    .form-row { flex-direction: column; gap: 0; }

    .form-actions-bar { flex-direction: column; align-items: stretch; }

    .btn-group { flex-direction: column; }

    .btn-group .btn { width: 100%; justify-content: center; }

    .topbar-right .user-org { display: none; }

}



/* ---- Attachments ---- */

#upload-area {

    transition: border-color 0.2s, background 0.2s;

}



#drop-zone {

    transition: border-color 0.2s, background 0.2s;

}



#drop-zone:hover {

    border-color: var(--primary-light);

    background: #eff6ff;

}



#drop-zone.drag-over {

    border-color: var(--primary);

    background: #dbeafe;

}



#attachments-table td {

    vertical-align: middle;

    font-size: 13px;

}



#attachments-table .att-label {

    font-weight: 600;

    color: var(--primary-dark);

}



#upload-queue-table td,

#upload-queue-table th {

    vertical-align: middle;

}



#upload-queue-table .queue-label {

    width: 100%;

}



/* ---- Admin Panel ---- */

.admin-stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 14px;

    margin-bottom: 24px;

}



.stat-card {

    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 18px 20px;

    text-align: center;

    border-top: 4px solid var(--primary);

    cursor: pointer;

    transition: box-shadow 0.2s, transform 0.1s;

    text-decoration: none;

    display: block;

}



.stat-card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

    text-decoration: none;

}



.stat-card.active {

    border-top-color: var(--accent);

    background: #fffbeb;

}



.stat-card .stat-num {

    font-size: 32px;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

}



.stat-card .stat-label {

    font-size: 12px;

    color: var(--text-muted);

    margin-top: 6px;

    line-height: 1.4;

}



.admin-filters {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    align-items: flex-end;

    margin-bottom: 20px;

    background: var(--white);

    padding: 16px 20px;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

}



.admin-filters .form-group {

    margin-bottom: 0;

}



.remarks-cell {

    max-width: 220px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    color: var(--text-muted);

    font-size: 12px;

    cursor: pointer;

}



.remarks-cell:hover {

    color: var(--text);

}



/* Status change inline select */

.status-select {

    font-size: 12px;

    padding: 3px 6px;

    border-radius: 4px;

    border: 1px solid var(--border);

    background: var(--white);

    cursor: pointer;

    max-width: 180px;

}



/* Course detail rows in admin & dashboard */

.course-detail-row td {

    border-bottom: 2px solid var(--border) !important;

}



.course-detail-row .data-table {

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

}



.course-detail-row .data-table th {

    background: #475569;

    font-size: 11px;

    padding: 6px 10px;

}



.course-detail-row .data-table td {

    padding: 8px 10px;

    font-size: 12px;

}



/* Admin remarks modal */

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.45);

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.modal-box {

    background: var(--white);

    border-radius: 10px;

    box-shadow: var(--shadow-lg);

    width: 100%;

    max-width: 560px;

    overflow: hidden;

}



.modal-header {

    background: var(--primary);

    color: var(--white);

    padding: 16px 20px;

    font-weight: 700;

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.modal-header .modal-close {

    background: none;

    border: none;

    color: var(--white);

    font-size: 20px;

    cursor: pointer;

    line-height: 1;

    padding: 0 4px;

    opacity: 0.8;

}



.modal-header .modal-close:hover { opacity: 1; }



.modal-body {

    padding: 20px;

}



.modal-footer {

    padding: 14px 20px;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: flex-end;

    gap: 10px;

}



/* ---- Guidance Notes link ---- */

.question-note a,

.declaration-list a {

    color: var(--primary-light);

    text-decoration: underline;

    font-weight: 600;

}

.question-note a:hover,

.declaration-list a:hover {

    color: var(--primary);

}



/* ---- Print ---- */

@media print {

    .topbar, .form-actions-bar, .btn, .toast-container { display: none !important; }

    .section-body { border: 1px solid #999; }

    .course-block { border: 1px solid #999; }

}



/* ---- Form Validation Errors ---- */

.field-error {

    color: var(--danger);

    font-size: 12px;

    font-weight: 600;

    margin-top: 4px;

    display: block;

}



.form-control.is-invalid,

select.is-invalid,

textarea.is-invalid {

    border-color: var(--danger) !important;

    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);

}



.question-block.has-error {

    border-left: 3px solid var(--danger);

    padding-left: 12px;

}



/* ---- Course Pagination ---- */

.course-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 14px 16px;

    margin: 16px 0;

    background: #eef2f7;

    border-radius: var(--radius);

    border: 1px solid var(--border);

    flex-wrap: wrap;

}



.course-pagination .course-pag-info {

    font-size: 14px;

    font-weight: 700;

    color: var(--primary-dark);

    white-space: nowrap;

}



.course-pagination select.form-control {

    width: auto;

    min-width: 180px;

    font-size: 13px;

    padding: 6px 10px;

}



.course-pagination .btn:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}



@media print {

    .course-pagination { display: none !important; }

    /* Show all course blocks when printing */

    #courses-container .course-block { display: block !important; page-break-inside: avoid; page-break-before: auto; }

}



/* ---- Section Collapse/Expand ---- */

.section-header {

    cursor: pointer;

    user-select: none;

    position: relative;

}



.section-header:hover {

    background: #1a6bdf;

    box-shadow: 0 2px 8px rgba(0, 48, 135, 0.35);

}



.section-toggle-btn {

    background: none;

    border: none;

    color: var(--white);

    font-size: 14px;

    cursor: pointer;

    margin-left: auto;

    padding: 4px 10px;

    border-radius: 4px;

    line-height: 1;

    opacity: 0.85;

    transition: opacity 0.2s, background 0.2s;

}



.section-toggle-btn:hover {

    opacity: 1;

    background: rgba(255,255,255,0.15);

}



.section-header.collapsed {

    border-radius: var(--radius);

    margin-bottom: 24px;

}



.section-body.section-collapsed {

    display: none;

}



.section-toggle-all {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

}



@media print {

    .section-toggle-btn, .section-toggle-all { display: none !important; }

    .section-body.section-collapsed { display: block !important; }

}



/* ---- Multi-Select Dropdown (Section C Q1) ---- */

.ms-dropdown {

    position: relative;

    width: 100%;

}

.ms-dropdown-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 12px;

    border: 1px solid #ccc;

    border-radius: var(--radius, 6px);

    background: #fff;

    cursor: pointer;

    min-height: 40px;

    transition: border-color 0.2s;

}

.ms-dropdown-toggle:hover,

.ms-dropdown-toggle:focus {

    border-color: var(--primary, #2563eb);

    outline: none;

}

.ms-dropdown-placeholder {

    color: #999;

    font-size: 14px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    flex: 1;

}

.ms-dropdown-placeholder.has-value {

    color: #333;

}

.ms-dropdown-arrow {

    font-size: 11px;

    color: #666;

    margin-left: 8px;

    transition: transform 0.2s;

}

.ms-dropdown.open .ms-dropdown-arrow {

    transform: rotate(180deg);

}

.ms-dropdown-menu {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 1000;

    background: #fff;

    border: 1px solid #ccc;

    border-top: none;

    border-radius: 0 0 var(--radius, 6px) var(--radius, 6px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

    max-height: 280px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.ms-dropdown-search-wrap {

    padding: 8px;

    border-bottom: 1px solid #eee;

}

.ms-dropdown-search {

    width: 100%;

    padding: 6px 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-size: 13px;

    outline: none;

}

.ms-dropdown-search:focus {

    border-color: var(--primary, #2563eb);

}

.ms-dropdown-actions {

    display: flex;

    gap: 8px;

    padding: 6px 8px;

    border-bottom: 1px solid #eee;

}

.ms-dropdown-actions button {

    background: none;

    border: none;

    color: var(--primary, #2563eb);

    font-size: 12px;

    cursor: pointer;

    padding: 2px 6px;

    border-radius: 3px;

    font-weight: 500;

}

.ms-dropdown-actions button:hover {

    background: rgba(37,99,235,0.08);

}

.ms-dropdown-options {

    overflow-y: auto;

    max-height: 180px;

    padding: 4px 0;

}

.ms-dropdown-option {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 12px;

    cursor: pointer;

    font-size: 13px;

    transition: background 0.15s;

}

.ms-dropdown-option:hover {

    background: #f0f5ff;

}

.ms-dropdown-option input[type="checkbox"] {

    accent-color: var(--primary, #2563eb);

    width: 15px;

    height: 15px;

    cursor: pointer;

}

.ms-dropdown-option.hidden {

    display: none;

}

@media print {

    .ms-dropdown-menu { display: none !important; }

    .ms-dropdown-arrow { display: none; }

}



.red-font{

    color: red;

}



.red-underline{

    text-decoration: underline; 

    text-decoration-color: red;

}



/* ---- Preview Modal ---- */

.preview-overlay {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(0,0,0,0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

.preview-modal {

    background: #fff;

    border-radius: 8px;

    width: 100%;

    max-width: 900px;

    height: 90vh;

    display: flex;

    flex-direction: column;

    box-shadow: 0 20px 60px rgba(0,0,0,0.3);

}

.preview-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 20px;

    border-bottom: 1px solid var(--border);

    flex-shrink: 0;

}

.preview-toolbar .btn { margin-left: 8px; }

.preview-content {

    flex: 1;

    overflow-y: auto;

    padding: 24px 28px;

    font-size: 13.5px;

    line-height: 1.7;

}

.preview-content h3 {

    margin: 20px 0 10px;

    padding-bottom: 6px;

    border-bottom: 2px solid var(--primary);

    color: var(--primary);

    font-size: 15px;

}

.preview-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 10px 0 16px;

    font-size: 13px;

}

.preview-content table th,

.preview-content table td {

    border: 1px solid #ddd;

    padding: 6px 10px;

    text-align: left;

    vertical-align: top;

}

.preview-content table th { background: #f5f7fa; font-weight: 600; }

.preview-content .preview-field { margin-bottom: 8px; }

.preview-content .preview-label { font-weight: 600; color: #374151; }

.preview-content .preview-value { margin-left: 6px; color: #111; }



@media print {

    body > *:not(.preview-overlay) { display: none !important; }

    .preview-overlay { position: static; background: none; padding: 0; }

    .preview-modal { max-width: 100%; height: auto; box-shadow: none; border-radius: 0; }

    .preview-toolbar .btn { display: none; }

    .preview-content { overflow: visible; }

}