/*
 * Essentials/HRM Module - Supplementary Tailwind Utility Classes
 * These classes are not present in the JIT-purged app.css
 * and are required by the modernized Essentials & HRM blade templates.
 * Generated to match the project's tw- prefix convention.
 */

/* ===== Background Colors ===== */
.tw-bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}
.tw-bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}
.tw-bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}
.tw-bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity))}
.tw-bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity))}
.tw-bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity))}
.tw-bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity))}
.tw-bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}
.tw-bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}
.tw-bg-white\/20{background-color:rgba(255,255,255,.2)}

/* ===== Text Colors ===== */
.tw-text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}
.tw-text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity))}
.tw-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}
.tw-text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}
.tw-text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}
.tw-text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}
.tw-text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}
.tw-text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}
.tw-text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity))}
.tw-text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity))}
.tw-text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity))}
.tw-text-pink-500{--tw-text-opacity:1;color:rgb(236 72 153/var(--tw-text-opacity))}
.tw-text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity))}
.tw-text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}
.tw-text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity))}
.tw-text-rose-500{--tw-text-opacity:1;color:rgb(244 63 94/var(--tw-text-opacity))}
.tw-text-indigo-100{--tw-text-opacity:1;color:rgb(224 231 255/var(--tw-text-opacity))}

/* ===== Font Size ===== */
.tw-text-4xl{font-size:2.25rem;line-height:2.5rem}
.tw-text-\[8px\]{font-size:8px}

/* ===== Gradient Utilities ===== */
.tw-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.tw-from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-cyan-600{--tw-gradient-to:#0891b2 var(--tw-gradient-to-position)}
.tw-to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}

/* ===== Sizing ===== */
.tw-w-2\.5{width:.625rem}
.tw-h-2\.5{height:.625rem}
.tw-w-14{width:3.5rem}
.tw-h-14{height:3.5rem}
.tw-w-16{width:4rem}
.tw-h-16{height:4rem}

/* ===== Spacing ===== */
.tw-mb-3{margin-bottom:.75rem}
.tw-mb-6{margin-bottom:1.5rem}
.tw-my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.tw-m-\[16px\]{margin:16px}
.tw-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}

/* ===== Border ===== */
.tw-border-t-2{border-top-width:2px}
.tw-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}

/* ===== Ring Colors ===== */
.tw-ring-blue-200{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity))}
.tw-ring-blue-300{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity))}
.tw-ring-green-200{--tw-ring-opacity:1;--tw-ring-color:rgb(187 247 208/var(--tw-ring-opacity))}
.tw-ring-green-300{--tw-ring-opacity:1;--tw-ring-color:rgb(134 239 172/var(--tw-ring-opacity))}
.tw-ring-amber-300{--tw-ring-opacity:1;--tw-ring-color:rgb(252 211 77/var(--tw-ring-opacity))}
.tw-ring-indigo-300{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity))}

/* ===== Asset Management – Background Colors ===== */
.tw-bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}
.tw-bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity))}
.tw-bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}
.tw-bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}
.tw-bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}
.tw-bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity))}
.tw-bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}

/* ===== Asset Management – Gradient Utilities ===== */
.tw-from-amber-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}
.tw-from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-rose-500{--tw-gradient-to:#f43f5e var(--tw-gradient-to-position)}
.tw-from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}

/* ===== Asset Management – Text Colors ===== */
.tw-text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity))}
.tw-text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}

/* ===== Pseudo-class Variants ===== */
.last\:tw-border-0:last-child{border-width:0}

/* =====================================================================
   Attendance / Leave / Leave Type / Holiday feature views
   Mirrors the structural pattern used by the Repair module
   (public/css/tailwind/repair.css): custom classes (ess-form-grid,
   ess-field, ess-input, ess-select, ess-check-field) replace Bootstrap
   row, col-N, form-group, form-control classes in markup. Custom
   semantic table classes (attendance-table, leave-table, holiday-table,
   leave-summary-table) replace table/table-bordered/table-striped for
   DataTables-adjacent and plain HTML tables in these views.
   ===================================================================== */

.ess-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.ess-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.ess-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.ess-field-wide {
    grid-column: 1 / -1;
}

.ess-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ess-input,
.ess-select {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ess-input:focus,
.ess-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

textarea.ess-input {
    min-height: 5.5rem;
    resize: vertical;
}

.ess-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

.ess-input-group {
    display: flex;
    width: 100%;
    min-height: 2.625rem;
    overflow: hidden;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ess-input-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.ess-input-group .ess-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ess-input-group .ess-input:focus {
    box-shadow: none;
}

.ess-input-addon {
    display: inline-flex;
    flex: 0 0 2.625rem;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e3e8ef;
    background: #f8fafc;
    color: #667085;
}

.ess-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

@media (min-width: 768px) {
    .ess-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* DataTables-rendered tables (attendance, leave, leave_type, holiday) and
   the small AJAX-rendered plain tables (attendance-by-date/shift, leave
   user summary). Mirrors catalogue-admin.css's order-summary-table
   approach. */
.attendance-table,
.leave-table,
.leave-type-table,
.holiday-table,
.attendance-summary-table,
.leave-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.attendance-table th,
.attendance-table td,
.leave-table th,
.leave-table td,
.leave-type-table th,
.leave-type-table td,
.holiday-table th,
.holiday-table td,
.attendance-summary-table th,
.attendance-summary-table td,
.leave-summary-table th,
.leave-summary-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    font-size: 13px;
}

.attendance-table th,
.leave-table th,
.leave-type-table th,
.holiday-table th,
.attendance-summary-table th,
.leave-summary-table th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}