* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Noto Sans', sans-serif;
min-height: 100vh;
background: #EFF3F2;
color: #12352B;
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4CFCB; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
button, input { font-family: inherit; }
.mono { font-family: 'JetBrains Mono', monospace; }
.hoverable:hover { --hover: 1; }
.btn-home:hover { border-color: #EB7A1C !important; background: #FBFCFC !important; }
.btn-export:hover { border-color: #EB7A1C !important; }
.row-hover:hover { background: #F2F6F4 !important; }
.doc-row:hover { background: #FBFCFC !important; }
.card-hover:hover { border-color: #EB7A1C !important; box-shadow: 0 6px 18px rgba(18,53,43,0.08) !important; }
.switcher-btn:hover { border-color: #EB7A1C !important; }
.icon-btn:hover { border-color: #EB7A1C !important; }
.doclink:hover { opacity: 0.7; }
.nav-item:hover { background: rgba(255,255,255,0.07) !important; }
.month-btn:hover { background: #fff !important; }
.doc-tree-node:hover { background: rgba(235,122,28,0.06) !important; }
/* SKELETON LOADING ANIMATIONS */
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.skeleton {
background: linear-gradient(90deg, #E6ECE9 25%, #F1F4F3 50%, #E6ECE9 75%);
background-size: 800px 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 6px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; border-radius: 6px; }
.skeleton-card { border-radius: 10px; border: 1px solid #DCE3E0; padding: 18px 20px; background: #fff; }
.skeleton-block { border-radius: 8px; }
/* ========== MOBILE RESPONSIVENESS ========== */
/* --- TABLET (1024px) --- */
@media(max-width:1024px){
aside.sidebar{width:220px;}
header.topbar{padding:0 16px;}
.search-box{width:200px;}
/* Editorial main */
main[style*="max-width"]{padding-left:24px;padding-right:24px;}
}
/* --- SMALL TABLET / LARGE PHONE (768px) --- */
@media(max-width:768px){
/* LOGIN SCREEN - stack vertically */
.login-wrapper{flex-direction:column !important;min-height:100vh;}
.login-hero{padding:32px 24px !important;min-height:auto !important;flex:none !important;}
.login-hero h1{font-size:28px !important;}
.login-hero p{font-size:13px !important;}
.login-stats{gap:16px !important;}
.login-form-panel{width:100% !important;flex:none !important;padding:32px 24px !important;}
/* SIDEBAR - offcanvas drawer */
aside.sidebar{position:fixed !important;left:-270px;top:0;width:264px !important;height:100vh !important;max-height:100vh;overflow-y:auto;transition:left .3s cubic-bezier(.4,0,.2,1);z-index:100;}
aside.sidebar.open{left:0 !important;}
/* MENU BUTTON */
#btn-menu{display:flex !important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #DCE3E0;background:#fff;border-radius:6px;cursor:pointer;color:#12352B;font-size:18px;}
#btn-menu:hover{border-color:#EB7A1C;background:#FBFCFC;}
/* TOPBAR */
header.topbar{padding:0 14px !important;height:auto !important;min-height:56px;flex-wrap:wrap !important;gap:8px;padding-top:10px !important;padding-bottom:10px !important;}
/* Hide entity switcher on small screens */
header.topbar .entity-switcher{display:none !important;}
/* MAIN CONTENT */
main{padding:20px 14px 80px !important;}
/* ALL GRIDS - single column */
.kpi-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;}
.main-grid{display:flex !important;flex-direction:column !important;gap:16px !important;}
.cards-grid{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
.modal-detail-grid{grid-template-columns:1fr !important;}
/* DOCUMENT TABLE - card layout */
.doc-table-header{display:none !important;}
.doc-row{display:flex !important;flex-wrap:wrap !important;gap:8px !important;padding:14px 16px !important;}
.doc-row > *:nth-child(3){font-size:11px !important;color:#5F6B67;width:100%;}
.doc-row > *:nth-child(5){width:100%;justify-content:flex-start !important;}
/* EDITORIAL HEADER */
.editorial-header{height:auto !important;min-height:56px;padding:10px 16px !important;flex-wrap:wrap !important;gap:8px;}
.editorial-header nav{gap:2px !important;}
.editorial-header nav span{font-size:12px !important;padding:7px 10px !important;}
.editorial-header .entity-switcher{display:none !important;}
/* EDITORIAL HERO BANNER */
.editorial-hero{padding:20px !important;flex-direction:column !important;gap:20px !important;text-align:center;}
.editorial-hero > div:first-child{margin:0 auto;}
/* EDITORIAL MAIN */
.editorial-main{padding:24px 14px 100px !important;}
/* EDITORIAL DASHBOARD GRIDS */
.editorial-grid{display:flex !important;flex-direction:column !important;gap:16px !important;}
/* MODAL - bottom sheet */
.modal-overlay{align-items:flex-end !important;padding:0 !important;}
.modal-content{width:100% !important;max-width:100% !important;border-radius:20px 20px 0 0 !important;max-height:85vh !important;}
.modal-detail-grid{grid-template-columns:1fr !important;}
/* FLOATING COMPANY CARD (editorial) */
.floating-company{left:12px !important;right:12px !important;bottom:12px !important;width:auto !important;}
/* CATEGORY CHIPS WRAP */
.cat-chips{gap:6px !important;}
.cat-chips button{font-size:11px !important;padding:6px 10px !important;}
/* SIDEBAR OVERLAY BACKDROP */
body.sidebar-open{overflow:hidden;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:99;}
body.sidebar-open .sidebar-overlay{display:block;}
}
/* --- PHONE (480px) --- */
@media(max-width:480px){
/* LOGIN */
.login-hero{padding:24px 18px !important;}
.login-hero h1{font-size:24px !important;}
.login-stats{gap:14px !important;}
.login-stats > div > div:first-child{font-size:20px !important;}
.login-form-panel{padding:24px 16px !important;}
.login-form-panel h2{font-size:22px !important;}
.login-form-panel input{padding:10px 12px !important;font-size:13px !important;}
.login-form-panel button[data-action="login"]{padding:12px !important;font-size:14px !important;}
/* TOPBAR */
header.topbar{padding:0 10px !important;min-height:50px;gap:6px;}
/* Hide month selector on very small */
header.topbar .month-selector{display:none !important;}
/* MAIN */
main{padding:14px 10px 70px !important;font-size:13px;}
/* COMPLIANCE CARDS */
.card-hover{padding:12px !important;font-size:13px;}
/* FONT */
body{font-size:13px;}
/* EDITORIAL TITLE */
.editorial-main h1{font-size:22px !important;}
.docs-title{font-size:18px !important;}
/* EDITORIAL HERO */
.editorial-hero{padding:16px !important;gap:16px !important;}
.editorial-hero-text{font-size:14px !important;}
.editorial-hero-stats{gap:16px !important;flex-wrap:wrap;justify-content:center;}
.editorial-hero-stats > div > div:first-child{font-size:22px !important;}
/* EDITORIAL ROW ITEMS */
.row-hover{padding:12px 14px !important;gap:10px !important;flex-wrap:wrap !important;}
/* UPCOMING DATES */
.upcoming-date-badge{width:38px !important;padding:4px 0 !important;}
.upcoming-date-badge > div:first-child{font-size:14px !important;}
/* MODAL */
.modal-header{padding:18px 20px !important;}
.modal-header-title{font-size:17px !important;}
.modal-body{padding:16px !important;}
.modal-actions button{font-size:12px !important;padding:10px 12px !important;}
/* FLOATING COMPANY */
.floating-company{font-size:12px !important;}
}
/* --- EXTRA SMALL PHONE (360px) --- */
@media(max-width:360px){
/* LOGIN */
.login-hero{padding:20px 14px !important;}
.login-hero h1{font-size:20px !important;}
.login-hero p{font-size:12px !important;}
.login-stats{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
.login-form-panel{padding:20px 12px !important;}
.login-form-panel h2{font-size:20px !important;}
/* TOPBAR */
header.topbar{padding:0 8px !important;gap:4px;}
#btn-menu{width:34px !important;height:34px !important;font-size:15px !important;}
/* MAIN */
main{padding:12px 8px 60px !important;}
/* FONT */
body{font-size:12px;}
/* CARDS */
.card-hover{padding:10px !important;font-size:12px;}
/* SIDEBAR */
aside.sidebar{width:230px !important;}
/* EDITORIAL HERO */
.editorial-hero{border-radius:8px !important;padding:14px !important;}
.editorial-hero > div:first-child{width:80px !important;height:80px !important;}
/* FLOATING COMPANY */
.floating-company{left:8px !important;right:8px !important;bottom:8px !important;border-radius:8px !important;}
}
/* Toast slide-up animation */
@keyframes slideUp {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Drag-and-drop styles */
.drop-zone-active {
background: rgba(235,122,28,0.08) !important;
border: 2px dashed #EB7A1C !important;
border-radius: 8px;
}
.drop-zone-invalid {
background: rgba(176,57,46,0.05) !important;
border: 2px dashed #F6C9C9 !important;
border-radius: 8px;
}
.dragging-item {
opacity: 0.5 !important;
}
.drag-over-highlight {
background: rgba(235,122,28,0.15) !important;
border-radius: 6px;
outline: 2px solid rgba(235,122,28,0.5);
outline-offset: -2px;
}
.drag-overlay {
position: absolute;
inset: 0;
background: rgba(235,122,28,0.06);
border: 2px dashed #EB7A1C;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
animation: slideUp .2s ease-out;
}
/* ========== UPLOADS PANEL ========== */
.uploads-panel {
position: fixed;
bottom: 16px;
right: 16px;
width: 370px;
max-height: 420px;
background: #fff;
border: 1px solid #DCE3E0;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(18,53,43,0.12), 0 2px 8px rgba(0,0,0,0.06);
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: 'Noto Sans', sans-serif;
animation: uploadsPanelIn 0.2s ease-out;
}
@keyframes uploadsPanelIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.uploads-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #12352B;
color: #fff;
flex-shrink: 0;
min-height: 42px;
}
.uploads-panel-header-left {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
flex: 1;
min-width: 0;
}
.uploads-panel-icon {
flex-shrink: 0;
opacity: 0.85;
}
.uploads-panel-title {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uploads-panel-header-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.uploads-panel-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
background: rgba(255,255,255,0.1);
border-radius: 6px;
cursor: pointer;
color: #fff;
transition: background 0.15s;
}
.uploads-panel-btn:hover {
background: rgba(255,255,255,0.2);
}
.uploads-panel-btn-close:hover {
background: rgba(208,72,60,0.6);
}
.uploads-panel-body {
overflow-y: auto;
max-height: 340px;
padding: 8px 0;
}
/* Individual upload items */
.uploads-item {
padding: 8px 14px 10px;
border-bottom: 1px solid #F1F4F3;
transition: background 0.15s;
}
.uploads-item:last-child {
border-bottom: none;
}
.uploads-item:hover {
background: #F7F9F8;
}
.uploads-item-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.uploads-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.uploads-item-name {
font-size: 12px;
font-weight: 600;
color: #12352B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uploads-item-detail {
font-size: 11px;
color: #5F6B67;
font-weight: 500;
}
.uploads-item-detail-done {
color: #0F6B34;
}
.uploads-item-detail-error {
color: #B91C1C;
}
.uploads-item-detail-cancelled {
color: #9A5B00;
}
.uploads-item-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding-top: 1px;
}
.uploads-item-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid #D3DCD8;
background: #fff;
border-radius: 5px;
cursor: pointer;
color: #4B5752;
transition: border-color 0.15s, color 0.15s;
}
.uploads-item-btn:hover {
border-color: #EB7A1C;
color: #12352B;
}
.uploads-item-btn-done {
border-color: #C4E6CF;
color: #0F6B34;
}
.uploads-item-btn-done:hover {
border-color: #0F6B34;
}
/* Progress bar */
.uploads-item-progress-track {
margin-top: 6px;
height: 4px;
background: #E6ECE9;
border-radius: 3px;
overflow: hidden;
}
.uploads-item-progress-bar {
height: 100%;
background: #EB7A1C;
border-radius: 3px;
transition: width 0.2s ease-out;
}
.uploads-item-progress-done .uploads-item-progress-bar,
.uploads-item-progress-bar-done {
background: #1FA35A;
}
.uploads-item-progress-error .uploads-item-progress-bar,
.uploads-item-progress-bar-error {
background: #DC2626;
width: 100%;
opacity: 0.4;
}
/* Status-specific item styling */
.uploads-item-status-completed {
opacity: 0.85;
}
.uploads-item-status-cancelled {
opacity: 0.7;
}
/* Mobile responsive */
@media (max-width: 480px) {
.uploads-panel {
width: calc(100vw - 16px);
right: 8px;
bottom: 8px;
max-height: 50vh;
}
}
/* ========== CONFLICT RESOLUTION DIALOG ========== */
.conflict-overlay {
position: fixed;
inset: 0;
background: rgba(18,53,43,0.45);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: conflictFadeIn 0.15s ease-out;
}
@keyframes conflictFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.conflict-dialog {
background: #fff;
border-radius: 10px;
width: 100%;
max-width: 460px;
box-shadow: 0 24px 64px rgba(18,53,43,0.22);
overflow: hidden;
animation: conflictSlideIn 0.2s ease-out;
}
@keyframes conflictSlideIn {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.conflict-header {
padding: 22px 24px 16px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.conflict-icon {
width: 42px;
height: 42px;
border-radius: 8px;
background: #FFEFD6;
color: #9A5B00;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.conflict-header-text {
flex: 1;
min-width: 0;
}
.conflict-title {
font-size: 16px;
font-weight: 700;
color: #12352B;
margin-bottom: 4px;
}
.conflict-desc {
font-size: 13px;
color: #5B6763;
line-height: 1.45;
}
/* Existing item card */
.conflict-existing {
margin: 0 24px 16px;
padding: 12px 14px;
background: #F4F7F6;
border: 1px solid #E6ECE9;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
}
.conflict-existing-icon {
width: 36px;
height: 36px;
border-radius: 6px;
background: #fff;
border: 1px solid #DCE3E0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.conflict-existing-info {
flex: 1;
min-width: 0;
}
.conflict-existing-name {
font-size: 13px;
font-weight: 600;
color: #12352B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conflict-existing-meta {
font-size: 11px;
color: #5F6B67;
margin-top: 2px;
}
/* Action buttons */
.conflict-actions {
padding: 0 24px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.conflict-btn {
width: 100%;
border: 1px solid #DCE3E0;
background: #fff;
border-radius: 8px;
padding: 12px 16px;
cursor: pointer;
text-align: left;
transition: border-color 0.15s, background 0.15s;
}
.conflict-btn:hover:not(:disabled) {
border-color: #EB7A1C;
background: #FAFBFB;
}
.conflict-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.conflict-btn-content {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #12352B;
}
.conflict-btn-hint {
font-size: 11px;
color: #5F6B67;
margin-top: 3px;
padding-left: 22px;
}
.conflict-btn-replace {
border-color: #F6C9C9;
}
.conflict-btn-replace:hover:not(:disabled) {
border-color: #DC2626;
background: #FEF5F5;
}
.conflict-btn-replace .conflict-btn-content {
color: #B91C1C;
}
.conflict-btn-cancel {
border-color: #DCE3E0;
background: #F7F9F8;
}
.conflict-btn-cancel:hover:not(:disabled) {
background: #EEF2F0;
}
/* Rename section inside conflict dialog */
.conflict-rename-section {
display: flex;
flex-direction: column;
gap: 0;
}
.conflict-rename-section .conflict-btn-rename {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
}
.conflict-rename-input-wrap {
display: flex;
align-items: center;
gap: 0;
border: 1px solid #DCE3E0;
border-top: none;
border-radius: 0 0 10px 10px;
overflow: hidden;
background: #fff;
}
.conflict-rename-input {
flex: 1;
border: none;
padding: 10px 14px;
font-size: 13px;
color: #12352B;
background: #FBFCFC;
outline: none;
font-family: inherit;
min-width: 0;
}
.conflict-rename-input:focus {
background: #fff;
}
.conflict-rename-input-error {
background: #FEF5F5;
}
.conflict-rename-submit {
width: 38px;
height: 38px;
border: none;
background: #12352B;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.conflict-rename-submit:hover:not(:disabled) {
background: #1F7A58;
}
.conflict-rename-submit:disabled {
background: #5F6B67;
cursor: not-allowed;
}
.conflict-rename-error {
padding: 6px 14px 10px;
font-size: 11px;
color: #B91C1C;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
/* ========== ERROR BANNERS ========== */
.error-banners-container {
position: fixed;
top: 16px;
right: 16px;
z-index: 9998;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 400px;
pointer-events: none;
}
.error-banner {
background: #fff;
border: 1px solid #F6C9C9;
border-left: 4px solid #DC2626;
border-radius: 8px;
padding: 12px 14px;
display: flex;
align-items: flex-start;
gap: 10px;
box-shadow: 0 4px 16px rgba(18,53,43,0.1);
pointer-events: auto;
animation: bannerSlideIn 0.25s ease-out;
}
@keyframes bannerSlideIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.error-banner-icon {
color: #DC2626;
flex-shrink: 0;
margin-top: 1px;
}
.error-banner-text {
flex: 1;
min-width: 0;
}
.error-banner-message {
font-size: 13px;
font-weight: 600;
color: #12352B;
}
.error-banner-detail {
font-size: 11.5px;
color: #5B6763;
margin-top: 3px;
line-height: 1.4;
}
.error-banner-dismiss {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #5F6B67;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.error-banner-dismiss:hover {
color: #B91C1C;
background: #FDECEC;
}
/* Mobile responsive for conflict dialog */
@media (max-width: 480px) {
.conflict-dialog {
max-width: calc(100vw - 24px);
border-radius: 10px;
}
.conflict-header {
padding: 18px 18px 12px;
}
.conflict-existing {
margin: 0 18px 12px;
}
.conflict-actions {
padding: 0 18px 18px;
}
.error-banners-container {
right: 8px;
left: 8px;
max-width: none;
}
}
/* ========== FY CALENDAR SELECTORS ========== */
#calFYSelect:focus,
#calFYMonthSelect:focus,
#calFYSelectInline:focus,
#calFYMonthSelectInline:focus {
outline: none;
border-color: #EB7A1C;
box-shadow: 0 0 0 3px rgba(235,122,28,0.12);
}
#calFYSelect:hover,
#calFYMonthSelect:hover,
#calFYSelectInline:hover,
#calFYMonthSelectInline:hover {
border-color: #EB7A1C;
}
[data-action="calFYGo"]:hover {
background: #1F7A58 !important;
}
[data-action="calToday"]:hover {
border-color: #EB7A1C !important;
background: #FBFCFC !important;
}
/* ========== LAW DETAILS SLIDE-OVER PANEL ========== */
.lawpanel-overlay {
position: fixed;
inset: 0;
background: rgba(6,30,23,0.5);
backdrop-filter: blur(3px);
z-index: 70;
display: flex;
justify-content: flex-end;
animation: lawpanelFade .18s ease-out;
}
@keyframes lawpanelFade {
from { opacity: 0; }
to { opacity: 1; }
}
.lawpanel {
background: #fff;
width: 480px;
max-width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
box-shadow: -20px 0 60px rgba(0,0,0,0.28);
animation: lawpanelSlideIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes lawpanelSlideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.lawpanel-header {
background: linear-gradient(135deg,#12352B,#1F7A58);
color: #fff;
padding: 22px 26px;
flex: none;
}
.lawpanel-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 18px 22px 28px;
}
.lawpanel-form-row {
transition: background .12s, border-color .12s;
}
.lawpanel-form-row:hover {
background: #F4F7F6;
border-color: #D3DCD8;
}
/* Company Data expanded panel: fills the ENTIRE main content area, starting
exactly at the right edge of the fixed 256px sidebar and extending to the
right edge of the window. The overlay itself is inset from the left by the
sidebar width so the sidebar stays fully visible and there is no blurred /
empty dashboard strip between the sidebar and the panel. Reuses the
.lawpanel slide-over shell. */
.lawpanel-overlay.company-data-overlay {
left: 256px; /* start right after the fixed sidebar */
justify-content: stretch; /* let the panel fill the whole area */
}
.lawpanel.company-data-panel {
width: 100%;
max-width: none;
min-width: 0;
}
/* Tablet: sidebar narrows to 220px (still fixed/visible). */
@media (max-width: 1024px) {
.lawpanel-overlay.company-data-overlay { left: 220px; }
}
/* Mobile: the sidebar becomes an off-canvas drawer (not occupying layout
width), so the panel covers the full viewport width. */
@media (max-width: 768px) {
.lawpanel-overlay.company-data-overlay { left: 0; }
}
/* Dashboard Company Data widget hover affordance (it's a clickable card). */
.company-data-widget:hover {
border-color: #C9D3CF;
box-shadow: 0 10px 26px rgba(6,30,23,0.07);
}
/* Employee Master dashboard block — Employee Master + Headcount Snapshot
split 50/50 on one row, then Office Locations spans the full width. The
office row (.emp-master-grid--office) is always a single full-width column,
so only the 50/50 row stacks on small screens. */
@media (max-width: 720px) {
.emp-master-grid:not(.emp-master-grid--office) { grid-template-columns: 1fr !important; }
}
/* Headcount snapshot grid inside the expanded panel — responsive columns. */
@media (max-width: 900px) {
.cd-headcount-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 460px) {
.cd-headcount-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Mobile: near-full-screen sheet */
@media (max-width: 640px) {
.lawpanel {
width: 100%;
height: 100vh;
}
.lawpanel-header {
padding: 18px 18px;
}
.lawpanel-body {
padding: 14px 16px 24px;
}
}