/* Shared Component Styles */
/* Note: Using Tailwind CDN, so these are standard CSS classes that can be used alongside Tailwind utilities */

/* Buttons */
.btn-primary {
    width: 100%;
    position: relative;
    overflow: hidden;
    color: white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-0.25rem);
}

.btn-secondary {
    padding: 0.75rem 1.5rem;
    background-color: rgb(51 65 85);
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background-color: rgb(71 85 105);
}

.btn-gradient-red {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, rgb(239 68 68), rgb(234 88 12));
    color: white;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-gradient-red:hover {
    box-shadow: 0 10px 15px -3px rgb(239 68 68 / 0.5);
}

.btn-gradient-green {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(to right, rgb(22 163 74), rgb(21 128 61));
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-gradient-green:hover {
    box-shadow: 0 10px 15px -3px rgb(34 197 94 / 0.5);
}

/* Cards */
.card-gradient {
    background: linear-gradient(to bottom right, rgb(30 41 59), rgb(15 23 42));
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border: 1px solid rgb(51 65 85 / 0.5);
    padding: 1.5rem;
}

.card-gradient-lg {
    background: linear-gradient(to bottom right, rgb(30 41 59), rgb(15 23 42));
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    border: 1px solid rgb(51 65 85 / 0.5);
}

.card-hover {
    transition: all 0.3s;
}

.card-hover:hover {
    border-color: rgb(239 68 68 / 0.5);
}

/* Form Inputs */
.input-base {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgb(15 23 42 / 0.5);
    border: 1px solid rgb(51 65 85);
    border-radius: 0.5rem;
    color: white;
    transition: all 0.3s;
}

.input-base::placeholder {
    color: rgb(100 116 139);
}

.input-base:focus {
    outline: none;
    border-color: rgb(239 68 68);
    box-shadow: 0 0 0 2px rgb(239 68 68 / 0.5);
}

.textarea-base {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgb(15 23 42 / 0.5);
    border: 1px solid rgb(51 65 85);
    border-radius: 0.5rem;
    color: white;
    resize: none;
    transition: all 0.3s;
}

.textarea-base::placeholder {
    color: rgb(100 116 139);
}

.textarea-base:focus {
    outline: none;
    border-color: rgb(239 68 68);
    box-shadow: 0 0 0 2px rgb(239 68 68 / 0.5);
}

.label-base {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(203 213 225);
    margin-bottom: 0.5rem;
}

/* Avatar */
.avatar-gradient {
    background: linear-gradient(to right, rgb(239 68 68), rgb(234 88 12));
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(239 68 68 / 0.2);
}

/* Progress Steps */
.progress-step-inactive {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: rgb(30 41 59);
    border: 1px solid rgb(71 85 105);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
}

.progress-step-active {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: linear-gradient(to right, rgb(239 68 68), rgb(234 88 12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(239 68 68 / 0.2);
}

.progress-divider {
    width: 3rem;
    height: 0.125rem;
    background-color: rgb(51 65 85);
}

/* Tables */
.table-header {
    background-color: rgb(15 23 42 / 0.5);
    border-bottom: 1px solid rgb(51 65 85 / 0.5);
}

.table-header-cell {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(203 213 225);
}

.table-row {
    transition: colors 0.3s;
}

.table-row:hover {
    background-color: rgb(51 65 85 / 0.3);
}

.table-cell {
    padding: 0.75rem 1rem;
}

/* Status Badges */
.badge-pending {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: rgb(234 179 8);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-completed {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: rgb(22 163 74);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-rejected {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: rgb(220 38 38);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Text Gradients */
.text-gradient-red {
    background: linear-gradient(to right, rgb(239 68 68), rgb(249 115 22));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Links */
.link-subtle {
    font-size: 0.875rem;
    color: rgb(148 163 184);
    transition: color 0.3s;
}

.link-subtle:hover {
    color: white;
}