:root {
    --er-primary:        #007cba;
    --er-primary-hover:  #005a87;
    --er-success:        #46b450;
    --er-success-bg:     #ecf7ed;
    --er-error:          #d63638;
    --er-error-bg:       #fcf0f1;
    --er-border:         #ddd;
    --er-radius:         6px;
    --er-shadow:         0 2px 8px rgba(0,0,0,.1);
    --er-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --er-transition:     all .2s ease-in-out;
    --er-xs:  .5rem;
    --er-sm:  1rem;
    --er-md:  1.5rem;
    --er-lg:  2rem;
    --er-xl:  3rem;
}

.employee-registration-form-wrapper {
    max-width: 800px;
    margin: var(--er-lg) auto;
    padding: var(--er-lg);
    background: #fff;
    border-radius: var(--er-radius);
    box-shadow: var(--er-shadow);
    font-family: var(--er-font);
    line-height: 1.6;
}

.employee-registration-header {
    text-align: center;
    margin-bottom: var(--er-xl);
    padding-bottom: var(--er-md);
    border-bottom: 2px solid #f0f0f0;
}

.employee-registration-title {
    margin: 0 0 var(--er-sm);
    color: #333;
    font-size: 2rem;
    font-weight: 600;
}

.employee-registration-description {
    margin: 0;
    color: #666;
    font-size: 1.1rem;
}

.employee-registration-form {
    background: #fafafa;
    padding: var(--er-lg);
    border-radius: var(--er-radius);
    border: 1px solid #e5e5e5;
}

.form-section {
    margin-bottom: var(--er-xl);
    padding: var(--er-md);
    background: #fff;
    border-radius: var(--er-radius);
    border: 1px solid var(--er-border);
}

.form-section-title {
    margin: 0 0 var(--er-md);
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
    border: none;
    padding: 0;
}

.required-section { border-left: 4px solid var(--er-primary); }
.optional-section  { border-left: 4px solid #ccc; }

.submit-section {
    background: #f8f9fa;
    border: 2px solid var(--er-primary);
    text-align: center;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--er-sm);
}

.form-group {
    margin-bottom: var(--er-md);
    width: 100%;
}

.col-md-6 {
    flex: 0 0 calc(50% - var(--er-sm) / 2);
    max-width: calc(50% - var(--er-sm) / 2);
}

.col-md-4 {
    flex: 0 0 calc(33.333% - var(--er-sm) * 2 / 3);
    max-width: calc(33.333% - var(--er-sm) * 2 / 3);
}

.form-label {
    display: block;
    margin-bottom: var(--er-xs);
    font-weight: 500;
    color: #333;
    font-size: .95rem;
}

.required-indicator {
    color: var(--er-error);
    font-weight: 700;
    margin-left: 2px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background: #fff;
    border: 2px solid var(--er-border);
    border-radius: var(--er-radius);
    transition: var(--er-transition);
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--er-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0,124,186,.15);
}

.form-control:hover:not(:focus):not(.is-invalid) { border-color: #aaa; }

.form-control.is-invalid {
    border-color: var(--er-error);
    box-shadow: 0 0 0 3px rgba(214,54,56,.15);
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.form-text {
    display: block;
    margin-top: var(--er-xs);
    font-size: .875rem;
    color: #666;
}

.error-message {
    display: none;
    color: var(--er-error);
    font-size: .875rem;
    margin-top: var(--er-xs);
    font-weight: 500;
}

.error-message::before { content: "⚠ "; }

.employee-registration-messages { margin-bottom: var(--er-lg); }

.alert {
    position: relative;
    padding: 16px 20px;
    margin-bottom: var(--er-md);
    border: 1px solid transparent;
    border-radius: var(--er-radius);
    font-size: .95rem;
}

.alert-success { color: #0f5132; background: var(--er-success-bg); border-color: var(--er-success); }
.alert-danger  { color: #842029; background: var(--er-error-bg);   border-color: var(--er-error); }

.alert-icon { font-weight: bold; margin-right: 8px; }

.alert-dismissible .close {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 8px;
    color: inherit;
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}

.alert-dismissible .close:hover { opacity: 1; }

.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    padding: 14px 28px;
    font-size: 1.1rem;
    line-height: 1.4;
    border-radius: var(--er-radius);
    transition: var(--er-transition);
    cursor: pointer;
}

.btn-primary {
    color: #fff;
    background: var(--er-primary);
    border-color: var(--er-primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--er-primary-hover);
    border-color: var(--er-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,124,186,.3);
}

.btn:disabled,
.btn.loading {
    opacity: .7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-block { display: block; width: 100%; }

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 768px) {
    .employee-registration-form-wrapper { margin: var(--er-sm); padding: var(--er-sm); }
    .employee-registration-form         { padding: var(--er-sm); }
    .employee-registration-title        { font-size: 1.5rem; }
    .col-md-6, .col-md-4 { flex: 0 0 100%; max-width: 100%; }
    .form-row { gap: 0; }
    .btn      { padding: 12px 24px; font-size: 1rem; }
}

@media (max-width: 480px) {
    .employee-registration-form-wrapper { margin: 0; border-radius: 0; }
    .form-section { padding: var(--er-sm); }
}

.form-control:focus,
.btn:focus { outline: 2px solid var(--er-primary); outline-offset: 2px; }

/* Read-only plugin-controlled fields */
.form-control.er-readonly {
    background: #f0f0f0;
    color: #555;
    cursor: default;
    border-color: #ddd;
    user-select: none;
}
.form-control.er-readonly:focus {
    border-color: #ddd;
    box-shadow: none;
    outline: none;
}

@media (prefers-contrast: high) {
    :root { --er-border: #000; --er-primary: #00f; }
    .form-control { border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .spinner { animation: none; }
}

@media (prefers-color-scheme: dark) {
    .employee-registration-form-wrapper { background: #1a1a1a; color: #fff; }
    .form-section  { background: #2a2a2a; border-color: #444; }
    .form-control  { background: #333; border-color: #555; color: #fff; }
    .form-control:focus { background: #333; border-color: var(--er-primary); }
    .employee-registration-title,
    .form-section-title,
    .form-label { color: #fff; }
    .form-text { color: #ccc; }
}