/* ═══════════════════════════════════════════════════
   IRDTSoft Design System — matches React demo
   ═══════════════════════════════════════════════════ */

:root {
    /* Colors */
    --color-primary: #3B82F6;
    --color-primary-light: #eff6ff;
    --color-secondary: #8B5CF6;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #0EA5E9;

    /* Neutrals */
    --color-bg: #f8fafc;
    --color-card: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;

    /* Sidebar */
    --sidebar-bg-start: #0f172a;
    --sidebar-bg-end: #1e293b;
    --sidebar-width: 232px;
    --sidebar-collapsed: 60px;

    /* Typography */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', monospace;

    /* Spacing */
    --radius-sm: 7px;
    --radius-md: 12px;
    --radius-lg: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }
::selection { background: var(--color-primary); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ─── Layout ─── */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: linear-gradient(195deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width .3s ease;
}
.main-content { flex: 1; padding: 28px 36px; max-width: 1280px; overflow-y: auto; }

/* ─── Cards ─── */
.card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--color-border);
}
.card-header {
    font-size: 13px; font-weight: 700; color: var(--color-text);
    margin-bottom: 16px;
}

/* ─── Form Fields ─── */
.field-label {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--color-text-secondary); margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.field-input {
    width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 13px; border: 1px solid #cbd5e1; outline: none;
    font-family: var(--font-sans); background: #fff; color: var(--color-text);
    transition: border-color .2s;
}
.field-input:focus { border-color: var(--color-primary); }
.field-input:disabled { background: #f1f5f9; }
.field-input--small { padding: 6px 10px; font-size: 12px; }

/* ─── Buttons ─── */
.btn {
    padding: 10px 24px; border-radius: 9px; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--font-sans); transition: all .15s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: #2563eb; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-outline { background: #fff; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.btn-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,.3);
}

/* ─── Guarantee Checkbox (underwriter selection) ─── */
.guarantee-check {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    border: 2px solid var(--color-border);
    cursor: pointer; transition: all .15s;
}
.guarantee-check.active { border-color: var(--color-primary); background: rgba(59,130,246,.03); }
.guarantee-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ─── Status Badges ─── */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 600;
}
.badge-success { background: rgba(16,185,129,.1); color: var(--color-success); }
.badge-warning { background: rgba(245,158,11,.1); color: var(--color-warning); }
.badge-danger { background: rgba(239,68,68,.1); color: var(--color-danger); }

/* ─── Tables ─── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
    padding: 10px 14px; text-align: left; font-weight: 600;
    color: var(--color-text-secondary); font-size: 10px;
    text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--color-border); background: #f8fafc;
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-light); }
.data-table tr:hover { background: #f8fafc; }
.data-table .amount { font-family: var(--font-mono); font-weight: 600; text-align: right; }

/* ─── Stat Card ─── */
.stat-card {
    background: var(--color-card); border-radius: var(--radius-md);
    padding: 18px 20px; border: 1px solid var(--color-border);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent-color, var(--color-primary));
}
.stat-card .stat-label {
    font-size: 10px; font-weight: 600; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px;
}
.stat-card .stat-value { font-size: 26px; font-weight: 800; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .sidebar { width: var(--sidebar-collapsed); }
    .main-content { padding: 16px; }
}