@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');

:root{
    /* Custom palette */
    --azul: #212b37;
    --blanco: #ffffff;
    --crema: #fbfaf8;
    --naranja: #ef6337;
    --amarillo: #feca29;
    --crema-claro: #fbfaf8;
    --dorado-borde: #f2c8da;
    --gris: #d8d8d8;
    --gris-texto: #6b7280;

    /* Mapped legacy variables (kept so existing rules keep working) */
    --primary: var(--naranja);
    --primary-100: var(--azul);
    --primary-200: var(--naranja);
    --primary-300: #c84d22;
    --primary-400: #ff8a65;
    --background: var(--crema);
    --background-100: var(--blanco);
    --background-200: var(--gris);

    /* Force bim-ui to use the custom palette regardless of the OS theme */
    --bim-ui_main-base: var(--naranja);
    --bim-ui_accent-base: var(--naranja);
    --bim-ui_bg-base: var(--crema);
    --bim-ui_bg-contrast-10: #f1efeb;
    --bim-ui_bg-contrast-20: var(--gris);
    --bim-ui_bg-contrast-30: #c4c4c4;
    --bim-ui_bg-contrast-40: #b0b0b0;
    --bim-ui_bg-contrast-60: #6b7280;
    --bim-ui_bg-contrast-80: #3a4250;
    --bim-ui_bg-contrast-100: var(--azul);

    /* Default bim-button color: orange background, white label */
    --bim-button--bgc: var(--naranja);
}

/* Override the dark/light auto theme so the custom palette wins */
@media (prefers-color-scheme: dark) {
    :root {
        --bim-ui_bg-base: var(--crema);
        --bim-ui_bg-contrast-10: #f1efeb;
        --bim-ui_bg-contrast-20: var(--gris);
        --bim-ui_bg-contrast-30: #c4c4c4;
        --bim-ui_bg-contrast-40: #b0b0b0;
        --bim-ui_bg-contrast-60: #6b7280;
        --bim-ui_bg-contrast-80: #3a4250;
        --bim-ui_bg-contrast-100: var(--azul);
    }
}

/* bim-button: orange bg, Azul label, no expanding hover circle.
   The shadow-DOM ::before uses var(--bim-ui_main-base); setting it to
   transparent makes the hover animation invisible. */
bim-button {
    --bim-label--c: var(--azul);
    --bim-button--bgc: var(--naranja);
    --bim-ui_main-base: transparent;
    --bim-ui_main-contrast: var(--azul);
}

bim-button:hover {
    --bim-label--c: var(--azul);
}

/* Icon-only buttons (no label) on the orange background — keep the icon white for contrast */
bim-button:not([label]) {
    --bim-label--c: var(--blanco);
    --bim-icon--c: var(--blanco);
}

/* Restore the active-state background since main-base is now transparent */
bim-button[active] {
    background-color: var(--naranja) !important;
    --bim-label--c: var(--azul);
}

/* Keep content/panel bim-buttons (e.g. Editar / Eliminar) orange on
   click/focus instead of flashing the shadow-DOM's near-white pressed bg.
   Scoped to panel sections so the transparent sidebar/toolbar buttons
   keep their own styling. */
bim-panel-section bim-button:hover,
bim-panel-section bim-button:focus,
bim-panel-section bim-button:focus-visible,
bim-panel-section bim-button:focus-within,
bim-panel-section bim-button:active {
    --bim-button--bgc: var(--naranja);
    --bim-label--c: var(--azul);
    background-color: var(--naranja);
    outline: none;
}

/* bim-text-input: white background, dark blue text, orange focus outline */
bim-text-input {
    --bim-input--bgc: var(--blanco);
    --bim-input--olc: var(--naranja);
    --bim-label--c: var(--azul);
    color: var(--azul);
    border: 1px solid var(--gris);
    border-radius: 8px;
}

bim-label {
    color: var(--azul);
}

*{
    font-family: 'Montserrat', 'sans-serif';
    margin: 0;
    padding: 0;
}

html{
    font-size: 16px;
}

body{
    background-color: var(--crema);
    color: var(--azul);
}

/* General Styles */

h2 {
    font-size: var(--font-3xl)
}
  
h3 {
    font-size: var(--font-2xl)
}
  
h4 {
    font-size: var(--font-xl)
}
  
h5 {
    font-size: var(--font-lg)
}
  

#app{
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-areas: 'sidebar content';
    min-height: 100vh;
    background-color: var(--crema);
    color: var(--azul);

}

/* Pin the layout by area so it never depends on child order/count. */
#sidebar {
    grid-area: sidebar;
}

#app-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

button {
    cursor: pointer;
    padding: 8px 15px;
    height: 40px;
    font-size: var(--font-lg);
    background-color: var(--naranja);
    border: none;
    color: var(--blanco);
    border-radius: 100px;
    display: flex;
    align-items: center;
    column-gap: 0px;
}

#nav-buttons a{
    color: var(--blanco);
    text-decoration: none;
}


.project-button:hover{
    background-color: #c84d22;
    transition: 0.6s;
}

.page{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}


/* Sidebar styles */

#sidebar {
    background-color: var(--crema);
    color: var(--azul);
    padding: 25px;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    border-right: 1px solid var(--gris);
}

#sidebar #nav-buttons a{
    color: var(--azul);
}

/* bim-buttons inside the sidebar should look transparent over the cream bg */
#sidebar bim-button,
#nav-buttons bim-button {
    --bim-button--bgc: transparent;
    --bim-label--c: var(--azul);
    --bim-ui_main-base: transparent;
    --bim-ui_main-contrast: var(--naranja);
    background-color: transparent;
}

#sidebar bim-button:hover,
#nav-buttons bim-button:hover {
    --bim-button--bgc: transparent;
    --bim-label--c: var(--naranja);
}

#nav-buttons{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

#company-logo {
    height: 65px;
    width: auto;
    object-fit: contain;
    align-self: center;
}

#nav-buttons bim-button {
    background-color: transparent;
 }


/* Content styles */

header {
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#projects-page{
    height: 100vh;
    overflow: hidden;
}

#projects-page header{
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--crema);
    color: var(--azul);
}

#projects-lists{
  display: grid;
  padding: 20px 40px;
  gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  scrollbar-gutter: stable;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--primary-300) var(--background-100); /* Firefox */
}

#projects-lists a{
    color: var(--azul);
    text-decoration: none;
}

/* Projects list scrollbar (WebKit) */
#projects-lists::-webkit-scrollbar{
    width: 10px;
}

#projects-lists::-webkit-scrollbar-track{
    background: var(--gris);
    border-left: 1px solid rgba(0,0,0,0.06);
}

#projects-lists::-webkit-scrollbar-thumb{
    background: var(--naranja);
    border-radius: 999px;
    border: 2px solid var(--gris);
}

#projects-lists::-webkit-scrollbar-thumb:hover{
    background: var(--azul);
}

.project-card{
    background-color: var(--blanco);
    border-radius: 8px;
    cursor: pointer;
    color: var(--azul);
    box-shadow: 0 2px 8px rgba(33, 43, 55, 0.06);
    transition: box-shadow 0.3s ease, outline-color 0.3s ease;
}

.project-card:hover{
    outline: 2px solid var(--naranja);
    box-shadow: 0 6px 16px rgba(33, 43, 55, 0.10);
}

.card-header{
    display: flex;
    column-gap: 20px;
    padding: 15px 20px;
    align-items: center;
    justify-content: start;
    border-bottom: 2px solid var(--gris);
    height: 60px;
}

.card-content{
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-items: start;
}

.card-property{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--azul);
}

/* Form Styles */

dialog{
    background-color: transparent;
    border: none;
    margin: auto;
}

dialog::backdrop{
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}

form{
    width: 450px;
    border-radius: 10px;
    background-color: var(--blanco);
    color: var(--azul);
}

form h2{
    padding: 20px;
    border-bottom: 2px solid var(--gris);
    color: var(--azul);
}

form .input-list{
    display: flex;
    flex-direction: column;
    padding: 20px;
    row-gap: 25px;
}

form .form-field-container{
    display: flex;
    flex-direction: column;
}

label{
    font-size: var(--font-base);
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--azul);
    display: flex;
    column-gap: 5px;
}

input,textarea,select{
    color: var(--azul);
    background-color: var(--crema);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--gris);
    font-size: var(--font-base);
}

input:focus, textarea:focus, select:focus{
    outline: 2px solid var(--naranja);
}

.modals-buttons{
    display: flex;
    padding: 20px;
    column-gap: 10px;
    flex-direction: row;
    align-content: stretch;
    justify-content: flex-end;
}

.cancel-button{
    background-color: var(--crema);
    color: var(--azul);
    border: 1px solid var(--gris);
}

.accept-button{
    background-color: var(--naranja);
    color: var(--blanco);
}

.accept-button:hover{
    background-color: #c84d22;
    transition: 0.6s;
}

.update-button{
    background-color: var(--naranja);
    color: var(--blanco);
}

.update-button:hover{
    background-color: #c84d22;
    transition: 0.6s;
}

.cancel-button:hover{
    background-color: rgb(220, 68, 68);
    color: var(--blanco);
    outline: none;
    transition: 0.6s;
}


/* Project Details Page */ 

.details-column{
    display: flex; 
    flex-direction: column; 
    row-gap: 30px;
}

.dashboard-card{
    background-color: var(--background-100);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#project-details > .main-page-content{
    display: grid;
    padding: 20px 40px;
    gap: 30px;
    grid-template-columns: 475px 1fr;
    height: 100%;
}

.details-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 30px;
}


.edit-button{
    background-color: transparent; 
    outline: 2px solid #969696; 
    width: 100px; 
    text-align: center;
    margin-right: 8px; 
    padding: 6px 12px; 
}

.edit-button:hover{
    background-color: var(--primary);
    outline: none;
    transition: 0.3s;
}

.details-info{
    display: flex;
    column-gap: 30px;
    padding: 30px 0px;
    justify-content: space-between;
}

.task-header{
    padding: 20px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

.task-searchbar{
    display: flex; 
    align-items: center; 
    justify-content: end; 
    column-gap: 20px;
}

.task-searchbar-container{
    display: flex; 
    align-items: center; 
    background-color: var(--background-100);
    column-gap: 10px;
}

.task-container {
    display: flex;
    flex-direction: column;
    padding: 10px 30px;
    row-gap: 20px;
    overflow-y: auto;
    flex-grow: 1;
    height: 300px; 
}

@media (max-width: 768px) {
    .task-container {
        height: 60vh; /* More height for smaller screens */
    }
}

@media (max-width: 480px) {
    .task-container {
        height: 70vh; /* More height for very small screens */
    }
}



.hide{
    display: none;
}

.task-item{
    padding: 20px;
    background-color: var(--background-200);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: -15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-item:hover{
    outline: 2px solid #fff;
}

.task-item .description-container {
    display: flex;
    column-gap: 15px;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

.description {
    word-wrap: break-word;
    flex-grow: 1; 
}

.task-item .action-icons {
    display: flex;
    align-items: center;
    column-gap: 10px; 
}



#task-container::-webkit-scrollbar {
    width: 7px; 
}


#task-container::-webkit-scrollbar-track {
    background: var(--background-100);
}


#task-container::-webkit-scrollbar-thumb {
    background: var(--background-200)
}



/* Users page */

.user-list{
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.user-search{
    display: flex; 
    align-items: center; 
    column-gap: 10px;
}

#user-info{
    display: flex;
    padding: 20px 40px;
    gap: 20px;
}

.user-card{
    background-color: var(--background-100);
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}

.user-card:hover{
    outline: 2px solid var(--primary);
} 

.user-content{
    padding: 30px 20px;
    display: flex;
    flex-direction: row;
    row-gap: 20px;
    align-items: center;
}

.profile-image {
    width: 45px;
    height: 45px;
    padding: 4px; 
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1
}

.user-property:first-child {
    width: auto; 
    padding-right: 30px;
}

.user-property{
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    
}

.user-button:hover{
    background-color: var(--primary-300);
    transition: 0.6s;
}

.project-card bim-label{
    white-space: normal;
}

/* New styles for the components grid */

bim-grid {
    background-color: transparent;
}
  
.components-grid {
    gap: 1rem;
    height: 100%;
    min-height: 0;
}

.components-grid, .viewport-grid {
    padding: 1rem;
}

.viewer-grid {
    height: 100vh;
    min-height: 0;
}

bim-panel-section {
    --bim-panel-section_hc: var(--naranja);
    --bim-label--c: var(--azul);
    color: var(--azul);
    overflow: auto;
    min-height: 0;
    background-color: var(--blanco);
}

:not(bim-panel) > bim-panel-section {
    border: 1px solid var(--gris);
    border-radius: 0.25rem;
}

bim-panel-section [data-context="header"] {
    color: var(--azul);
    --bim-label--c: var(--azul);
}
  
bim-panel-section > bim-table {
    flex: 1;
}
  
bim-grid[floating] {
    z-index: 100;
}
  
bim-table {
    border-radius: var(--bim-ui_size-4xs);
}
  
bim-context-menu {
    padding: 0.5rem;
    background-color: var(--blanco);
    outline: 1px solid var(--gris);
    color: var(--azul);
}

/* Toolbar: keep a clean, light look with Azul text */
bim-toolbar {
    background-color: var(--blanco);
    color: var(--azul);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(33, 43, 55, 0.08);
}

bim-toolbar-section {
    --bim-label--c: var(--azul);
    color: var(--azul);
}

bim-toolbar bim-button {
    --bim-button--bgc: transparent;
    --bim-label--c: var(--azul);
    color: var(--azul);
}

bim-toolbar bim-button:hover {
    --bim-button--bgc: transparent;
    --bim-label--c: var(--azul);
}

/* Active/selected state in the toolbar/sidebar buttons */
bim-button[active] {
    --bim-button--bgc: var(--naranja);
    --bim-label--c: var(--blanco);
}
  
.transparent {
    background-color: transparent;
    --bim-button--bgc: transparent;
    --bim-label--c: var(--azul);
}
  
.viewport-container {
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--gris);
    border-radius: 0.25rem;
    overflow: auto;
    height: 100%;
    background-color: var(--azul);
}
  
bim-grid[floating] > bim-toolbar {
    border: none;
    justify-self: center;
    outline: 1px solid var(--bim-ui_bg-contrast-40);
}

/* ---------------------------------------------------------------------------
 * Login screen
 * ------------------------------------------------------------------------- */

.login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--crema);
    z-index: 1000;
    padding: 20px;
}

.login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    background-color: var(--blanco);
    border: 1px solid var(--gris);
    border-radius: 12px;
    padding: 40px 32px;
    row-gap: 20px;
    box-shadow: 0 10px 30px rgba(33, 43, 55, 0.08);
}

.login-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    align-self: center;
    margin-bottom: 8px;
}

.login-title {
    text-align: center;
    color: var(--azul);
    margin: 0;
}

.login-subtitle {
    text-align: center;
    color: var(--gris-texto);
    font-size: var(--font-base);
    margin: 0 0 8px;
}

.login-card .form-field-container {
    display: flex;
    flex-direction: column;
}

.login-error {
    color: #cf0e28;
    background-color: rgba(207, 14, 40, 0.08);
    border: 1px solid rgba(207, 14, 40, 0.25);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: var(--font-base);
    margin: 0;
    text-align: center;
}

.login-button {
    margin-top: 8px;
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    /* base `button` rule is display:flex; center the label instead of
       it defaulting to flex-start (left-aligned). */
    justify-content: center;
}

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
    color: var(--gris-texto);
}

.login-loader .spin {
    font-size: 42px;
    color: var(--naranja);
    animation: login-spin 1s linear infinite;
}

@keyframes login-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Sidebar footer (user + logout)
 * ------------------------------------------------------------------------- */

#sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    border-top: 1px solid var(--gris);
    padding-top: 16px;
}

#sidebar-user {
    display: flex;
    align-items: center;
    column-gap: 6px;
    font-size: 0.78rem;
    color: var(--gris-texto);
    margin: 0;
    max-width: 100%;
}

#sidebar-user .material-icons-round {
    font-size: 18px;
    flex-shrink: 0;
}

#sidebar-user .sidebar-user-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}