/* YTO Advisor (Web) — replica of the Windows Advisor 1.0.0.0 look. Palette sampled from screenshots. */
:root{
  --adv-blue:#4c7aab;        /* header / sidebar / active sub-tab */
  --adv-blue-dark:#3e6085;   /* sidebar "Collapse" row */
  --adv-blue-2:#6382b2;      /* active sub-tab */
  --adv-bg:#dde4f4;          /* content background */
  --adv-tabbar:#cedeee;      /* tab strip */
  --adv-tab-active:#b1cae0;
  --adv-th:#ebeff8;          /* table header / odd rows */
  --adv-row2:#f4f6fa;
  --adv-border:#c9d3e3;
  --adv-text:#333;
  --adv-link:#3f7ad2;
  --el-color-primary:#409EFF;
  font-size:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:Arial,"Segoe UI","Microsoft YaHei",Helvetica,sans-serif;font-size:12px;color:var(--adv-text);-webkit-font-smoothing:antialiased}
a{color:var(--adv-link);text-decoration:none}

/* ============================================================== login (YTDK Advisor window) */
.login-body{background:#e9eef5;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:12px}
.login-win{width:338px;max-width:100%;background:#a5c3e5;box-shadow:0 2px 14px rgba(0,0,0,.18);border:1px solid #8fb0d6;position:relative;overflow:hidden}
.login-top{height:104px;position:relative;
  background:#a5c3e5 radial-gradient(ellipse 320px 120px at 40% 105%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.login-top:before{content:"";position:absolute;left:118px;top:38px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}
.login-top:after{content:"";position:absolute;left:70px;top:22px;width:210px;height:60px;border-top:1px solid rgba(255,255,255,.55);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(14deg);pointer-events:none}
.login-titlebar{display:flex;align-items:center;height:34px;padding:0 8px;color:#fff;font-size:13px;position:relative;z-index:1}
.login-titlebar .signal{display:inline-flex;align-items:flex-end;height:14px;gap:2px;margin-right:8px}
.login-titlebar .signal i{display:block;width:3px;background:#fff}
.login-titlebar .signal i:nth-child(1){height:4px}.login-titlebar .signal i:nth-child(2){height:7px}
.login-titlebar .signal i:nth-child(3){height:10px}.login-titlebar .signal i:nth-child(4){height:13px}
.login-titlebar .ver{flex:1}
.login-titlebar .lang-sel select{height:22px;border:1px solid #bbb;background:#fff;font-size:12px;color:#222;padding:0 4px;width:86px;margin-right:16px}
.login-titlebar .win-btn{font-size:14px;margin-left:12px;cursor:default;opacity:.95}
.login-titlebar .win-btn.close{font-size:16px}
.login-logo{position:absolute;left:0;right:0;top:62px;text-align:center;color:#fff;z-index:1;line-height:1}
.login-logo .yto{font-family:"Arial Black",Impact,Arial,sans-serif;font-weight:900;font-style:italic;font-size:31px;letter-spacing:-2px;margin-right:6px;text-shadow:0 1px 1px rgba(0,0,0,.08)}
.login-logo .adv{font-size:25px;font-weight:400;color:#fff;letter-spacing:.3px}
.login-panel{background:#fff;margin:0 10px 0 10px;padding:56px 32px 26px;min-height:300px}
.login-panel .fld{position:relative;display:flex;align-items:center;height:32px;margin-bottom:22px}
.login-panel .fld input{flex:1;height:32px;border:0;outline:0;background:transparent;font-size:15px;color:#666;font-family:inherit;padding:0 4px}
.login-panel .fld input::placeholder{color:#c0c4cc;font-size:13px}
.login-panel .fld.underline{border-bottom:1px solid #e3e3e3}
.login-panel .fld.underline .who{position:absolute;right:0;top:-16px;font-size:11px;color:#8ea6c4}
.login-panel .fld.grey{background:#e1e1e1;padding:0 4px}
.login-panel .fld.grey input{color:#8c8c8c}
.login-panel .fld.grey.manual{background:#fff;border:1px solid #4f79ab}
.login-panel .fld.grey.manual input{color:#333}
.login-panel .fld.code{border-bottom:0;margin-bottom:8px}
.login-panel .fld.code input{border-bottom:1px solid #4f79ab;max-width:150px}
.login-panel .fld.code .sep{width:1px;height:26px;background:#999;margin:0 8px 0 0}
.login-panel .fld.code .send{font-size:13px;color:#4f79ab;white-space:nowrap;padding-left:4px}
.login-panel .fld.code .send.dis{color:#8fa4c0;cursor:default}
.login-panel .err{min-height:16px;color:#e8443b;font-size:12px;margin:6px 0 30px}
.login-btn{display:block;width:100%;height:40px;border:0;background:#4f79ab;color:#fff;font-size:14px;cursor:pointer;font-family:inherit}
.login-btn:hover{background:#456d9b}
.login-win:after{content:"";display:block;height:30px;background:#c2d3e5;margin-top:0}

/* ============================================================== main frame */
.adv-frame{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--adv-bg);overflow:hidden}
.adv-header{height:30px;background:var(--adv-blue);color:#fff;display:flex;align-items:center;padding:0 10px 0 6px;flex:none;white-space:nowrap;overflow:hidden;position:relative}
.adv-header .logo{display:flex;align-items:baseline;gap:6px;line-height:1;min-width:0}
.adv-header .logo .yto{font-family:"Arial Black",Impact,Arial,sans-serif;font-weight:900;font-style:italic;font-size:22px;letter-spacing:-1.5px}
.adv-header .logo .adv{font-size:18px}
.adv-header .logo .ver{font-size:10px;margin-left:6px;opacity:.95}
.adv-header .spacer{flex:1}
.adv-header .search{position:absolute;left:50%;transform:translateX(-50%);width:178px;height:20px;background:#fff;border-radius:3px;display:flex;align-items:center;padding:0 6px;color:#333}
.adv-header .search svg{width:12px;height:12px;flex:none;color:#4c7aab}
.adv-header .search input{border:0;outline:0;flex:1;height:18px;font-size:11px;font-family:inherit;padding:0 0 0 12px;min-width:0;background:transparent}
.adv-header .search input::placeholder{color:#8a8a8a}
.adv-header .userinfo{font-size:11px;margin-right:26px;cursor:default}
.adv-header .winctl{display:flex;gap:16px;font-size:13px;opacity:.95}
.adv-header .winctl span{cursor:pointer}
.adv-body{display:flex;flex:1;min-height:0;position:relative}
/* sidebar */
.adv-side{width:128px;background:var(--adv-blue);color:#fff;flex:none;padding-top:2px;overflow:hidden;transition:width .15s;user-select:none}
.adv-side.collapsed{width:32px}
.adv-side .item{display:flex;align-items:center;height:25px;padding:0 0 0 8px;font-size:11px;cursor:pointer;white-space:nowrap;opacity:.96}
.adv-side .item:hover{background:rgba(255,255,255,.12)}
.adv-side .item.active{background:var(--adv-blue-dark)}
.adv-side .item svg{width:13px;height:13px;flex:none;margin-right:6px}
.adv-side .item span{overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:4px}  /* 超长项 (Settlement with HQ) 省略号, 同原版 */
.adv-side.collapsed .item span{display:none}
.adv-side.collapsed .item{padding-left:9px}
/* content */
.adv-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.adv-tabbar{height:20px;background:var(--adv-tabbar);display:flex;align-items:flex-end;padding:0 0 0 0;flex:none;position:relative;border-bottom:1px solid #b9cadf}
.adv-tabbar .tab{height:18px;line-height:18px;padding:0 6px;font-size:10px;color:#333;background:#c3d5e8;border:1px solid #a9bfd8;border-bottom:0;margin-right:1px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.adv-tabbar .tab.active{background:#eef2f9;color:#222}
.adv-tabbar .tab .x{font-size:9px;font-weight:bold;color:#444;padding:0 1px;cursor:pointer}
.adv-tabbar .tab .x:hover{color:#e8443b}
.adv-tabbar .closeall{position:absolute;right:8px;top:2px;font-size:11px;color:#555;cursor:pointer}
.adv-content{flex:1;min-height:0;min-width:0;overflow:auto;padding:0}
.adv-page{padding:4px 12px 12px 12px;min-width:0;max-width:100%}
.adv-welcome{padding:40px;color:#5c6b7f;font-size:13px}
/* menu overlay (Service Mgmt) */
.adv-overlay{position:absolute;left:0;top:0;bottom:0;right:120px;background:#fff;z-index:20;padding:6px 12px;overflow:auto;box-shadow:2px 0 6px rgba(0,0,0,.08)}
.adv-overlay .grp{margin-bottom:14px;width:max-content;padding:4px 6px 4px 4px;border:2px solid transparent;border-radius:3px}
.adv-overlay .grp.hl{border-color:#e8443b}
.adv-overlay .grp.hl a{max-width:100px}
.adv-overlay .grp h4{margin:0 0 6px;font-size:12px;font-weight:bold;font-family:"Times New Roman",Times,Georgia,serif;color:#222}
.adv-overlay .grp h4:before{content:"\25CF";font-size:7px;vertical-align:middle;margin-right:5px;position:relative;top:-1px}
.adv-overlay .grp a{display:block;font-size:11px;color:#555;padding:2px 0 2px 14px;font-family:"Times New Roman",Times,Georgia,serif;max-width:190px;line-height:1.25;cursor:default}
.adv-overlay .grp a.on{color:#333;cursor:pointer}
.adv-overlay .grp a.on:hover{color:#3f7ad2}
.adv-overlay .grp a.off{color:#aaa}
.adv-overlay .grp a.off:hover:after{content:" (Coming soon)";color:#bbb}

/* ============================================================== COD monitoring page */
.cod-subtabs{display:flex;gap:2px;margin:0 0 2px 0}
.cod-subtabs .st{height:24px;line-height:24px;padding:0 15px;background:#fff;color:#333;font-size:12px;cursor:pointer;border:1px solid #d5dde9;border-bottom:0}
.cod-subtabs .st.active{background:var(--adv-blue-2);color:#fff;border-color:var(--adv-blue-2)}
.cod-filters{padding:2px 8px 6px 8px}
.cod-time-row{display:flex;align-items:center;gap:10px;height:24px;margin-bottom:2px;padding-left:8px;font-size:12px}
.cod-time-row .lbl{color:#333}
.cod-time-row .el-radio{margin-right:6px;height:auto}
.cod-time-row .el-radio__label{font-size:12px;padding-left:6px;color:#555}
.cod-time-row .el-radio.is-checked .el-radio__label{color:#4f79ab}
.cod-time-row .warn{color:#f0453a;font-size:12px;margin-left:8px}
.cod-grid{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:6px 14px;align-items:start}
.cod-grid .f{min-width:0}
.cod-grid .f label{display:block;font-weight:bold;font-size:11.5px;color:#222;margin:2px 0 2px}
.cod-grid .f label.req:before{content:"* ";color:#f56c6c;font-weight:normal}
.cod-grid .f.tracking{grid-row:1/3}
.cod-grid .f.tracking textarea{height:58px;resize:none}
/* Departure Monitoring – Total view: 5 equal columns (4 filters + empty), Return or not on row 2; label row starts ~12px in like Advisor */
.cod-grid.eq5{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto}
.cod-grid.dep-total{padding-left:12px}
.cod-grid .f .el-input__wrapper,.cod-grid .f .el-textarea__inner,.cod-grid .f .el-select__wrapper,.cod-grid .f .el-date-editor.el-input__wrapper{box-shadow:none;border:1px solid #fff;background:#fff;border-radius:0;min-height:22px}
.cod-grid .f .el-input__inner,.cod-grid .f .el-select__placeholder,.cod-grid .f .el-select__selected-item{height:22px;line-height:22px;font-size:11px}
.cod-grid .f .el-textarea__inner{font-size:11px;font-family:Consolas,Menlo,monospace}
.cod-grid .f .el-date-editor.el-range-editor{width:100%;height:24px;padding:0 6px;justify-content:center}
.cod-grid .f .el-date-editor .el-range-input{font-size:11px;text-align:center}
.cod-grid .f .el-date-editor .el-range-separator{font-size:11px;color:#666}
.cod-grid .f .el-radio-group{display:inline-flex;background:#fff;border:1px solid #dcdfe6}
.cod-grid .f .el-radio-button__inner{height:22px;line-height:20px;padding:0 10px;font-size:11px;border:0;border-radius:0!important;background:#fff;color:#333}
.cod-grid .f .el-radio-button__original-radio:checked+.el-radio-button__inner{background:#4f79ab;border-color:#4f79ab;color:#fff;box-shadow:none}
.cod-grid .f .el-radio-button:first-child .el-radio-button__inner{border-left:0}
.cod-actions{display:flex;align-items:center;margin:6px 0 2px 8px}
.cod-actions .el-button{height:20px;line-height:18px;padding:0 10px;font-size:11px;border-radius:2px}
.cod-actions .el-button--success{background:#5cb02d;border-color:#5cb02d}
.cod-actions .el-button--primary{background:#4f79ab;border-color:#4f79ab}
.cod-actions .el-button--default{background:#fff;border-color:#e3e6ec;color:#333}
.cod-actions .grow{flex:1}
.cod-actions .el-button+.el-button{margin-left:4px}
/* table */
.cod-table-wrap{margin:6px 8px 0 8px;background:#fff;border:1px solid #dfe5ef}
.cod-table{--el-table-header-bg-color:#ebeff8;--el-table-header-text-color:#333;--el-table-row-hover-bg-color:#f5f7fa;--el-table-border-color:#e3e8f1;font-size:11px}
.cod-table .el-table__header th.el-table__cell{padding:6px 0;font-size:11px;font-weight:bold;color:#333;line-height:15px;background:#ebeff8}
.cod-table .el-table__header th .cell{padding:0 5px;line-height:15px;word-break:break-word;white-space:normal;text-align:center}
.cod-table .el-table__body td.el-table__cell{padding:5px 0;line-height:14px;color:#444}
.cod-table .el-table__body td .cell{padding:0 5px;text-align:center;white-space:nowrap}
.cod-table .el-table__body tr.el-table__row--striped td.el-table__cell{background:#f6f7fa}
.cod-table .link{color:#3f7ad2;cursor:pointer}
.cod-table .el-input--small .el-input__wrapper,.cod-table .el-select--small .el-select__wrapper{min-height:20px;height:20px;box-shadow:0 0 0 1px #dcdfe6 inset;border-radius:2px}
.cod-table .el-input--small .el-input__inner,.cod-table .el-select--small .el-select__placeholder,.cod-table .el-select--small .el-select__selected-item{height:20px;line-height:20px;font-size:11px}
.cod-table .el-select--small .el-select__placeholder{color:#c0c4cc}
.cod-table .el-table__footer td.el-table__cell{background:#f0f0f0;color:#333;padding:7px 0;font-size:11px;line-height:14px}
.cod-table .el-table__footer .cell{text-align:center;white-space:nowrap;padding:0 2px;overflow:visible}
.cod-table .el-table__empty-text{font-size:11px}
/* Departure Monitoring – Total | Details view toggle (same look as the sub-tabs, smaller) */
.cod-view-toggle{display:flex;gap:0;margin:10px 8px 4px 8px}
.cod-view-toggle .vt{height:22px;line-height:22px;padding:0 13px;background:#fff;color:#333;font-size:12px;cursor:pointer;border:1px solid #d5dde9;user-select:none}
.cod-view-toggle .vt+.vt{border-left:0}
.cod-view-toggle .vt.active{background:var(--adv-blue-2);color:#fff;border-color:var(--adv-blue-2)}
/* fluid tables (Departure): columns stretch to the full width like the Advisor grid; min-widths keep them scrollable on mobile */
.cod-table-fluid{width:100%}
.cod-pager{display:flex;justify-content:center;align-items:center;padding:12px 0 0;font-size:11px}
.cod-pager .el-pagination{--el-pagination-font-size:11px;--el-pagination-button-height:20px;--el-pagination-button-width:20px}
.cod-pager .el-pagination .el-select{width:82px}
.cod-pager .el-pagination .el-select .el-select__wrapper{min-height:20px;font-size:11px}
.cod-pager .el-pagination .el-pagination__jump .el-input{width:40px}
.cod-pager .el-pagination .el-pagination__jump .el-input__wrapper{min-height:20px}
.cod-pager .el-pagination .el-pagination__total,.cod-pager .el-pagination .el-pagination__jump{font-size:11px;color:#555}
.cod-pending{padding:30px;text-align:center;color:#8a99b3;font-size:12px}
.cod-sync{font-size:10px;color:#8a99b3;padding:4px 8px}

/* ============================================================== responsive (<=760px) */
@media (max-width:760px){
  .adv-header .search{position:static;transform:none;width:auto;flex:1;margin:0 8px}
  .adv-header .logo .adv{display:none}
  .adv-header .logo .ver{display:none}
  .adv-header .userinfo{margin-right:8px;max-width:130px;overflow:hidden;text-overflow:ellipsis}
  .adv-header .winctl{display:none}
  .adv-side{width:32px}
  .adv-side .item span{display:none}
  .adv-overlay{right:0}
  .adv-page{padding:4px 4px 12px}
  .cod-grid{grid-template-columns:minmax(0,1fr)}
  .cod-grid.eq5{grid-template-columns:minmax(0,1fr);padding-left:0}
  .cod-grid.eq5 .f:empty{display:none}
  .cod-grid .f .el-date-editor.el-range-editor{width:100%!important;max-width:100%}
  .cod-grid .f.tracking{grid-row:auto}
  .cod-grid .f .el-radio-group{flex-wrap:wrap}
  .cod-time-row{flex-wrap:wrap;height:auto}
  .cod-actions{flex-wrap:wrap;gap:4px}
  .cod-table-wrap{overflow-x:auto}
  .cod-view-toggle{margin:8px 4px 4px}
  .cod-pager{flex-wrap:wrap}
  .cod-pager .el-pagination{flex-wrap:wrap;justify-content:center}
}