﻿/* ProDashboard.css - consolidated: last declaration wins */
.ProDashboard{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:9999;
    display:none;
    background:rgba(70,85,100,.30);
    box-sizing:border-box;
}
.ProDashboardWindow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:84%;
    height:70%;
    padding:8px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    background:rgba(245,250,255,.96);
    border:2px solid #b08d3b;
    border-radius:6px;
    box-shadow:0 5px 20px rgba(40,60,80,.28);
    font:11px Tahoma,Arial;
    overflow:hidden;
}
.ProDashboardTitleBar{
    height:32px;
    min-height:32px;
    margin:-8px -8px 7px -8px;
    padding:0 5px 0 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    background:linear-gradient(#dceeff,#a9c9e8);
    border-bottom:1px solid #7f9db9;
}
.ProDashboardTitleText{
    color:#1f344a;
    font:bold 12px Tahoma,Arial;
}
.btnProDashboardClose{
    width:25px;
    height:21px;
    padding:0;
    background:linear-gradient(#ffb5a8,#d94b36)!important;
    border:1px solid #8c2f22!important;
    border-radius:2px;
    color:#fff!important;
    font:bold 11px Tahoma,Arial;
    cursor:pointer;
}
.ProDateBar{
    width:100%;
    height:38px;
    min-height:38px;
    margin-bottom:7px;
    padding:4px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-sizing:border-box;
    background:linear-gradient(#fff,#e7eff6);
    border:1px solid #b2c2cf;
    border-radius:3px;
}
.ProDateItem{
    display:flex;
    align-items:center;
    gap:5px;
    color:#34495e;
    font:bold 10px Tahoma,Arial;
}
.ProDateText{
    width:105px;
    height:24px;
    padding:2px 5px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #8da8be;
    border-radius:2px;
    color:#34495e;
    font:10px Tahoma,Arial;
    text-align:center;
}
.ProDateLeft{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
}
.ProDateRight{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin-left:auto;
    white-space:nowrap;
}
.ProTimerLabel{
    color:#34495e;
    font:bold 10px Tahoma,Arial;
}
.ProTimerDisplay{
    min-width:75px;
    height:24px;
    padding:0 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #8da8be;
    border-radius:3px;
    color:#315f86;
    font:bold 12px Consolas,Tahoma,Arial;
    font-variant-numeric:tabular-nums;
}
.btnDashboardStart{
    height:24px;
    min-width:52px;
    padding:0 9px;
    background:linear-gradient(#e5f7eb,#91d4a5);
    border:1px solid #5aab75;
    border-radius:3px;
    color:#22663b;
    font:bold 10px Tahoma,Arial;
    cursor:pointer;
}
.btnDashboardStop{
    height:24px;
    min-width:52px;
    padding:0 9px;
    background:linear-gradient(#ffe9e6,#e9a29a);
    border:1px solid #c67b72;
    border-radius:3px;
    color:#9a3028;
    font:bold 10px Tahoma,Arial;
    cursor:pointer;
}
.btnDashboardStart:hover{
    background:linear-gradient(#d5f2df,#70c88d);
}
.btnDashboardStop:hover{
    background:linear-gradient(#ffddd8,#df8177);
}
.btnDashboardRefresh{
    height:24px;
    padding:0 15px;
    background:linear-gradient(#fff,#d9e7f2)!important;
    border:1px solid #7f9db9!important;
    border-radius:2px;
    color:#29455d!important;
    font:bold 10px Tahoma,Arial;
    cursor:pointer;
}
.ProDashboardContent{
    width:100%;
    min-height:0;
    flex:1;
    display:grid;
    grid-template-columns:1.18fr 1fr 1fr 1fr;
    gap:7px;
    box-sizing:border-box;
    overflow:hidden;
}
.ProBranch{
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    display:grid;
    grid-template-rows:32px 24px 150px 24px 150px 29px minmax(80px,1fr);
    box-sizing:border-box;
    background:#f7f9fb;
    border:1px solid #aebfcd;
    border-radius:3px;
    overflow:hidden;
}
.ProMainBranch{
    background:#f5f9fc;
    border:2px solid #789dbb;
    box-shadow:0 0 8px rgba(49,95,134,.18);
}
.ProBranchTitle{
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    box-sizing:border-box;
    background:linear-gradient(#fff,#e3edf5,#c7d7e4);
    border-bottom:1px solid #91a9bc;
    color:#34495e;
    font:bold 11px Tahoma,Arial;
    text-align:center;
}
.ProMainTitle{
    background:linear-gradient(#dcefff,#a9cce8);
    color:#183b58;
    font:bold 12px Tahoma,Arial;
}
.ProSectionTitle{
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    box-sizing:border-box;
    background:linear-gradient(#f8fbfd,#dce7f0);
    border-bottom:1px solid #bccbd6;
    color:#496274;
    font:bold 10px Tahoma,Arial;
    text-align:center;
}
.ProBranchSection{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 128px;
    align-items:center;
    gap:12px;
    padding:5px;
    box-sizing:border-box;
    background:#fff;
    overflow:hidden;
}
.ProMainBranch .ProBranchSection{
    grid-template-columns:minmax(0,1fr) 135px;
}
.ProAccounts{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:1px;
    box-sizing:border-box;
}
.ProAccount{
    width:calc(100% - 8px);
    min-width:0;
    height:42px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 6px;
    box-sizing:border-box;
    background:#f8fafc;
    border:1px solid #e0e7ed;
    border-radius:3px;
    color:#34495e!important;
    font:10px Tahoma,Arial;
    text-decoration:none!important;
    cursor:pointer;
}
.ProAccount:hover{
    background:#eaf4fd;
    border-color:#9cbcd8;
    color:#34495e!important;
    text-decoration:none!important;
}
.ProAccount:focus{
    color:#34495e!important;
    text-decoration:none!important;
    outline:none;
}
.ProAccountSelected{
    background:#d9ecff!important;
    border-color:#7f9db9!important;
    box-shadow:inset 3px 0 0 #477fae;
}
.ProAccountText{
    display:block;
    min-width:0;
    flex:1;
}
.ProAccountText span{
    display:block;
    color:#34495e;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ProAccountText strong{
    display:block;
    margin-top:3px;
    color:#315f86;
    font:bold 12px Tahoma,Arial;
    direction:ltr;
    text-align:left;
    white-space:nowrap;
}
.ProDot{
    width:9px;
    height:9px;
    min-width:9px;
    min-height:9px;
    display:block;
    border-radius:50%;
}
.DotRed{
    background:#d85b52;
}
.DotOrange{
    background:#e9822c;
}
.DotGreen{
    background:#38a47a;
}
.DotBlue{
    background:#4d9ac1;
}
.ProBalanceArea{
    min-width:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}
.ProBalanceCircle{
    position:relative;
    width:94px;
    height:94px;
    min-width:94px;
    min-height:94px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    box-sizing:border-box;
    border:none;
    border-radius:50%;
    text-decoration:none!important;
    cursor:pointer;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.ProBalanceCircle:before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:74px;
    height:74px;
    transform:translate(-50%,-50%);
    background:#fff;
    border-radius:50%;
    z-index:1;
}
.ProBalanceCircle:after{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:2px;
    height:10px;
    transform:translateX(-50%);
    background:#fff;
    z-index:2;
}
.ProBalanceCircle:hover{
    box-shadow:0 2px 9px rgba(0,0,0,.25);
    text-decoration:none!important;
}
.ProBalanceCircle:focus{
    outline:none;
    text-decoration:none!important;
}
.ProFinancialCircle{
    background:#38a47a;
}
.ProMainCircle{
    width:122px;
    height:122px;
    min-width:122px;
    min-height:122px;
    box-shadow:0 2px 9px rgba(49,95,134,.25);
}
.ProMainCircle:before{
    width:96px;
    height:96px;
}
.ProMainCircle:after{
    height:13px;
}
.ProBalanceInside{
    position:relative!important;
    z-index:10!important;
    width:68px;
    display:block!important;
    color:#1f344a;
    font:9px Tahoma,Arial;
    text-align:center;
    visibility:visible!important;
    opacity:1!important;
}
.ProBalanceInside span{
    display:block;
    margin-bottom:4px;
    color:#536979;
    position:relative;
    z-index:10;
}
.ProBalanceInside strong{
    display:block!important;
    color:#315f86;
    font:bold 13px Tahoma,Arial;
    direction:ltr;
    text-align:center;
    white-space:nowrap;
    position:relative;
    z-index:10;
    visibility:visible!important;
    opacity:1!important;
}
.ProFinancialCircle .ProBalanceInside strong{
    color:#278361;
}
.ProMainBalanceInside{
    width:88px;
}
.ProMainBalanceInside span{
    font:bold 10px Tahoma,Arial;
}
.ProMainBalanceInside strong{
    font:bold 17px Tahoma,Arial;
}
.ProDetailsTitle{
    height:29px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5px;
    box-sizing:border-box;
    background:linear-gradient(#dceeff,#bdd8ed);
    border-top:1px solid #9fb6c9;
    border-bottom:1px solid #7f9db9;
    color:#1f344a;
    font:bold 10px Tahoma,Arial;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ProMainBranch .ProDetailsTitle{
    background:linear-gradient(#cfe7fa,#9fc9e9);
}
.ProGridArea{
    position:relative;
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    padding:4px;
    box-sizing:border-box;
    background:#eef3f8;
    overflow:auto;
}
.ProGrid{
    width:100%;
    min-width:100%;
    margin:0;
    padding:0;
    border-collapse:collapse;
    border-spacing:0;
    table-layout:fixed;
    background:#fff;
    color:#34495e;
    font:9px Tahoma,Arial;
}
.ProGrid th{
    position:sticky;
    top:0;
    z-index:5;
    height:25px;
    padding:3px 4px;
    box-sizing:border-box;
    background:linear-gradient(#d9ecff,#a9c9e8);
    border:1px solid #7f9db9;
    color:#1f344a;
    font:bold 9px Tahoma,Arial;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ProGrid td{
    height:23px;
    padding:3px 4px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #d1dce5;
    color:#34495e;
    font:9px Tahoma,Arial;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ProGrid tr:nth-child(even) td{
    background:#f7f9fb;
}
.ProGrid tr:hover td{
    background:#d9ecff;
}
.ProGrid th:first-child,
.ProGrid td:first-child{
    display:none;
}
.ProGrid th:nth-child(2),
.ProGrid td:nth-child(2){
    width:12%;
}
.ProGrid th:last-child,
.ProGrid td:last-child{
    width:40%;
}
.ProGridArea::-webkit-scrollbar{
    width:7px;
    height:7px;
}
.ProGridArea::-webkit-scrollbar-track{
    background:#e3e9ee;
}
.ProGridArea::-webkit-scrollbar-thumb{
    background:#aebdca;
    border-radius:4px;
}
.ProGridArea::-webkit-scrollbar-thumb:hover{
    background:#8fa4b6;
}
.ProBalanceInside strong span{
    display:inline!important;
    margin:0!important;
    color:inherit!important;
    visibility:visible!important;
    opacity:1!important;
}
.ProChartCircle{
    width:122px;
    height:122px;
    min-width:122px;
    min-height:122px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#d9e4ed;
    box-shadow:0 2px 9px rgba(49,95,134,.25);
    box-sizing:border-box;
}
.ProChartCircleInside{
    width:96px;
    height:96px;
    border-radius:50%;
    background:#fff!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    color:#536979!important;
    text-align:center;
    text-decoration:none!important;
    position:relative;
    z-index:2;
}
.ProChartCircleInside span{
    display:block;
    margin-bottom:4px;
    color:#536979!important;
    font:bold 10px Tahoma,Arial;
}
.ProChartCircleInside strong{
    display:block;
    color:#315f86!important;
    font:bold 17px Tahoma,Arial;
    line-height:20px;
}
.ProChartCircleInside strong span{
    display:inline!important;
    margin:0!important;
    color:inherit!important;
    font:inherit!important;
}
.ProChartCircleInside:hover{
    text-decoration:none!important;
}
@media(max-width:1300px){
    .ProDashboardWindow{
        width:85%;
        height:77%;
    }
    .ProDashboardContent{
        grid-template-columns:1.18fr 1fr 1fr 1fr;
        gap:7px;
        overflow:hidden;
    }
}
.ProAccounts1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
}
.ProAccounts2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    box-sizing: border-box;
}
.ProAccounts1 .ProAccount,
.ProAccounts2 .ProAccount {
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #d5e0e9;
    border-radius: 3px;
    color: #34495e !important;
    text-decoration: none !important;
}
.ProAccounts1 .ProAccountText,
.ProAccounts2 .ProAccountText {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.ProAccounts1 .ProAccountText span,
.ProAccounts2 .ProAccountText span {
    display: block;
    font: 10px Tahoma, Arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ProAccounts1 .ProAccountText strong,
.ProAccounts2 .ProAccountText strong {
    display: block;
    margin-top: 3px;
    font: bold 12px Tahoma, Arial;
    color: #315f86;
    text-align: left;
}
.ProAccounts2 .ProDot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
}
.ProBranchSection > .ProAccounts > .ProAccount{width:100%;box-sizing:border-box}
.ProAccounts1 .ProAccount:hover{background:#eaf4fd!important;border-color:#9cbcd8!important;color:#34495e!important;text-decoration:none!important}
.ProAccounts1 .ProAccount:hover .ProAccountText span{color:#34495e!important}
.ProAccounts1 .ProAccount:hover .ProAccountText strong{color:#315f86!important}
.ProAccounts2 .ProAccount:hover{background:#eaf4fd!important;border-color:#9cbcd8!important;color:#34495e!important;text-decoration:none!important}
.ProAccounts2 .ProAccount:hover .ProAccountText span{color:#34495e!important}
.ProAccounts2 .ProAccount:hover .ProAccountText strong{color:#315f86!important}

.ProAccounts1 .ProAccountText > span,
.ProAccounts2 .ProAccountText > span{display:block!important;font:10px Tahoma,Arial!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ProAccounts1 .ProAccountText > strong,
.ProAccounts2 .ProAccountText > strong{display:block!important;margin-top:3px!important;color:#315f86!important;font:bold 12px Tahoma,Arial!important;text-align:left!important;line-height:14px!important}
.ProAccounts1 .ProAccountText > strong span,
.ProAccounts2 .ProAccountText > strong span{display:inline!important;color:inherit!important;font:inherit!important;line-height:inherit!important;white-space:nowrap!important;overflow:visible!important}