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


:root {
    
    --pf-font-primary: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif;
    --pf-font-monospace: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    
    --pf-fs-xs: 0.875rem;     
    --pf-fs-sm: 0.875rem;     
    --pf-fs-base: 0.875rem;   
    --pf-fs-md: 0.9375rem;    
    --pf-fs-lg: 1rem;         
    --pf-fs-xl: 1.125rem;     
    --pf-fs-2xl: 1.25rem;     
    --pf-fs-3xl: 1.5rem;      
    --pf-fs-4xl: 1.875rem;    
    --pf-fs-5xl: 2.25rem;     

    
    --pf-fw-light: 300;
    --pf-fw-normal: 400;
    --pf-fw-medium: 500;
    --pf-fw-semibold: 600;
    --pf-fw-bold: 700;
    --pf-fw-black: 900;

    
    --pf-lh-tight: 1.25;
    --pf-lh-normal: 1.5;
    --pf-lh-relaxed: 1.75;

    
    --pf-ls-tight: -0.025em;
    --pf-ls-normal: 0;
    --pf-ls-wide: 0.025em;
}


@media (min-width: 768px) {
    :root {
        --pf-fs-xs: 0.875rem;     
        --pf-fs-sm: 0.875rem;     
        --pf-fs-base: 0.875rem;   
        --pf-fs-lg: 1rem;         
        --pf-fs-xl: 1.25rem;      
        --pf-fs-2xl: 1.4375rem;   
        --pf-fs-3xl: 1.6875rem;   
        --pf-fs-4xl: 2.125rem;    
        --pf-fs-5xl: 2.625rem;    
    }
}


* {
    box-sizing: border-box;
}

body {
    font-family: var(--pf-font-primary);
    font-size: var(--pf-fs-base);
    font-weight: var(--pf-fw-normal);
    line-height: var(--pf-lh-normal);
    letter-spacing: var(--pf-ls-tight);
    font-feature-settings: "cv02", "cv03", "cv04", "cv08";
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--pf-font-primary);
    font-weight: var(--pf-fw-medium);
    line-height: var(--pf-lh-tight);
    letter-spacing: var(--pf-ls-tight);
    margin-bottom: 0.5rem;
}

h1, .h1 { font-size: var(--pf-fs-4xl); font-weight: var(--pf-fw-semibold); }


.container-fluid .form-control,
.container-fluid .form-select,
.container-fluid .btn,
.card .form-control,
.card .form-select,
.card .btn,
div input[type="text"],
div input[type="email"],
div input[type="date"],
div input[type="number"],
div select,
div textarea {
    font-family: var(--pf-font-primary);
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-normal);
    line-height: var(--pf-lh-normal);
}


div input[type="password"],
.form-control input[type="password"],
.container-fluid input[type="password"],
.card input[type="password"] {
    font-family: var(--pf-font-primary);
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-normal);
    line-height: var(--pf-lh-normal);
}
h2, .h2 { font-size: var(--pf-fs-3xl); font-weight: var(--pf-fw-medium); }
h3, .h3 { font-size: var(--pf-fs-2xl); font-weight: var(--pf-fw-medium); }
h4, .h4 { font-size: var(--pf-fs-xl); font-weight: var(--pf-fw-medium); }
h5, .h5 { font-size: var(--pf-fs-lg); font-weight: var(--pf-fw-medium); }
h6, .h6 { font-size: var(--pf-fs-base); font-weight: var(--pf-fw-semibold); }


.text-xs { font-size: var(--pf-fs-xs); }
.text-sm { font-size: var(--pf-fs-sm); }
.text-base { font-size: var(--pf-fs-base); }
.text-md { font-size: var(--pf-fs-md); }
.text-lg { font-size: var(--pf-fs-lg); }
.text-xl { font-size: var(--pf-fs-xl); }

.font-light { font-weight: var(--pf-fw-light); }
.font-normal { font-weight: var(--pf-fw-normal); }
.font-medium { font-weight: var(--pf-fw-medium); }
.font-semibold { font-weight: var(--pf-fw-semibold); }
.font-bold { font-weight: var(--pf-fw-bold); }

.leading-tight { line-height: var(--pf-lh-tight); }
.leading-normal { line-height: var(--pf-lh-normal); }
.leading-relaxed { line-height: var(--pf-lh-relaxed); }

.tracking-tight { letter-spacing: var(--pf-ls-tight); }
.tracking-normal { letter-spacing: var(--pf-ls-normal); }
.tracking-wide { letter-spacing: var(--pf-ls-wide); }


.form-label {
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-medium);
    margin-bottom: 0.5rem;
}

.form-control,
.form-select {
    font-size: var(--pf-fs-base);
    font-family: var(--pf-font-primary);
}


.btn {
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-medium);
    font-family: var(--pf-font-primary);
}

.btn-sm {
    font-size: var(--pf-fs-base);  
}

.btn-lg {
    font-size: var(--pf-fs-lg);    
}


.nav-link {
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-normal);
}


.table {
    font-size: var(--pf-fs-base);  
}

.table thead th {
    font-size: var(--pf-fs-base);  
    font-weight: var(--pf-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--pf-ls-wide);
}


.badge {
    font-size: var(--pf-fs-xs);  
    font-weight: var(--pf-fw-medium);
}


.breadcrumb {
    font-size: var(--pf-fs-base);  
}


code, pre, .code {
    font-family: var(--pf-font-monospace);
    font-size: var(--pf-fs-base);  
}


.page-title {
    font-size: var(--pf-fs-4xl);
    font-weight: var(--pf-fw-medium);
    color: #1e293b;
    margin-bottom: 0.5rem;
    letter-spacing: var(--pf-ls-tight);
}


@media (max-width: 576px) {
    .page-title {
        font-size: var(--pf-fs-3xl);
    }

    h1, .h1 { font-size: var(--pf-fs-3xl); }
    h2, .h2 { font-size: var(--pf-fs-2xl); }
}

/* Auth Pages Styles */
.login-container,
.forgot-password-container,
.reset-password-container,
.inactive-container,
.unauthorized-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
    padding: 20px;
}

.login-card,
.forgot-password-card,
.reset-password-card {
    background: white;
    border-radius: 8px;
    padding: 40px;
    width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.forgot-password-card.success-state,
.reset-password-card {
    width: 100%;
    max-width: 500px;
}

.inactive-card,
.unauthorized-card {
    background: white;
    border-radius: 12px;
    padding: 50px 40px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.login-header,
.forgot-password-header,
.reset-password-header {
    text-align: center;
    margin-bottom: 30px;
}

.reset-password-header {
    padding: 40px 40px 0 40px;
}

.login-header h2,
.forgot-password-header h2,
.reset-password-header h2,
.inactive-card h2,
.unauthorized-card h2 {
    color: #1a2332;
    margin-bottom: 10px;
    font-weight: 600;
}

.inactive-card h2,
.unauthorized-card h2 {
    margin-bottom: 25px;
    font-size: 32px;
}

.forgot-subtitle,
.reset-subtitle,
.admin-subtitle {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.inactive-icon,
.unauthorized-icon {
    font-size: 80px;
    margin-bottom: 30px;
    animation: pulse 2s ease-in-out infinite;
}

.inactive-icon {
    color: #ffc107;
}

.unauthorized-icon {
    color: #dc3545;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.inactive-message,
.unauthorized-message {
    margin-bottom: 35px;
    padding: 20px;
    border-radius: 8px;
}

.inactive-message {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}

.unauthorized-message {
    background: #f8f9fa;
    border-left: 4px solid #dc3545;
}

.inactive-message .lead,
.unauthorized-message .lead {
    font-size: 18px;
    margin-bottom: 0;
    color: #333;
}

.inactive-info,
.inactive-actions,
.unauthorized-info,
.unauthorized-actions {
    text-align: left;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.inactive-info h6,
.inactive-actions h6,
.unauthorized-info h6,
.unauthorized-actions h6 {
    color: #1a2332;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
}

.inactive-info ul,
.inactive-actions ul,
.unauthorized-info ul,
.unauthorized-actions ul {
    margin: 0;
    padding-left: 20px;
}

.inactive-info li,
.inactive-actions li,
.unauthorized-info li,
.unauthorized-actions li {
    margin-bottom: 8px;
    color: #666;
    line-height: 1.6;
}

.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.login-form .form-group,
.reset-password-card .form-group,
.forgot-password-card .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label,
.reset-password-card .form-group label,
.forgot-password-card .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

.login-container input.form-control,
.login-container input[type="text"].form-control,
.login-container input[type="email"].form-control,
.login-container input[type="password"].form-control,
.forgot-password-container input.form-control,
.forgot-password-container input[type="text"].form-control,
.forgot-password-container input[type="email"].form-control,
.reset-password-container input.form-control,
.reset-password-container input[type="password"].form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.reset-password-card .card-body {
    padding: 0 40px 40px 40px;
}

.login-container input.form-control:focus,
.login-container input[type="text"].form-control:focus,
.login-container input[type="email"].form-control:focus,
.login-container input[type="password"].form-control:focus,
.forgot-password-container input.form-control:focus,
.forgot-password-container input[type="text"].form-control:focus,
.forgot-password-container input[type="email"].form-control:focus,
.reset-password-container input.form-control:focus,
.reset-password-container input[type="password"].form-control:focus {
    border-color: #1a2332;
    box-shadow: 0 0 0 0.2rem rgba(26, 35, 50, 0.25);
    outline: 0;
}

input#username.form-control,
input#password.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

input#username.form-control:focus,
input#password.form-control:focus {
    border-color: #1a2332;
    box-shadow: 0 0 0 0.2rem rgba(26, 35, 50, 0.25);
    outline: 0;
}

.login-container .btn-login,
.login-container .btn-primary,
.forgot-password-container .btn-primary,
.reset-password-container .btn-primary,
.reset-password-container .btn-success {
    width: 100%;
    padding: 12px;
    background-color: #1a2332;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
}

.login-container .btn-login:hover:not(:disabled),
.login-container .btn-primary:hover:not(:disabled),
.forgot-password-container .btn-primary:hover:not(:disabled),
.reset-password-container .btn-primary:hover:not(:disabled),
.reset-password-container .btn-success:hover:not(:disabled) {
    background-color: #2c3e50;
}

.login-container .btn-login:disabled,
.login-container .btn-primary:disabled,
.forgot-password-container .btn-primary:disabled,
.reset-password-container .btn-primary:disabled,
.reset-password-container .btn-success:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.login-container .btn-outline-secondary,
.forgot-password-container .btn-outline-secondary,
.reset-password-container .btn-outline-secondary {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    color: #6c757d;
    border: 1px solid #6c757d;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.login-container .btn-outline-secondary:hover,
.forgot-password-container .btn-outline-secondary:hover,
.reset-password-container .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

.inactive-container .btn-outline-secondary,
.unauthorized-container .btn-outline-secondary {
    background-color: transparent;
    color: #6c757d;
    border: 2px solid #6c757d;
}

.inactive-container .btn,
.unauthorized-container .btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.inactive-container .btn-primary,
.unauthorized-container .btn-primary {
    background-color: #1a2332;
    color: white;
    width: auto;
}

.inactive-container .btn-primary:hover,
.unauthorized-container .btn-primary:hover {
    background-color: #2c3e50;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 35, 50, 0.3);
}

.inactive-container .btn-outline-secondary:hover,
.unauthorized-container .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.alert-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: left;
}

@media (max-width: 576px) {
    .inactive-card,
    .unauthorized-card {
        padding: 30px 20px;
    }

    .inactive-card h2,
    .unauthorized-card h2 {
        font-size: 24px;
    }

    .button-group {
        flex-direction: column;
    }

    .inactive-container .btn,
    .unauthorized-container .btn {
        width: 100%;
    }
}

/* EmptyLayout Component */
.empty-layout {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.empty-layout * {
    box-sizing: border-box;
}
/* Company Name Truncation Utilities */
.company-name-truncate {
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.company-name-truncate-sm {
    max-width: 150px;
}

.company-name-truncate-md {
    max-width: 200px;
}

.company-name-truncate-lg {
    max-width: 300px;
}