/**
 * SMA Design System
 * Shared design tokens, utilities, and components for Star Micronics Empower plugins
 * Version: 1.1.0
 */

/* ==========================================================================
   1. CSS VARIABLES (Design Tokens)
   ========================================================================== */

:root {
    /* -------------------------
       Colors - Primary
       ------------------------- */
    --sma-primary: #17479e;
    --sma-primary-dark: #111c4e;
    --sma-primary-light: #2563eb;
    --sma-primary-hover: #1e3a8a;

    /* -------------------------
       Colors - Secondary (Outline Style)
       ------------------------- */
    --sma-secondary-bg: #ffffff;
    --sma-secondary-border: #17479e;
    --sma-secondary-text: #17479e;
    --sma-secondary-hover-bg: #f0f4ff;

    /* -------------------------
       Colors - Neutral
       ------------------------- */
    --sma-white: #ffffff;
    --sma-black: #000000;
    --sma-gray-50: #f9fafb;
    --sma-gray-100: #f3f4f6;
    --sma-gray-200: #e5e7eb;
    --sma-gray-300: #d1d5db;
    --sma-gray-400: #9ca3af;
    --sma-gray-500: #6b7280;
    --sma-gray-600: #4b5563;
    --sma-gray-700: #374151;
    --sma-gray-800: #1f2937;
    --sma-gray-900: #111827;

    /* -------------------------
       Colors - Semantic
       ------------------------- */
    --sma-success: #10b981;
    --sma-success-light: #d1fae5;
    --sma-success-dark: #065f46;

    --sma-warning: #f59e0b;
    --sma-warning-light: #fef3c7;
    --sma-warning-dark: #92400e;

    --sma-error: #ef4444;
    --sma-error-light: #fee2e2;
    --sma-error-dark: #991b1b;

    --sma-info: #3b82f6;
    --sma-info-light: #dbeafe;
    --sma-info-dark: #1e40af;

    /* -------------------------
       Colors - Category Pills
       ------------------------- */
    --sma-cat-blue-bg: #dbeafe;
    --sma-cat-blue-text: #1e40af;

    --sma-cat-indigo-bg: #e0e7ff;
    --sma-cat-indigo-text: #3730a3;

    --sma-cat-green-bg: #dcfce7;
    --sma-cat-green-text: #166534;

    --sma-cat-yellow-bg: #fef9c3;
    --sma-cat-yellow-text: #854d0e;

    --sma-cat-red-bg: #fee2e2;
    --sma-cat-red-text: #991b1b;

    --sma-cat-purple-bg: #f3e8ff;
    --sma-cat-purple-text: #6b21a8;

    --sma-cat-cyan-bg: #cffafe;
    --sma-cat-cyan-text: #155e75;

    /* -------------------------
       Typography
       ------------------------- */
    --sma-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    --sma-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --sma-font-size-xs: 11px;
    --sma-font-size-sm: 13px;
    --sma-font-size-base: 14px;
    --sma-font-size-md: 16px;
    --sma-font-size-lg: 18px;
    --sma-font-size-xl: 20px;
    --sma-font-size-2xl: 24px;
    --sma-font-size-3xl: 28px;
    --sma-font-size-4xl: 32px;

    --sma-font-weight-normal: 400;
    --sma-font-weight-medium: 500;
    --sma-font-weight-semibold: 600;
    --sma-font-weight-bold: 700;
    --sma-font-weight-extrabold: 800;

    --sma-line-height-tight: 1.25;
    --sma-line-height-normal: 1.5;
    --sma-line-height-relaxed: 1.625;

    /* -------------------------
       Spacing
       ------------------------- */
    --sma-space-0: 0;
    --sma-space-1: 4px;
    --sma-space-2: 8px;
    --sma-space-3: 12px;
    --sma-space-4: 16px;
    --sma-space-5: 20px;
    --sma-space-6: 24px;
    --sma-space-8: 32px;
    --sma-space-10: 40px;
    --sma-space-12: 48px;
    --sma-space-16: 64px;

    /* -------------------------
       Border Radius
       ------------------------- */
    --sma-radius-none: 0;
    --sma-radius-sm: 4px;
    --sma-radius-md: 8px;
    --sma-radius-lg: 12px;
    --sma-radius-xl: 16px;
    --sma-radius-2xl: 24px;
    --sma-radius-full: 999px;

    /* -------------------------
       Shadows
       ------------------------- */
    --sma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sma-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --sma-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sma-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sma-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* -------------------------
       Focus Ring
       ------------------------- */
    --sma-focus-ring: 0 0 0 3px rgba(23, 71, 158, 0.15);
    --sma-focus-ring-heavy: 0 0 0 3px rgba(23, 71, 158, 0.3);

    /* -------------------------
       Transitions
       ------------------------- */
    --sma-transition-fast: 0.15s ease;
    --sma-transition-normal: 0.2s ease;
    --sma-transition-slow: 0.3s ease;

    /* -------------------------
       Z-Index Scale
       ------------------------- */
    --sma-z-dropdown: 1000;
    --sma-z-sticky: 1020;
    --sma-z-fixed: 1030;
    --sma-z-modal-backdrop: 1040;
    --sma-z-modal: 1050;
    --sma-z-popover: 1060;
    --sma-z-tooltip: 1070;
}


/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */

/* Apply font family to SMA plugin containers */
.sma-plugin,
[class^="sma-"],
[class*=" sma-"],
.nc-dashboard,
.qpg-dashboard,
.mdfd-dashboard {
    font-family: var(--sma-font-family);
    line-height: var(--sma-line-height-normal);
    color: var(--sma-gray-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */

/* -------------------------
   Display
   ------------------------- */
.sma-hidden { display: none !important; }
.sma-block { display: block; }
.sma-inline { display: inline; }
.sma-inline-block { display: inline-block; }
.sma-flex { display: flex; }
.sma-inline-flex { display: inline-flex; }
.sma-grid { display: grid; }

/* -------------------------
   Flexbox
   ------------------------- */
.sma-flex-row { flex-direction: row; }
.sma-flex-col { flex-direction: column; }
.sma-flex-wrap { flex-wrap: wrap; }
.sma-flex-nowrap { flex-wrap: nowrap; }
.sma-flex-1 { flex: 1 1 0%; }
.sma-flex-auto { flex: 1 1 auto; }
.sma-flex-none { flex: none; }
.sma-flex-grow { flex-grow: 1; }
.sma-flex-shrink-0 { flex-shrink: 0; }

.sma-items-start { align-items: flex-start; }
.sma-items-center { align-items: center; }
.sma-items-end { align-items: flex-end; }
.sma-items-stretch { align-items: stretch; }

.sma-justify-start { justify-content: flex-start; }
.sma-justify-center { justify-content: center; }
.sma-justify-end { justify-content: flex-end; }
.sma-justify-between { justify-content: space-between; }
.sma-justify-around { justify-content: space-around; }

/* -------------------------
   Gap
   ------------------------- */
.sma-gap-1 { gap: var(--sma-space-1); }
.sma-gap-2 { gap: var(--sma-space-2); }
.sma-gap-3 { gap: var(--sma-space-3); }
.sma-gap-4 { gap: var(--sma-space-4); }
.sma-gap-5 { gap: var(--sma-space-5); }
.sma-gap-6 { gap: var(--sma-space-6); }
.sma-gap-8 { gap: var(--sma-space-8); }

/* -------------------------
   Margin
   ------------------------- */
.sma-m-0 { margin: 0; }
.sma-m-1 { margin: var(--sma-space-1); }
.sma-m-2 { margin: var(--sma-space-2); }
.sma-m-3 { margin: var(--sma-space-3); }
.sma-m-4 { margin: var(--sma-space-4); }
.sma-m-auto { margin: auto; }

.sma-mt-0 { margin-top: 0; }
.sma-mt-1 { margin-top: var(--sma-space-1); }
.sma-mt-2 { margin-top: var(--sma-space-2); }
.sma-mt-3 { margin-top: var(--sma-space-3); }
.sma-mt-4 { margin-top: var(--sma-space-4); }
.sma-mt-6 { margin-top: var(--sma-space-6); }

.sma-mb-0 { margin-bottom: 0; }
.sma-mb-1 { margin-bottom: var(--sma-space-1); }
.sma-mb-2 { margin-bottom: var(--sma-space-2); }
.sma-mb-3 { margin-bottom: var(--sma-space-3); }
.sma-mb-4 { margin-bottom: var(--sma-space-4); }
.sma-mb-6 { margin-bottom: var(--sma-space-6); }

.sma-ml-auto { margin-left: auto; }
.sma-mr-auto { margin-right: auto; }

/* -------------------------
   Padding
   ------------------------- */
.sma-p-0 { padding: 0; }
.sma-p-1 { padding: var(--sma-space-1); }
.sma-p-2 { padding: var(--sma-space-2); }
.sma-p-3 { padding: var(--sma-space-3); }
.sma-p-4 { padding: var(--sma-space-4); }
.sma-p-5 { padding: var(--sma-space-5); }
.sma-p-6 { padding: var(--sma-space-6); }

.sma-px-2 { padding-left: var(--sma-space-2); padding-right: var(--sma-space-2); }
.sma-px-3 { padding-left: var(--sma-space-3); padding-right: var(--sma-space-3); }
.sma-px-4 { padding-left: var(--sma-space-4); padding-right: var(--sma-space-4); }

.sma-py-2 { padding-top: var(--sma-space-2); padding-bottom: var(--sma-space-2); }
.sma-py-3 { padding-top: var(--sma-space-3); padding-bottom: var(--sma-space-3); }
.sma-py-4 { padding-top: var(--sma-space-4); padding-bottom: var(--sma-space-4); }

/* -------------------------
   Width
   ------------------------- */
.sma-w-full { width: 100%; }
.sma-w-auto { width: auto; }
.sma-max-w-full { max-width: 100%; }

/* -------------------------
   Text
   ------------------------- */
.sma-text-xs { font-size: var(--sma-font-size-xs); }
.sma-text-sm { font-size: var(--sma-font-size-sm); }
.sma-text-base { font-size: var(--sma-font-size-base); }
.sma-text-md { font-size: var(--sma-font-size-md); }
.sma-text-lg { font-size: var(--sma-font-size-lg); }
.sma-text-xl { font-size: var(--sma-font-size-xl); }
.sma-text-2xl { font-size: var(--sma-font-size-2xl); }
.sma-text-3xl { font-size: var(--sma-font-size-3xl); }

.sma-font-normal { font-weight: var(--sma-font-weight-normal); }
.sma-font-medium { font-weight: var(--sma-font-weight-medium); }
.sma-font-semibold { font-weight: var(--sma-font-weight-semibold); }
.sma-font-bold { font-weight: var(--sma-font-weight-bold); }
.sma-font-extrabold { font-weight: var(--sma-font-weight-extrabold); }

.sma-text-left { text-align: left; }
.sma-text-center { text-align: center; }
.sma-text-right { text-align: right; }

.sma-uppercase { text-transform: uppercase; }
.sma-lowercase { text-transform: lowercase; }
.sma-capitalize { text-transform: capitalize; }
.sma-normal-case { text-transform: none; }

.sma-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sma-whitespace-nowrap { white-space: nowrap; }

/* -------------------------
   Text Colors
   ------------------------- */
.sma-text-primary { color: var(--sma-primary); }
.sma-text-primary-dark { color: var(--sma-primary-dark); }
.sma-text-muted { color: var(--sma-gray-500); }
.sma-text-dark { color: var(--sma-gray-900); }
.sma-text-white { color: var(--sma-white); }
.sma-text-success { color: var(--sma-success); }
.sma-text-warning { color: var(--sma-warning); }
.sma-text-error { color: var(--sma-error); }

/* -------------------------
   Background Colors
   ------------------------- */
.sma-bg-white { background-color: var(--sma-white); }
.sma-bg-gray-50 { background-color: var(--sma-gray-50); }
.sma-bg-gray-100 { background-color: var(--sma-gray-100); }
.sma-bg-primary { background-color: var(--sma-primary); }
.sma-bg-primary-dark { background-color: var(--sma-primary-dark); }

/* -------------------------
   Border
   ------------------------- */
.sma-border { border: 1px solid var(--sma-gray-200); }
.sma-border-0 { border: 0; }
.sma-border-t { border-top: 1px solid var(--sma-gray-200); }
.sma-border-b { border-bottom: 1px solid var(--sma-gray-200); }
.sma-border-primary { border-color: var(--sma-primary); }

/* -------------------------
   Border Radius
   ------------------------- */
.sma-rounded-none { border-radius: var(--sma-radius-none); }
.sma-rounded-sm { border-radius: var(--sma-radius-sm); }
.sma-rounded { border-radius: var(--sma-radius-md); }
.sma-rounded-lg { border-radius: var(--sma-radius-lg); }
.sma-rounded-xl { border-radius: var(--sma-radius-xl); }
.sma-rounded-full { border-radius: var(--sma-radius-full); }

/* -------------------------
   Shadow
   ------------------------- */
.sma-shadow-none { box-shadow: none; }
.sma-shadow-xs { box-shadow: var(--sma-shadow-xs); }
.sma-shadow-sm { box-shadow: var(--sma-shadow-sm); }
.sma-shadow { box-shadow: var(--sma-shadow-md); }
.sma-shadow-lg { box-shadow: var(--sma-shadow-lg); }

/* -------------------------
   Cursor
   ------------------------- */
.sma-cursor-pointer { cursor: pointer; }
.sma-cursor-default { cursor: default; }
.sma-cursor-not-allowed { cursor: not-allowed; }

/* -------------------------
   Pointer Events
   ------------------------- */
.sma-pointer-events-none { pointer-events: none; }
.sma-pointer-events-auto { pointer-events: auto; }

/* -------------------------
   Transitions
   ------------------------- */
.sma-transition {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}


/* ==========================================================================
   4. COMPONENT CLASSES
   ========================================================================== */

/* -------------------------
   Buttons - Primary
   ------------------------- */
.sma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sma-space-2);
    padding: var(--sma-space-2) var(--sma-space-4);
    font-family: var(--sma-font-family);
    font-size: var(--sma-font-size-sm);
    font-weight: var(--sma-font-weight-semibold);
    line-height: var(--sma-line-height-tight);
    text-decoration: none;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--sma-transition-fast);
    white-space: nowrap;
}

.sma-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.2);
}

.sma-btn:disabled,
.sma-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sma-btn-primary {
    background-color: var(--sma-primary);
    border-color: var(--sma-primary);
    color: var(--sma-white);
}

.sma-btn-primary:hover {
    background-color: var(--sma-primary-hover);
    border-color: var(--sma-primary-hover);
}

/* -------------------------
   Buttons - Secondary (Outline)
   ------------------------- */
.sma-btn-secondary {
    background-color: var(--sma-secondary-bg);
    border-color: var(--sma-secondary-border);
    color: var(--sma-secondary-text);
}

.sma-btn-secondary:hover {
    background-color: var(--sma-secondary-hover-bg);
}

/* -------------------------
   Buttons - Ghost
   ------------------------- */
.sma-btn-ghost {
    background-color: transparent;
    border-color: var(--sma-gray-200);
    color: var(--sma-gray-600);
}

.sma-btn-ghost:hover {
    background-color: var(--sma-gray-100);
    border-color: var(--sma-gray-300);
    color: var(--sma-gray-900);
}

/* -------------------------
   Buttons - Danger
   ------------------------- */
.sma-btn-danger {
    background-color: var(--sma-error);
    border-color: var(--sma-error);
    color: var(--sma-white);
}

.sma-btn-danger:hover {
    background-color: var(--sma-error-dark);
    border-color: var(--sma-error-dark);
}

/* -------------------------
   Button Sizes
   ------------------------- */
.sma-btn-sm {
    padding: var(--sma-space-1) var(--sma-space-3);
    font-size: var(--sma-font-size-xs);
}

.sma-btn-lg {
    padding: var(--sma-space-3) var(--sma-space-6);
    font-size: var(--sma-font-size-base);
}

/* -------------------------
   Cards
   ------------------------- */
.sma-card {
    background-color: var(--sma-white);
    border: 1px solid var(--sma-gray-200);
    border-radius: var(--sma-radius-lg);
    box-shadow: var(--sma-shadow-xs);
    padding: var(--sma-space-4);
    transition: box-shadow var(--sma-transition-fast), border-color var(--sma-transition-fast);
}

.sma-card:hover {
    box-shadow: var(--sma-shadow-md);
    border-color: var(--sma-gray-300);
}

.sma-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sma-space-3);
    margin-bottom: var(--sma-space-3);
}

.sma-card-title {
    margin: 0;
    font-size: var(--sma-font-size-md);
    font-weight: var(--sma-font-weight-bold);
    color: var(--sma-gray-900);
}

.sma-card-content {
    font-size: var(--sma-font-size-base);
    color: var(--sma-gray-600);
    line-height: var(--sma-line-height-relaxed);
}

.sma-card-footer {
    display: flex;
    align-items: center;
    gap: var(--sma-space-2);
    padding-top: var(--sma-space-3);
    margin-top: var(--sma-space-3);
    border-top: 1px solid var(--sma-gray-200);
}

/* -------------------------
   Pills / Badges
   ------------------------- */
.sma-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--sma-space-1) var(--sma-space-2);
    font-size: var(--sma-font-size-xs);
    font-weight: var(--sma-font-weight-bold);
    line-height: 1;
    border-radius: var(--sma-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sma-pill-blue {
    background-color: var(--sma-cat-blue-bg);
    color: var(--sma-cat-blue-text);
}

.sma-pill-indigo {
    background-color: var(--sma-cat-indigo-bg);
    color: var(--sma-cat-indigo-text);
}

.sma-pill-green {
    background-color: var(--sma-cat-green-bg);
    color: var(--sma-cat-green-text);
}

.sma-pill-yellow {
    background-color: var(--sma-cat-yellow-bg);
    color: var(--sma-cat-yellow-text);
}

.sma-pill-red {
    background-color: var(--sma-cat-red-bg);
    color: var(--sma-cat-red-text);
}

.sma-pill-purple {
    background-color: var(--sma-cat-purple-bg);
    color: var(--sma-cat-purple-text);
}

.sma-pill-cyan {
    background-color: var(--sma-cat-cyan-bg);
    color: var(--sma-cat-cyan-text);
}

.sma-pill-gray {
    background-color: var(--sma-gray-100);
    color: var(--sma-gray-600);
}

/* -------------------------
   Badge (Count)
   ------------------------- */
.sma-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--sma-error);
    color: var(--sma-white);
    font-size: var(--sma-font-size-xs);
    font-weight: var(--sma-font-weight-bold);
    border-radius: var(--sma-radius-full);
    line-height: 1;
}

.sma-badge-primary {
    background-color: var(--sma-primary);
}

.sma-badge-success {
    background-color: var(--sma-success);
}

/* -------------------------
   Form Inputs
   ------------------------- */
.sma-input {
    display: block;
    width: 100%;
    padding: var(--sma-space-2) var(--sma-space-3);
    font-family: var(--sma-font-family);
    font-size: var(--sma-font-size-base);
    line-height: var(--sma-line-height-normal);
    color: var(--sma-gray-900);
    background-color: var(--sma-white);
    border: 1px solid var(--sma-gray-200);
    border-radius: var(--sma-radius-md);
    transition: border-color var(--sma-transition-fast), box-shadow var(--sma-transition-fast);
}

.sma-input:focus {
    outline: none;
    border-color: var(--sma-primary);
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
}

.sma-input::placeholder {
    color: var(--sma-gray-400);
}

.sma-input-pill {
    border-radius: 5px;
    padding-left: var(--sma-space-4);
    padding-right: var(--sma-space-4);
}

/* -------------------------
   Select
   ------------------------- */
.sma-select {
    display: block;
    width: 100%;
    padding: var(--sma-space-2) var(--sma-space-8) var(--sma-space-2) var(--sma-space-3);
    font-family: var(--sma-font-family);
    font-size: var(--sma-font-size-base);
    line-height: var(--sma-line-height-normal);
    color: var(--sma-gray-900);
    background-color: var(--sma-white);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--sma-gray-200);
    border-radius: var(--sma-radius-md);
    cursor: pointer;
    appearance: none;
    transition: border-color var(--sma-transition-fast), box-shadow var(--sma-transition-fast);
}

.sma-select:focus {
    outline: none;
    border-color: var(--sma-primary);
    box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.1);
}

.sma-select-pill {
    border-radius: 5px;
    padding-left: var(--sma-space-4);
}

/* -------------------------
   Empty State
   ------------------------- */
.sma-empty {
    text-align: center;
    padding: var(--sma-space-12) var(--sma-space-6);
    background-color: var(--sma-gray-50);
    border-radius: var(--sma-radius-lg);
    border: 1px dashed var(--sma-gray-200);
}

.sma-empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--sma-space-3);
}

.sma-empty-text {
    margin: 0;
    color: var(--sma-gray-500);
    font-size: var(--sma-font-size-base);
}

/* -------------------------
   Page Header
   ------------------------- */
.sma-page-header {
    margin-bottom: var(--sma-space-5);
}

.sma-page-title {
    margin: 0;
    font-size: var(--sma-font-size-3xl);
    font-weight: var(--sma-font-weight-extrabold);
    color: var(--sma-gray-900);
}

.sma-page-subtitle {
    margin: var(--sma-space-1) 0 0;
    font-size: var(--sma-font-size-base);
    color: var(--sma-gray-500);
}

/* -------------------------
   Filter Bar
   ------------------------- */
.sma-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sma-space-3);
    flex-wrap: wrap;
    background-color: var(--sma-gray-50);
    border: 1px solid var(--sma-gray-200);
    border-radius: var(--sma-radius-lg);
    padding: var(--sma-space-3);
    box-shadow: var(--sma-shadow-xs);
    margin-bottom: var(--sma-space-5);
}

/* -------------------------
   Status Dot
   ------------------------- */
.sma-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sma-dot-primary { background-color: var(--sma-primary); }
.sma-dot-success { background-color: var(--sma-success); }
.sma-dot-warning { background-color: var(--sma-warning); }
.sma-dot-error { background-color: var(--sma-error); }
.sma-dot-gray { background-color: var(--sma-gray-400); }

/* -------------------------
   Table Styles
   ------------------------- */
.sma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sma-font-size-sm);
}

.sma-table th,
.sma-table td {
    padding: var(--sma-space-3);
    text-align: left;
    border-bottom: 1px solid var(--sma-gray-200);
}

.sma-table th {
    font-weight: var(--sma-font-weight-semibold);
    color: var(--sma-gray-600);
    background-color: var(--sma-gray-50);
}

.sma-table tbody tr:hover {
    background-color: var(--sma-gray-50);
}

/* -------------------------
   Link Styles
   ------------------------- */
.sma-link {
    color: var(--sma-primary);
    text-decoration: none;
    font-weight: var(--sma-font-weight-medium);
    transition: color var(--sma-transition-fast);
}

.sma-link:hover {
    color: var(--sma-primary-dark);
    text-decoration: underline;
}

/* -------------------------
   Floating Pagination Bar
   (Extracted from sma-unified-orders-dashboard)
   ------------------------- */
.sma-pagination-bar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--sma-white);
    border: 1px solid var(--sma-gray-200);
    border-radius: 5px;
    box-shadow: var(--sma-shadow-lg);
    z-index: var(--sma-z-fixed);
    font-family: var(--sma-font-family);
}

.sma-pagination-controls {
    display: flex;
    gap: 6px;
}

.sma-pagination-info {
    font-size: 12px;
    color: var(--sma-gray-600);
    white-space: nowrap;
}

.sma-pagination-btn {
    border-radius: 5px;
    padding: 7px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sma-gray-50);
    border-color: var(--sma-gray-200);
    color: var(--sma-gray-700);
    transition: all var(--sma-transition-fast);
}

.sma-pagination-btn:hover:not(:disabled) {
    background: var(--sma-gray-100);
    border-color: var(--sma-gray-300);
}

.sma-pagination-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Pagination bar responsive - center on mobile */
@media (max-width: 600px) {
    .sma-pagination-bar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 80px; /* Increased to sit above mobile navigation bar */
    }

    .sma-pagination-info {
        font-size: 12px;
    }
}


/* ==========================================================================
   5. RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
    .sma-hide-mobile { display: none !important; }
    .sma-show-mobile { display: block !important; }

    .sma-flex-col-mobile { flex-direction: column; }
    .sma-w-full-mobile { width: 100%; }
    .sma-text-center-mobile { text-align: center; }
}

@media (min-width: 769px) {
    .sma-hide-desktop { display: none !important; }
    .sma-show-desktop { display: block !important; }
}