/* ========================================
   REDTREE CAPITAL PORTAL - CONSOLIDATED CSS
   Extracted from reference HTML files
   ======================================== */

/* ===== CSS VARIABLES ===== */
:root{
    /* Brand Colors (counterintuitive naming - DO NOT rename) */
    --rc-red:#0f281e;        /* Dark green - sidebar, primary buttons */
    --rc-red-light:#1a3d2e;  /* Lighter green for hover */
    --rc-red-dark:#0a1c14;   /* Darker green */
    --rc-green:#8d1f1f;      /* Dark red - secondary buttons, branding */
    --rc-green-light:#a82828; /* Lighter red for hover */
    --rc-green-mid:#b03333;   /* Mid red for gradients */
    
    /* Backgrounds */
    --rc-cream:#faf8f5;      /* Main background */
    --rc-bg:#f0edea;         /* Alternate background */
    --rc-white:#ffffff;
    
    /* Text */
    --rc-text:#2c2c2c;
    --rc-muted:#6b7280;
    --rc-light-text:#9ca3af;
    
    /* Borders */
    --rc-border:#e5e2dd;
    
    /* Status Colors */
    --rc-open:#c97a1f;
    --rc-open-bg:#fef3c7;
    --rc-progress:#2563eb;
    --rc-progress-bg:#dbeafe;
    --rc-closed:#16a34a;
    --rc-closed-bg:#dcfce7;
    
    /* Dimensions */
    --sidebar-w:260px;
    
    /* Typography */
    --font-body:'Plus Jakarta Sans',sans-serif;
    --font-heading:'Lora',serif;
    
    /* Shadows */
    --shadow-sm:0 1px 3px rgba(0,0,0,.06);
    --shadow-md:0 4px 12px rgba(0,0,0,.08);
    --shadow-lg:0 8px 30px rgba(0,0,0,.12);
    
    /* Border Radius */
    --radius:10px;
    --radius-lg:14px;
}

/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font-body);background:var(--rc-bg);color:var(--rc-text)}
a{text-decoration:none;color:inherit}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease forwards}

/* ===== LOGIN PAGE STYLES ===== */
.login-wrapper{
    display:flex;min-height:100vh;
}

/* Left panel - branding */
.login-brand{
    flex:0 0 45%;
    background:var(--rc-green);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:60px;
    position:relative;overflow:hidden;
}
.login-brand::before{
    content:'';position:absolute;top:-20%;right:-30%;
    width:600px;height:600px;border-radius:50%;
    background:rgba(141,31,31,0.08);
}
.login-brand::after{
    content:'';position:absolute;bottom:-10%;left:-20%;
    width:400px;height:400px;border-radius:50%;
    background:rgba(255,255,255,0.03);
}
.brand-content{position:relative;z-index:1;text-align:center;max-width:380px}
.brand-logo{width:220px;margin-bottom:48px;opacity:0;animation:fadeUp .8s ease forwards}
.brand-tagline{
    font-family:var(--font-heading);font-size:26px;font-weight:400;
    color:rgba(255,255,255,.9);line-height:1.4;margin-bottom:20px;
    opacity:0;animation:fadeUp .8s ease .2s forwards;
}
.brand-sub{
    font-size:14px;color:rgba(255,255,255,.5);line-height:1.7;
    opacity:0;animation:fadeUp .8s ease .4s forwards;
}

/* Right panel - form */
.login-form-panel{
    flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:40px;
}
.login-card{
    width:100%;max-width:420px;
    opacity:0;animation:fadeUp .6s ease .3s forwards;
}
.login-card h1{
    font-family:var(--font-heading);font-size:28px;font-weight:600;
    color:var(--rc-text);margin-bottom:8px;
}
.login-card .subtitle{font-size:14px;color:var(--rc-muted);margin-bottom:36px}

/* Form elements */
.form-group{margin-bottom:24px}
.form-group label{
    display:block;font-size:13px;font-weight:600;
    color:var(--rc-text);margin-bottom:8px;letter-spacing:.3px;
}
.form-group input{
    width:100%;padding:14px 16px;border:1.5px solid var(--rc-border);
    border-radius:10px;font-size:15px;font-family:var(--font-body);
    background:var(--rc-white);color:var(--rc-text);
    transition:border-color .25s,box-shadow .25s;outline:none;
}
.form-group input:focus{
    border-color:var(--rc-red);
    box-shadow:0 0 0 3px rgba(141,31,31,.1);
}
.form-group input::placeholder{color:#b5b5b5}

/* Buttons */
.btn-group{display:flex;gap:12px;margin-bottom:24px}
.btn{
    flex:1;padding:14px 20px;border:none;border-radius:10px;
    font-size:15px;font-weight:600;font-family:var(--font-body);
    cursor:pointer;transition:all .25s;display:flex;align-items:center;
    justify-content:center;gap:8px;
}
.btn-customer{
    background:var(--rc-red);color:var(--rc-white);
}
.btn-customer:hover{background:var(--rc-red-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,40,30,.3)}
.btn-partner{
    background:var(--rc-green);color:var(--rc-white);
}
.btn-partner:hover{background:var(--rc-green-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(141,31,31,.3)}
.btn svg{width:18px;height:18px}

.btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;background:var(--rc-red);color:#fff;
    border:none;border-radius:8px;font-size:14px;font-weight:600;
    font-family:var(--font-body);cursor:pointer;transition:all .2s;
}
.btn-primary:hover{background:var(--rc-red-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,40,30,.25)}
.btn-primary svg{width:16px;height:16px}

.btn-secondary{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;background:var(--rc-white);color:var(--rc-text);
    border:1.5px solid var(--rc-border);border-radius:8px;font-size:14px;font-weight:600;
    font-family:var(--font-body);cursor:pointer;transition:all .2s;
}
.btn-secondary:hover{border-color:var(--rc-text);background:var(--rc-cream)}

.btn-green{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;background:var(--rc-green);color:#fff;
    border:none;border-radius:8px;font-size:14px;font-weight:600;
    font-family:var(--font-body);cursor:pointer;transition:all .2s;
}
.btn-green:hover{background:var(--rc-green-light)}

.btn-white{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 20px;background:var(--rc-white);color:var(--rc-green);
    border:none;border-radius:8px;font-size:14px;font-weight:600;
    font-family:var(--font-body);cursor:pointer;transition:all .2s;
}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}

.login-footer{text-align:center;font-size:14px;color:var(--rc-muted)}
.login-footer a{color:var(--rc-red);font-weight:600;text-decoration:none}
.login-footer a:hover{text-decoration:underline}

.divider{
    display:flex;align-items:center;gap:14px;margin-bottom:24px;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--rc-border)}
.divider span{font-size:12px;color:var(--rc-muted);text-transform:uppercase;letter-spacing:1px}

.error-msg{
    display:none;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
    padding:12px 16px;font-size:13px;color:#991b1b;margin-bottom:16px;
}
.error-msg.show{display:flex;align-items:center;gap:8px}

.success-msg{
    display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;
    padding:12px 16px;font-size:13px;color:#166534;margin-bottom:16px;
}
.success-msg.show{display:flex;align-items:center;gap:8px}

/* ===== SIDEBAR ===== */
.sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
    background:var(--rc-green);color:#fff;z-index:1000;
    display:flex;flex-direction:column;
    transition:transform .3s ease;
}
.sidebar-header{
    padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-logo{width:160px;display:block}
.sidebar-nav{list-style:none;padding:12px 0;flex:1;overflow-y:auto}
.sidebar-nav li{margin:2px 8px}
.sidebar-nav a{
    display:flex;align-items:center;gap:12px;padding:11px 16px;
    color:rgba(255,255,255,.55);font-size:14px;font-weight:500;
    border-radius:8px;transition:all .2s;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.sidebar-nav a.active{background:var(--rc-red);color:#fff}
.sidebar-nav a.disabled{opacity:.3;pointer-events:none}
.nav-icon{width:20px;height:20px;flex-shrink:0}
.sidebar-footer{
    padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);
    font-size:12px;color:rgba(255,255,255,.3);
}

/* ===== MAIN CONTENT ===== */
.main-content{
    margin-left:var(--sidebar-w);min-height:100vh;
    display:flex;flex-direction:column;
}

/* Top banner */
.top-banner{
    background:var(--rc-white);padding:0 28px;height:60px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--rc-border);flex-shrink:0;
}
.banner-left{display:flex;align-items:center;gap:12px}
.mobile-menu-btn{
    display:none;background:none;border:none;cursor:pointer;padding:6px;
    color:var(--rc-text);
}
.mobile-menu-btn svg{width:24px;height:24px}
.banner-breadcrumb{font-size:12px;color:var(--rc-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.banner-right{display:flex;align-items:center;gap:16px}
.user-pill{
    display:flex;align-items:center;gap:10px;
    padding:6px 14px 6px 6px;border-radius:40px;
    background:var(--rc-cream);font-size:13px;font-weight:500;
}
.user-avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--rc-red);color:#fff;display:flex;
    align-items:center;justify-content:center;
    font-size:13px;font-weight:700;
}
.role-badge{
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    padding:4px 10px;border-radius:20px;
}
.role-badge.customer{background:var(--rc-red);color:#fff}
.role-badge.partner{background:var(--rc-green);color:#fff}

/* User dropdown */
.user-pill{position:relative}
.user-dropdown{
    display:none;position:absolute;top:calc(100% + 8px);right:0;
    background:#fff;border:1px solid var(--rc-border);border-radius:10px;
    box-shadow:0 4px 16px rgba(0,0,0,.1);min-width:160px;z-index:1000;
    overflow:hidden;
}
.user-dropdown.open{display:block}
.user-dropdown-item{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;font-size:14px;font-weight:500;
    color:var(--rc-text);text-decoration:none;
    transition:background .15s;
}
.user-dropdown-item:hover{background:var(--rc-bg)}

/* Page body */
.page-body{flex:1;padding:28px;overflow-y:auto}

/* ===== VIEWS ===== */
.view{display:none}
.view.active{display:block}

/* ===== DASHBOARD ===== */
.dash-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:28px;
}
.dash-welcome{font-family:var(--font-heading);font-size:26px;font-weight:600}
.dash-welcome span{color:var(--rc-red)}
.btn-customize{
    background:var(--rc-white);border:1.5px solid var(--rc-border);
    border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;
    font-family:var(--font-body);cursor:pointer;color:var(--rc-muted);
    display:flex;align-items:center;gap:6px;transition:all .2s;
}
.btn-customize:hover{border-color:var(--rc-red);color:var(--rc-red)}
.btn-customize svg{width:16px;height:16px}

.widgets-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.widget{
    background:var(--rc-white);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);overflow:hidden;
    border:1px solid var(--rc-border);
    transition:box-shadow .2s;
    display:flex;flex-direction:column;
}
.widget:hover{box-shadow:var(--shadow-md)}
.widget-header{
    padding:18px 22px;border-bottom:1px solid var(--rc-border);
    display:flex;align-items:center;justify-content:space-between;
}
.widget-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.widget-title svg{width:18px;height:18px;color:var(--rc-red)}
.widget-body{padding:22px;flex:1;display:flex;flex-direction:column}
.widget.hidden{display:none}

/* Support cases widget */
.case-stats{display:flex;gap:16px;margin-bottom:18px;flex:1}
.case-stat{
    flex:1;padding:16px;border-radius:var(--radius);text-align:center;
    display:flex;flex-direction:column;justify-content:center;
}
.case-stat.open{background:#fef7ed;border:1px solid #fed7aa}
.case-stat.resolved{background:#f0fdf4;border:1px solid #bbf7d0}
.case-stat.progress{background:#eff6ff;border:1px solid #bfdbfe}
.case-stat-value{font-size:28px;font-weight:700;margin-bottom:4px}
.case-stat.open .case-stat-value{color:var(--rc-open)}
.case-stat.resolved .case-stat-value{color:var(--rc-closed)}
.case-stat.progress .case-stat-value{color:var(--rc-progress)}
.case-stat-label{font-size:12px;color:var(--rc-muted);font-weight:500}

/* Chart widget */
.chart-wrap{flex:1;min-height:220px;position:relative}

/* ===== MY CASES ===== */
.cases-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.cases-title{font-family:var(--font-heading);font-size:24px;font-weight:600}
.cases-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-bottom:16px}
.search-input{
    padding:10px 14px 10px 38px;border:1.5px solid var(--rc-border);
    border-radius:8px;font-size:14px;font-family:var(--font-body);
    background:var(--rc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
    outline:none;flex:1;min-width:180px;transition:border-color .2s;
}
.search-input:focus{border-color:var(--rc-red)}
.filter-select{
    padding:10px 32px 10px 14px;border:1.5px solid var(--rc-border);
    border-radius:8px;font-size:14px;font-family:var(--font-body);
    background:var(--rc-white);outline:none;cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
}

/* Cases table */
.cases-table-wrap{
    background:var(--rc-white);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);border:1px solid var(--rc-border);overflow:hidden;
}
.cases-table{width:100%;border-collapse:collapse}
.cases-table th{
    background:var(--rc-cream);padding:14px 18px;text-align:left;
    font-size:12px;font-weight:700;color:var(--rc-muted);
    text-transform:uppercase;letter-spacing:.6px;
    border-bottom:1px solid var(--rc-border);cursor:pointer;
    user-select:none;white-space:nowrap;
}
.cases-table th:hover{color:var(--rc-text)}
.cases-table th .sort-arrow{margin-left:4px;opacity:.4;font-size:10px}
.cases-table th.sorted .sort-arrow{opacity:1;color:var(--rc-red)}
.cases-table td{
    padding:14px 18px;border-bottom:1px solid var(--rc-border);
    font-size:14px;vertical-align:middle;
}
.cases-table tbody tr{cursor:pointer;transition:background .15s}
.cases-table tbody tr:hover{background:var(--rc-cream)}
.cases-table tbody tr:last-child td{border-bottom:none}

/* Status & Priority badges */
.status-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;
    white-space:nowrap;
}
.status-badge.open{background:var(--rc-open-bg);color:var(--rc-open)}
.status-badge.in-progress{background:var(--rc-progress-bg);color:var(--rc-progress)}
.status-badge.closed{background:var(--rc-closed-bg);color:var(--rc-closed)}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.priority-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px}
.priority-badge.high{background:#fef2f2;color:#dc2626}
.priority-badge.medium{background:#fef7ed;color:#d97706}
.priority-badge.low{background:#f0fdf4;color:#16a34a}

.customer-tag{
    font-size:13px;color:var(--rc-green);font-weight:600;
    display:flex;align-items:center;gap:6px;
}
.customer-dot{
    width:8px;height:8px;border-radius:50%;background:var(--rc-green);
}

/* ===== VIEW CASE PANEL ===== */
.overlay{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.4);z-index:2000;
    opacity:0;visibility:hidden;transition:all .3s;
}
.overlay.open{opacity:1;visibility:visible}

.slide-panel{
    position:fixed;top:0;right:-600px;bottom:0;width:600px;max-width:100vw;
    background:var(--rc-white);z-index:2001;
    box-shadow:-4px 0 30px rgba(0,0,0,.15);
    transition:right .35s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;overflow:hidden;
}
.slide-panel.open{right:0}

.panel-header{
    padding:20px 24px;border-bottom:1px solid var(--rc-border);
    display:flex;align-items:flex-start;justify-content:space-between;
    flex-shrink:0;
}
.panel-header h2{font-family:var(--font-heading);font-size:20px;font-weight:600}
.panel-close{
    background:none;border:none;cursor:pointer;padding:4px;
    color:var(--rc-muted);transition:color .2s;
}
.panel-close:hover{color:var(--rc-text)}
.panel-close svg{width:22px;height:22px}
.panel-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px}
.panel-footer{
    padding:16px 24px;border-top:1px solid var(--rc-border);
    display:flex;justify-content:flex-end;gap:12px;flex-shrink:0;
}

/* Case detail */
.case-meta-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;
}
.case-meta-item{padding:14px;background:var(--rc-cream);border-radius:8px}
.case-meta-label{font-size:11px;color:var(--rc-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.case-meta-value{font-size:14px;font-weight:600}

.detail-section{margin-bottom:24px}
.detail-section h3{
    font-size:13px;font-weight:700;color:var(--rc-muted);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;
    display:flex;align-items:center;gap:6px;
}
.detail-section h3 svg{width:14px;height:14px}
.detail-text{
    padding:16px;background:var(--rc-cream);border-radius:8px;
    font-size:14px;line-height:1.6;color:var(--rc-text);
    border-left:3px solid var(--rc-red);
    word-wrap:break-word;overflow-wrap:break-word;
}
.person-card{
    display:flex;align-items:center;gap:12px;
    padding:14px;background:var(--rc-cream);border-radius:8px;
    min-width:0;overflow:hidden;
}
.person-avatar{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;color:#fff;flex-shrink:0;
}
.person-info{min-width:0;overflow:hidden}
.person-info .person-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-info .person-detail{font-size:12px;color:var(--rc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.people-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}

/* Case history / timeline */
.timeline{position:relative;padding-left:24px}
.timeline::before{
    content:'';position:absolute;left:8px;top:4px;bottom:4px;
    width:2px;background:var(--rc-border);
}
.timeline-item{position:relative;padding-bottom:18px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{
    position:absolute;left:-20px;top:4px;width:12px;height:12px;
    border-radius:50%;background:var(--rc-white);border:2px solid var(--rc-red);
}
.timeline-date{font-size:11px;color:var(--rc-muted);font-weight:600;margin-bottom:2px}
.timeline-text{font-size:13px;color:var(--rc-text)}

/* Comment section */
.comment-box{
    display:flex;gap:10px;margin-top:16px;
}
.comment-input{
    flex:1;padding:12px;border:1.5px solid var(--rc-border);border-radius:8px;
    font-size:14px;font-family:var(--font-body);resize:vertical;min-height:44px;outline:none;
    width:100%;box-sizing:border-box;
}
.comment-input:focus{border-color:var(--rc-red)}

/* ===== CREATE CASE MODAL ===== */
.modal-backdrop{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.5);z-index:3000;
    display:none;align-items:center;justify-content:center;
    padding:20px;
}
.modal-backdrop.open{display:flex}
.modal{
    background:var(--rc-white);border-radius:var(--radius-lg);
    width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
    box-shadow:var(--shadow-lg);
}
.modal-header{
    padding:24px 28px 20px;border-bottom:1px solid var(--rc-border);
    display:flex;align-items:center;justify-content:space-between;
}
.modal-header h2{font-family:var(--font-heading);font-size:22px;font-weight:600}
.modal-body{padding:28px}
.modal-footer{
    padding:16px 28px;border-top:1px solid var(--rc-border);
    display:flex;justify-content:flex-end;gap:12px;
}
.modal .form-group{margin-bottom:20px}
.modal .form-group label{
    display:block;font-size:13px;font-weight:600;margin-bottom:8px;
    color:var(--rc-text);
}
.modal .form-group label .optional{color:var(--rc-muted);font-weight:400}
.form-input{
    width:100%;padding:12px 14px;border:1.5px solid var(--rc-border);
    border-radius:8px;font-size:14px;font-family:var(--font-body);
    outline:none;transition:border-color .2s;
}
.form-input:focus{border-color:var(--rc-red);box-shadow:0 0 0 3px rgba(141,31,31,.08)}
.form-textarea{min-height:110px;resize:vertical}
.form-select{
    width:100%;padding:12px 14px;border:1.5px solid var(--rc-border);
    border-radius:8px;font-size:14px;font-family:var(--font-body);
    outline:none;cursor:pointer;background:var(--rc-white);
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
}
.form-file{
    display:block;width:100%;padding:12px 14px;
    border:1.5px dashed var(--rc-border);border-radius:8px;
    font-size:14px;font-family:var(--font-body);cursor:pointer;
    color:var(--rc-muted);text-align:center;transition:all .2s;
}
.form-file:hover{border-color:var(--rc-red);color:var(--rc-red)}

/* ===== PROFILE ===== */
.profile-banner{
    background:linear-gradient(135deg,var(--rc-green) 0%,var(--rc-green-mid) 100%);
    border-radius:var(--radius-lg);padding:32px;
    display:flex;align-items:center;gap:24px;margin-bottom:28px;
    position:relative;overflow:hidden;
}
.profile-banner::after{
    content:'';position:absolute;right:-60px;top:-60px;
    width:200px;height:200px;border-radius:50%;
    background:rgba(141,31,31,.08);
}
.profile-avatar-lg{
    width:80px;height:80px;border-radius:50%;
    background:var(--rc-red);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;font-weight:700;flex-shrink:0;
    border:3px solid rgba(255,255,255,.2);
}
.profile-banner-info{color:#fff;position:relative;z-index:1}
.profile-banner-name{font-family:var(--font-heading);font-size:24px;font-weight:600;margin-bottom:4px}
.profile-banner-email{font-size:14px;opacity:.7}
.profile-banner-phone{font-size:14px;opacity:.6;margin-top:2px}
.profile-edit-btn{
    margin-left:auto;position:relative;z-index:1;
}

.profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.profile-section{
    background:var(--rc-white);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);border:1px solid var(--rc-border);overflow:hidden;
}
.profile-section-header{
    padding:18px 22px;border-bottom:1px solid var(--rc-border);
    font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.profile-section-header svg{width:18px;height:18px;color:var(--rc-red)}
.profile-section-body{padding:22px}
.profile-field{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 0;border-bottom:1px solid var(--rc-border);
}
.profile-field:last-child{border-bottom:none}
.profile-field-label{font-size:13px;color:var(--rc-muted);font-weight:500}
.profile-field-value{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.profile-field-edit{
    background:none;border:none;color:var(--rc-red);font-size:13px;
    font-weight:600;cursor:pointer;font-family:var(--font-body);
}
.profile-field-edit:hover{text-decoration:underline}

/* Edit mode inputs in profile */
.field-edit-input{
    padding:8px 12px;border:1.5px solid var(--rc-border);border-radius:6px;
    font-size:14px;font-family:var(--font-body);outline:none;
    max-width:220px;
}
.field-edit-input:focus{border-color:var(--rc-red)}

.verified-badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;
    background:var(--rc-closed-bg);color:var(--rc-closed);
}
.pending-badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;
    background:var(--rc-open-bg);color:var(--rc-open);
}
.doc-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 0;border-bottom:1px solid var(--rc-border);
}
.doc-row:last-child{border-bottom:none}
.doc-name{font-size:14px;font-weight:600}
.doc-date{font-size:12px;color:var(--rc-muted)}

/* ===== CUSTOMIZE MODAL ===== */
.widget-toggle{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 0;border-bottom:1px solid var(--rc-border);
}
.widget-toggle:last-child{border-bottom:none}
.widget-toggle-label{font-size:14px;font-weight:500}
.toggle-switch{
    position:relative;width:44px;height:24px;
    background:var(--rc-border);border-radius:12px;cursor:pointer;
    transition:background .2s;
}
.toggle-switch.on{background:var(--rc-red)}
.toggle-switch::after{
    content:'';position:absolute;top:3px;left:3px;
    width:18px;height:18px;border-radius:50%;
    background:#fff;transition:transform .2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch.on::after{transform:translateX(20px)}

/* Partner-specific: customer selector */
.customer-selector{
    display:none;
}
.customer-selector.show{display:contents}
.customer-selector-wrap{
    background:var(--rc-white);border-radius:var(--radius-lg);
    padding:16px 20px;box-shadow:var(--shadow-sm);border:1px solid var(--rc-border);
    display:flex;align-items:center;gap:14px;
}
.customer-selector-wrap label{font-size:13px;font-weight:700;color:var(--rc-muted);white-space:nowrap}

/* ===== TOAST ===== */
.toast{
    position:fixed;bottom:24px;right:24px;z-index:9999;
    background:var(--rc-green);color:#fff;padding:14px 22px;
    border-radius:10px;font-size:14px;font-weight:500;
    box-shadow:var(--shadow-lg);transform:translateY(100px);
    opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);
    display:flex;align-items:center;gap:10px;
}
.toast.show{transform:translateY(0);opacity:1}
.toast svg{width:20px;height:20px;flex-shrink:0}

/* ===== PROFILE TABS (Partner) ===== */
.profile-tabs{
    display:none;justify-content:center;gap:12px;margin-bottom:24px;
}
.profile-tabs.show{display:flex}
.profile-tab{
    padding:10px 24px;border-radius:8px;font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;cursor:pointer;
    border:2px solid var(--rc-border);background:var(--rc-white);
    color:var(--rc-muted);transition:all .2s;font-family:var(--font-body);
}
.profile-tab:hover{border-color:var(--rc-red);color:var(--rc-text)}
.profile-tab.active{background:var(--rc-red);border-color:var(--rc-red);color:#fff}
.profile-tab-content{display:none}
.profile-tab-content.active{display:block}

/* Company details banner */
.company-banner{
    display:flex;align-items:center;gap:20px;margin-bottom:28px;
    padding:24px;background:var(--rc-white);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);border:1px solid var(--rc-border);
}
.company-logo-box{
    width:64px;height:64px;border-radius:12px;background:var(--rc-green);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.company-logo-box svg{width:36px;height:36px;color:#fff}
.company-info-text{min-width:0}
.company-info-name{font-family:var(--font-heading);font-size:20px;font-weight:700}
.company-info-meta{font-size:13px;color:var(--rc-muted);display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.company-info-meta svg{width:14px;height:14px;flex-shrink:0}
.company-info-meta span{display:flex;align-items:center;gap:4px}
.company-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* Company form */
.company-form-group{margin-bottom:16px}
.company-form-group label{
    display:block;font-size:13px;font-weight:600;color:var(--rc-text);margin-bottom:6px;
}
.company-form-group label .req{color:#dc2626}
.company-form-input{
    width:100%;padding:11px 14px;border:1.5px solid var(--rc-border);border-radius:8px;
    font-size:14px;font-family:var(--font-body);color:var(--rc-text);
    background:var(--rc-white);outline:none;transition:border-color .2s;
}
.company-form-input:focus{border-color:var(--rc-red)}
.company-form-input:disabled{background:var(--rc-cream);color:var(--rc-muted)}
.company-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.company-footer{
    display:flex;justify-content:flex-end;gap:12px;margin-top:24px;
    padding-top:20px;border-top:1px solid var(--rc-border);
}
.company-upload-area{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px;border:2px dashed var(--rc-border);border-radius:8px;
    font-size:13px;font-weight:600;color:var(--rc-muted);cursor:pointer;
    transition:all .2s;margin-top:8px;
}
.company-upload-area:hover{border-color:var(--rc-red);color:var(--rc-red)}
.company-upload-area svg{width:18px;height:18px}

/* ===== CUSTOMERS (Partner) ===== */
.partner-only{display:none}
.partner-only.show{display:block}
.cust-status-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;
    white-space:nowrap;text-transform:uppercase;letter-spacing:.3px;
}
.cust-status-badge.on-track{background:var(--rc-closed-bg);color:var(--rc-closed)}
.cust-status-badge.attention{background:#fef2f2;color:#dc2626}

/* New customer form sections */
.form-section{margin-bottom:28px}
.form-section-title{
    font-size:13px;font-weight:700;color:var(--rc-text);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;
    padding-bottom:8px;border-bottom:1px solid var(--rc-border);
    display:flex;align-items:center;gap:8px;
}
.form-section-title svg{width:18px;height:18px;color:var(--rc-red)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}

/* Document upload rows */
.upload-section{margin-bottom:20px}
.upload-section-title{
    font-size:14px;font-weight:700;margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
}
.upload-section-title svg{width:18px;height:18px;color:var(--rc-red)}
.upload-row{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;background:var(--rc-cream);border-radius:8px;
    border:1px solid var(--rc-border);
}
.upload-file-info{
    display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.upload-file-icon{
    width:36px;height:36px;border-radius:6px;background:var(--rc-white);
    border:1px solid var(--rc-border);display:flex;align-items:center;
    justify-content:center;flex-shrink:0;
}
.upload-file-icon svg{width:18px;height:18px;color:var(--rc-muted)}
.upload-file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upload-status{
    display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
    color:var(--rc-closed);white-space:nowrap;flex-shrink:0;
}
.upload-status svg{width:14px;height:14px}
.upload-delete{
    background:none;border:none;cursor:pointer;padding:4px;
    color:var(--rc-muted);flex-shrink:0;
}
.upload-delete:hover{color:#dc2626}
.upload-delete svg{width:16px;height:16px}
.upload-btn-area{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 16px;border:1.5px dashed var(--rc-border);border-radius:8px;
    font-size:13px;font-weight:600;color:var(--rc-muted);cursor:pointer;
    transition:all .2s;flex-shrink:0;
}
.upload-btn-area:hover{border-color:var(--rc-red);color:var(--rc-red)}
.upload-btn-area svg{width:16px;height:16px}

/* Customer view panel details */
.cust-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.cust-detail-item{padding:12px;background:var(--rc-cream);border-radius:8px}
.cust-detail-label{font-size:11px;color:var(--rc-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.cust-detail-value{font-size:14px;font-weight:600}

/* Customer panel (700px width) */
.customer-panel{width:700px;right:-700px}
.customer-panel.open{right:0}

/* Status dot for customer rows */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.status-dot.active{background-color:var(--rc-closed)}
.status-dot.inactive{background-color:var(--rc-muted)}

/* Case stats cards in customer panel */
.case-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.case-stat-card{padding:16px;border-radius:8px;text-align:center}
.case-stat-card.open{background:var(--rc-open-bg);border:1px solid #fed7aa}
.case-stat-card.progress{background:var(--rc-progress-bg);border:1px solid #bfdbfe}
.case-stat-card.closed{background:var(--rc-closed-bg);border:1px solid #bbf7d0}
.case-stat-card .stat-value{font-size:24px;font-weight:700;margin-bottom:4px}
.case-stat-card.open .stat-value{color:var(--rc-open)}
.case-stat-card.progress .stat-value{color:var(--rc-progress)}
.case-stat-card.closed .stat-value{color:var(--rc-closed)}
.case-stat-card .stat-label{font-size:11px;color:var(--rc-muted);font-weight:600;text-transform:uppercase}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .profile-grid{grid-template-columns:1fr}
    .cases-toolbar{flex-wrap:wrap}
    .search-input{width:100%;flex:1 1 100%}
    .widgets-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.mobile-open{transform:translateX(0)}
    .main-content{margin-left:0}
    .mobile-menu-btn{display:block}
    .top-banner{padding:0 16px}
    .page-body{padding:16px}
    .widgets-grid{grid-template-columns:1fr}
    .case-meta-grid{grid-template-columns:1fr}
    .people-row{grid-template-columns:1fr}
    .dash-header{flex-direction:column;align-items:flex-start;gap:12px}
    .cases-header{flex-direction:column;align-items:flex-start}
    .slide-panel{width:100%}
    .profile-banner{flex-direction:column;text-align:center}
    .profile-edit-btn{margin-left:0;margin-top:12px}
    .btn-group-responsive{flex-direction:column;width:100%}
    .btn-group-responsive .btn-primary,
    .btn-group-responsive .btn-secondary{width:100%;justify-content:center}
    .company-grid{grid-template-columns:1fr}
    .company-banner{flex-direction:column;text-align:center}
    .company-info-meta{justify-content:center}
    .profile-tabs{flex-wrap:wrap}
}
@media(max-width:600px){
    .company-form-row{grid-template-columns:1fr}
    .form-row,.form-row.three{grid-template-columns:1fr}
}
@media(max-width:480px){
    .user-pill span.hide-mobile{display:none}
    .login-wrapper{flex-direction:column}
    .login-brand{flex:0 0 auto;padding:40px 30px;min-height:auto}
    .brand-logo{width:160px;margin-bottom:24px}
    .brand-tagline{font-size:20px}
    .login-form-panel{padding:30px 20px}
    .btn-group{flex-direction:column}
    .login-card h1{font-size:24px}
}
@media(max-width:900px){
    .login-wrapper{flex-direction:column}
    .login-brand{flex:0 0 auto;padding:40px 30px;min-height:auto}
    .brand-logo{width:160px;margin-bottom:24px}
    .brand-tagline{font-size:20px}
    .login-form-panel{padding:30px 20px}
}

/* Mobile overlay for sidebar */
.sidebar-overlay{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.4);z-index:999;
}
.sidebar-overlay.show{display:block}

/* ===== OTP PAGE SPECIFIC ===== */
.otp-input-container{
    display:flex;justify-content:center;gap:8px;margin:24px 0;
}
.otp-input{
    width:48px;height:56px;text-align:center;font-size:24px;font-weight:700;
    border:1.5px solid var(--rc-border);border-radius:10px;
    font-family:var(--font-body);outline:none;transition:all .2s;
}
.otp-input:focus{border-color:var(--rc-red);box-shadow:0 0 0 3px rgba(141,31,31,.1)}
.resend-link{
    display:block;text-align:center;margin-top:16px;font-size:14px;color:var(--rc-muted);
}
.resend-link a{color:var(--rc-red);font-weight:600;text-decoration:none;cursor:pointer}
.resend-link a:hover{text-decoration:underline}
.back-link{
    display:block;text-align:center;margin-top:12px;font-size:14px;color:var(--rc-muted);
}
.back-link a{color:var(--rc-text);font-weight:500;text-decoration:none}
.back-link a:hover{color:var(--rc-red)}