.mobile-only-quicklinks { display: none; }
#adminMobileProfileBtn { display: none; }@media (max-width: 767px) {
    .mobile-only-quicklinks { display: block !important; }}@media (max-width: 767px) {
    .admin-messages-label { display: none !important; }}@media (max-width: 868px) {
    .dashboard-layout {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 2px solid #ddd;
        padding: 10px 15px;
    }
    
    .welcome-banner {
        flex-direction: column;
    }
    
    .welcome-image {
        width: 100%;
    }
    
    .welcome-image img {
        height: 200px;
    }
    
    .topbar {
        padding: 12px;
    }
    
    .nav-left {
        gap: 12px;
    }
    
    .nav-left a {
        font-size: 15px;
    }
    
    .lcdjp-brand {
        margin-right: 0;
    }}@media (max-width: 480px) {
    .platform {
        font-size: 24px;
    }
    .lcdjp {
        font-size: 55px;
    }
    .welcome-text h1 {
        font-size: 26px;
    }
    .content-area {
        padding: 15px;
    }
    
    .account-menu {
        right: 0;
        transform: none;
        top: 44px;
    }}@media (max-width: 768px) {
    .performance-row td {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    
    .performance-row td:first-child {
        font-size: 13px !important;
    }}@media print {
    .no-print {
        display: none !important;
    }
    #pdfExportContainer {
        display: none !important;
    }}@media (max-width: 767px) {

    /* Reduce container padding so cards fill the screen edge-to-edge */
    #userManagementContainer,
    #statisticsContainer,
    #auditLogsContainer,
    #districtAdminContainer,
    #pdfExportContainer,
    #legalOrgsAdminContainer {
        padding: 14px !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* All flex header rows that hold a title + action buttons: stack vertically */
    #userManagementContainer > div:first-child,
    #statisticsContainer > div:first-child,
    #auditLogsContainer > div:first-child,
    #districtAdminContainer > div:first-child,
    #auditLogsContainer > div:first-child > div:last-child {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* User management filter bar: stack selects + search input */
    #userManagementContainer > div:first-child > div:last-child {
        flex-direction: column !important;
        width: 100% !important;
    }
    #userManagementContainer > div:first-child > div:last-child select,
    #userManagementContainer > div:first-child > div:last-child input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Audit log search row: stack inputs + buttons */
    #auditLogsContainer div[style*="display:flex"][style*="gap:8px"],
    #auditLogsContainer div[style*="display: flex"][style*="gap:8px"] {
        flex-wrap: wrap !important;
    }
    #auditLogsContainer input[id="auditLogSearch"] {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Statistics: 2-column chart grids → single column */
    #statisticsContainer > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Statistics quick-cards min-width relaxed */
    #statsQuickCards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* DA create form: 2-column grid → single column */
    #createDistrictAdminForm > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* DA grid-column:1/-1 items still span full width in a 1-col grid */
    #createDistrictAdminForm [style*="grid-column:1/-1"],
    #createDistrictAdminForm [style*="grid-column: 1 / -1"] {
        grid-column: 1 !important;
    }

    /* All admin tables scroll horizontally instead of breaking layout */
    #userListContainer,
    #districtAdminListContainer > div,
    #auditLogsContainer [id$="Table"],
    #auditLogsContainer > div > div[style*="overflow"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #userListContainer table,
    #districtAdminListContainer table {
        min-width: 540px;
    }

    /* DA stats cards: full width stacked */
    #districtAdminContainer > div:nth-child(2) {
        flex-direction: column !important;
    }
    #districtAdminContainer > div:nth-child(2) > div {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Shrink large headings a little */
    #adminDashboard h2 { font-size: 17px !important; }
    #adminDashboard h3 { font-size: 14px !important; }}@media (max-width: 480px) {
    #statsQuickCards {
        grid-template-columns: 1fr !important;
    }
    #userManagementContainer,
    #statisticsContainer,
    #auditLogsContainer,
    #districtAdminContainer {
        padding: 10px !important;
    }}@media (max-width: 768px) {
    #chatContainer {
        bottom: 12px !important;
        left: 12px !important;
        right: auto !important;
    }
    #chatLabels {
        display: none !important;
    }
    #chatMobileBtn {
        display: flex !important;
    }
    #chatWindow {
        width: calc(100vw - 24px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 48px !important;
    }}@media (min-width: 769px) {
    #chatMobileBtn { display: none !important; }}@media (max-width: 768px) {
    .footer-grid h3::after {
        width: 20px;
    }}@media (max-width: 480px) {
    #chatContainer {
        bottom: 80px;
        left: 15px;
    }
    #chatLabels {
        max-width: 180px !important;
        padding: 15px 18px 18px 18px !important;
    }
    #chatWindow {
        width: 340px !important;
        height: 460px !important;
    }}@media (max-width: 480px) {
    #chatContainer {
        bottom: 80px;
        right: 15px;
    }
    #chatLabels {
        max-width: 180px !important;
        padding: 15px 18px 18px 18px !important;
    }
    #chatWindow {
        width: 340px !important;
        height: 460px !important;
        right: 0;
    }}@media (max-width: 768px) {
    .footer-grid h3::after {
        width: 25px;
    }}@media (max-width: 768px) {
    #chatContainer {
        bottom: 100px !important;
        left: 15px !important;
    }
    
    #chatWindow {
        width: 280px !important;
        height: 350px !important;
    }}@media (max-width: 480px) {
    #chatContainer {
        bottom: 90px !important;
        left: 10px !important;
    }
    
    #chatWindow {
        width: 260px !important;
        height: 320px !important;
    }
    
    #chatLabels {
        max-width: 140px !important;
        padding: 8px 10px 12px 10px !important;
    }
    
    #chatLabels button {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }}@media (max-width: 768px) {
    #lawyerDashboard {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }}@media (max-width: 768px) {
    .citizen-dashboard-mode .welcome-banner {
        padding: 10px 14px !important;
        flex-direction: column !important;
    }
    
    .citizen-dashboard-mode .welcome-image img {
        height: 90px !important;
    }}@media (max-width: 480px) {
    .citizen-dashboard-mode .welcome-banner {
        padding: 8px 10px !important;
    }
    
    .citizen-dashboard-mode .welcome-text h1 {
        font-size: 16px !important;
    }
    
    .citizen-dashboard-mode .welcome-image img {
        height: 70px !important;
    }}@media (max-width: 768px) {
    .citizen-dashboard-mode #homePage > div:first-child {
        padding: 20px 20px 30px 20px !important;
        flex-direction: column !important;
    }
    
    .citizen-dashboard-mode #welcomeUserHeading {
        font-size: 24px !important;
    }
    
    .citizen-dashboard-mode #homePage > div:first-child img {
        max-width: 100% !important;
        height: 160px !important;
    }
    
    .citizen-dashboard-mode #homePage > div:first-child > div:first-child {
        height: 25px !important;
    }}@media (max-width: 480px) {
    .citizen-dashboard-mode #homePage > div:first-child {
        padding: 15px 15px 25px 15px !important;
        border-radius: 14px !important;
    }
    
    .citizen-dashboard-mode #welcomeUserHeading {
        font-size: 20px !important;
    }
    
    .citizen-dashboard-mode #homePage > div:first-child p {
        font-size: 12px !important;
    }
    
    .citizen-dashboard-mode #homePage > div:first-child button {
        padding: 8px 18px !important;
        font-size: 11px !important;
    }
    
    .citizen-dashboard-mode #homePage > div:first-child img {
        height: 120px !important;
    }}@media (min-width: 769px) {
    .citizen-dashboard-mode #mainFooter .footer-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }}@media (max-width: 768px) {
    .citizen-dashboard-mode #mainFooter {
        padding: 20px 18px 15px !important;
        margin: 0 10px 0 10px !important;
        border-radius: 14px 14px 0 0 !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid {
        gap: 15px !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid h3 {
        font-size: 13px !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid p,
    .citizen-dashboard-mode #mainFooter .footer-grid a,
    .citizen-dashboard-mode #mainFooter .footer-grid span {
        font-size: 11px !important;
    }
    
    .citizen-dashboard-mode #mainFooter .copyright {
        font-size: 10px !important;
        margin-top: 15px !important;
        padding-top: 12px !important;
    }}@media (max-width: 480px) {
    .citizen-dashboard-mode #mainFooter {
        padding: 15px 12px 12px !important;
        margin: 0 8px 0 8px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid {
        gap: 12px !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid h3 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    
    .citizen-dashboard-mode #mainFooter .footer-grid p,
    .citizen-dashboard-mode #mainFooter .footer-grid a,
    .citizen-dashboard-mode #mainFooter .footer-grid span {
        font-size: 10px !important;
        padding: 2px 0 !important;
    }
    
    .citizen-dashboard-mode #mainFooter .copyright {
        font-size: 9px !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
    }}@media (max-width: 868px) {
    .watermark {
        font-size: 220px !important;
        
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        white-space: nowrap;
        pointer-events: none;
    }
    #loginPage {
        align-items: flex-start;
        padding: 30px 16px 24px;
        overflow-y: auto;
    }
    .login-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    .welcome   { font-size: 22px !important; }
    .platform  { font-size: 20px !important; }
    .lcdjp     { font-size: 48px !important; letter-spacing: 4px !important; }
    .login-logo { width: 100px !important; height: 100px !important; }}@media (max-width: 480px) {
    .watermark  { font-size: 150px !important; }
    .lcdjp      { font-size: 38px !important; }
    .welcome    { font-size: 18px !important; }
    .platform   { font-size: 17px !important; }
    .login-logo { width: 80px !important; height: 80px !important; }}@media (max-width: 767px) {
   
    #lcdjpHamburger    { display: flex !important; }
    #lcdjpSidebarClose { display: flex !important; }

   
    #mainSidebar {
        position: fixed !important;
        top: 0 !important;
        left: -290px !important;
        width: 280px !important;
        min-width: 0 !important;
        max-width: 280px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 2px solid #ddd !important;
        box-shadow: none;
        transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        padding-top: 4px !important;
        background: #f5f5f5 !important;
    }

    
    #mainSidebar.mobile-sidebar-open {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.22) !important;
    }

    
    .dashboard-layout {
        flex-direction: row !important;
        overflow-x: hidden !important;
    }

    
    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    
    .topbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 0 8px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        overflow: hidden !important;
        gap: 0 !important;
    }

    
    .nav-left {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    
    .nav-right {
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
    }

    
    #lcdjpHamburger {
        font-size: 19px !important;
        padding: 6px 8px !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }

   
    .lcdjp-brand {
        flex-shrink: 0 !important;
        gap: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }
    .lcdjp-logo {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }
    .brand-title    { display: none !important; }
    .brand-subtitle { display: none !important; }

   
    #navHomeLink    { display: none !important; }
    #navContactLink { display: none !important; }
    #languageSelect { display: none !important; }
    #lcNavExtras       { display: none !important; }
    #adminNavExtras    { display: none !important; }

    
    #navNotifBtn {
        font-size: 0 !important;          
        min-width: 28px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }
    #navNotifBtn::before {
        content: '';                  
        font-size: 18px !important;
        display: inline-block !important;
    }
    #notifCount {
        font-size: 10px !important;
        padding: 1px 5px !important;
    }

    
    #adminMessagesBtn {
        margin-right: 2px !important;
    }
    #adminMessagesBtn button {
        font-size: 20px !important;
        padding: 4px 6px !important;
    }

    
    .profile-container {
        padding: 2px !important;
        gap: 0 !important;
    }
    .profile-picture {
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    .account-text { display: none !important; }

    
    .account-menu {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        min-width: 180px !important;
        top: 44px !important;
    }

    
    #adminHomeContainer { margin: -12px -12px 0 !important; }
    #adminMapView {
        height: 50vh !important;
        min-height: 250px !important;
        width: 100% !important;
    }

    
    #mapContainer {
        height: 280px !important;
        min-height: 220px !important;
    }

    
    #adminUserPanel {
        width: min(340px, 92vw) !important;
    }}@media (max-width: 480px) {
    #adminMapView  { height: 40vh !important; min-height: 200px !important; }
    #mapContainer  { height: 240px !important; }
    .content-area  { padding: 8px !important; }
    .stat-card h3  { font-size: 24px !important; }
    .form-card     { padding: 14px !important; }}@media (min-width: 768px) {
    #lcdjpHamburger        { display: none !important; }
    #lcdjpSidebarOverlay   { display: none !important; }
    #lcdjpSidebarClose     { display: none !important; }

    #mainSidebar {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
        width: 280px !important;
        min-width: 280px !important;
        z-index: auto !important;
        transition: none !important;
        box-shadow: none !important;
        overflow-y: auto !important;
    }}@media (max-width: 767px) {

    
    body { overflow-x: hidden !important; }

   
    .topbar {
        flex-wrap:   nowrap !important;
        align-items: center !important;
        padding:     0 8px !important;
        height:      52px !important;
        min-height:  52px !important;
        max-height:  52px !important;
        overflow:    visible !important;   
        gap:         0 !important;
    }
    .nav-left {
        flex:       1 1 0 !important;
        min-width:  0 !important;
        flex-wrap:  nowrap !important;
        align-items:center !important;
        gap:        4px !important;
        overflow:   hidden !important;
    }
    .nav-right {
        flex-shrink: 0 !important;
        flex-wrap:   nowrap !important;
        align-items: center !important;
        gap:         2px !important;
        width:       auto !important;      
        border-top:  none !important;
        padding-top: 0 !important;
    }
    
    #lcdjpHamburger {
        display:      flex !important;
        flex-shrink:  0 !important;
        font-size:    20px !important;
        padding:      6px 8px !important;
        margin-right: 4px !important;
    }
    
    .lcdjp-brand {
        flex-shrink: 0 !important;
        gap:         4px !important;
        overflow:    hidden !important;
        max-width:   160px !important;
    }
    .lcdjp-logo {
        width:       34px !important;
        height:      34px !important;
        flex-shrink: 0 !important;
        max-width:   none !important;  
    }
    
    .brand-title    { display: none !important; }
    .brand-subtitle { display: none !important; }

    
    #navHomeLink    { display: none !important; }
    #navContactLink { display: none !important; }
    #languageSelect { display: none !important; }
    #lcNavExtras       { display: none !important; }
    #adminNavExtras    { display: none !important; }

    
    #navNotifBtn {
        font-size:    0 !important;
        min-width:    32px !important;
        text-align:   center !important;
        flex-shrink:  0 !important;
        margin-left:  auto !important;  
    }
    #navNotifBtn::before {
        content:      '';
        font-size:    18px !important;
        display:      inline-block !important;
    }
    #notifCount {
        font-size: 10px !important;
        padding:   1px 5px !important;
    }

    
    #adminMessagesBtn {
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }
    #adminMessagesBtn button {
        font-size: 20px !important;
        padding:   4px 6px !important;
    }

    
    .profile-container {
        padding:     2px !important;
        gap:         0 !important;
        flex-shrink: 0 !important;
    }
    .profile-picture {
        width:       32px !important;
        height:      32px !important;
        flex-shrink: 0 !important;
    }
    .account-text { display: none !important; }

    
    .account-menu {
        right:     0 !important;
        left:      auto !important;
        transform: none !important;
        min-width: 180px !important;
        top:       46px !important;
    }

    
    #adminHomeContainer {
        margin:  0 !important;
        padding: 0 !important;
    }
    #adminMapView {
        height:     55vh !important;
        min-height: 300px !important;
        width:      100% !important;
    }
    #mapContainer {
        height:     clamp(240px, 55vw, 380px) !important;
        min-height: 220px !important;
        width:      100% !important;
    }
    
    #adminUserPanel {
        width:  min(320px, 92vw) !important;
    }

    
    .stats-grid,
    #lawyerDashboard .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card {
        padding: 14px 12px !important;
    }
    .stat-card h3 { font-size: 22px !important; }
    .stat-card p  { font-size: 13px !important; }
    .case-card    { padding: 14px !important; margin-bottom: 12px !important; }

    
    .table-responsive-container {
        width:    100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table-responsive-container table {
        min-width: 480px;
    }

    
    .form-card,
    .form-page {
        max-width: 100% !important;
        padding:   14px !important;
        margin-left:  0 !important;
        margin-right: 0 !important;
    }
    .form-card input,
    .form-card select,
    .form-card textarea,
    .form-page input,
    .form-page select,
    .form-page textarea,
    .input-box,
    select.input-select {
        width:      100% !important;
        font-size:  16px !important;   
        box-sizing: border-box !important;
        min-height: 44px !important;
    }

    
    .modal-overlay {
        align-items: flex-end !important;
        padding:     0 !important;
    }
    .content-modal {
        width:         100% !important;
        max-width:     100% !important;
        max-height:    88vh !important;
        border-radius: 18px 18px 0 0 !important;
        margin:        0 !important;
    }
    .modal-header h3 { font-size: 17px !important; }
    .modal-body      { padding: 18px !important; }

    
    .btn {
        min-height:   44px !important;
        font-size:    15px !important;
        touch-action: manipulation !important;
    }
    button { touch-action: manipulation; }

    
    
    .content-area img,
    .dashboard-view img,
    .modal-body img,
    .form-card img,
    .form-page img,
    .case-card img,
    .stat-card img {
        max-width: 100% !important;
        height:    auto !important;
    }

    
    .notification-card { padding: 12px !important; }
    .notification-icon { font-size: 20px !important; }

    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    
    .dashboard-view {
        width:      100% !important;
        max-width:  100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    
    .welcome-banner { flex-direction: column !important; }
    .welcome-image  { width: 100% !important; }
    .welcome-image img {
        max-height: 160px !important;
        object-fit: cover !important;
    }}@media (max-width: 480px) {
    .stats-grid,
    #lawyerDashboard .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .stat-card   { padding: 12px 10px !important; }
    .stat-card h3{ font-size: 20px !important; }
    .form-card,
    .form-page   { padding: 12px !important; }
    .modal-body  { padding: 14px !important; }
    .content-modal { max-height: 92vh !important; }
    #adminMapView  { height: 45vh !important; min-height: 260px !important; }
    #mapContainer  { height: clamp(200px, 50vw, 320px) !important; }
    
    .topbar {
        flex-wrap:  nowrap !important;
        overflow:   visible !important;
        height:     52px !important;
    }
    .nav-right {
        width:      auto !important;
        border-top: none !important;
        flex-wrap:  nowrap !important;
    }
    #lcdjpHamburger { display: flex !important; }}@media (max-width: 767px) {

    
    .topbar {
        flex-wrap:    nowrap   !important;
        height:       56px     !important;
        min-height:   56px     !important;
        max-height:   56px     !important;
        overflow:     visible  !important;   
        padding:      0 10px   !important;
        align-items:  center   !important;
        gap:          0        !important;
    }

    
    .nav-left {
        flex:         1 1 0   !important;
        min-width:    0       !important;
        flex-wrap:    nowrap  !important;
        align-items:  center  !important;
        gap:          0       !important;
        overflow:     visible !important;
        padding-top:  0       !important;
    }
    .nav-left::after { display: none !important; }  

    
    .nav-right {
        flex-shrink:  0        !important;
        flex-wrap:    nowrap   !important;
        align-items:  center   !important;
        align-self:   center   !important;
        gap:          8px      !important;
        position:     relative !important;
        overflow:     visible  !important;
    }

    
    #lcdjpHamburger {
        display:      flex    !important;
        flex-shrink:  0       !important;
        font-size:    20px    !important;
        padding:      6px 8px !important;
        margin-right: 4px     !important;
    }

    
    .lcdjp-brand {
        flex-shrink: 0       !important;
        gap:         0       !important;
        overflow:    visible !important;
        cursor:      pointer !important;
    }
    .lcdjp-logo     { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }
    .brand-title    { display: none !important; }
    .brand-subtitle { display: none !important; }

   
    #navHomeLink    { display: none !important; }
    #navNotifBtn    { display: none !important; }
    #navContactLink { display: none !important; }
    #languageSelect { display: none !important; }
    #lcNavExtras       { display: none !important; }
    #adminNavExtras    { display: none !important; }

    /* Admin mobile: no logo, no hamburger — the logo's old spot at the
       far left of the bar is taken over by a clickable profile icon.
       That icon opens the sidebar (Home/Users/Statistics/etc. plus the
       account actions appended at its bottom), so every other admin
       feature — and all the account items that used to live in the
       top-right profile dropdown — lives behind that one icon rather
       than in the top bar itself. That old right-hand profile-container
       (small account-only dropdown) is hidden since its items now live
       inside that same sidebar. What's left in the bar besides the
       profile icon is Notifications + Messages, grouped as a matching
       icon-only pair on the right. */
    #adminMobileProfileBtn { display: none; }
    body.admin-dashboard-mode #lcdjpHamburger,
    body.admin-dashboard-mode .lcdjp-brand,
    body.admin-dashboard-mode .profile-container,
    body.admin-dashboard-mode #lcdjpSidebarClose {
        display: none !important;
    }
    /* Admin mobile profile menu: a small card that hangs below/beside the
       profile icon over whatever page is behind it (map, table, etc.) —
       same treatment as the citizen mobile account dropdown
       (.cm-account-dropdown / .cm-menu-item) — instead of the old
       full-height off-canvas #mainSidebar panel. */
    .admin-mobile-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: -4px;
        width: 220px;
        max-height: 70vh;
        overflow-y: auto;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(10, 20, 80, 0.22);
        border: 1px solid rgba(26, 35, 126, 0.1);
        z-index: 3000;
        animation: adminMobileMenuSlide 0.15s ease;
    }
    @keyframes adminMobileMenuSlide {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .admin-mobile-menu-arrow {
        position: absolute;
        top: -7px;
        left: 18px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border-left: 1px solid rgba(26,35,126,0.1);
        border-top: 1px solid rgba(26,35,126,0.1);
        transform: rotate(45deg);
    }
    .admin-mobile-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #1a237e;
        cursor: pointer;
        transition: background 0.15s;
    }
    .admin-mobile-menu-item:hover { background: #f0f4ff; }
    .admin-mobile-menu-divider { height: 1px; background: #e8ecf8; margin: 2px 0; }
    .admin-mobile-menu-logout { color: #c62828 !important; }
    .admin-mobile-menu-theme { justify-content: space-between; cursor: default; }

    body.admin-dashboard-mode #adminMobileProfileBtn {
        display:      flex      !important;
        align-items:  center    !important;
        justify-content: center !important;
        width:        40px      !important;
        height:       40px      !important;
        flex-shrink:  0         !important;
        border:       1.5px solid rgba(255,255,255,0.4) !important;
        border-radius: 50%      !important;
        background:   rgba(255,255,255,0.16) !important;
        box-shadow:   none      !important;
        color:        white     !important;
        cursor:       pointer   !important;
        padding:      0         !important;
        margin-left:  0         !important;
        margin-right: 8px       !important;
        order:        -1        !important;
    }

    /* Notifications + Messages: one icon-only, circular pair on the right
       of the bar, instead of Notifications trailing the left group and
       Messages sitting alone at the far edge. #navNotifBtn is moved into
       .nav-right by JS (_lcdjpEnforceAdminNavRestrictions) for admin —
       that move can't be done in CSS since it crosses containers — this
       just styles it once it's there. */
    body.admin-dashboard-mode #navNotifBtn,
    body.admin-dashboard-mode .admin-messages-icon-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        cursor: pointer !important;
        text-decoration: none !important;
        padding: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.22) !important;
        border: 1px solid rgba(255,255,255,0.28) !important;
        position: relative !important;
    }
    body.admin-dashboard-mode #navNotifBtn .nav-icon-svg,
    body.admin-dashboard-mode .admin-messages-icon-btn .nav-icon-svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.4 !important;
    }
    body.admin-dashboard-mode #navNotifBtn .nav-text-label,
    body.admin-dashboard-mode .admin-messages-label {
        display: none !important;
    }
    body.admin-dashboard-mode #navNotifBtn::before,
    body.admin-dashboard-mode #navNotifBtn::after {
        content: none !important;
    }
    body.admin-dashboard-mode #adminMessagesBtn {
        display: block !important;
        margin-right: 0 !important;
    }
    /* Notifications + Messages pair, shifted left from the right edge of
       the bar toward the profile icon on the left, instead of sitting
       flush against the far edge. */
    body.admin-dashboard-mode .nav-right {
        margin-right: 46px !important;
    }

    /* Admin mobile sidebar: same polished card look as the citizen
       mobile profile dropdown (#cmAccountMenu / .cm-menu-item) —
       white surface, rounded rows, soft hover, light dividers —
       instead of the old flat grey list with hard borders. Every row
       gets the same card surface (not just the account-actions group),
       so nothing looks like an afterthought next to the rest. */
    body.admin-dashboard-mode #mainSidebar {
        background:   #ffffff !important;
        border-right: none    !important;
        padding:      8px 6px 20px !important;
    }
    #adminSidebarMenu .admin-menu-item,
    #daSidebarMenu .da-nav-item {
        border-radius: 10px    !important;
        border-bottom: none    !important;
        border-left:   none    !important;
        margin:        3px 6px !important;
        padding:       13px 14px !important;
        font-weight:   500     !important;
        color:         #1a237e !important;
        background:    #ffffff !important;
        box-shadow:    0 1px 3px rgba(26,44,96,0.08) !important;
        transition:    background 0.15s !important;
    }
    #adminSidebarMenu .admin-menu-item:hover,
    #adminSidebarMenu .admin-menu-item:active,
    #daSidebarMenu .da-nav-item:hover {
        background: #f0f4ff !important;
    }
    #adminSidebarMenu .admin-menu-item.admin-active,
    #daSidebarMenu .da-nav-item.active {
        background:  #e8edff !important;
        border-left: none    !important;
        color:       #1a237e !important;
        font-weight: 700     !important;
    }
    #adminSidebarMenu .admin-menu-item.menu-theme-toggle {
        display:         flex   !important;
        align-items:     center !important;
        justify-content: space-between !important;
    }
    #adminSidebarMenu .sidebar-account-actions {
        background:    transparent !important;
        box-shadow:    none    !important;
        margin:        2px 6px 10px !important;
        padding:       0       !important;
    }

   
    .profile-container {
        padding:     0 0 0 4px !important;
        gap:         5px       !important;
        flex-shrink: 0         !important;
        overflow:    visible   !important;
    }
    .profile-picture {
        width:       34px !important;
        height:      34px !important;
        flex-shrink: 0    !important;
    }
    .account-text {
        display:       block     !important;
        font-size:     11px      !important;
        font-weight:   500       !important;
        color:         white     !important;
        max-width:     60px      !important;
        overflow:      hidden    !important;
        text-overflow: ellipsis  !important;
        white-space:   nowrap    !important;
    }

   
    .account-menu {
        position:   fixed   !important;
        right:      8px     !important;
        top:        60px    !important;
        left:       auto    !important;
        width:      200px   !important;
        z-index:    99999   !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 24px rgba(0,0,0,0.22) !important;
        background: white   !important;
    }
    .account-menu div {
        padding:    13px 14px !important;
        font-size:  14px      !important;
        color:      #222      !important;
        border-bottom: 1px solid #eee !important;
    }
    .account-menu div:last-child { border-bottom: none !important; }
    .account-menu div:hover      { background: #f5f0ff !important; color: #1a4080 !important; }

    
    #adminMessagesBtn        { flex-shrink: 0 !important; margin-right: 2px !important; }
    #adminMessagesBtn button { font-size: 18px !important; padding: 4px 8px !important; }

    

    
    body.citizen-dashboard-mode #navNotifBtn {
        display:         inline-flex !important;
        align-items:     center      !important;
        gap:             4px         !important;
        flex-shrink:     0           !important;
        font-size:       0           !important;   
        color:           white       !important;
        cursor:          pointer     !important;
        text-decoration: none        !important;
        margin-left:     auto        !important;   
        padding:         5px 8px     !important;
        border-radius:   7px         !important;
        position:        relative    !important;
        -webkit-tap-highlight-color: transparent;
    }
    body.citizen-dashboard-mode #navNotifBtn::before { content:''; font-size:18px !important; line-height:1 !important; }
    body.citizen-dashboard-mode #navNotifBtn::after  { content:'Alerts'; font-size:11px !important; font-weight:500 !important; color:white !important; }

    body.citizen-dashboard-mode #navContactLink {
        display:         inline-flex !important;
        align-items:     center      !important;
        gap:             4px         !important;
        flex-shrink:     0           !important;
        font-size:       11px        !important;   
        font-weight:     500         !important;
        color:           white       !important;
        text-decoration: none        !important;
        padding:         5px 8px     !important;
        border-radius:   7px         !important;
        cursor:          pointer     !important;
        -webkit-tap-highlight-color: transparent;
    }
    body.citizen-dashboard-mode #navContactLink::before { content:''; font-size:18px !important; line-height:1 !important; }

    body.citizen-dashboard-mode #languageSelect {
        display:            block                           !important;
        flex-shrink:        0                               !important;
        width:              56px                            !important;
        height:             32px                            !important;
        padding:            0 4px                           !important;
        margin:             0 4px                           !important;
        font-size:          11px                            !important;
        font-weight:        500                             !important;
        background:         #4a0d56                         !important;   
        color:              white                           !important;
        border:             1px solid rgba(255,255,255,0.45) !important;
        border-radius:      6px                             !important;
        -webkit-appearance: none                            !important;
        appearance:         none                            !important;
        text-align:         center                          !important;
        text-align-last:    center                          !important;
        cursor:             pointer                         !important;
    }
    body.citizen-dashboard-mode #languageSelect option { background:white !important; color:#222 !important; font-size:13px !important; }

    
    body.lawyer-dashboard-mode #navNotifBtn {
        display:inline-flex !important; align-items:center !important; gap:4px !important;
        flex-shrink:0 !important; font-size:0 !important; color:white !important;
        cursor:pointer !important; text-decoration:none !important;
        margin-left:auto !important; padding:5px 8px !important; border-radius:7px !important;
        position:relative !important; -webkit-tap-highlight-color:transparent;
    }
    body.lawyer-dashboard-mode #navNotifBtn::before { content:''; font-size:18px !important; line-height:1 !important; }
    body.lawyer-dashboard-mode #navNotifBtn::after  { content:'Alerts'; font-size:11px !important; font-weight:500 !important; color:white !important; }

    body.lawyer-dashboard-mode #navContactLink {
        display:inline-flex !important; align-items:center !important; gap:4px !important;
        flex-shrink:0 !important; font-size:11px !important; font-weight:500 !important;
        color:white !important; text-decoration:none !important;
        padding:5px 8px !important; border-radius:7px !important; cursor:pointer !important;
        -webkit-tap-highlight-color:transparent;
    }
    body.lawyer-dashboard-mode #navContactLink::before { content:''; font-size:18px !important; line-height:1 !important; }

    body.lawyer-dashboard-mode #languageSelect {
        display:block !important; flex-shrink:0 !important;
        width:56px !important; height:32px !important; padding:0 4px !important; margin:0 4px !important;
        font-size:11px !important; font-weight:500 !important;
        background:#4a0d56 !important; color:white !important;
        border:1px solid rgba(255,255,255,0.45) !important; border-radius:6px !important;
        -webkit-appearance:none !important; appearance:none !important;
        text-align:center !important; text-align-last:center !important; cursor:pointer !important;
    }
    body.lawyer-dashboard-mode #languageSelect option { background:white !important; color:#222 !important; font-size:13px !important; }

    
    body.lawyer-dashboard-mode #languageSelect { display:none !important; }

    
    body.citizen-dashboard-mode #notifCount,
    body.lawyer-dashboard-mode  #notifCount,
    body.admin-dashboard-mode   #notifCount {
        position:  absolute !important;
        top:       -5px     !important;
        right:     -5px     !important;
        font-size: 9px      !important;
        padding:   1px 4px  !important;
        min-width: 15px     !important;
    }}@media (max-width: 768px) {
    .citizen-dashboard-mode #mainFooter {
        box-shadow: none !important;
        margin: 0 8px 0 8px !important;
        border-radius: 16px 16px 0 0 !important;
    }}@media (max-width: 480px) {
    .citizen-dashboard-mode #mainFooter {
        box-shadow: none !important;
        margin: 0 6px 0 6px !important;
        border-radius: 12px 12px 0 0 !important;
    }}@media (max-width: 767px) {
    #citizenQuickGrid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .service-card {
        overflow: visible !important;
    }
    .service-image-wrapper {
        overflow: hidden !important;
    }
    .service-card-content {
        overflow: visible !important;
        display: block !important;
    }
    .service-card h3 {
        display: block !important;
    }
    .service-card p {
        display: block !important;
        visibility: visible !important;
        color: #666 !important;
    }}@media (max-width: 360px) {
    
    #citizenQuickGrid,
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .service-card { overflow: visible !important; }}@media (max-width: 767px) {
    body.citizen-dashboard-mode #mainSidebar,
    body.citizen-dashboard-mode .sidebar {
        overflow-y: auto  !important;
        overflow-x: hidden !important;
        max-height: 100vh  !important;
        -webkit-overflow-scrolling: touch !important;
    }}@media (max-width: 767px) {

    
    #citizenNavExtras {
        display: none !important;
    }

    
    body.citizen-dashboard-mode #navNotifBtn::after {
        display: none !important;   
    }
    body.citizen-dashboard-mode #navNotifBtn {
        padding: 5px 6px !important;
        margin-left: auto !important;
    }

    
    body.citizen-dashboard-mode #languageSelect {
        width:   46px !important;
        padding: 0 2px !important;
        margin:  0 3px !important;
        font-size: 10px !important;
    }

    
    body.citizen-dashboard-mode #navContactLink {
        font-size: 0   !important;
        padding:   5px 6px !important;
    }
    body.citizen-dashboard-mode #navContactLink::before {
        font-size: 17px !important;
    }

    
    body.citizen-dashboard-mode .account-text {
        display: none !important;
    }
    body.citizen-dashboard-mode .profile-picture {
        width:  32px !important;
        height: 32px !important;
    }
    body.citizen-dashboard-mode .profile-container {
        gap: 0 !important;
        padding: 2px !important;
    }

    
    .topbar {
        overflow-x: hidden !important;
    }
    /* Admin mobile profile dropdown (.admin-mobile-dropdown) is an
       absolutely-positioned descendant of .topbar that intentionally
       extends below the bar's own ~52-56px height. overflow-x:hidden
       above forces the topbar's still-"visible" overflow-y to compute
       as "auto" (per spec, a non-visible x-axis makes a visible y-axis
       resolve to auto) — turning .topbar into a clipping container that
       cuts the dropdown off at the bar's height, so its items never
       actually show even though JS toggles display:block correctly.
       Keep the horizontal clip for every other role, but let admin's
       topbar overflow visibly so the dropdown can render in full. */
    body.admin-dashboard-mode .topbar {
        overflow-x: visible !important;
    }}@media (max-width: 380px) {
    body.citizen-dashboard-mode #navContactLink {
        display: none !important;
    }
    body.citizen-dashboard-mode #languageSelect {
        width: 40px !important;
        font-size: 9px !important;
    }}@media (max-width: 767px) {
    
    div[style*="background:#e8f5e9"][style*="border-left:4px solid #28a745"],
    div[style*="background: #e8f5e9"][style*="border-left: 4px solid #28a745"] {
        padding: 14px 12px !important;
    }
    
    div[style*="background:#e8f5e9"] > div,
    div[style*="background: #e8f5e9"] > div {
        display:     flex         !important;
        flex-direction: row       !important;
        flex-wrap:   nowrap       !important;
        align-items: flex-start   !important;
        gap:         10px         !important;
        width:       100%         !important;
        box-sizing:  border-box   !important;
        overflow:    hidden       !important;
    }
    
    div[style*="background:#e8f5e9"] input[type="checkbox"],
    div[style*="background: #e8f5e9"] input[type="checkbox"] {
        flex:         0 0 18px    !important;
        width:        18px        !important;
        height:       18px        !important;
        margin-top:   2px         !important;
    }
    
    div[style*="background:#e8f5e9"] label,
    div[style*="background: #e8f5e9"] label {
        flex:         1 1 0       !important;
        min-width:    0           !important;
        max-width:    calc(100% - 28px) !important;
        font-size:    13px        !important;
        line-height:  1.5         !important;
        margin:       0           !important;
        white-space:  normal      !important;
        word-break:   break-word  !important;
        overflow-wrap: break-word !important;
    }}@media (min-width: 768px) {
    .menu-title[data-translate="help_menu"],
    #sidebarFindHelpMenu { display: none !important; }}@media (max-width: 767px) {
    #navHomeLink {
        display: inline-flex !important;
        align-items: center;
        font-size: 11px;
    }
    #navContactLink {
        display: inline-flex !important;
        align-items: center;
        font-size: 11px;
    }
    #languageSelect {
        display: inline-block !important;
        font-size: 11px;
        padding: 2px 4px;
    }
    
    #citizenNavExtras { display: none !important; }
    
    .topbar-username-text { display: none !important; }}.lm-wrap { display:none; }@media (max-width:767px) {
  #lawyerDashboard > h2,
  #lawyerDashboard > .stats-grid,
  #lawyerDashboard > .case-section { display:none !important; }
  .lm-wrap { display:block; background:#f5f7fb; padding-bottom:82px; }
  .lm-header { background:#202a85; color:#fff; padding:16px 20px 32px; }
  .lm-bar { display:flex; align-items:center; justify-content:space-between; }
  .lm-brand { display:flex; gap:10px; align-items:center; }
  .lm-seal { width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
             background:#fff; color:#806020; font-size:17px; border:2px solid #d7bd6c; }
  .lm-brand strong { display:block; font-size:17px; }
  .lm-brand span { display:block; font-size:10px; opacity:.85; margin-top:2px; }
  .lm-actions { display:flex; align-items:center; gap:13px; }
  .lm-bell { font-size:20px; position:relative; cursor:pointer; }
  .lm-bell-dot { position:absolute; width:6px; height:6px; background:#e9b419;
                 border-radius:50%; right:0; top:0; border:1px solid #202a85; }
  .lm-avatar { width:31px; height:31px; border-radius:50%; background:#e6e9f4;
               color:#21498d; display:grid; place-items:center; font-weight:700; font-size:13px; }
  .lm-hello { margin-top:20px; }
  .lm-hello p { margin:0 0 4px; font-size:12px; opacity:.78; text-transform:uppercase; letter-spacing:.5px; }
  .lm-hello h1 { font-size:22px; margin:0; letter-spacing:0; }
  .lm-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px;
                margin-top:-28px; padding:0 16px; }
  .lm-metric { min-height:88px; padding:14px 10px; border-radius:8px; color:#fff;
               box-shadow:0 6px 14px rgba(28,42,103,.11); background:#244a8c; }
  .lm-metric:nth-child(2) { background:#196ac1; }
  .lm-metric b { display:block; text-align:center; font-size:24px; margin:2px 0 8px; }
  .lm-metric span { display:block; font-size:11px; text-align:center; line-height:1.25; font-weight:700; }
  .lm-body { padding:18px 16px 0; }
  .lm-section-title { display:flex; justify-content:space-between; align-items:center; margin:22px 0 12px; }
  .lm-section-title h2 { font-size:17px; margin:0; color:#142047; }
  .lm-filter { width:32px; height:32px; display:grid; place-items:center; background:#fff;
               border:1px solid #e5e7ee; border-radius:7px; color:#202a85; cursor:pointer; }
  .lm-search { display:flex; align-items:center; gap:9px; background:#fff;
               border:1px solid #d5d9e3; border-radius:7px; padding:0 12px; height:44px;
               color:#737a8c; font-size:14px; margin-bottom:4px; }
  .lm-search input { border:0; outline:0; min-width:0; flex:1; font:inherit; color:#142047; }
  .lm-case { background:#fff; border:1px solid #e6e8ef; border-radius:10px; padding:16px;
             box-shadow:0 4px 12px rgba(23,37,91,.05); margin-top:12px; }
  .lm-case-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .lm-eyebrow { color:#667085; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
  .lm-case-id { margin-top:3px; font-size:13px; font-weight:800; color:#202a85; }
  .lm-badge { padding:5px 9px; border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; }
  .lm-badge-green  { background:#eaf7ee; color:#16803f; }
  .lm-badge-orange { background:#fff8e1; color:#af7100; }
  .lm-badge-blue   { background:#e8edff; color:#1a4080; }
  .lm-badge-red    { background:#fdeaea; color:#c0392b; }
  .lm-badge-violet { background:#f1e6fb; color:#62238f; }
  .lm-case-type { margin:14px 0 12px; font-size:16px; font-weight:800; color:#142047; }
  .lm-details { display:grid; grid-template-columns:1fr 1fr; gap:10px;
                padding-top:12px; border-top:1px solid #e5e7ee; }
  .lm-details label { display:block; color:#667085; font-size:11px; margin-bottom:3px; }
  .lm-details strong { font-size:13px; line-height:1.35; display:block; color:#142047; }
  .lm-chip { display:inline-flex; align-items:center; gap:4px; margin-top:3px;
             padding:3px 7px; background:#fff5d9; color:#af7100; border-radius:99px;
             font-size:10px; font-weight:700; }
  .lm-case-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; }
  .lm-case-actions.two-col { grid-template-columns:1fr 1fr; }
  .lm-case-actions.one-col { grid-template-columns:1fr; }
  .lm-btn { height:36px; border-radius:6px; border:1px solid #d8dce7;
            font:700 12px Inter,Arial,sans-serif; color:#202a85; background:#fff; cursor:pointer; }
  .lm-btn-primary { background:#202a85; color:#fff; border-color:#202a85; }
  .lm-btn-success { background:#16803f; color:#fff; border-color:#16803f; }
  .lm-btn-danger  { background:#c0392b; color:#fff; border-color:#c0392b; }
  .lm-empty { text-align:center; color:#667085; font-size:13px; padding:24px 0 10px; }
  .lm-bottom-nav { position:fixed; bottom:0; left:0; right:0; height:70px;
                   display:grid; grid-template-columns:repeat(4,1fr);
                   background:#fff; border-top:1px solid #e5e7ee;
                   box-shadow:0 -5px 14px rgba(21,39,91,.05); z-index:999; }
  .lm-nav-item { display:grid; justify-items:center; align-content:center;
                 gap:4px; color:#000000; font-size:10px; font-weight:700; cursor:pointer; }
  .lm-nav-item svg { display:block; width:20px; height:20px; stroke-width:2.4; stroke:#000000; }
  .lm-nav-item.active { color:#000000; }
  .lm-nav-item.active svg { stroke:#000000; }
  /* Lawyer dashboard has its own header (.lm-header) with brand, Emergency
     Help, notifications and account menu — the shared hamburger .topbar
     above it is redundant on mobile and is removed here. */
  body.lawyer-dashboard-mode .topbar { display:none !important; }
}@media (max-width:767px) {
  .cm-wrap.cm-active { display:block; background:#f5f7fb; padding-bottom:82px; }
  
  .cm-active ~ #citizenQuickLinks,
  .cm-active ~ #citizenQuickGrid { display:none !important; }
  .cm-header { background:#202a85; color:#fff; padding:16px 20px 32px; }
  .cm-bar { display:flex; justify-content:space-between; align-items:center; }
  .cm-brand { display:flex; gap:10px; align-items:center; }
  .cm-seal { width:36px; height:36px; display:grid; place-items:center;
             border:2px solid #d7bd6c; border-radius:50%; color:#806020;
             background:#fff; font-size:17px; }
  .cm-brand strong { display:block; font-size:17px; }
  .cm-brand span { display:block; margin-top:2px; font-size:10px; opacity:.85; }
  .cm-actions { display:flex; align-items:center; gap:13px; }
  .cm-bell { position:relative; font-size:19px; cursor:pointer; }
  .cm-bell-dot { position:absolute; width:6px; height:6px; top:0; right:0;
                 border:1px solid #202a85; border-radius:50%; background:#e9b419; }
  
  .cm-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 210px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(10, 20, 80, 0.18);
    border: 1px solid rgba(26, 35, 126, 0.1);
    z-index: 3000;
    overflow: hidden;
    animation: cmMenuSlide 0.15s ease;
  }
  @keyframes cmMenuSlide {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .cm-menu-arrow {
    position: absolute;
    top: -7px;
    right: 10px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid rgba(26,35,126,0.1);
    border-top: 1px solid rgba(26,35,126,0.1);
    transform: rotate(45deg);
  }
  .cm-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1a237e;
    cursor: pointer;
    transition: background 0.15s;
  }
  .cm-menu-item:hover { background: #f0f4ff; }
  .cm-menu-item svg { flex-shrink: 0; color: #5c6bc0; }
  .cm-menu-divider { height: 1px; background: #e8ecf8; margin: 2px 0; }
  .cm-menu-logout { color: #c62828 !important; }
  .cm-menu-logout svg { color: #c62828 !important; }

  .cm-avatar { width:31px; height:31px; display:grid; place-items:center;
               border-radius:50%; background:#e6e9f4; color:#21498d;
               font-size:13px; font-weight:700; cursor:pointer; user-select:none; }
  .cm-greeting { margin-top:26px; }
  .cm-greeting p { margin:0 0 5px; font-size:12px; opacity:.78;
                   text-transform:uppercase; letter-spacing:.5px; }
  .cm-greeting h1 { margin:0; font-size:22px; }
  
  .cm-body { padding:0 16px 18px; }
  .cm-case-card { margin-top:-26px; padding:16px; border-radius:8px; background:#fff;
                  border:1px solid #e4e7ef; box-shadow:0 7px 16px rgba(26,44,96,.09); }
  .cm-case-top { display:flex; align-items:start; justify-content:space-between; gap:12px; }
  .cm-case-top p { margin:0 0 4px; font-size:11px; color:#667085;
                   font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
  .cm-case-top strong { font-size:14px; color:#202a85; }
  .cm-status-badge { padding:6px 9px; border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; }
  .cm-badge-inprog { color:#16803f; background:#eaf7ee; }
  .cm-badge-pending { color:#af7100; background:#fff8e1; }
  .cm-badge-resolved { color:#667085; background:#f0f1f4; }
  .cm-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:16px 0 8px; }
  .cm-progress span { display:block; height:5px; border-radius:99px; background:#dce2ef; }
  .cm-progress span.done { background:#196ac1; }
  .cm-stage { display:flex; justify-content:space-between; color:#667085; font-size:11px; }
  .cm-stage strong { color:#196ac1; }
  .cm-no-case { text-align:center; color:#667085; font-size:13px; padding:14px 0; }
  .cm-new-btn { width:100%; height:48px; margin-top:18px; border:0; border-radius:7px;
                background:#202a85; color:#fff; font:700 14px Inter,Arial,sans-serif; cursor:pointer; }
  
  .cm-section-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
  .cm-section-head h2 { font-size:17px; margin:0; color:#142047; }
  .cm-link { color:#202a85; font-size:12px; font-weight:800; cursor:pointer; }
  .cm-shortcuts { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .cm-shortcut { min-height:140px; padding:0; border:1px solid #e4e7ef;
                 border-radius:12px; background:#fff; box-shadow:0 3px 10px rgba(23,37,91,.05);
                 cursor:pointer; overflow:hidden; display:flex; flex-direction:column; }
  .cm-shortcut-icon { flex:1; width:100%; min-height:100px; overflow:hidden;
                      display:flex; align-items:center; justify-content:center; }
  .cm-shortcut-icon img { width:100%; height:100%; object-fit:cover; display:block; }
  .cm-shortcut span { display:block; font-size:12px; font-weight:800; line-height:1.25;
                      color:#142047; padding:9px 6px 11px; text-align:center; background:#fff;
                      border-top:1px solid #eef0f8; }
  
  .cm-activity { padding:15px; border:1px solid #e4e7ef; border-radius:8px; background:#fff; }
  .cm-activity-row { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid #e5e7ee; }
  .cm-activity-row:last-child { padding-bottom:0; border-bottom:0; }
  .cm-round { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center;
              border-radius:50%; color:#196ac1; background:#e7f1fd; font-size:14px; }
  .cm-activity-row strong { display:block; margin-bottom:3px; font-size:13px; color:#142047; }
  .cm-activity-row p { margin:0; color:#667085; font-size:11px; line-height:1.35; }
  
  .cm-bottom-nav { position:fixed; bottom:0; left:0; right:0; height:70px;
                   display:grid; grid-template-columns:repeat(4,1fr);
                   border-top:1px solid #e5e7ee; background:#fff;
                   box-shadow:0 -5px 14px rgba(21,39,91,.05); z-index:999; }
  .cm-nav { display:grid; align-content:center; justify-items:center;
            gap:4px; color:#7b8292; font-size:10px; font-weight:700; cursor:pointer; }
  .cm-nav b { font-size:18px; line-height:1; font-weight:500; }
  .cm-nav.active { color:#000000; }
  .cm-nav.active b { padding:4px 10px; margin-top:-4px; border-radius:7px; background:#e8edff; display:block; }}@media(max-width:767px){ #desktopVerifBanner { display:none !important; }}@media(min-width:768px){ #mobileVerifBanner  { display:none !important; }}@media(max-width:540px){ .idv-modal-box { padding:20px 14px 18px; }}@media (max-width: 520px) {
    .user-type-grid { grid-template-columns: 1fr 1fr; }
    .otp-digit { width: 42px; height: 50px; font-size: 20px; }
    .otp-row { gap: 6px; }
    .reg-step-connector { max-width: 28px; }}@media (max-width: 520px) {
    #aiAssistantPanel {
        height: 96vh;
        height: 96dvh;
        max-height: none;
        border-radius: 20px 20px 0 0;
    }
    #aiAssistantPanel .ai-header { padding: 16px 18px 12px; }
    #aiChatArea { padding: 14px 14px 10px; }
    .ai-input-row { padding: 10px 12px; }
    #aiCategoryGrid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    #citizenHeroBanner > div:last-child { padding: 28px 22px 50px 22px !important; flex-direction: column !important; gap: 20px !important; }
    #citizenHeroBanner h1 { font-size: 26px !important; }
    #citizenHeroBanner div[style*="flex:1; display:flex; justify-content:center"] { display: none !important; }}@media (max-width: 767px) {

  
  .cm-wrap.cm-active { background:#f4f6f9 !important; padding-bottom:0 !important; }

  
  .cm-bottom-nav { display:none !important; }

  
  .cm-header {
    background: linear-gradient(135deg,#1a237e 0%,#1a4080 100%) !important;
    padding: 0 !important;
  }

  
  .cm-bar {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    gap: 0 !important;
    min-height: 58px !important;
  }

  
  .cm-brand { display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important; }
  .cm-seal {
    width:40px !important; height:40px !important;
    border:2px solid rgba(255,255,255,0.3) !important;
    background:white !important; border-radius:50% !important;
    display:grid !important; place-items:center !important;
  }
  .cm-brand strong { display:block !important; font-size:14px !important; font-weight:700 !important; color:white !important; line-height:1.15 !important; }
  .cm-brand span   { display:block !important; font-size:9px  !important; color:rgba(255,255,255,0.75) !important; margin-top:1px !important; }

  
  .cm-top-nav {
    display: flex !important; flex:1 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important; padding: 0 4px !important;
    overflow: hidden !important;
    height: 100% !important;
    align-self: stretch !important;
  }
  .cm-top-nav-item {
    display: flex !important; flex-direction:column !important;
    align-items: center !important; gap:3px !important;
    padding: 0 8px 10px !important;
    color: rgba(255,255,255,0.68) !important;
    font-size: 10px !important; font-weight:600 !important;
    cursor: pointer !important; border-radius:0 !important;
    -webkit-tap-highlight-color: transparent !important;
    white-space: nowrap !important; min-width:42px !important;
    text-align:center !important; flex-shrink:0 !important;
    border-bottom: 2.5px solid transparent !important;
    transition: color 0.15s, border-color 0.15s !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
  }
  .cm-top-nav-item:active { color:rgba(255,255,255,0.9) !important; }
  .cm-top-nav-item.cm-tnav-active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
  }
  .cm-tnav-icon { font-size:17px !important; line-height:1 !important; display:block !important; }

  
  .cm-actions { display:flex !important; align-items:center !important; gap:8px !important; flex-shrink:0 !important; }

  
  #cmLanguageSelect.mobile-lang-select {
    display:block !important;
    appearance:none !important; -webkit-appearance:none !important;
    background:rgba(255,255,255,0.15) !important;
    border:1.5px solid rgba(255,255,255,0.35) !important;
    border-radius:8px !important;
    color:white !important;
    font-size:11px !important; font-weight:700 !important;
    padding:5px 22px 5px 8px !important;
    height:32px !important;
    cursor:pointer !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 5px center !important;
    background-size:10px !important;
    min-width:58px !important;
  }
  #cmLanguageSelect.mobile-lang-select option {
    background:#1a237e !important; color:white !important;
  }
  
  .mobile-lang-select:not(#cmLanguageSelect) { display:none !important; }

  
  #citizenMobileView .cm-bell { display:none !important; }

  .cm-bell {
    position:relative !important; color:white !important;
    cursor:pointer !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
    width:34px !important; height:34px !important;
  }
  .cm-bell svg { color:white !important; width:22px !important; height:22px !important; }
  .cm-bell-dot {
    position:absolute !important; top:1px !important; right:1px !important;
    background:#dc3545 !important; border-radius:50% !important;
    width:10px !important; height:10px !important; border:1.5px solid #1a237e !important;
  }
  #cmBellCount {
    position:absolute !important; top:-4px !important; right:-6px !important;
    background:#dc3545 !important; color:white !important; border-radius:10px !important;
    min-width:18px !important; height:18px !important; font-size:10px !important;
    font-weight:700 !important; display:flex !important; align-items:center !important;
    justify-content:center !important; padding:0 4px !important;
    border:1.5px solid #1a237e !important; line-height:1 !important;
  }
  .cm-avatar-wrap { position:relative !important; }
  .cm-avatar {
    width:36px !important; height:36px !important; border-radius:50% !important;
    background:#5c6bc0 !important; color:white !important;
    font-size:13px !important; font-weight:700 !important;
    cursor:pointer !important; user-select:none !important;
    display:grid !important; place-items:center !important;
    border:2px solid rgba(255,255,255,0.45) !important;
    letter-spacing:0.5px !important;
  }

  
  .cm-greeting { padding:4px 16px 20px !important; margin-top:0 !important; }
  .cm-greeting p {
    font-size:11px !important; color:rgba(255,255,255,0.65) !important;
    text-transform:uppercase !important; letter-spacing:1.2px !important;
    font-weight:600 !important; margin:0 0 3px !important;
  }
  .cm-greeting h1 {
    font-size:27px !important; font-weight:700 !important; color:#fff !important;
    margin:0 !important; letter-spacing:-0.5px !important; line-height:1.2 !important;
  }

  
  .cm-body { padding:0 !important; background:#f4f6f9 !important; }

  
  #cmMobileMapSection {
    margin: 16px 14px 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 14px rgba(26,44,96,0.10) !important;
    border: 1px solid #dde3ef !important;
  }
  .cm-map-chip {
    white-space:nowrap !important; border-radius:20px !important;
    padding:5px 12px !important; font-size:11px !important;
    font-weight:600 !important; color:#555 !important;
    background:#f5f7ff !important; border:1px solid #e0e5f5 !important;
    cursor:pointer !important; flex-shrink:0 !important;
    -webkit-tap-highlight-color:transparent !important;
    transition:all 0.15s !important; display:inline-flex !important;
    align-items:center !important;
  }
  .cm-map-chip.cm-map-chip-active { background:#e8f0fe !important; color:#1a237e !important; border-color:#c5d3f8 !important; }
  .cm-map-chip:active { opacity:0.75 !important; }

  
  #cmAiEmergencyBanner {
    margin: 16px 14px 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(26,35,126,0.32) !important;
  }

  
  #cmEmergencyCategorySection { padding:0 14px !important; margin-top:20px !important; margin-bottom:0 !important; }
  #cmEmergencyCategorySection .cm-section-head { padding:0 !important; margin-bottom:10px !important; }
  #cmEmergencyCategorySection .cm-section-head h2 { font-size:16px !important; font-weight:700 !important; color:#1a1a2e !important; }

  
  #cmEmergGrid { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; }
  #cmEmergGrid > div {
    flex-direction:column !important; align-items:center !important;
    text-align:center !important; gap:6px !important;
    padding:12px 6px !important; justify-content:flex-start !important;
    min-width:0 !important;
  }
  #cmEmergGrid > div > div:first-child { flex-shrink:0 !important; margin:0 !important; }
  #cmEmergGrid > div > div:last-child { display:flex !important; flex-direction:column !important; align-items:center !important; gap:2px !important; }
  #cmEmergGrid > div > div:last-child > div:first-child { font-size:11px !important; font-weight:700 !important; text-align:center !important; line-height:1.2 !important; }
  #cmEmergGrid > div > div:last-child > div:last-child  { font-size:10px !important; color:#888 !important; text-align:center !important; line-height:1.25 !important; }

  
  #cmEmergencyCategorySection > div:last-child {
    border-radius:10px !important; margin-top:10px !important;
  }

  
  .cm-case-card {
    margin:18px 14px 0 !important; border-radius:14px !important;
    border:1px solid #dde3ef !important;
    box-shadow:0 3px 14px rgba(26,44,96,0.09) !important;
    padding:16px !important; background:white !important;
  }
  .cm-case-top p { font-size:10px !important; color:#888 !important; text-transform:uppercase !important; letter-spacing:0.6px !important; margin:0 0 4px !important; font-weight:700 !important; }
  .cm-case-top strong { font-size:15px !important; font-weight:700 !important; color:#1a237e !important; }
  .cm-status-badge { font-size:11px !important; font-weight:700 !important; padding:5px 10px !important; border-radius:20px !important; }
  .cm-badge-inprog  { background:#e8f5e9 !important; color:#2e7d32 !important; }
  .cm-badge-pending { background:#fff8e1 !important; color:#f57c00 !important; }
  .cm-badge-resolved{ background:#f0f1f4 !important; color:#667085 !important; }
  .cm-progress { margin:14px 0 6px !important; gap:4px !important; }
  .cm-progress span { height:6px !important; border-radius:99px !important; }
  .cm-progress span.done { background:#1976d2 !important; }
  .cm-stage { font-size:10px !important; color:#888 !important; margin-top:4px !important; }
  .cm-stage strong { color:#1976d2 !important; font-weight:700 !important; }
  .cm-no-case { color:#888 !important; font-size:13px !important; text-align:center !important; padding:16px 0 4px !important; }

  
  .cm-new-btn {
    display:block !important; margin:14px 14px 0 !important;
    width:calc(100% - 28px) !important; height:50px !important;
    border-radius:12px !important; background:#1a237e !important;
    color:white !important; font-size:15px !important; font-weight:700 !important;
    box-shadow:0 4px 16px rgba(26,35,126,0.25) !important;
    border:none !important; cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .cm-new-btn:active { background:#0d1442 !important; }

  
  .cm-section-head { padding:0 14px !important; margin:24px 0 12px !important; }
  .cm-section-head h2 { font-size:17px !important; font-weight:700 !important; color:#1a1a2e !important; }

  
  .cm-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(4,1fr) !important;
    gap: 8px !important;
    padding: 0 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .cm-shortcut {
    min-height:120px !important; border-radius:12px !important;
    box-shadow:0 3px 12px rgba(23,37,91,0.07) !important;
    border:1px solid #e4e8f0 !important; background:white !important;
    overflow:hidden !important; cursor:pointer !important;
    display:flex !important; flex-direction:column !important;
    -webkit-tap-highlight-color:transparent !important;
    min-width:0 !important;
  }
  .cm-shortcut:active { opacity:0.88 !important; }
  .cm-shortcut-icon {
    flex:1 !important; width:100% !important; min-height:80px !important;
    overflow:hidden !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
    background:#eef2fc !important;
  }
  .cm-shortcut-icon img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
  .cm-shortcut span {
    display:block !important; font-size:11px !important; font-weight:700 !important;
    color:#1a237e !important; padding:7px 4px 9px !important;
    text-align:center !important; background:white !important;
    border-top:1px solid #eef0f8 !important; line-height:1.2 !important;
  }

  
  .cm-activity {
    margin:0 14px !important; border-radius:14px !important;
    border:1px solid #dde3ef !important;
    box-shadow:0 2px 10px rgba(26,44,96,0.06) !important;
    background:white !important; padding:4px 0 !important; overflow:hidden !important;
  }
  .cm-activity-row {
    display:flex !important; gap:12px !important; padding:13px 14px !important;
    border-bottom:1px solid #eef0f8 !important; align-items:flex-start !important;
  }
  .cm-activity-row:last-child { border-bottom:none !important; }
  .cm-round {
    width:34px !important; height:34px !important; flex:0 0 34px !important;
    border-radius:50% !important; background:#e3f2fd !important; color:#1a4080 !important;
    display:grid !important; place-items:center !important; font-size:14px !important;
  }
  .cm-activity-row strong { display:block !important; font-size:13px !important; font-weight:700 !important; color:#1a1a2e !important; margin-bottom:3px !important; }
  .cm-activity-row p { margin:0 !important; font-size:11px !important; color:#888 !important; line-height:1.45 !important; }

  
  .citizen-dashboard-mode #mainFooter {
    display:block !important; margin:20px 0 0 !important;
    border-radius:0 !important; padding:22px 12px 28px !important;
    box-shadow:none !important;
  }
  .citizen-dashboard-mode #mainFooter .footer-grid {
    grid-template-columns: repeat(4,1fr) !important;
    gap: 12px 8px !important;
  }
  .citizen-dashboard-mode #mainFooter .footer-grid h3 {
    font-size:11px !important; margin-bottom:7px !important;
    padding-bottom:5px !important; letter-spacing:0.2px !important;
  }
  .citizen-dashboard-mode #mainFooter .footer-grid p,
  .citizen-dashboard-mode #mainFooter .footer-grid a,
  .citizen-dashboard-mode #mainFooter .footer-grid li,
  .citizen-dashboard-mode #mainFooter .footer-grid span {
    font-size:10px !important; padding:1px 0 !important; margin-bottom:3px !important;
    color:rgba(255,255,255,0.82) !important; line-height:1.4 !important;
  }
  .citizen-dashboard-mode #mainFooter .copyright {
    font-size:10px !important; margin-top:14px !important; padding-top:10px !important;
    color:rgba(255,255,255,0.5) !important;
  }

  
  .cm-account-dropdown { right:-8px !important; top:calc(100% + 8px) !important; }

  
  .cm-body > *:last-child { margin-bottom:24px !important; }}@media (max-width: 380px) {
  .cm-top-nav-item { padding:0 4px 10px !important; min-width:34px !important; font-size:9px !important; }
  .cm-tnav-icon { font-size:15px !important; }
  .cm-brand strong { font-size:12px !important; }
  .cm-brand span { display:none !important; }
  #cmEmergGrid > div { padding:10px 3px !important; }
  #cmEmergGrid > div > div:first-child { width:30px !important; height:30px !important; }
  .cm-shortcuts { gap:6px !important; }
  .citizen-dashboard-mode #mainFooter .footer-grid { grid-template-columns:repeat(2,1fr) !important; }}@media (max-width: 767px) {

  
  .cm-wrap.cm-active { padding-bottom: 82px !important; }

  
  .cm-top-nav { display: none !important; }

  
  .cm-hamburger {
    display: flex !important; align-items: center !important;
    justify-content: center !important; width: 36px !important;
    height: 36px !important; flex-shrink: 0 !important;
    cursor: pointer !important; margin-right: 6px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  
  .cm-msg-icon {
    position: relative !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    width: 34px !important; height: 34px !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
  }
  .cm-msg-badge {
    position: absolute !important; top: -4px !important; right: -5px !important;
    background: #dc3545 !important; color: white !important;
    border-radius: 10px !important; min-width: 17px !important;
    height: 17px !important; font-size: 10px !important; font-weight: 700 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 0 4px !important;
    border: 1.5px solid #1a237e !important; line-height: 1 !important;
  }

  
  .cm-stats-row {
    display: grid !important; grid-template-columns: repeat(4,1fr) !important;
    gap: 8px !important; padding: 14px 14px 0 !important;
  }
  .cm-stat-card {
    background: white !important; border-radius: 12px !important;
    padding: 10px 4px !important; display: flex !important;
    flex-direction: column !important; align-items: center !important;
    gap: 4px !important; box-shadow: 0 2px 8px rgba(26,44,96,0.07) !important;
    border: 1px solid #eef0f8 !important; cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .cm-stat-card:active { opacity: 0.8 !important; }
  .cm-stat-icon { line-height: 1 !important; }
  .cm-stat-num {
    font-size: 18px !important; font-weight: 800 !important;
    color: #1a237e !important; line-height: 1 !important;
  }
  .cm-stat-label {
    font-size: 9px !important; font-weight: 600 !important; color: #555 !important;
    text-align: center !important; line-height: 1.3 !important;
  }
  .cm-stat-label span {
    display: block !important; font-weight: 400 !important;
    color: #999 !important; font-size: 8.5px !important;
  }

  
  .cm-map-section {
    margin: 14px 14px 0 !important; border-radius: 16px !important;
    background: white !important; overflow: hidden !important;
    box-shadow: 0 3px 14px rgba(26,44,96,0.10) !important;
    border: 1px solid #dde3ef !important;
  }
  .cm-map-section-header {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px 10px !important;
  }
  .cm-map-section-title {
    font-size: 13px !important; font-weight: 700 !important;
    color: #1a1a2e !important; display: block !important;
  }
  .cm-map-live-row {
    display: flex !important; align-items: center !important;
    gap: 5px !important; margin-top: 3px !important;
  }
  .cm-live-dot {
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: #2e7d32 !important; display: inline-block !important;
    box-shadow: 0 0 5px rgba(46,125,50,0.55) !important;
    animation: livePulse 2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
  }
  @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .cm-map-live-label {
    font-size: 10px !important; color: #2e7d32 !important; font-weight: 600 !important;
  }
  .cm-map-refresh-btn {
    display: flex !important; align-items: center !important; gap: 5px !important;
    background: #f0f4ff !important; border: 1px solid #c5d3f8 !important;
    color: #1a237e !important; border-radius: 20px !important;
    padding: 5px 12px !important; font-size: 11px !important; font-weight: 600 !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
    white-space: nowrap !important;
  }
  .cm-map-refresh-btn:active { opacity: 0.75 !important; }
  .cm-chips-row {
    display: flex !important; gap: 6px !important;
    padding: 9px 12px 11px !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    background: white !important; border-top: 1px solid #eef0f8 !important;
  }
  .cm-chips-row::-webkit-scrollbar { display: none !important; }

  
  .cm-emerg-banner {
    margin: 14px 14px 0 !important; border-radius: 14px !important;
    background: linear-gradient(90deg, #c62828 0%, #e53935 100%) !important;
    padding: 14px 16px !important; display: flex !important;
    align-items: center !important; gap: 10px !important;
    box-shadow: 0 4px 16px rgba(198,40,40,0.3) !important;
  }
  .cm-emerg-nums-wrap {
    display: flex !important; align-items: center !important; flex: 1 !important;
  }
  .cm-emerg-col { flex: 1 !important; }
  .cm-emerg-small-label {
    font-size: 10px !important; color: rgba(255,255,255,0.72) !important;
    font-weight: 600 !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important; margin-bottom: 1px !important;
  }
  .cm-emerg-big-num {
    font-size: 30px !important; font-weight: 800 !important;
    color: white !important; line-height: 1 !important; display: block !important;
  }
  .cm-emerg-service {
    font-size: 11px !important; color: rgba(255,255,255,0.78) !important;
    display: block !important;
  }
  .cm-emerg-vert-div {
    width: 1px !important; background: rgba(255,255,255,0.25) !important;
    height: 40px !important; margin: 0 14px !important; flex-shrink: 0 !important;
  }
  .cm-emerg-call-fab {
    width: 42px !important; height: 42px !important; border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important;
    cursor: pointer !important; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .cm-emerg-call-fab:active { opacity: 0.75 !important; }

  
  .cm-quick-actions-row {
    display: flex !important; gap: 10px !important;
    justify-content: space-between !important;
    padding: 0 14px !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
  }
  .cm-quick-actions-row::-webkit-scrollbar { display: none !important; }
  .cm-qa-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 8px !important;
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
  }
  .cm-qa-item:active { opacity: 0.72 !important; }
  .cm-qa-icon {
    width: 52px !important; height: 52px !important; border-radius: 14px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }
  .cm-qa-label {
    font-size: 10px !important; font-weight: 600 !important; color: #333 !important;
    text-align: center !important; line-height: 1.3 !important;
  }

  
  .cm-bottom-cols {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; padding: 0 14px !important; margin-top: 14px !important;
    margin-bottom: 8px !important;
  }
  .cm-bottom-cols.cm-bottom-cols-single {
    grid-template-columns: 1fr !important;
  }
  .cm-bottom-cols > div {
    min-width: 0 !important;
  }
  .cm-bottom-col-head {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; margin-bottom: 8px !important;
  }
  .cm-bottom-col-title {
    font-size: 12px !important; font-weight: 700 !important; color: #1a1a2e !important;
  }
  .cm-col-link {
    font-size: 10px !important; color: #1a237e !important;
    font-weight: 700 !important; cursor: pointer !important;
  }

  
  .cm-bottom-cols .cm-activity {
    margin: 0 !important;
  }
  .cm-bottom-cols .cm-activity-row {
    padding: 9px 10px !important; gap: 8px !important;
  }
  .cm-bottom-cols .cm-activity-row strong { font-size: 11px !important; }
  .cm-bottom-cols .cm-activity-row p { font-size: 10px !important; }
  .cm-bottom-cols .cm-round {
    width: 28px !important; height: 28px !important; flex: 0 0 28px !important;
    font-size: 12px !important;
  }

  
  .cm-nearby-list {
    background: white !important; border-radius: 12px !important;
    border: 1px solid #eef0f8 !important; overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(26,44,96,0.06) !important;
  }
  .cm-nearby-item {
    display: flex !important; align-items: center !important; gap: 7px !important;
    padding: 8px 9px !important; border-bottom: 1px solid #f0f2f8 !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
  }
  .cm-nearby-item:last-child { border-bottom: none !important; }
  .cm-nearby-item:active { background: #f8f9ff !important; }
  .cm-nearby-dot {
    width: 26px !important; height: 26px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important; font-size: 11px !important;
  }
  .cm-nearby-info { flex: 1 !important; min-width: 0 !important; }
  .cm-nearby-name {
    font-size: 10px !important; font-weight: 700 !important; color: #1a237e !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .cm-nearby-type { font-size: 9px !important; color: #888 !important; }
  .cm-nearby-dist {
    font-size: 9.5px !important; color: #555 !important;
    font-weight: 600 !important; flex-shrink: 0 !important;
  }

  
  .cm-nearby-list.cm-nearby-list-horizontal {
    display: flex !important; flex-direction: row !important;
    align-items: flex-start !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    gap: 10px !important; padding: 2px 2px 6px !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal::-webkit-scrollbar { display: none !important; }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-item {
    flex-direction: column !important; align-items: center !important;
    text-align: center !important; gap: 6px !important;
    flex: 0 0 84px !important; width: 84px !important;
    padding: 12px 8px !important; border-bottom: none !important;
    background: white !important; border-radius: 14px !important;
    border: 1px solid #eef0f8 !important;
    box-shadow: 0 2px 8px rgba(26,44,96,0.06) !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dot {
    display: none !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-info {
    flex: none !important; width: 100% !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-name {
    white-space: normal !important; font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-type {
    display: none !important;
  }
  .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dist {
    color: #1a237e !important; font-size: 10px !important;
  }

  
  .cm-bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr 68px 1fr 1fr !important;
    height: 62px !important; align-items: center !important;
    padding: 0 4px !important;
  }
  .cm-nav { gap: 3px !important; font-size: 9.5px !important; }
  .cm-nav-fab {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 2px !important; cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important; top: -12px !important;
  }
  .cm-fab-circle {
    width: 50px !important; height: 50px !important; border-radius: 50% !important;
    background: linear-gradient(135deg, #1a237e 0%, #1976d2 100%) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(25,118,210,0.42) !important;
  }
  .cm-nav-fab:active .cm-fab-circle { opacity: 0.85 !important; }
  .cm-nav-fab-label {
    font-size: 9px !important; font-weight: 700 !important;
    color: #1a237e !important; margin-top: 2px !important;
  }

  
  body.citizen-dashboard-mode #chatContainer,
  body.citizen-dashboard-mode #chatMobileBtn {
    display: none !important;
  }

  
  #citizenMobileView .cm-emerg-help-card { margin: 8px 12px 0 !important; }
  #citizenMobileView .cm-emerg-help-row { padding: 10px 12px !important; gap: 8px !important; }
  #citizenMobileView .cm-emerg-help-left { gap: 10px !important; }
  #citizenMobileView .cm-emerg-help-icon {
    width: 34px !important; height: 34px !important;
  }
  #citizenMobileView .cm-emerg-help-icon svg { width: 16px !important; height: 16px !important; }
  #citizenMobileView .cm-emerg-help-title { font-size: 13px !important; line-height: 1.2 !important; }
  #citizenMobileView .cm-emerg-help-sub { font-size: 10px !important; line-height: 1.25 !important; margin-top: 1px !important; }

  #citizenMobileView .cm-quick-actions-card {
    margin: 8px 12px 0 !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #eef0f6 !important;
    box-shadow: 0 3px 14px rgba(26,44,96,0.10) !important;
    padding: 12px 4px !important;
  }
  #citizenMobileView .cm-quick-actions-row { padding: 0 10px !important; gap: 4px !important; justify-content: space-between !important; }
  #citizenMobileView .cm-qa-item { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; gap: 5px !important; }
  #citizenMobileView .cm-qa-icon {
    width: 42px !important; height: 42px !important; border-radius: 12px !important; margin: 0 auto !important;
  }
  #citizenMobileView .cm-qa-icon svg { width: 18px !important; height: 18px !important; }
  #citizenMobileView .cm-qa-label { font-size: 8.5px !important; line-height: 1.15 !important; }

  #citizenMobileView .cm-map-section { margin: 8px 12px 0 !important; }
  #citizenMobileView #cmMobileMap { height: 380px !important; }
  #citizenMobileView .cm-chips-row { padding: 6px 10px 8px !important; gap: 5px !important; }
  #citizenMobileView .cm-map-chip { padding: 3px 8px !important; font-size: 10px !important; }

  #citizenMobileView .cm-bottom-cols { margin-top: 6px !important; padding: 0 12px !important; margin-bottom: 0 !important; }
  #citizenMobileView .cm-bottom-col-head { margin-bottom: 3px !important; }
  #citizenMobileView .cm-bottom-col-title { font-size: 10.5px !important; }
  #citizenMobileView .cm-nearby-list.cm-nearby-list-horizontal { padding: 2px 2px 2px !important; gap: 8px !important; align-items: flex-start !important; }
  #citizenMobileView .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-item {
    flex: 0 0 92px !important; width: 92px !important; padding: 14px 8px !important; gap: 6px !important;
  }
  #citizenMobileView .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dot {
    display: none !important;
  }
  #citizenMobileView .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-name {
    font-size: 10px !important; line-height: 1.25 !important;
  }
  #citizenMobileView .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dist {
    font-size: 9px !important;
  }

  #citizenMobileView .cm-header.cm-header-clean { padding: 10px 14px !important; }
  #citizenMobileView .cm-bar-clean .cm-avatar { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  #citizenMobileView .cm-header-greet-line1 { font-size: 15px !important; }
  #citizenMobileView .cm-header-greet-line2 { font-size: 11px !important; margin-top: 1px !important; }

  .cm-wrap.cm-active { padding-bottom: 60px !important; }
  .cm-bottom-nav { height: 58px !important; }}@media (max-width: 767px) {
  #mainFooter { display: none !important; }}@media (max-width: 380px) {
  .cm-stats-row { gap: 5px !important; padding: 10px 10px 0 !important; }
  .cm-stat-num { font-size: 15px !important; }
  .cm-stat-label { font-size: 8px !important; }
  .cm-emerg-big-num { font-size: 24px !important; }
  #citizenMobileView .cm-qa-icon { width: 36px !important; height: 36px !important; }
  #citizenMobileView #cmMobileMap { height: 300px !important; }
  .cm-bottom-cols { gap: 7px !important; padding: 0 10px !important; }}@media (min-width: 768px) {

  
  body.citizen-dashboard-mode #citizenHeroBanner,
  body.citizen-dashboard-mode #citizenQuickLinks,
  body.citizen-dashboard-mode #citizenQuickGrid { display: none !important; }

  
  body.citizen-dashboard-mode #contentArea {
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  body.citizen-dashboard-mode .cm-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    background: #f4f6f9 !important;
    padding-bottom: 0 !important;
  }

  
  body.citizen-dashboard-mode .cm-header {
    background: linear-gradient(135deg, #1a237e 0%, #1a4080 100%) !important;
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
  }
  body.citizen-dashboard-mode .cm-bar {
    display: flex !important;
    align-items: center !important;
    padding: 10px 32px !important;
    gap: 0 !important;
    min-height: 64px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  
  body.citizen-dashboard-mode .cm-hamburger { display: none !important; }

  
  body.citizen-dashboard-mode .cm-top-nav {
    display: flex !important;
    flex: 1 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 8px !important;
    height: 100% !important;
    align-self: stretch !important;
    overflow: visible !important;
  }
  body.citizen-dashboard-mode .cm-top-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 20px 14px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    border-bottom: 3px solid transparent !important;
    transition: color 0.15s, border-color 0.15s !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
  }
  body.citizen-dashboard-mode .cm-top-nav-item.cm-tnav-active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
  }
  body.citizen-dashboard-mode .cm-tnav-icon { font-size: 20px !important; display: block !important; line-height: 1 !important; }

  
  body.citizen-dashboard-mode .cm-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }
  body.citizen-dashboard-mode #cmLanguageSelect.mobile-lang-select {
    display: block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 22px 5px 10px !important;
    height: 34px !important;
    cursor: pointer !important;
    min-width: 62px !important;
  }
  body.citizen-dashboard-mode #citizenMobileView .cm-bell {
    display: flex !important;
    position: relative !important;
    color: white !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
  }
  body.citizen-dashboard-mode .cm-bell svg { color: white !important; width: 22px !important; height: 22px !important; }
  body.citizen-dashboard-mode .cm-msg-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
  }
  body.citizen-dashboard-mode .cm-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #5c6bc0 !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
    letter-spacing: 0.5px !important;
  }

  
  body.citizen-dashboard-mode .cm-greeting { display: none !important; }

  
  body.citizen-dashboard-mode .cm-body {
    padding: 0 !important;
    background: #f4f6f9 !important;
  }
  body.citizen-dashboard-mode .cm-body > * {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  
  body.citizen-dashboard-mode #cmAiEmergencyBanner {
    display: block !important;
    margin: 28px 32px 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(26,35,126,0.28) !important;
    max-width: calc(1100px - 0px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  
  body.citizen-dashboard-mode .cm-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 20px 32px 0 !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  body.citizen-dashboard-mode .cm-stat-card {
    border-radius: 16px !important;
    padding: 20px 18px !important;
    align-items: flex-start !important;
    gap: 10px !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
  }
  body.citizen-dashboard-mode .cm-stat-card:hover {
    box-shadow: 0 6px 20px rgba(26,44,96,0.14) !important;
    transform: translateY(-2px) !important;
  }
  body.citizen-dashboard-mode .cm-stat-num { font-size: 30px !important; font-weight: 800 !important; }
  body.citizen-dashboard-mode .cm-stat-label { font-size: 13px !important; text-align: left !important; }
  body.citizen-dashboard-mode .cm-stat-label span { font-size: 11px !important; }

  
  body.citizen-dashboard-mode .cm-map-section {
    margin: 20px 32px 0 !important;
    border-radius: 18px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode #cmMobileMap { height: 380px !important; }
  body.citizen-dashboard-mode .cm-map-section-title { font-size: 15px !important; }
  body.citizen-dashboard-mode .cm-chips-row { padding: 10px 16px 12px !important; gap: 8px !important; }
  body.citizen-dashboard-mode .cm-map-chip { font-size: 12px !important; padding: 6px 14px !important; }

  
  body.citizen-dashboard-mode .cm-emerg-banner {
    margin: 20px 32px 0 !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode .cm-emerg-big-num { font-size: 38px !important; }
  body.citizen-dashboard-mode .cm-emerg-small-label { font-size: 12px !important; }
  body.citizen-dashboard-mode .cm-emerg-service { font-size: 13px !important; }
  body.citizen-dashboard-mode .cm-emerg-call-fab { width: 52px !important; height: 52px !important; }

  
  body.citizen-dashboard-mode .cm-quick-actions-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    padding: 0 32px !important;
    overflow-x: visible !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode .cm-qa-item { width: auto !important; flex-shrink: unset !important; }
  body.citizen-dashboard-mode .cm-qa-icon {
    width: 64px !important; height: 64px !important;
    border-radius: 18px !important;
  }
  body.citizen-dashboard-mode .cm-qa-label { font-size: 12px !important; }

  
  body.citizen-dashboard-mode .cm-quick-actions-row ~ div,
  body.citizen-dashboard-mode .cm-quick-actions-row + *,
  body.citizen-dashboard-mode div[style*="Quick Actions"] { max-width: none !important; }

  
  body.citizen-dashboard-mode .cm-case-card {
    margin: 0 32px 0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode .cm-no-case { font-size: 14px !important; }

  
  body.citizen-dashboard-mode .cm-bottom-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    padding: 0 32px !important;
    margin-top: 20px !important;
    margin-bottom: 32px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode .cm-bottom-col-title { font-size: 14px !important; }
  body.citizen-dashboard-mode .cm-col-link { font-size: 12px !important; }
  body.citizen-dashboard-mode .cm-activity {
    margin: 0 !important;
    border-radius: 14px !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols .cm-activity-row { padding: 13px 14px !important; gap: 12px !important; }
  body.citizen-dashboard-mode .cm-bottom-cols .cm-activity-row strong { font-size: 13px !important; }
  body.citizen-dashboard-mode .cm-bottom-cols .cm-activity-row p { font-size: 12px !important; }
  body.citizen-dashboard-mode .cm-bottom-cols .cm-round { width: 34px !important; height: 34px !important; flex: 0 0 34px !important; }
  body.citizen-dashboard-mode .cm-nearby-name { font-size: 12px !important; }
  body.citizen-dashboard-mode .cm-nearby-type { font-size: 10px !important; }
  body.citizen-dashboard-mode .cm-nearby-dist { font-size: 11px !important; }
  body.citizen-dashboard-mode .cm-nearby-dot { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  body.citizen-dashboard-mode .cm-nearby-item { padding: 10px 12px !important; gap: 10px !important; }

  
  body.citizen-dashboard-mode div[style*="padding:16px 14px 10px"] {
    padding: 20px 32px 12px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.citizen-dashboard-mode div[style*="padding:16px 14px 10px"] span:first-child { font-size: 17px !important; }

  
  body.citizen-dashboard-mode .cm-bottom-nav { display: none !important; }

  
  body.citizen-dashboard-mode #mainFooter { display: block !important; }}@media (max-width: 767px) {
  body.citizen-dashboard-mode #contentArea,
  body.lawyer-dashboard-mode  #contentArea {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  
  body.citizen-dashboard-mode .cm-wrap,
  body.lawyer-dashboard-mode  .lm-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }}@media (max-width: 767px) {
  body.citizen-dashboard-mode #mainFooter {
    display: none !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter {
    display: block !important;
  }}@media (max-width: 767px) {
  body.citizen-dashboard-mode.mobile-home-active #mainFooter {
    background: rgba(15, 15, 15, 0.82) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.88) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h4,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter p,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter span,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter a,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter div,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .copyright {
    color: rgba(255,255,255,0.82) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter a:hover {
    color: #fff !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3::after {
    background: rgba(255,255,255,0.30) !important;
  }
  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .footer-grid {
    grid-template-columns: 1fr !important;
  }}@media (max-width: 767px) {
  
  body.mobile-form-active .cm-wrap { position: relative !important; z-index: 1 !important; }
  body.mobile-form-active .cm-header { position: sticky !important; top: 0 !important; z-index: 200 !important; display: block !important; }
  
  body.citizen-dashboard-mode.mobile-form-active #dynamicFormPage {
    padding-top: 8px !important;
  }}@media print {
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }}@media (max-width: 767px) {

  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter {
    margin:        0 !important;
    border-radius: 22px 22px 0 0 !important;
    padding:       24px 18px 36px !important;

    
    background: linear-gradient(
      158deg,
      rgba(18, 18, 35, 0.94)  0%,
      rgba(28, 28, 52, 0.82)  45%,
      rgba(14, 14, 28, 0.97) 100%
    ) !important;

    
    backdrop-filter:         blur(28px) saturate(190%) brightness(0.85) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(0.85) !important;

    
    box-shadow:
      
      0 -20px 60px rgba(0, 0, 0, 0.60),
      
      0 -6px  24px rgba(5, 5, 30, 0.50),
      
      inset 0  2px 0   rgba(255, 255, 255, 0.22),
      
      inset 0  6px 18px rgba(255, 255, 255, 0.04),
      
      inset 0 -4px 14px rgba(0, 0, 0, 0.40),
      
      inset  1px 0 0 rgba(255, 255, 255, 0.07),
      inset -1px 0 0 rgba(255, 255, 255, 0.07)
      !important;

    
    border:        1px solid rgba(255, 255, 255, 0.13) !important;
    border-bottom: none !important;

    
    transform:        perspective(1000px) rotateX(1.5deg) !important;
    transform-origin: center bottom !important;

    
    transition: opacity 0.25s ease, transform 0.25s ease !important;
  }

  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h4,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter p,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter span,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter a,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter div,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter li {
    color: rgba(220, 225, 245, 0.90) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3 {
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter a:hover {
    color: #a5c4ff !important;
  }

  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .footer-grid h3::after {
    background: rgba(255, 255, 255, 0.28) !important;
    width: 28px !important;
    height: 2px  !important;
  }

  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .copyright {
    color: rgba(180, 190, 220, 0.65) !important;
    font-size: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding-top: 14px !important;
    margin-top:  18px !important;
  }

  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 14px !important;
  }
  @media (max-width: 420px) {
    body.citizen-dashboard-mode.mobile-home-active #mainFooter .footer-grid {
      grid-template-columns: 1fr !important;
    }}}@media (min-width: 768px) {
  #mobileTrackPanel { display: none !important; }}@media (min-width: 768px) {
  .citizen-dashboard-mode #mainFooter {
    background: rgba(10, 18, 70, 0.72) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    box-shadow:
      0 -8px 32px rgba(10,18,70,0.35),
      inset 0 2px 0 rgba(255,255,255,0.22),
      inset 0 -3px 10px rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-bottom: none !important;
  }}@media (max-width: 767px) {
  .citizen-dashboard-mode #mainFooter,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter {
    background: rgba(10, 18, 70, 0.72) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow: 0 -4px 20px rgba(10,18,70,0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.18) !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 20px 16px 32px !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h4,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter p,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter span,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter a,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter div,
  body.citizen-dashboard-mode.mobile-home-active #mainFooter li {
    color: rgba(220,230,255,0.92) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter h3 {
    color: #ffffff !important;
    font-size: 12px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .copyright {
    color: rgba(180,195,235,0.65) !important;
    font-size: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding-top: 12px !important;
    margin-top: 14px !important;
  }
  body.citizen-dashboard-mode.mobile-home-active #mainFooter .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 12px !important;
  }}#mobileDynamicOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #f0f4fc;
  z-index: 3500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}#mobileDynamicOverlay .mdo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  background: linear-gradient(135deg, #1a3270 0%, #2a52a8 100%);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(26,50,112,0.30);
}#mobileDynamicOverlay .mdo-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}#mobileDynamicOverlay .mdo-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}#mobileDynamicOverlay .mdo-close:hover { background: rgba(255,255,255,0.28); }#mobileDynamicOverlay .mdo-body { flex: 1; padding: 16px; }#mobileDynamicOverlay .form-card { max-width: 100% !important; margin-bottom: 20px !important; }@media (min-width: 768px) { #mobileDynamicOverlay { display: none !important; }}@media (max-width: 767px) {
  #mainFooter,
  footer.footer {
    display: none !important;
  }
  
  body.citizen-dashboard-mode.mobile-home-active #mainFooter {
    display: none !important;
  }
  
  body.citizen-dashboard-mode #contentArea {
    padding-bottom: 80px !important;
  }}@media (max-width: 767px) {
  .cm-bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr 72px 1fr 1fr !important;
    align-items: end !important;
    height: 64px !important;
    padding: 0 2px !important;
    background: #ffffff !important;
    border-top: 1.5px solid #edf0f9 !important;
    box-shadow: 0 -3px 20px rgba(26,35,126,0.09) !important;
    z-index: 999 !important;
  }
  .cm-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-bottom: 10px !important;
    height: 64px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.18s !important;
    user-select: none !important;
  }
  .cm-nav svg {
    width: 23px !important;
    height: 23px !important;
    stroke-width: 2.4 !important;
  }
  .cm-nav.active { color: #000000 !important; }
  .cm-nav svg { stroke: #000000 !important; transition: stroke 0.18s !important; }
  .cm-nav.active svg { stroke: #000000 !important; }

  .cm-nav-fab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-bottom: 8px !important;
    height: 64px !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }
  .cm-fab-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(140deg, #1a237e 0%, #3949ab 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 18px rgba(26,35,126,0.38), 0 0 0 5px rgba(26,35,126,0.07) !important;
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
  }
  .cm-nav-fab:active .cm-fab-circle {
    transform: translateX(-50%) scale(0.93) !important;
    box-shadow: 0 2px 10px rgba(26,35,126,0.30) !important;
  }
  .cm-nav-fab-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #1a237e !important;
    margin-top: 42px !important;
    position: relative !important;
  }}@media (max-width: 767px) {
  .cm-hamburger { display: none !important; }

  
  .cm-bar {
    justify-content: flex-start !important;
  }
  .cm-brand {
    margin-right: auto !important;   
  }
  
  .cm-top-nav { display: none !important; }}@media (max-width: 767px) {
  .citizen-dashboard-mode #mainFooter,
  body.mobile-home-active #mainFooter,
  #mainFooter {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none !important;
  }}@media (max-width: 767px) {
  #cmMobileNotifPanel {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 3000 !important;
    background: #f4f6f9 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #cmMobileNotifPanel .cm-notif-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: #1a237e !important;
    color: #fff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }
  #cmMobileNotifPanel .cm-notif-back {
    background: rgba(255,255,255,0.18) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 34px !important; height: 34px !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  #cmMobileNotifPanel .cm-notif-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    flex: 1 !important;
  }
  #cmMobileNotifPanel .cm-notif-body {
    flex: 1 !important;
    padding: 14px !important;
  }}
body.citizen-dashboard-mode .nav-left > *:not(#lcdjpHamburger),
body.citizen-dashboard-mode .nav-right { display: none !important; }

/* Citizen desktop top nav (#citizenDesktopTopbarInner, min-width:768px
   only — mobile uses the separate .cm-header avatar bar instead). At
   narrower desktop/tablet widths the search box + language select +
   notif/message icons + full name-and-role text next to the avatar
   don't all fit and the right-hand controls can be pushed past the edge
   of the window. Trim it down before that happens: drop the name/role
   text and shrink the search box first. */
@media (min-width: 768px) and (max-width: 1000px) {
  body.citizen-dashboard-mode .cdt-user-info { display: none !important; }
  body.citizen-dashboard-mode .cdt-search-wrap { max-width: 160px !important; }
}
@media (min-width: 768px) {
  /* Safety net: the admin mobile profile dropdown only has its floating-card
     styling inside the max-width:767px block. If it was left open on mobile
     and the viewport then widens (device rotation, browser resize, or a
     dev-tools viewport change) before JS gets a chance to close it, this
     guarantees it never renders as an unstyled full-width list at the top
     of the page — it's simply not shown at all outside mobile. */
  .admin-mobile-dropdown { display: none !important; }

  body.citizen-dashboard-mode #mainSidebar {
    width: 220px !important;
    min-width: 220px !important;
    background: #1a237e !important;
    border-right: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: calc(100vh - 0px) !important;
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
  }
  body.citizen-dashboard-mode #lcdjpSidebarClose { display: none !important; }
  body.citizen-dashboard-mode #citizenSidebarMenu { display: none !important; visibility: hidden !important; }
  body.citizen-dashboard-mode #citizenDesktopNav { display: flex !important; flex: 1 !important; }

  
  .cdn-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
  }
  .cdn-logo-seal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #1a237e;
    font-size: 12px;
    overflow: hidden;
  }
  .cdn-logo-text { flex: 1; min-width: 0; }
  .cdn-logo-title {
    color: white;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
  }
  .cdn-logo-sub {
    color: rgba(255,255,255,0.65);
    font-size: 9.5px;
    line-height: 1.3;
    margin-top: 2px;
  }

  
  .cdn-nav-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
  }
  .cdn-nav-list::-webkit-scrollbar { width: 4px; }
  .cdn-nav-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
  .cdn-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background 0.15s, color 0.15s;
    position: relative;
  }
  .cdn-nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: white;
  }
  .cdn-nav-active {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    font-weight: 600 !important;
  }
  .cdn-nav-active svg { stroke: white; }
  .cdn-nav-item svg { flex-shrink: 0; opacity: 0.85; }
  .cdn-nav-active svg { opacity: 1; }
  .cdn-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
  }

  
  .cdn-help-section {
    padding: 14px 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
  }
  .cdn-help-icon-wrap {
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.8);
  }
  .cdn-help-title {
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }
  .cdn-help-desc {
    color: rgba(255,255,255,0.6);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
  }
  .cdn-support-btn {
    width: 100%;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: white;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
  }
  .cdn-support-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
  }

  
  body.citizen-dashboard-mode .topbar {
    background: white !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid #e8e8ed !important;
    padding: 0 20px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    z-index: 1100 !important;
  }
  
  body.citizen-dashboard-mode #citizenDesktopTopbarInner { display: flex !important; }
  
  body.citizen-dashboard-mode #lcdjpHamburger { display: none !important; }

  
  .cdt-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .cdt-hamburger:hover { background: #f3f4f6; }
  .cdt-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 14px;
    height: 40px;
    max-width: 480px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .cdt-search-wrap:hover { border-color: #d1d5db; }
  .cdt-search-input {
    border: none;
    background: transparent;
    font-size: 13.5px;
    color: #6b7280;
    width: 100%;
    outline: none;
    cursor: pointer;
  }
  .cdt-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .cdt-lang-select {
    border: 1px solid #e5e7eb;
    background: white;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 50px;
    text-align: center;
  }
  .cdt-icon-btn {
    background: white;
    border: 1px solid #e5e7eb;
    color: #374151;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
    flex-shrink: 0;
  }
  .cdt-icon-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
  .cdt-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 9.5px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
    border: 1.5px solid white;
  }
  .cdt-badge-msg { background: #e63757 !important; }
  .cdt-user-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    background: white;
    transition: background 0.15s;
  }
  .cdt-user-wrap:hover { background: #f9fafb; }
  .cdt-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1a237e;
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }
  .cdt-user-info { display: flex; flex-direction: column; }
  .cdt-user-name { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.2; }
  .cdt-user-role { font-size: 11px; color: #6b7280; }

  
  body.citizen-dashboard-mode #contentArea {
    background: #f4f6f8 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.citizen-dashboard-mode .cm-wrap {
    background: #f4f6f8 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  
  body.citizen-dashboard-mode .cm-header { display: none !important; }

  
  body.citizen-dashboard-mode .cm-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 20px 20px 20px 20px !important;
    align-items: start !important;
    max-width: none !important;
  }
  
  body.citizen-dashboard-mode .cm-body > * {
    grid-column: 1 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  
  body.citizen-dashboard-mode #cdDesktopGreeting {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    background: white !important;
    border-radius: 14px !important;
    padding: 24px 24px 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    margin-bottom: 16px !important;
  }
  .cdg-heading {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.2;
  }
  .cdg-subtitle {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0;
  }
  .cdg-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 4px;
  }
  .cdg-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .cdg-stat:hover { background: #f3f4f6; }
  .cdg-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cdg-stat-blue { background: #ede9fe; }
  .cdg-stat-orange { background: #fff7ed; }
  .cdg-stat-red { background: #fef2f2; }
  .cdg-stat-teal { background: #f0fdf9; }
  .cdg-stat-body { display: flex; flex-direction: column; }
  .cdg-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
  }
  .cdg-stat-lbl {
    font-size: 11.5px;
    color: #374151;
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.2;
  }
  .cdg-stat-lbl span {
    display: block;
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 400;
  }

  
  body.citizen-dashboard-mode .cm-stats-row { display: none !important; }
  
  body.citizen-dashboard-mode #cmAiEmergencyBanner { display: none !important; }
  
  body.citizen-dashboard-mode .cm-emerg-banner { display: none !important; }
  
  body.citizen-dashboard-mode div[style*="padding:16px 14px 10px"] { display: none !important; }
  body.citizen-dashboard-mode .cm-quick-actions-row { display: none !important; }

  
  body.citizen-dashboard-mode .cm-map-section {
    background: white !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }
  body.citizen-dashboard-mode .cm-map-section-header {
    padding: 16px 18px 12px !important;
  }
  body.citizen-dashboard-mode #cmMobileMap { height: 340px !important; }
  body.citizen-dashboard-mode .cm-chips-row {
    padding: 10px 14px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  body.citizen-dashboard-mode .cm-map-chip { font-size: 12px !important; padding: 6px 12px !important; }

  
  body.citizen-dashboard-mode .cm-case-card {
    background: white !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin: 0 0 16px 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    border: 1px solid #e5e7eb !important;
  }

  
  body.citizen-dashboard-mode .cm-bottom-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols > div {
    background: white !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    min-width: 0 !important;
  }
  body.citizen-dashboard-mode .cm-activity { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body.citizen-dashboard-mode .cm-nearby-list { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body.citizen-dashboard-mode .cm-bottom-col-head { padding: 0 0 12px !important; }
  body.citizen-dashboard-mode .cm-bottom-col-title { font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; }

  
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal {
    display: flex !important; flex-direction: row !important;
    align-items: flex-start !important; flex-wrap: nowrap !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    gap: 12px !important; padding: 2px 2px 8px !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal::-webkit-scrollbar { height: 6px !important; }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-item {
    flex-direction: column !important; align-items: center !important;
    text-align: center !important; gap: 6px !important;
    flex: 0 0 112px !important; width: 112px !important;
    padding: 14px 10px !important; border-bottom: none !important;
    background: white !important; border-radius: 14px !important;
    border: 1px solid #eef0f8 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dot {
    display: none !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-info {
    flex: none !important; width: 100% !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-name {
    white-space: normal !important; font-size: 12px !important; line-height: 1.3 !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-type {
    font-size: 10.5px !important; color: #8a93a3 !important;
  }
  body.citizen-dashboard-mode .cm-nearby-list.cm-nearby-list-horizontal .cm-nearby-dist {
    color: #1a237e !important; font-size: 11px !important; font-weight: 700 !important;
  }

  
  body.citizen-dashboard-mode #mainFooter { grid-column: 1 !important; }

  

  
  body.citizen-dashboard-mode #mainFooter {
    display: block !important;
    background: #1a1a2e !important;
    color: rgba(255,255,255,0.8) !important;
    padding: 20px 24px 16px !important;
    margin: 4px 0 0 0 !important;
    border-radius: 0 !important;
    border: none !important;
  }}@media (min-width: 768px) {
  body.citizen-dashboard-mode #citizenHeroBanner { display: none !important; }
  body.citizen-dashboard-mode #citizenQuickLinks { display: none !important; }
  body.citizen-dashboard-mode #citizenQuickGrid  { display: none !important; }}@media (min-width: 768px) {
  body.citizen-dashboard-mode .cdg-ai-button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: #1a237e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(26,35,126,.22);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  body.citizen-dashboard-mode .cdg-ai-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26,35,126,.28);
  }
  .cdg-ai-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 0 4px rgba(76,175,80,.16);
  }
  body.citizen-dashboard-mode .cm-bottom-cols {
    grid-template-columns: 1fr !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols > div:first-child {
    grid-column: 1 / -1 !important;
  }
  
  body.citizen-dashboard-mode #cdDesktopNearbyDuplicateSection {
    display: none !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols > div:nth-child(2) {
    display: none !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner {
    display: block !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols .cm-activity {
    min-height: 80px !important;
    max-height: 170px !important;
    overflow-y: auto !important;
  }
  body.citizen-dashboard-mode #chatContainer {
    left: 238px !important;
    right: auto !important;
    bottom: 18px !important;
    pointer-events: none !important;
  }
  body.citizen-dashboard-mode #chatMobileBtn,
  body.citizen-dashboard-mode #chatLabels {
    display: none !important;
  }
  body.citizen-dashboard-mode #chatWindow {
    pointer-events: auto !important;
    position: fixed !important;
    left: 238px !important;
    bottom: 18px !important;
    width: 320px !important;
    height: 420px !important;
  }
  .cm-map-count {
    display: inline-flex;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(26,35,126,.12);
    color: #1a237e;
    font-size: 10px;
    font-weight: 800;
  }
  }@media (min-width: 768px) {
  body.citizen-dashboard-mode .dashboard-layout {
    padding-left: 220px !important;
  }
  body.citizen-dashboard-mode #mainSidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    height: 100vh !important;
    z-index: 1200 !important;
  }
  body.citizen-dashboard-mode .cdt-hamburger,
  body.citizen-dashboard-mode #lcdjpHamburger {
    display: none !important;
  }
  body.citizen-dashboard-mode .cdt-search-wrap {
    margin-left: 24px !important;
  }

  
  body.citizen-dashboard-mode #cmAiEmergencyBanner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    border-radius: 20px !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner > div:nth-child(3) {
    padding: 18px 24px !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner #cmBannerGreeting {
    font-size: 25px !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stats-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 22px 22px !important;
    margin: 0 !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat {
    min-width: 0;
    padding: 11px 12px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat:hover {
    background: rgba(255,255,255,.2) !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat-num,
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat-lbl {
    color: #fff !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat-lbl span {
    color: rgba(255,255,255,.7) !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    background: rgba(255,255,255,.16) !important;
  }
  body.citizen-dashboard-mode #cmAiEmergencyBanner .cdg-stat-icon svg {
    stroke: #fff !important;
  }
  body.citizen-dashboard-mode #cdDesktopGreeting {
    display: none !important;
  }

  
  
  body.citizen-dashboard-mode .lcdjp-desktop-page-overlay,
  body.admin-dashboard-mode .lcdjp-desktop-page-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 82px 24px 24px;
    background: rgba(12,21,57,.44);
    backdrop-filter: blur(3px);
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-shell,
  body.admin-dashboard-mode .lcdjp-desktop-page-shell {
    width: min(980px, 100%);
    max-height: calc(100vh - 106px);
    overflow: hidden;
    background: #f7f9fd;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(10,19,60,.25);
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-header,
  body.admin-dashboard-mode .lcdjp-desktop-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px;
    color: #fff;
    background: linear-gradient(135deg,#17227e,#1a4080);
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-header h2,
  body.admin-dashboard-mode .lcdjp-desktop-page-header h2 {
    margin: 0;
    font-size: 20px;
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-header p,
  body.admin-dashboard-mode .lcdjp-desktop-page-header p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 12px;
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-close,
  body.admin-dashboard-mode .lcdjp-desktop-page-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-body,
  body.admin-dashboard-mode .lcdjp-desktop-page-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 22px;
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view,
  body.admin-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view {
    display: block !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  body.citizen-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view > h2,
  body.citizen-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view > p,
  body.admin-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view > h2,
  body.admin-dashboard-mode .lcdjp-desktop-page-body > .dashboard-view > p {
    display: none !important;
  }

  body.citizen-dashboard-mode #myCasesPage .table-responsive-container {
    padding: 0 !important;
    overflow-x: auto;
  }
  body.citizen-dashboard-mode #myCasesPage .table-responsive-container > button {
    margin: 0 0 16px !important;
    background: #1a237e !important;
    border-radius: 9px !important;
  }
  body.citizen-dashboard-mode #myCasesPage table.cases-table {
    min-width: 760px;
    border: 1px solid #e4e8f2 !important;
    border-radius: 13px;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #fff;
    overflow: hidden;
  }
  body.citizen-dashboard-mode #myCasesPage table.cases-table th {
    padding: 13px 12px !important;
    background: #f0f3fb !important;
    color: #435078 !important;
    border: 0 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  body.citizen-dashboard-mode #myCasesPage table.cases-table td {
    padding: 13px 12px !important;
    border: 0 !important;
    border-top: 1px solid #edf0f6 !important;
    color: #3f4963;
    font-size: 12px;
    vertical-align: middle;
  }
  body.citizen-dashboard-mode #myCasesPage table.cases-table tr:hover td {
    background: #fafbff;
  }

  body.citizen-dashboard-mode #citizenNotificationsPage > div {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage #notificationsContainer {
    display: grid;
    gap: 11px;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage #notificationsContainer > div {
    margin: 0 !important;
    border: 1px solid #e6eaf3 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(25,39,91,.06) !important;
  }

  
  body.citizen-dashboard-mode #chatWindow {
    height: 360px !important;
    min-height: 0 !important;
  }
  body.citizen-dashboard-mode #chatMessages {
    min-height: 0 !important;
    max-height: none !important;
  }}@media (min-width: 768px) {
  
  body.citizen-dashboard-mode .topbar {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }
  body.citizen-dashboard-mode .dashboard-layout {
    box-sizing: border-box !important;
    padding-left: 220px !important;
  }
  body.citizen-dashboard-mode #contentArea {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  body.citizen-dashboard-mode #mainFooter {
    box-sizing: border-box !important;
    width: calc(100% - 240px) !important;
    margin-left: 230px !important;
    margin-right: 10px !important;
    background: #102a5c !important;
    background-image: none !important;
    color: rgba(255,255,255,.9) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -6px 24px rgba(8,24,58,.18) !important;
  }
  body.citizen-dashboard-mode #mainFooter .footer-grid,
  body.citizen-dashboard-mode #mainFooter .copyright {
    max-width: none !important;
    width: 100% !important;
  }
  body.citizen-dashboard-mode #mainFooter .footer-grid {
    gap: 24px !important;
  }
  body.citizen-dashboard-mode .cm-bottom-cols > div:first-child .cm-bottom-col-head .cm-col-link {
    display: none !important;
  }
  body.citizen-dashboard-mode #dynamicFormPage {
    padding: 24px !important;
    border-radius: 16px;
    background: #f4f7fc;
  }
  body.citizen-dashboard-mode #dynamicFormPage .case-submission-card {
    max-width: 980px !important;
  }}@media (max-width: 767px) {
  
  .case-submission-card .case-form-header {
    display: none !important;
  }
  .case-submission-card > .case-form-header + div,
  .case-submission-card > .case-form-header ~ div:not(.case-form-header) {
    margin-left: 12px;
    margin-right: 12px;
  }}@media (min-width: 768px) {
    .mobile-messages-panel,
    .mobile-role-panel,
    #mobileCitizenCasesPanel,
    #mobileCitizenMessagesPanel,
    #mobileTrackPanel,
    #mobileLCCasesPanel,
    #mobileLawyerCasesPanel {
        display: none !important;
    }
    
    body {
        overflow: auto !important;
    }}@media (max-width: 767px) {
    #mainSidebar:not(.mobile-sidebar-open) {
        left: -290px !important;
    }}body.citizen-dashboard-mode #cdDesktopGreeting {
    display: none !important;
}@media (min-width: 768px) {
    body.citizen-dashboard-mode .cm-body {
        padding-top: 8px !important;
    }}@media (min-width: 768px) {
    body.citizen-dashboard-mode #cmAiEmergencyBanner {
        margin-top: 8px !important;
    }}@media (max-width: 600px) {
  #_lcdjpNearbyCard {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 44vh;
    box-shadow: 0 -4px 28px rgba(26,35,126,0.18);
    transform: translateY(100%);
  }
  #_lcdjpNearbyCard.nc-visible {
    transform: translateY(0);
    opacity: 1;
  }}

/* ── Registration phone input — mobile fix ─────────────────────────────────── */
@media (max-width: 600px) {
    /* Shrink the country-code select so the number input has room to breathe */
    #reg_phone_code {
        min-width: 82px  !important;
        max-width: 82px  !important;
        width:     82px  !important;
        padding:   10px 4px !important;
        font-size: 12px  !important;
        flex-shrink: 0   !important;
    }

    /* Let the number input fill all remaining width without overflowing */
    #reg_phone {
        flex:      1     !important;
        min-width: 0     !important;
        width:     100%  !important;
        font-size: 15px  !important;
        box-sizing: border-box !important;
    }

    /* Prevent the row itself from overflowing the form */
    #reg_phone_code,
    #reg_phone {
        max-width: 100% !important;
    }
}

@media (max-width: 380px) {
    /* Very small screens: stack the select above the input */
    div:has(#reg_phone_code) {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #reg_phone_code {
        min-width: 100% !important;
        max-width: 100% !important;
        width:     100% !important;
        font-size: 13px !important;
        padding:   10px 8px !important;
    }

    #reg_phone {
        width: 100% !important;
    }}

/* Remove the duplicate plain blue topbar (hamburger-only) on the mobile
   citizen dashboard; the cm-header below it already provides the brand,
   menu, notifications, and account access. */
@media (max-width: 767px) {
  body.citizen-dashboard-mode .topbar {
    display: none !important;
  }
}

/* Polish for the mobile "My Cases" / "Messages" slide-in panels, which
   previously rendered with unstyled browser defaults (huge plain h2,
   tiny bordered "x" button, no padding). */
@media (max-width: 767px) {
  .mobile-messages-panel {
    background: #fff;
    padding: 16px 16px 100px;
    min-height: 100%;
    box-sizing: border-box;
  }
  .mobile-role-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e8e8ed;
  }
  .mobile-role-panel-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a237e;
  }
  .mobile-role-panel-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f0f2f7;
    color: #333;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-role-panel-close:hover,
  .mobile-role-panel-close:active {
    background: #e2e6f0;
  }
  .mobile-role-panel-empty {
    text-align: center;
    color: #555;
    padding: 40px 20px;
    background: #f8f9fc;
    border-radius: 12px;
    margin-top: 8px;
  }
  .mobile-role-panel-empty-icon {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .mobile-role-panel-empty p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #555;
    line-height: 1.4;
  }
  /* Lawyer Notifications, reused inside .mobile-messages-panel (see
     mobileLawyerNotifications() in reports.js): flatten the desktop card
     chrome so it doesn't render as a shadowed card floating inside the
     already-white fitted panel, and hide the desktop "← Back" button
     since the panel's own round close (×) button replaces it. */
  #mobileLawyerNotificationsPanel #lawyerNotifPageCard {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  #mobileLawyerNotificationsPanel #lawyerNotifPageBackBtn {
    display: none !important;
  }
  /* Admin Notifications, reused inside .mobile-messages-panel (see
     mobileAdminNotifications() in systemAdmin.js): flatten the desktop
     card chrome and hide its own "×" close button, since the panel's
     round close button replaces it. Mirrors the lawyer notifications
     treatment above. */
  #mobileAdminNotificationsPanel #adminNotifPageCard {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  #mobileAdminNotificationsPanel #adminNotifPageCloseBtn {
    display: none !important;
  }
  .mobile-role-panel-empty button {
    background: #1a4080;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  /* Case-conversation cards inside the "Messages" mobile panel — previously
     unstyled (raw <article>/<strong>/<p>/<button> defaults), which read as
     plain stacked text with a bare bordered button. */
  .mobile-message-card {
    display: block;
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 12px;
  }
  .mobile-message-card:last-child {
    margin-bottom: 0;
  }
  .mobile-message-card strong {
    display: block;
    color: #1a237e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }
  .mobile-message-card p {
    margin: 4px 0 12px;
    color: #667085;
    font-size: 12px;
  }
  .mobile-message-card button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #1a4080;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .mobile-message-card button:active {
    background: #142f5f;
  }
  #mobileCitizenMessageList {
    display: flex;
    flex-direction: column;
  }

  /* "My Notifications Inbox" — this page is unstyled markup straight from
     LCDJP.html (plain <h2>, a bare red Close pill, no side padding), so on
     mobile it rendered as raw edge-to-edge text with an oversized red
     button. Give it the same head/spacing treatment as the Messages and
     My Cases panels above. */
  body.citizen-dashboard-mode #citizenNotificationsPage {
    background: #fff;
    padding: 16px 16px 100px;
    box-sizing: border-box;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin: 0 0 16px !important;
    border-bottom: 1px solid #e8e8ed;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage > div:first-child h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1a237e;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage > div:first-child button {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #f0f2f7 !important;
    color: transparent !important;
    font-size: 0;
    line-height: 1;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage > div:first-child button::after {
    content: "\00d7";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 20px;
    line-height: 1;
  }
  body.citizen-dashboard-mode #citizenNotificationsPage #notificationsContainer {
    margin-top: 0 !important;
  }
}

/* The "More services" full-page menu on mobile reuses the desktop sidebar
   markup (.menu-title / .submenu), which wasn't designed for this context:
   the "Report Case" pulse animation read as a stray highlight box, rows
   had inconsistent spacing, and the panel sat behind the fixed bottom nav
   (its floating "+" button bled through and cropped the last row). */
@media (max-width: 767px) {
  #mobileFullPage {
    z-index: 1200;
  }
  #mobileFullPage .menu-title {
    background: #fff;
    padding: 15px 16px;
    font-size: 15px;
    border-bottom: 1px solid #edeff5;
    -webkit-tap-highlight-color: transparent;
  }
  #mobileFullPage .menu-title:active {
    background: #f4f7fc;
  }
  #mobileFullPage .pulse-report-btn {
    animation: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #mobileFullPage .submenu {
    margin: 0;
    border-left: none;
    background: #f8f9fc;
  }
  #mobileFullPage .submenu div {
    padding: 12px 16px 12px 30px;
    font-size: 13.5px;
    color: #333;
    border-bottom: 1px solid #edeff5;
    -webkit-tap-highlight-color: transparent;
  }
  #mobileFullPage .submenu div:last-child {
    border-bottom: none;
  }
  #mobileFullPage .submenu div:active {
    background: #eef2fb;
  }
  #mobileFullPage .submenu strong {
    display: block;
    color: #1a4080;
    font-size: 13.5px;
    margin-bottom: 2px;
  }
  #mobileFullPage .submenu p {
    margin: 0;
    font-size: 11.5px;
    color: #667085;
    line-height: 1.35;
  }
}

/* ============================================================
   Clean citizen mobile header (avatar + greeting only) —
   overrides the older brand/hamburger/top-nav header styling.
   ============================================================ */
@media (max-width: 767px) {
  #citizenMobileView .cm-header.cm-header-clean {
    background: linear-gradient(135deg,#1a237e 0%,#1a4080 100%) !important;
    padding: 16px 16px !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 18px rgba(26,35,126,0.18) !important;
  }
  #citizenMobileView .cm-bar.cm-bar-clean {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  #citizenMobileView .cm-bar-clean .cm-avatar-wrap { flex-shrink: 0 !important; }
  #citizenMobileView .cm-bar-clean .cm-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    cursor: pointer !important;
  }
  .cm-header-greet { min-width: 0; }
  .cm-header-greet-line1 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cm-header-greet-line2 {
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
  }

  /* Dropdown now anchors under the avatar on the left */
  #citizenMobileView .cm-account-dropdown.cm-account-dropdown-left {
    left: -4px !important;
    right: auto !important;
    top: calc(100% + 10px) !important;
  }
  .cm-menu-arrow.cm-menu-arrow-left {
    left: 18px !important;
    right: auto !important;
  }
  #citizenMobileView #cmLanguageSelect.mobile-lang-select.cm-menu-lang-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid #dde3ef !important;
    border-radius: 8px !important;
    padding: 4px 22px 4px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a237e !important;
    background-color: #f5f7ff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231a237e' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 9px !important;
    height: auto !important;
    min-width: 0 !important;
    cursor: pointer !important;
  }
  #citizenMobileView #cmLanguageSelect.mobile-lang-select.cm-menu-lang-select option {
    background: #ffffff !important;
    color: #1a237e !important;
  }

  /* Messages tab badge in the bottom nav (replaces the old header badge) */
  .cm-nav-msg-badge {
    position: absolute;
    top: 2px;
    right: 14px;
    background: #dc3545;
    color: #fff;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
  }
  .cm-bottom-nav .cm-nav { position: relative; }
}

/* ------------------------------------------------------------------ */
/* Admin notifications: anchored dropdown/popover (mobile + tablet).
   #adminNotificationsPage is normally a plain .dashboard-view block
   sitting in the document flow right after .admin-header, so showing
   it with display:block just made it appear wherever flow put it --
   under the map -- instead of near the bell/mail icon that opened it.
   _lcdjpOpenAdminNotifDropdown() (systemAdmin.js) sets this class plus
   inline top/right/width computed from the icon's position; this rule
   supplies the fixed-popover look and must win over .dashboard-view's
   `width:100% !important` (mobile.css, ~line 829), hence the ID+class
   selector and !important. */
#adminNotificationsPage.lcdjp-notif-dropdown-open {
    position:   fixed !important;
    width:      auto !important;
    max-width:  calc(100vw - 16px) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin:     0 !important;
    z-index:    2999 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.22) !important;
}

/* Tap-outside-to-close scrim behind the dropdown. Created/removed by
   _lcdjpOpenAdminNotifDropdown()/_lcdjpCloseAdminNotifDropdown(). */
.lcdjp-notif-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(17, 24, 39, 0.32);
    z-index: 2998;
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Case details modal (#caseDetailsModal): opened whenever a case/item is
   viewed across citizen, lawyer, and admin dashboards. Its desktop inline
   styles size it as a floating box inset 10% left/right and 5% top/bottom
   (LCDJP.html), with the close button positioned top:10px;right:12px
   *relative to that inset box*. On mobile that box floats in the middle
   of the screen with visible margins on all sides, so the close button
   -- while technically top-right of the box -- lands well short of the
   screen's actual top-right corner instead of a proper fitted window.
   This makes the modal fill the viewport on mobile so the same
   top:10px;right:12px close button naturally sits at the real top-right
   corner, consistent with the other mobile panels above. Must win over
   the inline top/left/width/height on the element, hence !important. */
@media (max-width: 767px) {
  #caseDetailsModal {
    top:           0    !important;
    left:          0    !important;
    width:         100% !important;
    height:        100% !important;
    max-width:     100% !important;
    max-height:    100% !important;
    border-radius: 0    !important;
    border:        none !important;
  }
}