/* AWS Colors and Design System */

:root {
    /* AWS Primary Colors */
    --aws-squid-ink: #232F3E;
    --aws-anchor: #0073BB;
    --aws-anchor-hover: #0052CC;
    --aws-anchor-active: #0073BB;
    --aws-anchor-visited: #0073BB;
    
    /* AWS Secondary Colors */
    --aws-orange: #FF9900;
    --aws-smile-orange: #EC7211;
    --aws-lime: #7AA116;
    --aws-green: #1E8900;
    --aws-teal: #008296;
    --aws-blue: #0073BB;
    --aws-purple: #4D27AA;
    --aws-red: #D13212;
    
    /* AWS Neutrals */
    --aws-black: #000000;
    --aws-gray-900: #16191F;
    --aws-gray-800: #232F3E;
    --aws-gray-700: #333333;
    --aws-gray-600: #545B64;
    --aws-gray-500: #687078;
    --aws-gray-400: #879196;
    --aws-gray-300: #D5DBDB;
    --aws-gray-200: #EAEDED;
    --aws-gray-100: #F2F3F3;
    --aws-white: #FFFFFF;
}

/* General Styles */
body {
    font-family: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
    color: var(--aws-gray-700);
    background-color: var(--aws-gray-100);
}

/* Navigation */
.navbar-dark.bg-primary {
    background-color: var(--aws-squid-ink) !important;
}

.navbar-brand {
    color: var(--aws-white);
    font-weight: 500;
}

/* AWS Logo */
.aws-logo {
    background-color: var(--aws-orange);
    color: var(--aws-gray-900);
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 16px;
}

/* Buttons */
.btn-primary {
    background-color: var(--aws-orange);
    border-color: var(--aws-orange);
    color: var(--aws-gray-900);
    font-weight: 500;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--aws-smile-orange);
    border-color: var(--aws-smile-orange);
    color: var(--aws-white);
}

.btn-secondary {
    background-color: var(--aws-gray-300);
    border-color: var(--aws-gray-300);
    color: var(--aws-gray-900);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--aws-gray-400);
    border-color: var(--aws-gray-400);
    color: var(--aws-gray-900);
}

.btn-danger {
    background-color: var(--aws-red);
    border-color: var(--aws-red);
}

.btn-success {
    background-color: var(--aws-green);
    border-color: var(--aws-green);
}

.btn-info {
    background-color: var(--aws-teal);
    border-color: var(--aws-teal);
    color: var(--aws-white);
}

/* Cards */
.card {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border: none;
}

.card-header {
    background-color: var(--aws-squid-ink);
    color: var(--aws-white);
    font-weight: 500;
}

/* Tables */
.table {
    background-color: var(--aws-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.table thead th {
    background-color: var(--aws-gray-200);
    color: var(--aws-gray-700);
    border-bottom: 2px solid var(--aws-gray-300);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--aws-gray-100);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 153, 0, 0.1);
}

/* Forms */
.form-control:focus {
    border-color: var(--aws-orange);
    box-shadow: 0 0 0 0.25rem rgba(255, 153, 0, 0.25);
}

.form-select:focus {
    border-color: var(--aws-orange);
    box-shadow: 0 0 0 0.25rem rgba(255, 153, 0, 0.25);
}

.form-check-input:checked {
    background-color: var(--aws-orange);
    border-color: var(--aws-orange);
}

/* Modals */
.modal-header {
    background-color: var(--aws-squid-ink);
    color: var(--aws-white);
}

.modal-title {
    font-weight: 500;
}

/* Alerts */
.alert-success {
    background-color: var(--aws-green);
    color: var(--aws-white);
    border: none;
}

.alert-danger {
    background-color: var(--aws-red);
    color: var(--aws-white);
    border: none;
}

.alert-warning {
    background-color: var(--aws-orange);
    color: var(--aws-gray-900);
    border: none;
}

.alert-info {
    background-color: var(--aws-teal);
    color: var(--aws-white);
    border: none;
}

/* Action buttons in tables */
.action-btn {
    margin-right: 5px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Payroll details */
.payroll-details h6 {
    color: var(--aws-squid-ink);
    font-weight: 600;
    margin-bottom: 15px;
}

/* Custom spacing */
.mt-6 {
    margin-top: 4rem;
}

.mb-6 {
    margin-bottom: 4rem;
}