.dashboard-container{padding:20px;font-family:Noto Sans Thai,sans-serif;color:#222;margin-left:240px}.card-container{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}.card-row{display:flex;gap:24px;width:100%}.card{flex:1 1 0;min-width:0;max-width:32%;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;padding:0 20px;display:flex;align-items:center;gap:18px;transition:box-shadow .2s;min-height:80px;height:auto;overflow:hidden}.card-content{display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;padding:0}.card-content>div{text-align:left;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;height:100%;overflow:hidden}.card p{margin:0;font-size:15px;color:#666;line-height:1.1}.card h3{margin:0;font-size:16px;font-weight:700;color:#111;line-height:1.1}.icon{font-size:28px;margin-left:auto;color:inherit;align-self:center}.card.purple{border-left:5px solid #3f51b5}.card.green{border-left:5px solid #4caf50}.card.yellow{border-left:5px solid #ffb300}.card.pink{border-left:5px solid #ff009d}.card.red{border-left:5px solid #f44336}.tables-container{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}.table-card{flex:1 1 400px;background:#fff;border-radius:8px;box-shadow:0 2px 5px #0000001a;overflow:hidden;align-self:flex-start}.table-header{background:#1976d2;color:#fff;padding:10px 16px;font-weight:700;display:flex;align-items:center;gap:8px}.table-card table{width:100%;border-collapse:collapse}.table-card td{padding:8px;border:1px solid #ccc;vertical-align:middle;text-align:center}.table-card img{width:100px;height:65px;object-fit:cover;border-radius:4px}.charts-container{display:flex;flex-direction:column;gap:20px;margin-bottom:40px}.chart-row{display:flex;gap:20px;justify-content:space-between}.chart-card{flex:1;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;padding:20px;min-height:400px}.chart-header{border-bottom:2px solid #f0f0f0;padding-bottom:10px;margin-bottom:20px;text-align:center}.chart-header h3{margin:0;color:#333;font-size:18px;font-weight:600}.chart-content{height:300px;position:relative}.charts-section{margin-top:32px}.charts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.charts-header h2{margin:0;color:#333;font-size:1.7rem}.chart-view-selector{display:flex;background:#f5f5f5;border-radius:8px;padding:4px;gap:4px}.view-btn{padding:10px 20px;border:none;background:transparent;color:#666;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.view-btn:hover{background:#e0e0e0;color:#333}.view-btn.active{background:#1976d2;color:#fff;box-shadow:0 2px 4px #1976d24d}.date-range-selector{background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;padding:20px;margin-bottom:24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.date-input-group{display:flex;flex-direction:column;gap:8px}.date-input-group label{font-size:14px;font-weight:500;color:#333}.date-input-group input[type=date]{padding:10px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;font-family:inherit;transition:border-color .3s ease;min-width:160px}.date-input-group input[type=date]:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.date-range-info{display:flex;align-items:center;padding:10px 16px;background:#f5f5f5;border-radius:6px;margin-left:auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.dashboard-header h2{margin:0;color:#222;font-size:2rem;font-weight:700}.header-buttons{display:flex;gap:12px}.print-buttons{display:flex;gap:12px;margin-top:20px;justify-content:center}.print-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#1976d2;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #1976d24d}.print-btn:hover{background:#1565c0;box-shadow:0 4px 8px #1976d266;transform:translateY(-1px)}.print-btn:active{transform:translateY(0);box-shadow:0 2px 4px #1976d24d}.monthly-charts{display:flex;flex-direction:column;gap:24px}.monthly-chart{background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 4px #0000001a}.monthly-chart h4{margin:0 0 16px;color:#333;font-size:16px;font-weight:600;text-align:center;border-bottom:2px solid #4caf50;padding-bottom:8px}.monthly-details-section{margin-top:32px;padding-top:24px;border-top:2px solid #f0f0f0}.monthly-details-header{margin-bottom:24px}.monthly-details-header h3{margin:0;color:#333;font-size:20px;font-weight:600;text-align:center}.monthly-charts-grid{display:flex;flex-direction:column;gap:32px}.monthly-chart-pair{background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;padding:20px;border-top:3px solid;border-bottom:2px solid}.monthly-chart-pair h4{margin:0 0 20px;color:#333;font-size:18px;font-weight:600;text-align:center;padding-bottom:10px;border-bottom:1px solid #e0e0e0}.monthly-chart-row{display:flex;gap:20px;justify-content:space-between}.monthly-chart{flex:1;background:#fafafa;border-radius:8px;padding:16px;min-height:350px}.monthly-chart .chart-header{border-bottom:1px solid #e0e0e0;padding-bottom:8px;margin-bottom:16px}.monthly-chart .chart-header h5{margin:0;color:#555;font-size:16px;font-weight:500;text-align:center}.monthly-chart .chart-content{height:280px;position:relative}.chart-controls{display:flex;align-items:center;gap:20px}.field-selector{display:flex;align-items:center;gap:8px}.field-select{padding:10px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:500;color:#333;background:#fff;cursor:pointer;transition:all .3s ease;min-width:180px}.field-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.card.blue{border-left:5px solid #2196f3}.field-select:hover{border-color:#1976d2}@media (max-width: 1200px){.chart-row{flex-direction:column}.chart-card{min-height:350px}.chart-content{height:250px}.monthly-chart-row{flex-direction:column}.monthly-chart{min-height:300px}.monthly-chart .chart-content{height:230px}}@media (max-width: 768px){.charts-container{margin-left:0;padding:0 10px}.chart-card{padding:15px;min-height:300px}.chart-content{height:200px}.charts-header{flex-direction:column;gap:16px;align-items:flex-start}.chart-view-selector{width:100%;justify-content:center}.view-btn{flex:1;text-align:center}.date-range-selector{flex-direction:column;align-items:stretch;gap:16px}.date-input-group{width:100%}.date-input-group input[type=date]{width:100%;min-width:auto}.date-range-info{margin-left:0;text-align:center}.chart-controls{flex-direction:column;gap:16px;align-items:stretch}.field-selector{width:100%}.field-select{width:100%;min-width:auto}}@media print{html,body{width:100vw!important;height:100vh!important;background:#fff!important;margin:0!important;padding:0!important;overflow:visible!important}body *{visibility:hidden!important;box-shadow:none!important;background:none!important}.dashboard-container,.dashboard-container *{visibility:visible!important;background:#fff!important;color:#222!important;font-family:Noto Sans Thai,sans-serif!important;box-shadow:none!important}.dashboard-container{margin:0!important;padding:20px!important;width:100vw!important;background:#fff!important;box-shadow:none!important}.card-container{gap:18px!important;margin-bottom:36px!important}.card-row{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important;width:100%!important;margin-bottom:0!important}.card{min-width:0!important;width:100%!important;max-width:none!important;background:#fff!important;border-radius:10px!important;box-shadow:0 2px 8px #00000014!important;padding:0 20px!important;display:flex!important;align-items:center!important;gap:18px!important;min-height:80px!important;height:100px!important;overflow:hidden!important;border-left-width:5px!important;border-left-style:solid!important;page-break-inside:avoid}.card.purple{border-left-color:#3f51b5!important}.card.green{border-left-color:#4caf50!important}.card.yellow{border-left-color:#ffb300!important}.card.pink{border-left-color:#ff009d!important}.card.red{border-left-color:#f44336!important}.icon{font-size:24px!important;margin-left:auto!important;color:inherit!important;align-self:center!important}.card-content{display:flex!important;align-items:center!important;justify-content:space-between!important;height:100%!important;width:100%!important;padding:0!important}.card-content>div{text-align:left!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-width:0!important;height:100%!important;overflow:hidden!important}.card p{margin:0!important;font-size:14px!important;color:#666!important;line-height:1.1!important}.card h3{margin:0!important;font-size:16px!important;font-weight:700!important;color:#111!important;line-height:1.1!important}.charts-section{margin-top:32px!important}.charts-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important}.charts-header h2{margin:0!important;color:#222!important;font-size:2.2rem!important;font-weight:700!important}.chart-view-selector{display:flex!important;background:#f5f5f5!important;border-radius:8px!important;padding:4px!important;gap:4px!important}.view-btn{padding:12px 54px!important;font-size:13px!important;border-radius:6px!important;background:#f5f5f5!important;color:#333!important;border:1px solid #ccc!important;cursor:pointer!important;transition:all .3s ease!important;box-shadow:none!important;white-space:nowrap;line-height:1.5!important}.view-btn.active{background:#1976d2!important;color:#fff!important;border:2px solid #1976d2!important;box-shadow:0 0 0 2px #1976d2!important;outline:none!important;position:relative!important;z-index:1!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.charts-container{display:flex!important;flex-direction:column!important;gap:20px!important;margin-bottom:40px!important}.chart-row{display:flex!important;gap:20px!important;justify-content:space-between!important;align-items:center;margin:0 auto}.chart-card{flex:1!important;background:#fff!important;border-radius:10px!important;box-shadow:0 2px 8px #00000014!important;padding:20px!important;min-height:400px!important;page-break-inside:avoid!important;margin:10px auto 0}.chart-header{border-bottom:2px solid #f0f0f0!important;padding-bottom:10px!important;margin-bottom:20px!important}.chart-header h3{margin:0!important;color:#333!important;font-size:20px!important;font-weight:600!important}.chart-content{height:350px!important;position:relative!important;margin:0 auto}.print-btn,.sidebar{display:none!important}::-webkit-scrollbar{display:none!important}.date-range-selector{display:flex!important;flex-direction:row!important;align-items:center!important;gap:0!important;flex-wrap:nowrap!important;width:100%!important;box-sizing:border-box!important;padding:6px 0!important;margin-bottom:12px!important}.date-input-group{flex:0 0 140px!important;min-width:120px!important;max-width:160px!important;margin-right:10px!important}.date-input-group:last-child{margin-right:0!important}.date-input-group input[type=date]{width:120px!important;min-width:110px!important;font-size:13px!important;padding:4px 8px!important;height:28px!important}.date-range-info{flex:1 1 0!important;min-width:120px!important;margin-left:8px!important;padding:3px 8px!important;white-space:nowrap!important;text-align:left!important}.monthly-charts{page-break-inside:avoid}.monthly-chart{page-break-inside:avoid;margin-bottom:20px}.monthly-details-section{page-break-before:auto;page-break-inside:avoid;margin-top:32px!important}.monthly-chart-pair{page-break-inside:avoid;margin-bottom:20px!important;background:#fff!important;border-left-color:#4caf50!important}.monthly-chart-row{display:flex!important;gap:20px!important;margin:0 auto}.monthly-chart{flex:1!important;background:#fff!important;min-height:350px!important;margin:0 auto}.monthly-chart .chart-content{height:280px!important;margin:0 auto}.field-selector{display:block!important}.field-select{display:block!important;width:100%!important;height:46px;font-size:18px!important;padding:8px!important;text-align:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;margin-bottom:-10px}.chart-view-selector{display:flex!important;justify-content:center!important;gap:10px!important}}@media print{body *{visibility:hidden}body.print-full-page *{visibility:visible!important}body.print-charts-only *{visibility:hidden!important}body.print-charts-only .charts-section,body.print-charts-only .charts-section *{visibility:visible!important}body.print-charts-only .charts-section{position:absolute;top:0;left:0;width:100%}}.sidebar{width:240px;min-height:100vh;max-height:100vh;overflow-y:overlay;padding:2rem 1rem;box-shadow:6px 0 32px #3abef92e,0 12px 48px #3572ef1a;position:fixed;top:0;left:0;text-align:left;z-index:120;background:linear-gradient(180deg,#3abef9,#a7e6ff);scrollbar-width:thin;scrollbar-color:#3572EF #A7E6FF;border-right:3px solid #3ABEF9;transition:box-shadow .2s,background .2s;font-family:Noto Sans Thai,sans-serif;color:#333;scrollbar-gutter:stable}.sidebar:before{width:240px;min-height:100vh;max-height:100vh;overflow-y:auto;padding:2rem 1rem 2rem 1.5rem;box-shadow:6px 0 32px #3abef92e,0 12px 48px #3572ef1a;position:fixed;top:0;left:0;text-align:left;z-index:120;background:linear-gradient(180deg,#3abef9,#a7e6ff);scrollbar-width:thin;scrollbar-color:#3572EF #A7E6FF;border-right:3px solid #3ABEF9;transition:box-shadow .2s,background .2s}.sidebar-title{font-size:2rem;font-weight:700;color:#050c9c;margin-bottom:2rem;text-align:center;letter-spacing:1px;margin-left:0;width:100%;box-sizing:border-box;text-shadow:0 2px 8px #3572EF}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar>ul>li{margin-bottom:.25rem;font-size:.75rem;font-weight:600;color:#3572ef}.sidebar ul ul{margin-top:.2rem;margin-left:1.2rem;border-left:2px solid #050C9C;padding-left:.7rem;border-radius:0 0 8px 8px}.sidebar li{transition:background .15s;border-radius:6px}.sidebar a,.sidebar-parent{padding:.22rem .5rem;color:#050c9c;text-decoration:none;display:block;border-radius:4px;transition:background .15s,color .15s;font-size:1.08rem;font-weight:600;line-height:1.5;text-align:left;justify-content:flex-start}.sidebar a:hover,.sidebar-parent:hover,.sidebar-parent:focus{background:#3572ef;color:#fff}.sidebar ul ul li a{font-size:.8rem;font-weight:400;color:#050c9c;padding:.18rem .5rem}.sidebar-parent{width:100%;background:none;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:1.08rem;font-weight:600;color:#050c9c;padding:.3rem .5rem;border-radius:4px;transition:background .15s,color .15s;margin:0;line-height:1.5}.sidebar-parent:focus{outline:none;box-shadow:none}.arrow{font-size:.95em;color:#05f;margin-left:8px;transition:transform .2s}.sidebar-parent span.arrow{margin-left:auto}.sidebar a.active{background-color:#050c9c;color:#fff!important;box-shadow:0 2px 8px #3572ef}.sidebar-parent.active{background-color:#050c9c;color:#fff;box-shadow:0 2px 8px #3572ef}.sidebar-parent.active .arrow{color:#fff}.sidebar::-webkit-scrollbar{width:6px;background:#a7e6ff}.sidebar::-webkit-scrollbar-thumb{background:#3572ef;border-radius:8px}.sidebar::-webkit-scrollbar-thumb:hover{background:#050c9c}.navbar-dashboard{position:fixed;top:0;left:240px;width:calc(100vw - 240px);height:80px;background:linear-gradient(90deg,#3abef9,#050c9c 60%,#3572ef);color:#fff;display:flex;align-items:center;z-index:1000;box-sizing:border-box;padding:0 2rem;box-shadow:0 2px 16px #3572ef1f,0 4px 24px #050c9c14;border-bottom:2px solid #3572EF;transition:box-shadow .2s,background .2s;font-family:Noto Sans Thai,sans-serif;color:#333}@media (max-width: 800px){.navbar-dashboard{left:0;width:100vw;padding:0 1rem}}.navbar-dashboard-profile{margin-left:auto;color:#fff;font-weight:700;display:flex;align-items:center;cursor:pointer;position:relative;min-width:160px;-webkit-user-select:none;user-select:none}.navbar-dashboard-profile-info{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:24px;transition:background .2s}.navbar-dashboard-profile-info:hover{background:#ffffff14}.navbar-dashboard-profile-img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #eee}.navbar-dashboard-profile-name{font-size:1rem;color:#fff;font-weight:500;margin-right:4px}.navbar-dashboard-profile-arrow{font-size:.9rem;color:#fff;margin-left:2px}.navbar-dashboard-dropdown{position:absolute;top:54px;right:0;background:#fff;color:#333;border-radius:12px;box-shadow:0 4px 16px #0000002e;min-width:180px;z-index:1001;padding:8px 0;animation:fadeInDropdown .18s;border:1px solid #e0e0e0;display:flex;flex-direction:column;gap:0}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.navbar-dashboard-dropdown-btnbox{display:flex;flex-direction:column;gap:0;border-radius:10px;overflow:hidden;background:#f8fafd;box-shadow:0 2px 8px #e3f2fd;margin:0 8px}.navbar-dashboard-logout-btn{width:100%;height:44px;padding:2px 18px;background:none;border:none;text-align:left;cursor:pointer;font-size:1rem;color:#333;border-radius:0;transition:background .15s,color .15s}.navbar-dashboard-logout-btn:first-child{border-bottom:1px solid #e0e0e0}.navbar-dashboard-logout-btn:hover,.navbar-dashboard-logout-btn.active{background:#e3f2fd;color:#1976d2}