/* ============================================================
   AppxSoft — Components: cards, buttons, forms, tables, modals,
   badges, alerts, toasts, empty states, skeletons, pagination
   Built on top of Bootstrap 3 (no structural changes).
   ============================================================ */

/* ---------- Cards / legacy panels ---------- */
.appx-card {
    background: var(--appx-surface);
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius);
    box-shadow: var(--appx-shadow-xs);
}

.appx-card + .appx-card {
    margin-block-start: var(--appx-space-4);
}

.appx-card-header {
    padding: var(--appx-space-4) var(--appx-space-5);
    border-block-end: 1px solid var(--appx-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--appx-space-3);
}

.appx-card-title {
    font-size: var(--appx-text-lg);
    font-weight: 700;
    margin: 0;
}

.appx-card-body {
    padding: var(--appx-space-5);
}

.appx-card-footer {
    padding: var(--appx-space-3) var(--appx-space-5);
    border-block-start: 1px solid var(--appx-border);
    background: var(--appx-surface-alt);
    border-end-start-radius: var(--appx-radius);
    border-end-end-radius: var(--appx-radius);
}

/* Modernize legacy Appx panels without renaming them */
.panel_s {
    background: var(--appx-surface);
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius);
    box-shadow: var(--appx-shadow-xs);
    margin-block-end: var(--appx-space-5);
}

.panel_s .panel-heading,
.panel_s > .panel-body {
    border-radius: inherit;
}

.panel_s .panel-heading {
    background: var(--appx-surface);
    border-block-end: 1px solid var(--appx-border);
    padding: var(--appx-space-4) var(--appx-space-5);
    font-weight: 700;
    color: var(--appx-text);
}

.panel_s > .panel-body {
    padding: var(--appx-space-5);
}

/* Stat cards (dashboard invoices stats / project summary) */
.appx-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--appx-space-4);
}

.appx-stat {
    background: var(--appx-surface);
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius);
    box-shadow: var(--appx-shadow-xs);
    padding: var(--appx-space-4) var(--appx-space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appx-stat-label {
    color: var(--appx-text-muted);
    font-size: var(--appx-text-sm);
    font-weight: 600;
}

.appx-stat-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--appx-text);
}

.appx-stat-hint {
    color: var(--appx-text-muted);
    font-size: var(--appx-text-xs);
}

.appx-stat--success .appx-stat-value { color: var(--appx-success); }
.appx-stat--warning .appx-stat-value { color: var(--appx-warning); }
.appx-stat--danger  .appx-stat-value { color: var(--appx-danger); }
.appx-stat--info    .appx-stat-value { color: var(--appx-info); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--appx-radius-sm);
    font-weight: 600;
    font-family: inherit;
    min-height: 38px;
    padding: 7px 18px;
    transition: background var(--appx-transition), border-color var(--appx-transition),
        color var(--appx-transition), box-shadow var(--appx-transition);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: 2px solid var(--appx-primary);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--appx-primary);
    border-color: var(--appx-primary);
    color: var(--appx-primary-contrast);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: var(--appx-primary-hover);
    border-color: var(--appx-primary-hover);
    color: var(--appx-primary-contrast);
}

.btn-default {
    background: var(--appx-surface);
    border: 1px solid var(--appx-border-strong);
    color: var(--appx-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background: var(--appx-surface-alt);
    border-color: var(--appx-border-strong);
    color: var(--appx-text);
}

.btn-success {
    background: var(--appx-success);
    border-color: var(--appx-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background: #12833c;
    border-color: #12833c;
    color: #fff;
}

.btn-danger {
    background: var(--appx-danger);
    border-color: var(--appx-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-warning {
    background: var(--appx-warning);
    border-color: var(--appx-warning);
    color: #fff;
}

.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
    opacity: 0.55;
}

.btn-appx-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--appx-primary);
}

.btn-appx-ghost:hover,
.btn-appx-ghost:focus {
    background: var(--appx-primary-soft);
    color: var(--appx-primary);
}

/* Loading state (JS adds .appx-btn-loading) */
.appx-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.appx-btn-loading::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: appx-spin 0.7s linear infinite;
}

@keyframes appx-spin {
    to { transform: rotate(360deg); }
}
/* ---------- Forms ---------- */
.form-control {
    border: 1px solid var(--appx-border-strong);
    border-radius: var(--appx-radius-sm);
    box-shadow: none;
    color: var(--appx-text);
    font-family: inherit;
    height: 42px;
    min-height: var(--appx-touch);
    padding: 8px 14px;
    transition: border-color var(--appx-transition), box-shadow var(--appx-transition);
}

textarea.form-control {
    height: auto;
}

.form-control:focus {
    border-color: var(--appx-primary);
    box-shadow: 0 0 0 3px var(--appx-primary-soft);
    outline: 0;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background: var(--appx-surface-alt);
    cursor: not-allowed;
}

label {
    font-weight: 600;
    color: var(--appx-text);
}

.has-error .form-control,
.has-error .form-control:focus {
    border-color: var(--appx-danger);
}

.has-error .help-block,
.has-error label {
    color: var(--appx-danger);
}

.has-success .form-control {
    border-color: var(--appx-success);
}

/* Bootstrap-select alignment */
.bootstrap-select .btn {
    min-height: var(--appx-touch);
    border: 1px solid var(--appx-border-strong);
    border-radius: var(--appx-radius-sm);
    background: var(--appx-surface);
    color: var(--appx-text);
    text-align: start;
}

.bootstrap-select .dropdown-menu {
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius-sm);
    box-shadow: var(--appx-shadow-sm);
}

/* Checkbox / radio touch targets */
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--appx-primary);
}

/* ---------- Tables ---------- */
.table > thead > tr > th {
    color: var(--appx-text-muted);
    font-size: var(--appx-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-block-end: 1px solid var(--appx-border);
}

.table > tbody > tr > td {
    border-block-end: 1px solid var(--appx-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background: var(--appx-surface-alt);
}

.table thead th:first-child,
.table tbody td:first-child {
    padding-inline-start: var(--appx-space-5);
}

/* DataTables wrapper */
.dataTables_wrapper {
    padding: var(--appx-space-4) 0 0;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--appx-border-strong);
    border-radius: var(--appx-radius-sm);
    height: 38px;
    padding: 6px 12px;
    margin-inline-start: 8px;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--appx-border-strong);
    border-radius: var(--appx-radius-sm);
    height: 38px;
    padding: 4px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--appx-radius-sm) !important;
    border: 1px solid transparent !important;
    color: var(--appx-text) !important;
    padding: 4px 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--appx-surface-alt) !important;
    color: var(--appx-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--appx-primary) !important;
    color: #fff !important;
}

/* Keep tables from breaking the page on small screens */
.table-responsive {
    border: 0;
    margin-block-end: 0;
}

/* ---------- Modals ---------- */
.modal-content {
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius-lg);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

.modal-header {
    border-block-end: 1px solid var(--appx-border);
    padding: var(--appx-space-4) var(--appx-space-5);
}

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

.modal-body {
    padding: var(--appx-space-5);
}

.modal-footer {
    border-block-start: 1px solid var(--appx-border);
    padding: var(--appx-space-3) var(--appx-space-5);
}

@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
        width: auto;
    }
}

/* ---------- Badges / labels ---------- */
.badge {
    background: var(--appx-surface-alt);
    border: 1px solid var(--appx-border);
    color: var(--appx-text);
    border-radius: 999px;
    font-weight: 700;
}

.label-success { background: var(--appx-success); }
.label-danger  { background: var(--appx-danger); }
.label-warning { background: var(--appx-warning); }
.label-info    { background: var(--appx-info); }
.label-default { background: var(--appx-text-muted); }

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--appx-radius);
    padding: var(--appx-space-3) var(--appx-space-4);
}

.alert-success {
    background: var(--appx-success-soft);
    border-color: rgba(22, 163, 74, 0.25);
    color: #14532d;
}

.alert-danger,
.alert-warning {
    background: var(--appx-danger-soft);
    border-color: rgba(220, 38, 38, 0.25);
    color: #7f1d1d;
}

.alert-warning {
    background: var(--appx-warning-soft);
    border-color: rgba(217, 119, 6, 0.3);
    color: #78350f;
}

.alert-info {
    background: var(--appx-info-soft);
    border-color: rgba(2, 132, 199, 0.25);
    color: #0c4a6e;
}

/* ---------- Appx Toasts ----------
   Fixed top stack BELOW the header (same z-index band as Bootstrap
   modals/backdrops, so toasts never cover dialogs), on the
   inline-start side — automatically mirrored by logical properties:
   - dir="rtl" → stack on the RIGHT (inline-start side in RTL)
   - dir="ltr" → stack on the LEFT  (inline-start side in LTR)
   Physical left/right exist only as fallback for browsers without
   logical-property support; inset-inline-* is the real rule. */
#appx-toasts {
    position: fixed;
    z-index: 1041;
    top: calc(var(--appx-header-h) + var(--appx-space-3));
    right: auto;
    left: var(--appx-space-5);
    inset-block-start: calc(var(--appx-header-h) + var(--appx-space-3));
    inset-block-end: auto;
    inset-inline-start: var(--appx-space-5);
    inset-inline-end: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-inline-size: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.appx-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--appx-surface);
    border: 1px solid var(--appx-border);
    border-inline-start: 3px solid var(--appx-info);
    border-radius: var(--appx-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    padding: 12px 14px;
    font-size: var(--appx-text-sm);
    color: var(--appx-text);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--appx-transition), transform var(--appx-transition);
}

.appx-toast.appx-toast-in {
    opacity: 1;
    transform: translateY(0);
}

.appx-toast i {
    font-size: 16px;
    margin-block-start: 1px;
}

.appx-toast-success { border-inline-start-color: var(--appx-success); }
.appx-toast-success i { color: var(--appx-success); }
.appx-toast-error   { border-inline-start-color: var(--appx-danger); }
.appx-toast-error i { color: var(--appx-danger); }
.appx-toast-warning { border-inline-start-color: var(--appx-warning); }
.appx-toast-warning i { color: var(--appx-warning); }
.appx-toast-info    { border-inline-start-color: var(--appx-info); }
.appx-toast-info i { color: var(--appx-info); }

.appx-toast-close {
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--appx-text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
}

.appx-toast-close:hover {
    color: var(--appx-text);
}

/* Appx legacy floating alerts (alert_float() in app.js/common.js):
   kept dir-aware BELOW the header on the inline-start side in case any
   legacy markup reaches the page, but normally every alert_float() call
   is routed through appxToast() (appx.js), so this stack stays empty.
   Loaded AFTER tailwind.css, so this wins over its physical
   `top/right` placement (physical props kept as no-logical fallback). */
.alert.float-alert {
    position: fixed;
    z-index: 1041;
    top: calc(var(--appx-header-h, 60px) + 12px);
    right: auto;
    left: 20px;
    inset-block-start: calc(var(--appx-header-h, 60px) + 12px);
    inset-inline-start: 20px;
    inset-inline-end: auto;
    max-width: none;
    max-inline-size: min(360px, calc(100vw - 32px));
}

@media (max-width: 480px) {
    #appx-toasts,
    .alert.float-alert {
        top: calc(var(--appx-header-h, 56px) + 8px);
        right: 8px;
        left: 8px;
        inset-block-start: calc(var(--appx-header-h, 56px) + 8px);
        inset-inline-start: 8px;
        inset-inline-end: 8px;
        max-inline-size: none;
    }
}

/* ---------- Empty state ---------- */
.appx-empty {
    text-align: center;
    padding: var(--appx-space-8) var(--appx-space-4);
    color: var(--appx-text-muted);
}

.appx-empty i {
    font-size: 34px;
    color: var(--appx-border-strong);
    margin-block-end: var(--appx-space-3);
    display: inline-block;
}

.appx-empty-title {
    font-size: var(--appx-text-lg);
    font-weight: 700;
    color: var(--appx-text);
    margin: 0 0 4px;
}

.appx-empty-desc {
    margin: 0 0 var(--appx-space-4);
}

/* ---------- Skeleton ---------- */
.appx-skeleton {
    background: linear-gradient(90deg, var(--appx-surface-alt) 25%, var(--appx-border) 50%, var(--appx-surface-alt) 75%);
    background-size: 200% 100%;
    animation: appx-shimmer 1.4s ease infinite;
    border-radius: var(--appx-radius-sm);
    min-height: 14px;
}

@keyframes appx-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    color: var(--appx-text);
    border: 1px solid var(--appx-border);
    border-radius: var(--appx-radius-sm) !important;
    margin-inline: 3px;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: var(--appx-surface-alt);
    border-color: var(--appx-border-strong);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--appx-primary);
    border-color: var(--appx-primary);
    color: #fff;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
    background: transparent;
    padding-inline-start: 0;
    margin-block-end: var(--appx-space-3);
    font-size: var(--appx-text-sm);
}

.breadcrumb > li + li::before {
    content: "\203A";
    color: var(--appx-text-muted);
}