/* Recreated processo-rj-page.css */

/* Dark mode compatibility placeholders */
.processo-rj-page.dark .dark\:text-gray-400,
.dark .dark\:text-gray-400 { color: #9ca3af; }

.processo-rj-page.dark .dark\:text-gray-200,
.dark .dark\:text-gray-200 { color: #e2e8f0; }

.processo-rj-page.dark .dark\:border-gray-700,
.dark .dark\:border-gray-700 { border-color: #4a5568; }

.processo-rj-page.dark .dark\:border-gray-600,
.dark .dark\:border-gray-600 { border-color: #718096; }

.processo-rj-page.dark .dark\:block,
.dark .dark\:block { display: block; }

.processo-rj-page.dark .dark\:hidden,
.dark .dark\:hidden { display: none; }

/* Layout Overrides for Full Page Control */
.processo-rj-page #toolbar-administration {
    display: none !important;
}

.node-content .selecaorapida {
    scale: 83% !important;
}

.message-status {
    background: #89ad32;
    border-radius: 10px;
    margin-top: 100px !important;
}

.message-error {
    background: #c94d1c;
    border-radius: 10px;
    margin-top: 100px !important;
}

@media (max-width: 768px) {
    #lista-aj h3.process-title {
        min-width: auto;
        display: block !important;
        width: 100%;
        text-align: center !important;
    }
}
@media (max-width: 768px) {
.object-contain {
    object-fit: fill !important;
}
}

@media (max-width: 768px) {
    /* Target content images specifically to avoid affecting header/logo */
    .page-content img, 
    .region-content img, 
    .node-content img, 
    #processo-rj-page-wrapper img, 
    .flex-grow img,
    main img, 
    main picture, 
    main figure, 
    main svg {
        display: unset !important;
        max-width: 100% !important;
        height: 100% !important;
        height: auto !important;
    }

    /* Explicitly reset header images just in case */
    header img, .header img {
        height: auto !important;
        width: 50% !important;
        max-width: none !important;
        display: inline-block !important;
    }
}

body > header > div > nav > div.header-notification-bell-wrapper > div.header-notification-bell-container > span{
    font-weight: 100 !important;
    font-size: 12px !important;
}


body > header > div > nav > span.text-base{
    font-weight: 100 !important;
    font-size: 14px !important;
}

body.processo-rj-page p{
    color: #000000 !important;
    font-weight: 500 !important;
}

#processo-rj-form-list-processos-rj > header > div > a > span{
color: #000 !important;
    display: initial;
    font-size: 21px;
    font-weight: 700;
    font-family: 'Poppins' !important;
}

#processo-rj-form-list-processos-rj > header > div {
        max-width: 100%;
    width: 90% !important;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

}

body.processo-rj-page, body.processo-rj-page p, body.processo-rj-page h1, body.processo-rj-page h2, body.processo-rj-page h3, body.processo-rj-page h4, body.processo-rj-page h5, body.processo-rj-page h6, body.processo-rj-page span:not(.notification-badge):not(.header-notification-badge):not(.notification-badge-white), body.processo-rj-page div, body.processo-rj-page a, body.processo-rj-page li, body.processo-rj-page td, body.processo-rj-page th, body.processo-rj-page .text-muted, body.processo-rj-page .text-gray-500, body.processo-rj-page .text-gray-600, body.processo-rj-page .text-gray-700, body.processo-rj-page .text-gray-800, body.processo-rj-page .text-gray-900 {
    font-family: poppins, sans-serif !important;
    color: #000000 !important;
}

@media (max-width: 768px) {
    #btn-ordenar-processos, .order-btn {
        background: #facb1f !important;
        border: none !important;
        color: #000 !important;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-left: 0%;
    }
}

@media (max-width: 768px) {
    @media (max-width: 768px) {
        .processo-rj-page .flex.items-center.gap-4.mb-8 {
            flex-direction: column !important;
            align-items: center !important;
            gap: 1rem !important;
            text-align-last: center;
        }
    }
}

#lista-aj h3.process-title {
    text-align: left !important;
    display: table-caption;
    MIN-WIDTH: 100%;
}

body.processo-rj-page header nav a, body.processo-rj-page header nav button {
    color: #000000 !important;
    opacity: 1 !important;
    min-width: 0px !important;
    visibility: visible !important;
}

.page-tabs li a {
    padding: 4px 10px;
    background: var(--primary) !important;
    -webkit-transition: all 0.3s 
ease;
    transition: all 0.3s 
ease;
}

.minhas-solicitacoes-page .bg-surface {
    /* flex: 0 0 260px !important; */
    min-width: 35%;
}

body.processo-rj-page .page-content,
body.processo-rj-page .page-content .node-content,
body.processo-rj-page .page-content .region-content .node-content,
body.processo-rj-page .block-region.region-content .node-content,
body.processo-rj-page .region-content,
body.processo-rj-page .system-main-block {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure our wrapper handles the background */
body.processo-rj-page #processo-rj-page-wrapper {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%); /* Break out of container if still constrained */
  margin-right: calc(-50vw + 50%);
}

button, [type="button"], [type="reset"], [type="submit"] {
    position: relative;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--theme-color);
    color: #363638;
    -webkit-appearance: button;
    appearance: button;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    min-width: 213px;
    border-radius: 25px;
    height: 48px;
}

.processo-rj-page .grid-cols-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-right: 20px;
    margin-left: 20px;
}

/* Margin for Documents and Offices Grid */
.process-docs-grid {
    margin-left: 2rem;
    margin-right: 2rem;
}

@media (min-width: 768px) {
    .process-docs-grid {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}

@media (min-width: 768px) {
    #lista-aj h3.process-title {
    text-align: left !important;
    display: table-caption;
    min-width: none !important;
}
}

/* Process Header Adjustments */
.process-logo-container {
    margin-top: 1rem; /* Reduced from 4rem */
}

.process-page-main-title {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

.process-title {
    color: #000000 !important;
}

.process-company-logo-container {
    width: 192px !important;
    height: 192px !important;
    min-width: 192px !important;
    min-height: 192px !important;
}

.process-header-section {
    margin-bottom: 1rem; /* Reduced from 2rem */
}

/* Margins for Buttons and Status Cards */
.process-actions-container {
    margin-bottom: 4rem !important; /* Increased margin between buttons and status cards */
}

/* Global Black Text Enforcement for Process Page (Light Mode) */
body.processo-rj-page,
body.processo-rj-page p,
body.processo-rj-page h1,
body.processo-rj-page h2,
body.processo-rj-page h3,
body.processo-rj-page h4,
body.processo-rj-page h5,
body.processo-rj-page h6,
body.processo-rj-page span:not(.notification-badge):not(.header-notification-badge):not(.notification-badge-white),
body.processo-rj-page div,
body.processo-rj-page a,
body.processo-rj-page li,
body.processo-rj-page td,
body.processo-rj-page th,
body.processo-rj-page .text-muted,
body.processo-rj-page .text-gray-500,
body.processo-rj-page .text-gray-600,
body.processo-rj-page .text-gray-700,
body.processo-rj-page .text-gray-800,
body.processo-rj-page .text-gray-900 {
    color: #000000 !important;
}

/* Ensure notification badge numbers stay white on process pages */
body.processo-rj-page .notification-badge,
body.processo-rj-page .header-notification-badge,
body.processo-rj-page .notification-badge-white {
    color: #ffffff !important;
}

.notification-badge-white {
    color: #ffffff !important;
    display: inline-flex !important;
}

.notification-badge .header-notification-badge .notification-badge-white{
    color: white !important;
    display: initial;
    font-size: 15px;
}

/* Exceptions for Primary Buttons (usually yellow with black text, but ensure it) */
/* If buttons are dark, they might need white text. Assuming primary is yellow/light. */
/* Fix Header Buttons visibility */
body.processo-rj-page header nav a,
body.processo-rj-page header nav button {
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dark Mode Overrides (if needed later, but user wants black text primarily) */
/* We keep the black text requirement as per user request "todos os textos dessa pagina devem ser em preto" */
/* If dark mode is active, this will look bad (black on black). 
   However, user sees "cinza" and wants "preto". This implies light mode. 
   I will leave dark mode overrides if they were specific, but general text is now black. */

.processo-rj-page.dark .process-title {
    color: #ffffff !important;
}
/* If user switches to dark mode, we might need to invert this, but for now follow instructions */

.processo-rj-page .text-neutral-800 {
    color: var(--text-base);
    font-size: 13px;
    text-align: left;
}

.justify-center {
    justify-content: center;
    background: transparent;
}

.node-content .selecaorapida .botao3 {
    background-image: none;
    font-size: 20px;
    padding: 5px 20px;
    border: 2px solid var(--border-color);
    border-radius: .375rem !important;
    transition: all 0.4s 
ease-in-out;
    margin: 0px;
    width: auto;
    height: auto;
    margin: 0px 5px;
}

.processo-rj-page .mb-10 {
    margin-bottom: 2.5rem;
    margin: 41px;
}

.toolbar .toolbar-bar .toolbar-item {
    color: #fff !important;
}

/* Email font size reduction */
.process-card-email {
    font-size: 0.75rem !important; /* Reduced font size (12px) */
}

/* File item bottom margin */
.process-file-item {
    margin-bottom: 1rem !important;
}

/* Status card text centering */
.process-status-card h3 {
    text-align: center !important;
}

.process-status-card p {
    text-align: center !important;
    justify-content: center !important;
}