*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    height:100%;
    font-family:Segoe UI,Arial,sans-serif;
    background:#edf1f5;
    color:#2c3e50;
}

/* ===========================
   APP
=========================== */

.app{
    display:flex;
    height:100vh;
    overflow:hidden;
}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{
    position:relative;
    width:72px;
    min-width:72px;
    height:100vh;
    background:#1b2430;
    color:#fff;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    overflow:hidden;
    transition:width .2s ease;
}

.sidebar:hover{
    width:240px;
}

/* ===========================
   NAVIGATION
=========================== */

.sidebar nav{
    display:flex;
    flex-direction:column;
    width:240px;
    padding:18px 10px;
    gap:8px;
}

/* ===========================
   NAV BUTTON
=========================== */

.nav-button{
    width:220px;
    height:48px;
    border:none;
    background:none;
    color:#c8d0db;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    text-align:left;
    padding:0 14px;
    font-family:inherit;
    font-size:15px;
    font-weight:400;
    white-space:nowrap;
    overflow:hidden;
    transition:background .2s ease, color .2s ease;
}

.sidebar:not(:hover) .nav-button{
    width:52px;
    min-width:52px;
    padding:0;
    justify-content:center;
    font-size:0;
}

.sidebar:hover .nav-button{
    width:220px;
    justify-content:flex-start;
    padding:0 14px;
}

.nav-button:hover{
    background:#253244;
    color:#fff;
}

.nav-button.active{
    background:#2f80ed;
    color:#fff;
    font-weight:600;
}

/* ===========================
   NAV ICON / LABEL
=========================== */

.nav-icon{
    width:44px;
    min-width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebar:not(:hover) .nav-icon{
    width:52px;
    min-width:52px;
}

.sidebar:hover .nav-icon{
    margin-right:10px;
}

.nav-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nav-label{
    white-space:nowrap;
    overflow:hidden;
    opacity:1;
    transition:opacity .15s ease;
}

.sidebar:not(:hover) .nav-label{
    display:none;
}

/* ===========================
   NOTIFICATIONS BELL — fixed to the page itself (not the sidebar),
   top-right corner, so it stays put regardless of which view is open.
=========================== */

#notifications-bell{
    position:fixed;
    top:16px;
    right:10px;
    z-index:9997;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#334155;
}

#notifications-bell:hover{
    background:#f8fafc;
}

#notifications-bell svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.notifications-badge{
    position:absolute;
    top:-2px;
    right:-2px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:9px;
    background:#e11d48;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-align:center;
    box-shadow:0 0 0 2px #fff;
}

.notifications-panel{
    position:fixed;
    top:68px;
    right:10px;
    width:320px;
    max-height:420px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 30px rgba(0,0,0,.18);
    z-index:9998;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.notifications-panel-header{
    padding:14px 16px;
    font-weight:700;
    font-size:14px;
    border-bottom:1px solid #edf1f5;
    color:#1e293b;
}

.notifications-panel-list{
    overflow-y:auto;
}

.notifications-panel-empty{
    padding:24px 16px;
    text-align:center;
    color:#94a3b8;
    font-size:13px;
}

.notifications-panel-item{
    padding:12px 16px;
    border-bottom:1px solid #f1f5f9;
    cursor:pointer;
    font-size:13px;
    color:#334155;
}

.notifications-panel-item:hover{
    background:#f8fafc;
}

.notifications-panel-item-kind{
    font-size:11px;
    font-weight:700;
    color:#2f80ed;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:3px;
}

/* ===========================
   CURRENT USER / SIGN OUT
=========================== */

.current-user-display{
    margin-top:auto;
    padding:16px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.current-user-label{
    font-size:11px;
    opacity:0.6;
    margin-bottom:4px;
}

.current-user-name{
    font-size:14px;
    font-weight:600;
}

#signout-button{
    width:100%;
    margin-top:12px;
    padding:8px 12px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#ffffff;
    color:#6b7280;
    cursor:pointer;
    font-size:13px;
}

#signout-button:hover{
    background:#fef2f2;
    color:#dc2626;
    border-color:#fecaca;
}

.sidebar:not(:hover) #signout-button{
    display:none;
}

/* ===========================
   CONTENT / VIEWS
=========================== */

.content{
    flex:1;
    min-width:0;
    overflow:auto;
    padding:28px;
}

.view{
    display:none;
}

.view.active{
    display:block;
}

h1{
    font-size:28px;
    margin-bottom:20px;
}

/* ===========================
   DASHBOARD HEADER
=========================== */

.dashboard-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:28px;
}

.dashboard-header h1{
    margin:0;
}

.dashboard-subtitle{
    margin:6px 0 0;
    color:#64748b;
    font-size:14px;
}

/* ===========================
   DASHBOARD SECTIONS
=========================== */

.dashboard-section{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    margin-bottom:24px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.dashboard-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 22px;
    border-bottom:1px solid #e2e8f0;
}

.dashboard-section-header h2{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#1e293b;
}

.dashboard-section-header p{
    margin:5px 0 0;
    font-size:13px;
    color:#64748b;
}

.dashboard-add-btn{
    border:0;
    border-radius:7px;
    padding:9px 15px;
    background:#2F80ED;
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.dashboard-add-btn:hover{
    background:#1f6fd8;
}

.dashboard-table-wrap{
    width:100%;
    overflow-x:auto;
}

.dashboard-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.dashboard-table th{
    padding:8px 18px;
    background:#f8fafc;
    border-bottom:1px solid #e2e8f0;
    color:#475569;
    font-size:12px;
    font-weight:700;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.dashboard-table td{
    padding:7px 18px;
    border-bottom:1px solid #edf2f7;
    color:#334155;
    font-size:14px;
    vertical-align:middle;
}

.dashboard-table td .primary-btn,
.dashboard-table td .secondary-btn,
.dashboard-table td .danger-btn{
    padding:6px 12px;
    font-size:13px;
}

.dashboard-table tbody tr:last-child td{
    border-bottom:0;
}

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

.todo-check-column{ width:65px; }
.todo-actions-column{ width:170px; }

.dashboard-client-name{
    color:#2563eb;
    font-weight:500;
    text-decoration:underline;
}

.dashboard-status{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.completed-toggle-row{
    cursor:pointer;
}

.completed-toggle-row td{
    padding:11px 18px !important;
    background:#f8fafc;
    color:#475569;
    font-size:13px;
    font-weight:600;
}

.completed-toggle-row:hover td{
    background:#eef2f7;
    color:#1e293b;
}

.new-assignment-notification{
    position:fixed;
    top:20px;
    right:20px;
    width:320px;
    padding:16px 42px 16px 18px;
    background:#dcfce7;
    border:2px solid #86efac;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:99999;
    cursor:pointer;
}

.new-assignment-notification-title{
    font-size:15px;
    font-weight:700;
    color:#000;
    margin-bottom:5px;
}

.new-assignment-notification-message{
    font-size:13px;
    color:#000;
}

.new-assignment-close{
    position:absolute;
    top:8px;
    right:10px;
    width:26px;
    height:26px;
    border:0;
    background:transparent;
    color:#166534;
    font-size:22px;
    line-height:22px;
    cursor:pointer;
}

.new-assignment-close:hover{
    opacity:.7;
}

.dashboard-status-upcoming{ background:#eff6ff; color:#2563eb; }
.dashboard-status-overdue{ background:#fee2e2; color:#991b1b; }
.dashboard-status-paid{ background:#dcfce7; color:#166534; }
.dashboard-status.open{ background:#eff6ff; color:#2563eb; }
.dashboard-status.completed{ background:#f1f5f9; color:#64748b; }

.workspace-date-time{
    font-size:14px;
    font-weight:800;
    color:#022b61;
    white-space:nowrap;
}

/* ===========================
   BUTTONS
=========================== */

.primary-btn{
    background:#2F80ED;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
}

.primary-btn:hover{
    background:#1f6fd8;
}

.secondary-btn{
    background:#fff;
    color:#2c3e50;
    border:1px solid #d7dce3;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

.danger-btn{
    background:#e74c3c;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
}

.view-btn{
    background:#2F80ED;
    color:#fff;
    border:none;
    padding:7px 15px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.view-btn:hover{
    background:#1f6fd8;
}

.hidden{
    display:none !important;
}

/* ===========================
   SEARCH
=========================== */

.search-input{
    width:350px;
    padding:10px 14px;
    border:1px solid #d7dce3;
    border-radius:8px;
    outline:none;
    font-size:14px;
}

.search-input:focus{
    border-color:#2F80ED;
}

/* ===========================
   TABLE
=========================== */

table{
    width:100%;
    border-collapse:collapse;
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

thead{
    background:#f4f6f9;
}

th{
    padding:14px;
    text-align:left;
    font-size:13px;
    font-weight:600;
    color:#5b6574;
    border-bottom:1px solid #e8edf2;
}

td{
    padding:14px;
    border-bottom:1px solid #edf1f5;
    font-size:14px;
}

tbody tr:hover{
    background:#f9fbfd;
}

/* Denser row height for tables where the generic 14px cell padding
   plus full-size buttons made each row feel oversized relative to
   its (short) content -- e.g. the To Do List. */
.compact-table th,
.compact-table td{
    padding:8px 14px;
}

.compact-table td .primary-btn,
.compact-table td .secondary-btn,
.compact-table td .danger-btn{
    padding:6px 12px;
    font-size:13px;
}

/* ===========================
   STATUS BADGES
=========================== */

.status-badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.status-active{
    background:#dff6e5;
    color:#1e8e3e;
}

.status-inactive{
    background:#ececec;
    color:#666;
}

.status-pending{
    background:#fff3d6;
    color:#b77900;
}

.status-closed{
    background:#fee2e2;
    color:#dc2626;
}

.status-deceased{
    background:#e5e7eb;
    color:#374151;
}

/* ===========================
   WORKSPACE STICKY HEADER
=========================== */

.workspace-sticky{
    position:sticky;
    top:0;
    z-index:500;
    background:#edf1f5;
    padding:20px 0 18px;
    transition:padding .25s ease, transform .25s ease, box-shadow .25s ease;
}

.workspace-sticky.scrolled{
    padding:8px 0 6px;
    transform:translateY(-28px);
    box-shadow:0 6px 18px rgba(0,0,0,.10);
}

.workspace-sticky h1{
    transition:font-size .25s ease;
}

.workspace-sticky.scrolled h1{
    font-size:22px;
}

.workspace-sticky .back-btn{
    transition:all .25s ease;
}

.workspace-sticky.scrolled .back-btn{
    padding:8px 14px;
    font-size:13px;
}

.workspace-tabs{
    display:flex;
    gap:8px;
    margin-top:20px;
    border-bottom:1px solid #dfe5ec;
    padding-bottom:12px;
    flex-wrap:wrap;
}

.workspace-tab{
    background:#fff;
    border:1px solid #dfe5ec;
    border-radius:8px;
    padding:10px 18px;
    cursor:pointer;
    font-size:14px;
}

.workspace-tab.active{
    background:#2F80ED;
    color:white;
    border-color:#2F80ED;
}

.workspace-sticky .workspace-tab{
    transition:all .25s ease;
}

.workspace-sticky.scrolled .workspace-tab{
    padding:7px 14px;
    font-size:13px;
}

.workspace-tools{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
}

.workspace-date-time{
    font-size:14px;
    font-weight:800;
    color:#022b61;
    white-space:nowrap;
}

.workspace-global-search{
    position:relative;
    width:320px;
}

#workspace-global-search{
    width:100%;
    box-sizing:border-box;
    padding:9px 12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
    outline:none;
}

#workspace-global-search:focus{
    border-color:#888;
}

.workspace-search-results{
    position:absolute;
    top:calc(100% + 5px);
    left:0;
    right:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    z-index:9999;
    max-height:400px;
    overflow-y:auto;
}

.workspace-search-result-item{
    padding:10px 12px;
    cursor:pointer;
}

.workspace-search-result-item:hover{
    background:#f5f5f5;
}

.workspace-search-result-label{
    font-size:11px;
    font-weight:600;
    color:#777;
    margin-bottom:3px;
}

/* ===========================
   CLIENTS PAGE
=========================== */

.clients-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.clients-header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.assigned-user-select{
    width:100%;
    padding:6px 8px;
    border:1px solid #d7dce3;
    border-radius:6px;
    font-size:14px;
}

/* ===========================
   STATUS MODAL (loading/success/error)
=========================== */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    justify-content:center;
    align-items:center;
    overflow-y:auto;
    padding:20px;
    z-index:99999;
}

.modal{
    width:900px;
    max-width:95vw;
    max-height:90vh;
    background:#fff;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.modal-body{
    flex:1;
    overflow-y:auto;
    padding:30px;
}

.modal-body h2{
    margin:0 0 18px;
    font-size:28px;
    font-weight:700;
}

/* ===========================
   STATUS MODAL (Loading/Success/Failure) —
   small popup, not a full form modal
=========================== */

#status-modal-overlay .modal{
    width:280px;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

#status-modal-overlay .modal-body{
    padding:22px 24px;
    text-align:center;
}

#status-modal-overlay .modal-body h2{
    margin:0 0 8px;
    font-size:17px;
    font-weight:700;
}

#status-modal-overlay .modal-body p{
    margin:0;
    font-size:13px;
    color:#666;
}

#status-modal-overlay .danger-btn{
    margin-top:14px;
    padding:7px 16px;
    font-size:13px;
}

.modal-header{
    padding:18px 22px;
    border-bottom:1px solid #eceff3;
    font-size:18px;
    font-weight:600;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:20px 30px;
    border-top:1px solid #e5e7eb;
    background:#fff;
    flex-shrink:0;
}

/* ===========================
   FORMS
=========================== */

input,
select,
textarea{
    width:100%;
    height:42px;
    padding:0 12px;
    border:1px solid #d9dee5;
    border-radius:8px;
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    background:#fff;
}

textarea{
    height:auto;
    min-height:120px;
    padding:12px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#2F80ED;
}

input[type="checkbox"],
input[type="radio"]{
    width:16px;
    height:16px;
    padding:0;
    flex-shrink:0;
}

label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:#555;
}

.form-row{
    display:flex;
    gap:15px;
    margin-bottom:16px;
}

.form-col{
    flex:1;
}

.modal-body p{
    margin:0;
    font-size:17px;
    color:#666;
    line-height:1.5;
}

/* ===========================
   CARDS / FLEX (workspace)
=========================== */

.card{
    background:white;
    border-radius:10px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    margin-bottom:20px;
}

.flex{
    display:flex;
}

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

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.gap10{ gap:10px; }
.gap20{ gap:20px; }

/* ===========================
   WORKSPACE
=========================== */

.workspace-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.workspace-title{
    display:flex;
    align-items:center;
    gap:15px;
}

.back-btn{
    background:white;
    border:1px solid #d9dee5;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

.back-btn:hover{
    background:#f6f8fa;
}

.section-buttons{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

/* ===========================
   ADDRESS EDIT MODE
=========================== */

.address-edit{
    display:flex;
    gap:8px;
    align-items:center;
}

.address-edit input{
    min-width:0;
}

.address-edit input:first-child{
    flex:2;
}

.address-edit input:last-child{
    flex:1;
}

.edit-row input,
.edit-row select{
    height:34px;
    padding:6px 10px;
    font-size:13px;
}

.edit-row .primary-btn,
.edit-row .secondary-btn{
    padding:6px 14px;
    font-size:13px;
    margin-bottom:6px;
}

.table-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:15px 10px 5px;
}

.address-actions td{
    border:none !important;
    background:white;
}

.status-current{
    color:#1f8a3d;
    font-weight:600;
}

.status-previous{
    color:#d93025;
    font-weight:600;
}

/* Personal card fields — read vs. edit mode, matching source app */
.personal-info-card input:disabled,
.personal-info-card select:disabled,
.business-details-card input:disabled,
.business-details-card select:disabled,
.business-details-card textarea:disabled{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    color:#334155 !important;
    -webkit-text-fill-color:#334155;
    opacity:1;
    font-size:16px;
    font-weight:500;
    cursor:default;
    appearance:none;
    -webkit-appearance:none;
}

/* Compact the Personal/Business Information cards specifically -- the
   disabled read-mode fields were still reserving the generic 42px
   input height for what's really just one line of text, making the
   card feel much taller than its content needs. */
.personal-info-card input:disabled,
.personal-info-card select:disabled,
.business-details-card input:disabled,
.business-details-card select:disabled,
.business-details-card textarea:disabled{
    height:auto;
    line-height:1.3;
}

.personal-info-card .form-row,
.business-details-card .form-row{
    margin-bottom:8px;
}

.personal-info-card .form-col label,
.business-details-card .form-col label{
    margin-bottom:2px;
}

.personal-info-card input:not(:disabled),
.personal-info-card select:not(:disabled){
    border:1px solid #d1d5db !important;
    background:#fff !important;
    padding-left:12px !important;
    padding-right:12px !important;
    color:#334155 !important;
    cursor:text;
    appearance:auto;
    -webkit-appearance:auto;
}

.personal-info-card select:not(:disabled){
    cursor:pointer;
}

/* ===========================
   BUSINESS TAB
=========================== */

.clickable-row{
    cursor:pointer;
    transition:background .15s ease;
}

/* ===========================
   BANKS & CARDS TAB
=========================== */

.bankcard-main-section{
    margin-bottom:24px;
}

.bankcard-main-header{
    cursor:pointer;
    user-select:none;
    padding:10px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.bankcard-main-header h3{
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}

.bankcard-arrow{
    display:inline-block;
    width:18px;
}

.bankcard-main-content.collapsed{
    display:none;
}

.bankcard-main-content{
    padding-top:6px;
}

.bankcard-category{
    margin-top:30px;
    padding-bottom:20px;
    border-bottom:1px solid #e8edf2;
}

.bankcard-category:last-child{
    border-bottom:none;
}

.bankcard-category-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.bankcard-category-header h4{
    margin:0;
    font-size:15px;
    color:#334155;
}

.bankcard-credit-total{
    padding:6px 14px;
    border:1px solid #d5dce5;
    border-radius:8px;
    background:#f7f9fc;
    color:#52606d;
    font-size:13px;
}

.bankcard-credit-total strong{
    margin-left:6px;
    color:#1f2937;
}

.bankcard-empty{
    padding:12px;
    color:#777;
    font-size:14px;
}

.bankcard-sort-header{
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
}

.bankcard-sort-header:hover{
    text-decoration:underline;
}

.bankcard-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    border:1px solid transparent;
}

.bankcard-status-active{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.bankcard-status-activation{ background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe; }
.bankcard-status-pending{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.bankcard-status-restricted{ background:#ffedd5; color:#c2410c; border-color:#fed7aa; }
.bankcard-status-closed{ background:#e5e7eb; color:#374151; border-color:#d1d5db; }
.bankcard-status-denied{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.bankcard-status-wait-list{ background:#ede9fe; color:#6d28d9; border-color:#ddd6fe; }
.bankcard-status-default{ background:#f3f4f6; color:#4b5563; border-color:#e5e7eb; }

.bankcard-status-loan-review{ background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.bankcard-status-loan-denied{ background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
.bankcard-status-loan-approved{ background:#dcfce7; color:#15803d; border-color:#86efac; }
.bankcard-status-loan-funded{ background:#dbeafe; color:#1d4ed8; border-color:#93c5fd; }
.bankcard-status-loan-paidoff{ background:#f3f4f6; color:#4b5563; border-color:#e5e7eb; }
.bankcard-status-loan-default{ background:#f1f5f9; color:#475569; border-color:#cbd5e1; }

/* ===========================
   ADD BANK/CARD MODAL — compact,
   5-column grid to minimize scrolling
=========================== */

#bankcard-modal .bankcard-add-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px 14px;
    width:100%;
}

#bankcard-modal input,
#bankcard-modal select,
#bankcard-modal textarea{
    height:36px;
    padding:0 8px;
    font-size:13px;
}

#bankcard-modal textarea{
    height:auto;
    min-height:60px;
    padding:8px;
}

#bankcard-modal label{
    font-size:12px;
    margin-bottom:4px;
}

#bankcard-modal h3{
    font-size:15px;
    margin-bottom:12px;
}

#bankcard-modal hr{
    margin:16px 0;
}

@media (max-width:1000px){
    #bankcard-modal .bankcard-add-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:650px){
    #bankcard-modal .bankcard-add-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* ===========================
   EXPANDED BANK CARD DETAIL —
   same compact 5-column grid
=========================== */

.bankcard-detail-panel{
    padding:16px 20px;
}

.bankcard-detail-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px 14px;
    margin-bottom:4px;
}

.bankcard-detail-panel input,
.bankcard-detail-panel select,
.bankcard-detail-panel textarea{
    height:34px;
    padding:0 8px;
    font-size:13px;
}

.bankcard-detail-panel textarea{
    height:auto;
    min-height:50px;
    padding:8px;
}

.bankcard-detail-panel label{
    font-size:11px;
    margin-bottom:3px;
}

.bankcard-detail-panel h3{
    font-size:14px;
    margin:0 0 8px;
}

.bankcard-detail-panel hr{
    margin:14px 0;
}

@media (max-width:1100px){
    .bankcard-detail-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:700px){
    .bankcard-detail-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ===========================
   FINANCIAL TAB
=========================== */

.financial-totals{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:22px;
}

.financial-total-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:10px;
    padding:17px 20px;
    box-shadow:0 2px 7px rgba(15,23,42,.04);
}

.financial-total-label{
    color:#64748b;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:7px;
}

.financial-total-value{
    color:#1e293b;
    font-size:23px;
    font-weight:700;
}

.financial-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.financial-table{
    width:100%;
    border-collapse:collapse;
}

.financial-table th{
    padding:12px 14px;
    text-align:left;
    font-weight:600;
    font-size:12px;
    color:#5b6574;
    background:#f4f6f9;
    white-space:nowrap;
}

.financial-table td{
    padding:12px 14px;
    border-bottom:1px solid #edf1f5;
    font-size:13px;
    white-space:nowrap;
}

.financial-table tbody tr:hover{
    background:#f9fbfd;
}

.financial-cell-editable{
    cursor:pointer;
}

.financial-cell-editable:hover{
    box-shadow:inset 0 0 0 1px #cbd5e1;
}

.financial-inline-input{
    width:100%;
    min-width:90px;
    height:30px;
    padding:2px 7px;
    font-size:13px;
    border:1px solid #94a3b8;
    border-radius:5px;
}

.financial-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.financial-status-active{ background:#dcfce7; color:#166534; }
.financial-status-closed{ background:#e5e7eb; color:#374151; }

@media (max-width:900px){
    .financial-totals{ grid-template-columns:1fr; }
}

.financial-drag-handle{
    cursor:grab;
}

.financial-drag-handle:active{
    cursor:grabbing;
}

.financial-row-dragging{
    opacity:.4;
}

.financial-row-drag-over{
    box-shadow:inset 0 3px 0 0 #2563eb;
}

.financial-row-highlight,
.search-row-highlight{
    background:#fef3c7 !important;
    box-shadow:inset 0 0 0 2px #f59e0b;
    animation:financial-highlight-pulse 1.4s ease-in-out 2;
}

@keyframes financial-highlight-pulse{
    0%, 100%{ background:#fef3c7; }
    50%{ background:#fde68a; }
}

/* ===========================
   INFO FEED
=========================== */

.cfm-info-section{
    width:100%;
    box-sizing:border-box;
}

.cfm-info-title{
    margin:0 0 18px 0;
    font-size:22px;
    font-weight:600;
}

.cfm-info-add-area{
    width:100%;
    margin-bottom:18px;
}

.cfm-info-textarea{
    display:block;
    width:100%;
    min-height:100px;
    box-sizing:border-box;
    padding:12px;
    resize:vertical;
    border:1px solid #d1d5db;
    border-radius:6px;
    font-family:inherit;
    font-size:14px;
    line-height:1.5;
    background:#fff;
}

.cfm-info-textarea:focus{
    outline:none;
    border-color:#2563eb;
}

.cfm-info-add-row{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
}

.cfm-info-add-btn{
    padding:9px 22px;
    border:none;
    border-radius:6px;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:opacity .15s ease;
}

.cfm-info-add-btn:hover{
    opacity:.85;
}

.cfm-info-search-area{
    width:100%;
    margin-bottom:15px;
}

.cfm-info-search{
    width:100%;
    max-width:400px;
    box-sizing:border-box;
    padding:9px 12px;
    border:1px solid #d1d5db;
    border-radius:6px;
    font-family:inherit;
    font-size:14px;
}

.cfm-info-search:focus{
    outline:none;
    border-color:#2563eb;
}

.cfm-info-table-wrap{
    width:100%;
    overflow-x:auto;
}

.cfm-info-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    background:#fff;
}

.cfm-info-table th,
.cfm-info-table td{
    padding:8px 12px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
}

.cfm-info-table td .secondary-btn,
.cfm-info-table td .danger-btn{
    padding:6px 12px;
    font-size:13px;
}

.cfm-info-table th:nth-child(1), .cfm-info-table td:nth-child(1){ width:16%; }
.cfm-info-table th:nth-child(2), .cfm-info-table td:nth-child(2){ width:52%; }
.cfm-info-table th:nth-child(3), .cfm-info-table td:nth-child(3){ width:15%; }
.cfm-info-table th:nth-child(4), .cfm-info-table td:nth-child(4){ width:17%; }

.cfm-info-text-cell{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.5;
}

@media (max-width:700px){
    .cfm-info-table{ min-width:700px; }
    .cfm-info-textarea{ min-height:120px; }
}

.clickable-row:hover{
    background:#f8fafc;
}

.business-row-active,
.business-row-active td{
    background:#eff6ff !important;
    font-weight:600;
}

.business-details-card{
    background:#f8fafc;
    border-radius:8px;
    padding:20px;
    margin:10px 0;
}

.business-details-card h3{
    margin-bottom:14px;
}

.same-address{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 0;
    font-weight:600;
    cursor:pointer;
}

.business-mailing-checkbox{
    width:16px;
    height:16px;
    margin:0;
    cursor:pointer;
}

.icon-btn{
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#f3f4f6;
    cursor:pointer;
    font-size:18px;
}

.icon-btn:hover{
    background:#e5e7eb;
}

.large-modal{
    width:95%;
    max-width:1100px;
}

.section-buttons{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

/* ===========================
   DOCUMENTS
=========================== */

.documents-section-header{
    cursor:pointer;
    padding-bottom:10px;
}

.documents-section-collapsed{
    display:none;
}

.document-thumbnail{
    width:60px;
    height:60px;
    border-radius:6px;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
    font-size:28px;
}

.document-thumbnail-image{
    width:60px;
    height:60px;
    object-fit:cover;
    display:block;
}

.business-document-group{
    margin-bottom:28px;
}

.business-document-group h3{
    margin:0 0 10px;
}

/* ===========================
   CREDIT REPORT
=========================== */

.cr-scores-row{
    display:flex;
    gap:16px;
    margin-bottom:10px;
}

.cr-score-card{
    flex:1;
    border-radius:10px;
    overflow:hidden;
    text-align:center;
    border:1px solid #e5e7eb;
    padding-bottom:14px;
}

.cr-score-header{
    padding:10px;
    color:#fff;
    font-weight:700;
    font-size:14px;
}

.cr-score-value{
    margin-top:-30px;
    font-size:30px;
    font-weight:700;
    color:#1e293b;
}

.cr-bureau-transunion{ background:#0ea5c4; color:#0ea5c4; }
th.cr-bureau-transunion, div.cr-score-header.cr-bureau-transunion{ color:#fff; }
.cr-bureau-experian{ background:#1e3a8a; color:#1e3a8a; }
th.cr-bureau-experian, div.cr-score-header.cr-bureau-experian{ color:#fff; }
.cr-bureau-equifax{ background:#b91c1c; color:#b91c1c; }
th.cr-bureau-equifax, div.cr-score-header.cr-bureau-equifax{ color:#fff; }

.cr-account-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cr-account-card{
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:12px 16px;
}

.cr-account-header{
    cursor:pointer;
}

/* ===========================
   CHAT WIDGET — bottom-right, must stay usable even during the
   Loading/Success/Failure status modal (which sits at z-index 99999).
=========================== */

#chat-widget-button{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:100001;
    width:56px;
    height:56px;
    border-radius:50%;
    border:none;
    background:#2F80ED;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

#chat-widget-button:hover{
    background:#1f6fd8;
}

#chat-widget-button svg{
    width:26px;
    height:26px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chat-widget-panel{
    position:fixed;
    bottom:86px;
    right:20px;
    width:320px;
    height:440px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    z-index:100000;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.chat-widget-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 16px;
    background:#2F80ED;
    color:#fff;
    font-weight:700;
    font-size:14px;
}

.chat-widget-back{
    background:none;
    border:none;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    padding:0 4px 0 0;
}

.chat-widget-user-list{
    flex:1;
    overflow-y:auto;
}

.chat-widget-user-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 16px;
    cursor:pointer;
    border-bottom:1px solid #f1f5f9;
}

.chat-widget-user-row:hover{
    background:#f8fafc;
}

.chat-widget-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0;
}

.chat-widget-status-dot.online{ background:#22c55e; }
.chat-widget-status-dot.offline{ background:#cbd5e1; }

.chat-widget-user-name{
    flex:1;
    font-size:13px;
    color:#334155;
}

.chat-widget-unread-badge{
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:9px;
    background:#e11d48;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-align:center;
}

.chat-widget-empty{
    padding:24px 16px;
    text-align:center;
    color:#94a3b8;
    font-size:13px;
}

.chat-widget-conversation{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
}

.chat-widget-messages{
    flex:1;
    overflow-y:auto;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.chat-typing-indicator{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 12px 6px;
    color:#94a3b8;
    font-size:11px;
    font-style:italic;
}

.chat-typing-dots{
    display:inline-flex;
    gap:3px;
}

.chat-typing-dots span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#94a3b8;
    animation:chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing-dots span:nth-child(2){ animation-delay:0.15s; }
.chat-typing-dots span:nth-child(3){ animation-delay:0.3s; }

@keyframes chat-typing-bounce{
    0%, 60%, 100% { transform:translateY(0); opacity:.5; }
    30% { transform:translateY(-4px); opacity:1; }
}

.chat-widget-bubble{
    max-width:75%;
    padding:8px 12px;
    border-radius:14px;
    font-size:13px;
    line-height:1.4;
    word-break:break-word;
}

.chat-widget-bubble.mine{
    align-self:flex-end;
    background:#2F80ED;
    color:#fff;
    border-bottom-right-radius:3px;
}

.chat-widget-bubble.theirs{
    align-self:flex-start;
    background:#f1f5f9;
    color:#334155;
    border-bottom-left-radius:3px;
}

.chat-widget-input-row{
    display:flex;
    gap:8px;
    padding:10px;
    border-top:1px solid #edf1f5;
}

.chat-widget-input-row input{
    flex:1;
    height:36px;
}

.chat-widget-input-row button{
    height:36px;
    padding:0 14px;
    border:none;
    border-radius:6px;
    background:#2F80ED;
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

/* ===========================
   CHAT WIDGET — extras (timestamps, icon buttons, emoji picker,
   attachments, groups, full-screen expand/minimize)
=========================== */

.chat-widget-bubble-meta{
    font-size:8px;
    opacity:.65;
    margin-top:2px;
    line-height:1.1;
}

.chat-widget-icon-btn{
    background:#f1f5f9;
    border:none;
    border-radius:50%;
    width:32px;
    height:32px;
    flex-shrink:0;
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    color:#64748b;
    transition:background .15s ease, color .15s ease;
}

.chat-widget-icon-btn:hover{
    background:#e2e8f0;
    color:#334155;
}

.chat-emoji-picker{
    position:absolute;
    bottom:56px;
    left:10px;
    width:220px;
    max-height:140px;
    overflow-y:auto;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
    padding:8px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    z-index:5;
}

.chat-emoji-option{
    font-size:18px;
    cursor:pointer;
    padding:3px;
    border-radius:4px;
}

.chat-emoji-option:hover{
    background:#f1f5f9;
}

.chat-widget-attachment{
    margin-top:4px;
    padding:6px 10px;
    background:rgba(255,255,255,.15);
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
    display:inline-block;
}

.chat-widget-bubble.theirs .chat-widget-attachment{
    background:#e2e8f0;
}

.chat-widget-attachment-image{
    max-width:160px;
    max-height:160px;
    border-radius:6px;
    display:block;
}

.chat-widget-conversation{
    position:relative;
}

.chat-widget-group-header{
    padding:8px 16px;
    font-size:11px;
    font-weight:700;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:.03em;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-widget-new-group-btn{
    background:none;
    border:none;
    color:#2F80ED;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.chat-widget-sender-name{
    font-size:11px;
    font-weight:700;
    color:#2F80ED;
    margin-bottom:2px;
}

.chat-new-group-form{
    flex:1;
    overflow-y:auto;
    padding:14px;
}

.chat-new-group-members{
    max-height:180px;
    overflow-y:auto;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:6px 10px;
}

.chat-new-group-member-row{
    display:block;
    font-weight:400;
    font-size:13px;
    padding:5px 0;
    cursor:pointer;
}

.chat-widget-delete-group-btn{
    background:none;
    border:none;
    color:#fecaca;
    font-size:12px;
    cursor:pointer;
    text-decoration:underline;
}

/* ---- Expand / minimize ---- */

.chat-widget-body{
    flex:1;
    display:flex;
    min-height:0;
}

#chat-widget-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:99999;
}

.chat-widget-panel.expanded{
    top:5%;
    left:5%;
    bottom:5%;
    right:5%;
    width:auto;
    height:auto;
    border-radius:12px;
}

.chat-widget-panel.expanded .chat-widget-body{
    flex-direction:row;
}

.chat-widget-panel.expanded .chat-widget-user-list{
    width:280px;
    flex:0 0 280px;
    border-right:1px solid #edf1f5;
    display:block !important;
}

.chat-widget-panel.expanded .chat-widget-conversation{
    display:flex !important;
}

.chat-widget-panel.expanded #chat-widget-back{
    display:none !important;
}

.chat-widget-header .chat-widget-icon-btn{
    background:rgba(255,255,255,.15);
    color:#fff;
}

.chat-widget-header .chat-widget-icon-btn:hover{
    background:rgba(255,255,255,.28);
    color:#fff;
}

.chat-widget-user-row.active{
    background:#eff6ff;
}