
/* RONGTOU UI Pro 1.7.0
   Visual direction created in Figma:
   - deep-navy enterprise sidebar
   - elevated SaaS workspace
   - clearer hierarchy / spacing / cards / tables
   - professional form controls and status treatments
   - keeps all existing application behavior intact
*/
@media screen {
  :root{
    --rt-navy-950:#0c1e35;
    --rt-navy-900:#10273f;
    --rt-navy-850:#15324f;
    --rt-navy-800:#1b3c5e;
    --rt-blue-700:#145bd4;
    --rt-blue-600:#1f67e6;
    --rt-blue-100:#eaf2ff;
    --rt-blue-50:#f4f8ff;
    --rt-slate-950:#0e2035;
    --rt-slate-900:#172b43;
    --rt-slate-800:#243a52;
    --rt-slate-700:#3f5369;
    --rt-slate-600:#5e7288;
    --rt-slate-500:#7d8fa2;
    --rt-slate-300:#cfd9e5;
    --rt-slate-200:#dde5ee;
    --rt-slate-100:#edf2f7;
    --rt-slate-50:#f6f9fc;
    --rt-white:#fff;
    --rt-green-700:#16734a;
    --rt-green-100:#eaf8f0;
    --rt-amber-700:#8a5a00;
    --rt-amber-100:#fff4d8;
    --rt-red-700:#a43838;
    --rt-red-100:#fff0f0;
    --rt-shadow:0 14px 40px rgba(24,55,87,.08),0 2px 8px rgba(24,55,87,.04);
    --rt-shadow-soft:0 4px 18px rgba(24,55,87,.05);
  }

  html{background:var(--rt-slate-50)}
  body{
    background:
      radial-gradient(circle at 82% -8%,rgba(68,134,233,.08),transparent 30rem),
      var(--rt-slate-50);
    color:var(--rt-slate-900);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  button{
    min-height:44px;
    border-radius:10px;
    border:1px solid var(--rt-slate-200);
    background:#fff;
    color:var(--rt-slate-800);
    padding:10px 16px;
    font-weight:600;
    box-shadow:0 1px 2px rgba(16,39,63,.03);
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  button:hover{
    background:#f8fbff;
    border-color:#c7d5e6;
    box-shadow:0 5px 14px rgba(28,67,107,.07);
  }
  button:active{transform:translateY(1px)}
  button.primary{
    background:linear-gradient(180deg,#216be6 0%,#145bd4 100%);
    border-color:#145bd4;
    color:#fff;
    box-shadow:0 7px 18px rgba(20,91,212,.20);
  }
  button.primary:hover{
    background:linear-gradient(180deg,#2b72e9 0%,#185fcf 100%);
    border-color:#185fcf;
  }

  .shell{min-height:100vh}

  .sidebar{
    width:248px;
    padding:28px 26px 24px;
    background:
      linear-gradient(180deg,#10273f 0%,#0d2238 100%);
    border-right:1px solid rgba(255,255,255,.05);
    box-shadow:10px 0 28px rgba(13,34,56,.08);
  }
  .brand{
    gap:12px;
    margin:0 2px 46px;
  }
  .brandmark{
    width:52px;
    height:52px;
    border-radius:12px;
    background:linear-gradient(145deg,#dcecff,#c5defa);
    color:var(--rt-navy-900);
    font-size:29px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 8px 18px rgba(0,0,0,.11);
  }
  .brand strong{
    font-size:21px;
    letter-spacing:1.5px;
    color:#fff;
  }
  .brand small{
    margin-top:5px;
    color:#9db2c8;
    font-size:12px;
  }
  .nav{
    position:relative;
    min-height:48px;
    margin:0 0 8px;
    padding:10px 14px 10px 18px;
    border-radius:10px;
    color:#b9cbe0;
    font-size:14px;
    font-weight:600;
    transition:background .16s ease,color .16s ease,transform .16s ease;
  }
  .nav:hover{
    background:rgba(255,255,255,.055);
    color:#fff;
    transform:translateX(1px);
  }
  .nav.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(64,127,194,.32),rgba(52,100,151,.23));
    box-shadow:inset 0 0 0 1px rgba(143,190,239,.08);
  }
  .nav.active:before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:3px;
    background:#66a5ff;
    box-shadow:0 0 12px rgba(102,165,255,.55);
  }
  .sidebar-foot{
    color:#8fa6bd;
    padding:20px 2px 0;
    font-size:11px;
    line-height:1.9;
  }

  .workspace{margin-left:248px}
  .topbar{
    min-height:78px;
    padding:16px 38px;
    border-bottom:1px solid var(--rt-slate-200);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    color:var(--rt-slate-600);
    box-shadow:0 1px 0 rgba(17,45,75,.02);
  }
  .topbar a{
    color:#2765b7;
    font-weight:600;
    text-decoration:none;
  }
  .workspace-body{
    max-width:1560px;
    padding:36px 40px 64px;
  }

  .pagehead{
    margin-bottom:26px;
    align-items:flex-start;
  }
  .eyebrow{
    color:#54769e;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
  }
  h1{
    margin:8px 0 6px;
    color:var(--rt-slate-950);
    font-size:30px;
    line-height:1.25;
    letter-spacing:-.35px;
  }
  h2{
    color:var(--rt-slate-900);
    font-size:18px;
    letter-spacing:-.15px;
  }
  h3{color:var(--rt-slate-800)}
  p{
    color:var(--rt-slate-600);
    line-height:1.75;
  }

  .card{
    border:1px solid #e0e7ef;
    border-radius:16px;
    padding:28px;
    box-shadow:var(--rt-shadow-soft);
    background:rgba(255,255,255,.98);
  }
  .card:hover{border-color:#d6e0eb}

  /* Login page */
  section.card:has(form.stack){
    max-width:520px;
    margin:70px auto 24px;
    padding:42px 46px;
    border-radius:20px;
    box-shadow:var(--rt-shadow);
  }
  section.card:has(form.stack) h1{
    font-size:32px;
    margin-bottom:8px;
  }
  section.card:has(form.stack):before{
    content:"SECURE WORKSPACE";
    display:block;
    margin-bottom:8px;
    color:#4775ae;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
  }
  section.card:has(form.stack) form.stack{
    max-width:none!important;
    margin:26px 0 22px!important;
    gap:18px;
  }

  label{
    color:#344a62;
    font-size:13px;
    font-weight:600;
    gap:8px;
  }
  input,textarea,select{
    min-height:46px;
    padding:11px 13px;
    border:1px solid #d5dfe9;
    border-radius:10px;
    background:#fbfdff;
    color:var(--rt-slate-900);
    box-shadow:inset 0 1px 1px rgba(16,39,63,.02);
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  }
  input:hover,textarea:hover,select:hover{border-color:#c6d3e2}
  input:focus,textarea:focus,select:focus{
    outline:0;
    border-color:#5791e8;
    background:#fff;
    box-shadow:0 0 0 3px rgba(56,119,218,.13);
  }
  input[readonly]{background:#f4f7fb}

  .stat-grid{
    gap:18px;
    margin-bottom:24px;
  }
  .stat{
    position:relative;
    min-height:118px;
    padding:22px 24px;
    border:1px solid #e0e7ef;
    border-radius:14px;
    background:#fff;
    box-shadow:var(--rt-shadow-soft);
    overflow:hidden;
  }
  .stat:after{
    content:"";
    position:absolute;
    width:78px;
    height:78px;
    right:-26px;
    top:-26px;
    border-radius:50%;
    background:rgba(58,126,226,.055);
  }
  .stat b{
    color:var(--rt-slate-950);
    font-size:27px;
    letter-spacing:-.4px;
  }

  .toolbar{
    gap:10px;
    padding:2px 0 4px;
  }
  .toolbar input{min-width:280px}
  .toolbar select{width:160px}

  .table-scroll{
    border:1px solid #e1e8f0;
    border-radius:13px;
    background:#fff;
    overflow:auto;
  }
  table{
    font-size:13px;
  }
  th{
    padding:14px 14px;
    background:#f4f7fb;
    color:#63758a;
    font-size:12px;
    font-weight:700;
    letter-spacing:.15px;
    border-bottom:1px solid #dde5ee;
  }
  td{
    padding:15px 14px;
    color:#2a3d52;
    border-bottom:1px solid #e7edf3;
  }
  tbody tr{transition:background .14s ease}
  tbody tr:hover{background:#f9fbfe}
  .row-title{
    color:#123d69;
    font-weight:700;
  }

  .badge{
    padding:5px 10px;
    border-radius:8px;
    background:#edf3fb;
    color:#366490;
    font-size:12px;
    font-weight:700;
  }
  .badge.signed{
    background:var(--rt-green-100);
    color:var(--rt-green-700);
  }

  .editor-layout{
    grid-template-columns:minmax(0,1fr) 310px;
    gap:26px;
  }
  .summary{
    top:22px;
    border-top:0;
    box-shadow:var(--rt-shadow);
  }
  .summary:before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:4px;
    border-radius:16px 16px 0 0;
    background:linear-gradient(90deg,#145bd4,#5f9bf1);
  }
  .grand{
    color:var(--rt-slate-950);
    font-size:30px;
  }

  .section-title{
    margin-bottom:22px;
  }
  .section-title>span{
    padding:6px 9px;
    border-radius:8px;
    background:var(--rt-blue-100);
    color:#2868bd;
    font-weight:700;
  }

  .line-card{
    border:1px solid #e0e7ef;
    border-radius:12px;
    padding:18px;
    background:#fbfdff;
  }
  .line-card:hover{border-color:#cbd9e9}

  .notice{
    border-radius:10px;
    padding:13px 16px;
  }
  .notice.success{
    border-color:#bae4ce;
    background:#effaf4;
    color:#226a4b;
  }
  .notice.error{
    border-color:#f0c9c9;
    background:#fff3f3;
    color:#a33636;
  }

  .vehicle-balance{
    border:1px solid #c3daf4;
    border-radius:12px;
    background:linear-gradient(180deg,#f1f7ff,#eaf4ff);
  }

  .total-strip{
    border-radius:10px;
    background:#f0f6ff;
  }

  .tabs{
    gap:8px;
    padding-bottom:2px;
  }
  .tabs button{
    min-height:38px;
    border-radius:9px;
    box-shadow:none;
  }
  .tabs button.selected{
    background:#edf4fe;
    border-color:#a9c8f0;
    color:#145bb8;
  }

  .empty{
    color:var(--rt-slate-500);
  }

  #rongtou-auto-sync-status{
    right:18px!important;
    bottom:18px!important;
    border-radius:999px!important;
    padding:8px 12px!important;
    font-weight:700!important;
    box-shadow:0 10px 25px rgba(23,56,88,.12)!important;
    border:1px solid #d5e2ef!important;
    background:rgba(244,249,255,.96)!important;
    backdrop-filter:blur(12px);
  }
  #rongtou-remote-update-banner{
    top:18px!important;
    border-radius:12px!important;
    box-shadow:0 14px 34px rgba(74,51,5,.16)!important;
  }
}

/* 2.5.36: every native OA view keeps the document scrollable after switching
   from embedded reconciliation or operations views. */
@media screen {
  html, body { min-height:100%; }
  body:not(.rt-recon-open):not(.rtops-open):not(.rtops-print-preview) { overflow-y:auto; }
  .workspace:not(.recon-unified-open) { min-height:100vh; min-height:100dvh; overflow:visible; }
  .workspace:not(.recon-unified-open) > .workspace-body { overflow:visible; }
  .workspace .table-scroll,
  .workspace .rt-oa-table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
}

@media screen and (max-width:1200px){
  .sidebar{width:216px;padding-left:20px;padding-right:20px}
  .workspace{margin-left:216px}
  .workspace-body{padding-left:28px;padding-right:28px}
  .editor-layout{grid-template-columns:minmax(0,1fr) 270px}
}

@media screen and (max-width:950px){
  .sidebar{width:184px;padding:24px 14px}
  .workspace{margin-left:184px}
  .brand strong{font-size:17px}
  .brandmark{width:42px;height:42px;font-size:23px}
  .workspace-body{padding:28px 22px 52px}
  .editor-layout{grid-template-columns:1fr}
  .summary{position:static}
}

@media screen and (max-width:680px){
  body{background:#f5f8fc}
  .sidebar{
    position:static;
    width:100%;
    padding:14px 16px;
    grid-template-columns:1fr 1fr;
    gap:8px;
    border-radius:0;
  }
  .brand{margin:0 0 8px;grid-column:1/-1}
  .brandmark{width:40px;height:40px;border-radius:10px}
  .nav{min-height:42px;margin:0}
  .nav.active:before{top:10px;bottom:10px}
  .workspace{margin:0}
  .topbar{min-height:58px;padding:12px 16px}
  .workspace-body{padding:22px 14px 48px}
  h1{font-size:25px}
  .pagehead{gap:14px}
  .card{padding:20px;border-radius:14px}
  section.card:has(form.stack){
    margin:18px auto;
    padding:26px 22px;
  }
  .stat-grid{grid-template-columns:1fr}
  .stat{min-height:auto}
  .fields{grid-template-columns:1fr}
  .line-fields{grid-template-columns:1fr}
  .toolbar input{min-width:100%}
  .toolbar select{width:100%}
}


/* RONGTOU 1.7.1 — print cleanup */
@media print {
  #rongtou-auto-sync-status,
  #rongtou-remote-update-banner {
    display: none !important;
    visibility: hidden !important;
  }
}
