.modern-nav-cell { width:86px !important; min-width:86px; max-width:86px; padding:0 8px 0 0 !important; vertical-align:top; box-sizing:border-box; } .modern-nav-cell * { box-sizing:border-box; } .modern-side-nav { position:sticky; top:12px; display:flex; flex-direction:column; align-items:center; width:78px; padding:8px 6px; border:1px solid #e3e7ee; border-radius:14px; background:#ffffff; box-shadow:0 4px 18px rgba(0,0,0,.05); font-family:Arial,Helvetica,sans-serif; } .modern-side-nav .nav-group { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; } .modern-side-nav .nav-divider { width:38px; height:1px; margin:10px 0; background:#e5e7eb; } .modern-side-nav .nav-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:64px; min-height:64px; padding:7px 3px; border:1px solid transparent; border-radius:10px; background:transparent; color:#647084 !important; text-align:center; text-decoration:none !important; transition:background .18s ease,color .18s ease,border-color .18s ease; } .modern-side-nav .nav-link:hover { border-color:#dfe2f5; background:#eef0ff; color:#2f3187 !important; } .modern-side-nav .nav-link:focus-visible { outline:2px solid #2f3187; outline-offset:2px; } .modern-side-nav .nav-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; } .modern-side-nav .nav-icon img { display:block; width:27px; height:27px; object-fit:contain; border:0; } .modern-side-nav .nav-label { display:block; width:100%; overflow:hidden; color:inherit; font-size:10px; font-weight:700; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .modern-nav-content-cell { width:100%; min-width:0; padding:0; vertical-align:top; } .modern-nav-content-table { width:100%; border-collapse:collapse; } .modern-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; width:100%; min-height:52px; margin:0 0 20px 0; padding:10px 16px; box-sizing:border-box; clear:both; border:1px solid #e2e7ef; border-radius:12px; background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,.035); font-family:Arial,Helvetica,sans-serif; } .modern-breadcrumb * { box-sizing:border-box; } .modern-breadcrumb .breadcrumb-home { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:34px; height:34px; border:1px solid #e4e8f0; border-radius:9px; background:#f3f5f9; color:#2f3187; font-size:23px; font-weight:700; line-height:1; text-decoration:none; transition:background .2s ease; } .modern-breadcrumb .breadcrumb-home:hover { background:#e8eaf8; } .modern-breadcrumb .breadcrumb-item { display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:220px; color:#657084; font-size:13px; font-weight:600; } .modern-breadcrumb .breadcrumb-separator { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:12px; color:#a4acba; font-size:19px; font-weight:400; line-height:1; } .modern-breadcrumb .breadcrumb-link { display:block; min-width:0; overflow:hidden; color:#657084; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; transition:color .2s ease; } .modern-breadcrumb .breadcrumb-link:hover { color:#2f3187; text-decoration:underline; } .modern-breadcrumb .breadcrumb-current { display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; color:#2f3187; font-size:13px; font-weight:800; } .modern-breadcrumb .breadcrumb-current-text { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .modern-breadcrumb .breadcrumb-subcaption { color:#8791a1; font-size:12px; font-weight:500; } @media screen and (max-width:768px) { .modern-breadcrumb { gap:6px; padding:10px 12px; margin-bottom:14px; border-radius:10px; } .modern-breadcrumb .breadcrumb-home { width:30px; height:30px; font-size:20px; } .modern-breadcrumb .breadcrumb-item { max-width:110px; gap:5px; font-size:12px; } .modern-breadcrumb .breadcrumb-separator { width:9px; font-size:15px; } .modern-breadcrumb .breadcrumb-current { flex-basis:100%; width:100%; max-width:100%; margin-top:4px; padding-top:8px; border-top:1px solid #edf0f5; font-size:13px; } .modern-breadcrumb .breadcrumb-current > .breadcrumb-separator { display:none; } .modern-breadcrumb .breadcrumb-current-text { white-space:normal; overflow-wrap:anywhere; } .modern-breadcrumb .breadcrumb-subcaption { font-size:11px; } } .header-chevron { display:inline-block; width:8px; height:8px; margin:0 3px 4px 6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); flex-shrink:0; vertical-align:middle; } .ui-page { width:100%; box-sizing:border-box; } .ui-page * { box-sizing:border-box; } .ui-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; width:100%; min-height:66px; margin-bottom:18px; padding:14px 20px; border:1px solid #e2e7ef; border-radius:12px; background:#ffffff; box-shadow:0 3px 12px rgba(0,0,0,.04); } .ui-header-left { display:flex; align-items:center; gap:12px; min-width:0; } .ui-header-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:42px; height:42px; border-radius:11px; background:#eef0ff; color:#2f3187; } .ui-header-icon svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .ui-header-title { margin:0; color:#1f2937; font-size:21px; font-weight:800; line-height:1.2; } .ui-header-subtitle { margin-top:4px; color:#8993a3; font-size:12px; font-weight:500; } .ui-header-right { display:flex; align-items:center; gap:8px; } .ui-count-badge { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:7px 13px; border:1px solid #dfe3f6; border-radius:20px; background:#eef0ff; color:#2f3187; font-size:12px; font-weight:800; white-space:nowrap; } .ui-count-number { display:inline-flex; align-items:center; justify-content:center; min-width:23px; height:23px; padding:0 5px; border-radius:50%; background:#2f3187; color:#ffffff; font-size:11px; font-weight:900; } .ui-count-badge.empty { border-color:#e4e7ec; background:#f7f8fa; color:#86909e; } .ui-count-badge.empty .ui-count-number { background:#9ca3af; } @media screen and (max-width:600px) { .ui-header { min-height:60px; padding:12px; gap:10px; border-radius:10px; } .ui-header-icon { width:36px; height:36px; border-radius:9px; } .ui-header-icon svg { width:20px; height:20px; } .ui-header-title { font-size:17px; } .ui-header-subtitle { font-size:11px; } .ui-count-badge { min-height:30px; padding:5px 10px; font-size:11px; } } .modern-footer { width: 100%; margin-top: 12px; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; } .modern-footer * { box-sizing: border-box; } .modern-footer-main { width: 100%; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .modern-footer-nav { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; background:var(--footer-nav-bg,#f3f5f9); border-bottom: 1px solid rgba(0,0,0,0.07); } .modern-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .modern-footer-link { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; transition: background-color 0.2s ease, transform 0.2s ease; } .modern-footer-link:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); } .modern-footer-top { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #ffffff; border: 1px solid rgba(0,0,0,0.10); text-decoration: none; flex-shrink: 0; transition: background-color 0.2s ease, transform 0.2s ease; } .modern-footer-top:hover { background: #eeeeee; transform: translateY(-2px); } .modern-footer-top svg { width: 18px; height: 18px; fill: currentColor; } .modern-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; background: #ffffff; color: #555555; font-size: 12px; line-height: 1.5; } .modern-footer-brand { font-weight: 700; color: #222222; } .modern-footer-company { text-align: right; } @media screen and (max-width: 768px) { .modern-footer { margin-top: 8px; } .modern-footer-main { border-radius: 10px; } .modern-footer-nav { padding: 10px; } .modern-footer-links { flex: 1; gap: 6px; } .modern-footer-link { flex: 1; justify-content: center; min-width: 120px; padding: 9px 8px; text-align: center; } .modern-footer-bottom { flex-direction: column; justify-content: center; gap: 3px; padding: 14px 10px 18px; text-align: center; } .modern-footer-company { text-align: center; } } @media screen and (max-width: 420px) { .modern-footer-nav { align-items: stretch; } .modern-footer-links { flex-direction: column; } .modern-footer-link { width: 100%; min-width: 0; } .modern-footer-top { align-self: center; width: 42px; height: 42px; } } .ui-action-wrap { display:inline-flex; align-items:center; justify-content:flex-start; flex:0 0 auto; width:max-content; max-width:100%; min-width:0; margin-left:2px; vertical-align:middle; } .ui-action-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:8px; width:max-content; max-width:100%; min-height:42px; padding:10px 16px; box-sizing:border-box; border:1px solid #dce2eb; border-radius:9px; background:#ffffff; color:#374151 !important; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:800; line-height:1.3; text-align:center; text-decoration:none !important; white-space:nowrap; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; } .ui-action-button:hover { border-color:#2f3187; background:#eef0ff; color:#2f3187 !important; text-decoration:none !important; transform:translateY(-1px); } .ui-action-button:focus-visible { outline:2px solid #2f3187; outline-offset:3px; } .ui-action-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:18px; height:18px; } .ui-action-icon img { display:block; width:18px; height:18px; object-fit:contain; border:0; } .ui-action-text { display:inline-block; width:auto; min-width:max-content; max-width:none; overflow:visible; text-overflow:clip; white-space:nowrap; } .ui-action-button.primary { border-color:#2f3187; background:#2f3187; color:#ffffff !important; } .ui-action-button.primary:hover { border-color:#22246c; background:#22246c; color:#ffffff !important; } .ui-action-button.danger { border-color:#fecaca; background:#fff5f5; color:#b42318 !important; } .ui-action-button.danger:hover { border-color:#dc2626; background:#fee2e2; color:#991b1b !important; } .ui-action-button.success { border-color:#bbf7d0; background:#f0fdf4; color:#15803d !important; } .ui-action-button.success:hover { border-color:#16a34a; background:#dcfce7; color:#166534 !important; } .ui-action-button.warning { border-color:#fde68a; background:#fffbeb; color:#b45309 !important; } .ui-action-button.warning:hover { border-color:#f59e0b; background:#fef3c7; color:#92400e !important; } .ui-action-button.disabled, .ui-action-button[aria-disabled="true"] { opacity:.5; cursor:not-allowed; pointer-events:none; transform:none; } .ui-button-group { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:4px; width:100%; min-width:0; } .ui-button-group.center { justify-content:center; } .ui-button-group.right { justify-content:flex-end; } @media screen and (max-width:600px) { .ui-action-button { min-height:44px; padding:10px 14px; font-size:12px; } .ui-action-icon, .ui-action-icon img { width:17px; height:17px; } .ui-button-group { gap:7px; } }