/**
 * Critical Ops Safety - Frontend Styles
 * 
 * @package CriticalOpsSafety
 */

:root {
    /* Primary - Safety Slate (from logo) */
    --cos-primary: #3D4E5C;
    --cos-primary-light: #516375;
    --cos-primary-dark: #2A3642;

    /* Secondary - Safety Orange (from logo) */
    --cos-secondary: #D77A20;
    --cos-secondary-light: #E89140;
    --cos-secondary-dark: #B86518;

    /* Accent - Bright Orange */
    --cos-accent: #E07C1F;

    /* Neutral - Professional Grays */
    --cos-neutral-100: #F8F9FA;
    --cos-neutral-200: #E9ECEF;
    --cos-neutral-300: #DEE2E6;
    --cos-neutral-500: #6C757D;
    --cos-neutral-700: #495057;
    --cos-neutral-900: #212529;

    /* Semantic Colors */
    --cos-success: #28A745;
    --cos-warning: #FFC107;
    --cos-danger: #DC3545;
    --cos-info: #17A2B8;

    /* Typography */
    --cos-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --cos-font-heading: 'Outfit', 'Inter', sans-serif;

    /* Spacing */
    --cos-spacing-xs: 0.5rem;
    --cos-spacing-sm: 1rem;
    --cos-spacing-md: 1.5rem;
    --cos-spacing-lg: 2rem;
    --cos-spacing-xl: 3rem;

    /* Border Radius */
    --cos-radius-sm: 4px;
    --cos-radius-md: 8px;
    --cos-radius-lg: 12px;

}

/* Font Awesome Icon Styling - Brand Colors */
.fas,
.far,
.fab,
.fa {
    color: var(--cos-secondary);
    margin-right: 6px;
}

/* Icon color overrides for specific contexts */
.status-badge .fas,
.status-badge .far,
.cert-badge .fas,
.cos-con-badges .fas {
    margin-right: 4px;
}

/* Success/Verified icons - keep green */
.status-approved .fas,
[style*="color: #059669"] .fas,
[style*="color:#059669"] .fas {
    color: #059669 !important;
}

/* Feature/Star icons - keep gold */
[style*="color: #b45309"] .fas,
[style*="color:#b45309"] .fas {
    color: #b45309 !important;
}

/* Insurance/Shield icons - keep blue */
[style*="color: #1d4ed8"] .fas,
[style*="color:#1d4ed8"] .fas {
    color: #1d4ed8 !important;
}

/* Shadows moved to :root block */


/* Modern Job Cards (Homepage) */
.cos-latest-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.cos-job-card-modern {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 25px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cos-job-card-modern:hover {
    border-color: #D77A20;
    /* Brand Orange */
    box-shadow: 0 10px 20px rgba(215, 122, 32, 0.1);
    transform: translateY(-2px);
}

.cos-card-header {
    margin-bottom: 15px;
}

.cos-job-title {
    color: #D77A20;
    /* Brand Orange */
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.3;
}

.cos-company-name {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.cos-card-divider {
    height: 1px;
    background-color: #f3f4f6;
    margin: 15px 0;
    width: 100%;
}

.cos-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.cos-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4b5563;
    font-size: 15px;
}

.cos-info-row i {
    color: #6b7280;
    /* Neutral icon color per design, or use brand if preferred */
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Override icons to be simple grey outlined style if needed, but font awesome is solid. 
   User image shows simple line icons. FA Regular (far) might be better if available, 
   but specific request was "Genrate jobs cards exactly like this". 
   The image uses outlined icons. I will try to use light styling. */
.cos-info-row i {
    color: #9ca3af;
    /* Lighter grey for icons */
}

.cos-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 5px;
}

.cos-btn-details {
    background-color: #D77A20;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cos-btn-details:hover {
    background-color: #b86518;
    color: #fff !important;
}

.cos-btn-details i {
    color: #fff;
    margin: 0;
}

.cos-updated-time {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cos-updated-time i {
    margin: 0;
}

@media (max-width: 768px) {
    .cos-latest-jobs-grid {
        grid-template-columns: 1fr;
    }
}

color: var(--cos-neutral-900);
padding: var(--cos-spacing-lg);
max-width: 1400px;
width: 100%;
margin: 0 auto;
}

.cos-job-board h2,
.cos-consultant-directory h2,
.cos-dashboard h2,
.cos-registration-form h3 {
    font-family: var(--cos-font-heading);
    color: var(--cos-primary);
    margin-bottom: var(--cos-spacing-md);
}

/* Registration Form Styles */
.cos-form {
    background: #fff;
    padding: var(--cos-spacing-lg);
    border-radius: var(--cos-radius-md);
    box-shadow: var(--cos-shadow-md);
}

.cos-form-section {
    margin: var(--cos-spacing-lg) 0;
    padding: var(--cos-spacing-md);
    background: var(--cos-neutral-100);
    border-radius: var(--cos-radius-sm);
}

.cos-form-section h4 {
    margin-top: 0;
    color: var(--cos-primary);
    font-size: 1.1rem;
    margin-bottom: var(--cos-spacing-sm);
}

.cos-form-row {
    margin-bottom: var(--cos-spacing-md);
}

.cos-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--cos-neutral-700);
}

.cos-form-row input[type="text"],
.cos-form-row input[type="email"],
.cos-form-row input[type="password"],
.cos-form-row input[type="tel"],
.cos-form-row select,
.cos-form-row textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--cos-neutral-300);
    border-radius: var(--cos-radius-sm);
    font-family: var(--cos-font-primary);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.cos-form-row input:focus,
.cos-form-row select:focus,
.cos-form-row textarea:focus {
    outline: none;
    border-color: var(--cos-primary);
}

.cos-form-row small {
    display: block;
    margin-top: 0.25rem;
    color: var(--cos-neutral-500);
    font-size: 0.875rem;
}

.cos-form-row .required {
    color: var(--cos-danger);
}

/* ==========================================================================
   DASHBOARD SHELL (React-Style Layout)
   ========================================================================== */
.cos-dashboard-shell {
    display: flex;
    min-height: 600px;
    background-color: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Sidebar */
.cos-sidebar {
    width: 260px;
    background-color: #1f2937;
    /* Dark sidebar */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.cos-sidebar-header {
    padding: 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #374151;
}

.cos-logo-icon {
    width: 32px;
    height: 32px;
    background: #D77A20;
    /* Safety Orange */
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 10px;
}

.cos-app-name {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.cos-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cos-nav-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #9ca3af;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    font-weight: 500;
    text-decoration: none;
}

.cos-nav-item:hover {
    background-color: #374151;
    color: #fff;
}

.cos-nav-item.active {
    background-color: #D77A20;
    color: #fff;
    font-weight: 600;
}

.cos-nav-divider {
    height: 1px;
    background: #374151;
    margin: 8px 0;
}

.cos-user-mini-profile {
    padding: 20px;
    border-top: 1px solid #374151;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cos-avatar {
    width: 40px;
    height: 40px;
    background: #4b5563;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.cos-user-info {
    display: flex;
    flex-direction: column;
}

.cos-user-name {
    font-size: 14px;
    font-weight: 600;
}

.cos-user-role {
    font-size: 12px;
    color: #9ca3af;
}

/* Main Content */
.cos-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f9fafb;
    overflow-y: auto;
}

.cos-topbar {
    padding: 20px 32px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cos-topbar h1 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.cos-view-container {
    padding: 32px;
}

/* Views & Cards */
.cos-view {
    display: none;
    /* JS toggles this */
    animation: fadeIn 0.3s ease;
}

.cos-view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cos-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.cos-stat-card {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.cos-stat-card.primary {
    border-left: 4px solid #D77A20;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}

.cos-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cos-table th,
.cos-table td {
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.cos-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cos-form-row-half {
    display: flex;
    gap: 1rem;
}

.cos-half {
    flex: 1;
}

/* Certifications Grid */
.cos-certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: var(--cos-spacing-md);
}

.cos-cert-category h5 {
    color: var(--cos-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid var(--cos-neutral-300);
    padding-bottom: 0.5rem;
}

.cos-cert-checkbox {
    display: block;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: var(--cos-radius-sm);
}

.cos-cert-checkbox:hover {
    background-color: var(--cos-neutral-100);
}

.cos-cert-checkbox input[type="checkbox"] {
    margin-right: 0.5rem;
    width: auto;
}

.cos-button {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--cos-radius-sm);
    font-family: var(--cos-font-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cos-button-primary {
    background: var(--cos-primary);
    color: #fff;
}

.cos-button-primary:hover {
    background: var(--cos-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--cos-shadow-md);
}

.cos-form-footer {
    text-align: center;
    margin-top: var(--cos-spacing-lg);
    padding-top: var(--cos-spacing-md);
    border-top: 1px solid var(--cos-neutral-300);
}

.cos-form-footer a {
    color: var(--cos-primary);
    text-decoration: none;
    font-weight: 600;
}

.cos-form-footer a:hover {
    text-decoration: underline;
}

/* Notice Boxes */
.cos-notice {
    padding: var(--cos-spacing-md);
    border-radius: var(--cos-radius-sm);
    margin-bottom: var(--cos-spacing-md);
    border-left: 4px solid;
}

.cos-notice p {
    margin: 0.5rem 0;
}

.cos-notice p:first-child {
    margin-top: 0;
}

.cos-notice p:last-child {
    margin-bottom: 0;
}

.cos-success {
    background: #d4edda;
    border-color: var(--cos-success);
    color: #155724;
}

.cos-error {
    background: #f8d7da;
    border-color: var(--cos-danger);
    color: #721c24;
}

.cos-warning {
    background: #fff3cd;
    border-color: var(--cos-warning);
    color: #856404;
}

.cos-info {
    background: #d1ecf1;
    border-color: var(--cos-info);
    color: #0c5460;
}

/* Placeholder notice */
.cos-job-board p,
.cos-consultant-directory p,
.cos-dashboard p {
    background: var(--cos-neutral-100);
    padding: var(--cos-spacing-md);
    border-left: 4px solid var(--cos-secondary);
    border-radius: var(--cos-radius-sm);
}

/* Responsive */
@media (max-width: 768px) {

    .cos-job-board,
    .cos-consultant-directory,
    .cos-dashboard,
    .cos-registration-form {
        padding: var(--cos-spacing-sm);
    }

    .cos-form {
        padding: var(--cos-spacing-md);
    }

    .cos-button {
        width: 100%;
    }

    .cos-form-row-half {
        flex-direction: column;
        gap: 0;
    }

    .cos-certifications-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   NEW DASHBOARD COMPONENTS
   ========================================================================== */

/* Activity List */
.cos-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cos-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.activity-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-content strong {
    color: #111827;
    font-size: 14px;
}

.activity-time {
    color: #6b7280;
    font-size: 13px;
}

/* Job Cards Grid */
.cos-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.cos-job-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s;
}

.cos-job-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.job-header h4 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 18px;
}

.job-company {
    color: #6b7280;
    font-size: 14px;
}

.job-meta {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #6b7280;
    font-size: 14px;
}

.job-status {
    margin-top: 12px;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-approved {
    background: #d1fae5;
    color: #065f46;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-denied {
    background: #fee2e2;
    color: #991b1b;
}

.status-draft {
    background: #e5e7eb;
    color: #374151;
}

/* Candidate Cards */
.cos-candidates-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cos-candidate-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.candidate-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.candidate-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 20px;
}

.candidate-info h4 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 16px;
}

.candidate-meta {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.candidate-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.detail-row strong {
    color: #374151;
}

.detail-row span {
    color: #6b7280;
}

.candidate-contact {
    background: #f9fafb;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.candidate-contact strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
}

.candidate-contact p {
    margin: 4px 0;
    padding: 0;
    border: none;
    background: none;
    color: #374151;
    font-size: 14px;
}

.candidate-certs strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
}

.cert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cert-badge {
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.cert-badge-small {
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

/* Profile Section */
.cos-profile-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cos-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.cos-card h4 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-field {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.profile-field:last-child {
    border-bottom: none;
}

.profile-field label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0;
}

.profile-field span {
    color: #6b7280;
}

/* Settings Section */
.cos-settings-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cos-checkbox-label {
    display: block;
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 6px;
}

.cos-checkbox-label:hover {
    background: #f9fafb;
}

.cos-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

/* Buttons */
.cos-button-small {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: #e5e7eb;
    color: #374151;
}

.cos-button-small:hover {
    background: #d1d5db;
}

.cos-button-small.cos-button-primary {
    background: #FFD700;
    color: #111827;
}

.cos-button-small.cos-button-primary:hover {
    background: #ffc700;
}

.cos-flex-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cos-flex-header h3 {
    margin: 0;
}

/* Empty State */
.cos-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #d1d5db;
}

.cos-empty-state p {
    margin: 0 0 16px;
    color: #6b7280;
    padding: 0;
    border: none;
    background: none;
}

/* Tabs */
.cos-tab-nav {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.cos-tab-button {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.cos-tab-button:hover {
    color: #111827;
}

.cos-tab-button.active {
    color: #111827;
    border-bottom-color: #FFD700;
}

.cos-tab-content {
    display: none;
}

.cos-tab-content.active {
    display: block;
}

.cos-section {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.cos-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #111827;
    font-size: 18px;
}

.cos-section p {
    margin: 0;
    background: none;
    padding: 0;
    border: none;
    color: #6b7280;
}

/* Login Box */
.cos-login-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    margin: 40px auto;
    border: 1px solid #e5e7eb;
}

.cos-login-box a {
    color: #003D82;
    font-weight: 600;
    text-decoration: none;
}

.cos-login-box a:hover {
    text-decoration: underline;
}

/* Navigation Trigger */
.cos-nav-trigger {
    cursor: pointer;
    transition: all 0.2s;
}

/* ==========================================================================
   ACCOUNT BUTTON SHORTCODE
   ========================================================================== */

.cos-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cos-account-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cos-account-btn:active {
    transform: translateY(0);
}

/* Button Styles */
.cos-account-btn-primary {
    background: #D77A20;
    color: #fff;
}

.cos-account-btn-primary:hover {
    background: #E89140;
    color: #fff;
}

.cos-account-btn-secondary {
    background: #3D4E5C;
    color: #fff;
}

.cos-account-btn-secondary:hover {
    background: #516375;
    color: #fff;
}

.cos-account-btn-outline {
    background: transparent;
    color: #D77A20;
    border: 2px solid #D77A20;
}

.cos-account-btn-outline:hover {
    background: #D77A20;
    color: #fff;
}

/* Button Sizes */
.cos-account-btn-small {
    padding: 8px 16px;
    font-size: 13px;
}

.cos-account-btn-medium {
    padding: 12px 24px;
    font-size: 15px;
}

.cos-account-btn-large {
    padding: 16px 32px;
    font-size: 17px;
}

.cos-btn-icon {
    font-size: 1.2em;
    line-height: 1;
}

.cos-btn-text {
    line-height: 1;
}

@media (max-width: 768px) {
    .cos-account-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CONSULTANT DIRECTORY
   ========================================================================== */
.cos-directory-layout {
    display: flex;
    gap: 32px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .cos-directory-layout {
        flex-direction: column;
    }
}

/* Sidebar Filters */
.cos-filters-sidebar {
    width: 320px;
    flex-shrink: 0;
    padding: 0 !important;
}

.cos-mobile-filter-toggle {
    display: none;
    width: 100%;
    padding: 12px;
    background: #3D4E5C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 0px;
    /* Collapsed margin */
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

@media (max-width: 768px) {
    .cos-filters-sidebar {
        width: 100%;
        padding: 0 !important;
        margin-bottom: 20px;
    }

    .cos-mobile-filter-toggle {
        display: flex;
        margin-bottom: 1px;
        /* Slight separator */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Target the specific ID or class for the content container */
    #cos-filter-content {
        display: none;
        /* Hidden by default on mobile */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* When active class is added via JS, show it */
    #cos-filter-content.active {
        display: block;
    }
}

.cos-filter-section {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.cos-filter-section h3 {
    margin-top: 0;
    font-size: 16px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.cos-filter-group {
    margin-bottom: 20px;
}

.cos-filter-group label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #374151;
}

.cos-filter-input,
.cos-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

.cos-cert-filters {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #f3f4f6;
    padding: 8px;
    border-radius: 6px;
}

.cos-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
    cursor: pointer;
}

.cos-filter-apply,
.cos-filter-reset {
    width: 100%;
    margin-bottom: 8px;
}

/* Results Grid */
.cos-results-container {
    flex: 1;
}

.cos-results-count {
    margin-bottom: 20px;
    color: #6b7280;
    font-size: 14px;
}

.cos-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Consultant Card */
.cos-consultant-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.cos-consultant-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.cos-con-header {
    height: 80px;
    background: linear-gradient(to right, #3D4E5C, #516375);
    position: relative;
}

.cos-con-avatar {
    width: 64px;
    height: 64px;
    background: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    position: absolute;
    bottom: -32px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #3D4E5C;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cos-con-body {
    padding: 40px 20px 20px;
    /* Top padding clears avatar */
    flex: 1;
}

.cos-con-name {
    margin: 0 0 8px;
    font-size: 18px;
    color: #111827;
}

.cos-con-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

.cos-con-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}

.status-dot.status-active {
    background: #10b981;
}

.cos-con-certs-count {
    font-size: 13px;
    color: #D77A20;
    font-weight: 600;
}

.cos-con-footer {
    padding: 16px 20px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
}

.cos-con-footer .cos-button {
    width: 100%;
}

/* Table Hover Effect */
.cos-table tbody tr {
    transition: background-color 0.2s ease;
}

.cos-table tbody tr:hover {
    background-color: #f8fafc;
    /* Subtle gray/blue tint */
    cursor: pointer;
}

/* Notification Banner */
.cos-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    padding: 16px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    border-left: 4px solid #3b82f6;
    animation: slideInRight 0.3s ease-out;
    font-size: 14px;
    color: #1f2937;
}

.cos-notification-success {
    border-left-color: #10b981;
    background: #ecfdf5;
    color: #064e3b;
}

.cos-notification-error {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #7f1d1d;
}

.cos-notification-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
}

.cos-notification-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Modal specific input styling */
.cos-modal .cos-input,
.cos-modal input[type="text"],
.cos-modal input[type="email"],
.cos-modal input[type="date"],
.cos-modal select,
.cos-modal textarea {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}

.cos-modal .cos-input:focus,
.cos-modal input:focus,
.cos-modal select:focus,
.cos-modal textarea:focus {
    box-shadow: 0 0 0 3px rgba(215, 122, 32, 0.2);
    /* Orange focus ring */
    border-color: #D77A20;
}

/* Upgrade Modal Specifics */
.cos-upgrade-modal {
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
}

.cos-upgrade-modal .cos-modal-body {
    background: #fff;
    border-radius: 12px;
}

/* Ensure no inner borders or shadows on the body if it's inheriting */
.cos-upgrade-modal p {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

/* User Specific Modal Styles */
/* Targeted fix for "limit reached" card or generally plain modals */
.cos-limit-reached-card,
.cos-client-modal-card {
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cos-form-group {
    margin-bottom: 20px;
}

.cos-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}