/* ==========================================================================
   ClickERP / MediWiz Global UI Kit v2.0
   Fully Optimized & Consolidated
   ========================================================================== */

/* --- 1. FOUNDATION & VARIABLES --- */
:root {
    /* Brand Colors */
    --clk-primary: #2563EB;
    --clk-primary-hover: #1D4ED8;
    --clk-primary-light: #EFF6FF;
    /* Semantic Colors */
    --clk-success: #10B981;
    --clk-danger: #EF4444;
    --clk-warning: #F59E0B;
    --clk-info: #06B6D4;
    /* Neutrals */
    --clk-bg: #F8FAFC;
    --clk-surface: #FFFFFF;
    --clk-text-main: #0F172A;
    --clk-text-muted: #64748B;
    --clk-border: #E2E8F0;
    /* Layout */
    --clk-radius-md: 12px;
    --clk-radius-lg: 16px;
    --clk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --clk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --clk-shadow-lg: 0 10px 30px rgba(37, 99, 235, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--clk-bg);
    color: var(--clk-text-main);
    line-height: 1.5;
}

/* --- 2. CORE COMPONENTS (Panels & Cards) --- */
/* Replaces: .purchase-panel, .sales-panel, .stock-panel, etc. */
.clk-panel, .clk-card {
    background: var(--clk-surface);
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-lg);
    padding: 1.5rem; /* 24px */
    box-shadow: var(--clk-shadow-lg);
    transition: box-shadow 0.2s ease;
}

/* Replaces: .purchase-title, .sales-title, etc. */
.clk-panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clk-text-main);
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

/* Replaces: .purchase-toolbar, .sales-toolbar, etc. */
.clk-panel-toolbar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

/* --- 3. FORMS & INPUTS --- */
.clk-form-control, .clk-form-select {
    width: 100%;
    height: 42px;
    background-color: #FFFFFF;
    border: 1px solid var(--clk-border);
    border-radius: var(--clk-radius-md);
    padding: 0 12px;
    font-size: 0.95rem;
    color: var(--clk-text-main);
    transition: all 0.2s ease;
    box-shadow: var(--clk-shadow-sm);
}

    .clk-form-control:focus, .clk-form-select:focus {
        outline: none;
        border-color: var(--clk-primary);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .clk-form-control:disabled, .clk-form-select:disabled {
        background-color: var(--clk-bg);
        color: var(--clk-text-muted);
        cursor: not-allowed;
    }

/* --- 4. BUTTONS --- */
.clk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--clk-radius-md);
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clk-btn-primary {
    background: linear-gradient(135deg, var(--clk-primary), var(--clk-primary-hover));
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

    .clk-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    }

/* --- 5. TABLES --- */
.clk-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 1rem;
}

    .clk-table th, .clk-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--clk-border);
        text-align: left;
        font-size: 0.9rem;
    }

    .clk-table th {
        background: var(--clk-primary-light);
        color: var(--clk-text-main);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .clk-table tr:hover td {
        background-color: #F8FAFC;
    }

/* --- 6. TEXT & BACKGROUND UTILITIES --- */
.clk-text-primary {
    color: var(--clk-primary) !important;
}

.clk-bg-primary {
    background-color: var(--clk-primary) !important;
    color: #fff;
}

.clk-text-success {
    color: var(--clk-success) !important;
}

.clk-bg-success {
    background-color: var(--clk-success) !important;
    color: #fff;
}

.clk-text-danger {
    color: var(--clk-danger) !important;
}

.clk-bg-danger {
    background-color: var(--clk-danger) !important;
    color: #fff;
}

.clk-text-warning {
    color: var(--clk-warning) !important;
}

.clk-bg-warning {
    background-color: var(--clk-warning) !important;
    color: #fff;
}

.clk-text-info {
    color: var(--clk-info) !important;
}

.clk-bg-info {
    background-color: var(--clk-info) !important;
    color: #fff;
}

/* --- 7. SIZING UTILITIES (Width & Height) --- */
/* Standard percentage widths/heights to replace w-1 through w-100 */
.clk-w-0 {
    width: 0%;
}

.clk-h-0 {
    height: 0%;
}

.clk-w-10 {
    width: 10%;
}

.clk-h-10 {
    height: 10%;
}

.clk-w-20 {
    width: 20%;
}

.clk-h-20 {
    height: 20%;
}

.clk-w-25 {
    width: 25%;
}

.clk-h-25 {
    height: 25%;
}

.clk-w-30 {
    width: 30%;
}

.clk-h-30 {
    height: 30%;
}

.clk-w-40 {
    width: 40%;
}

.clk-h-40 {
    height: 40%;
}

.clk-w-50 {
    width: 50%;
}

.clk-h-50 {
    height: 50%;
}

.clk-w-60 {
    width: 60%;
}

.clk-h-60 {
    height: 60%;
}

.clk-w-70 {
    width: 70%;
}

.clk-h-70 {
    height: 70%;
}

.clk-w-75 {
    width: 75%;
}

.clk-h-75 {
    height: 75%;
}

.clk-w-80 {
    width: 80%;
}

.clk-h-80 {
    height: 80%;
}

.clk-w-90 {
    width: 90%;
}

.clk-h-90 {
    height: 90%;
}

.clk-w-100 {
    width: 100%;
}

.clk-h-100 {
    height: 100%;
}

.clk-w-auto {
    width: auto;
}

.clk-h-auto {
    height: auto;
}

/* --- 8. SPACING UTILITIES (Margin & Padding) --- */
/* 
   Replaces ALL module specific margins/paddings. 
   Instead of "purchase-m15" or "sales-p10", use "clk-m-15" or "clk-p-10".
   Uses standard 4px multiplication scale (similar to Tailwind/Bootstrap) 
   but mapped to your exact pixel requests for backward compatibility.
*/
.clk-m-0 {
    margin: 0px !important;
}

.clk-p-0 {
    padding: 0px !important;
}

.clk-m-1 {
    margin: 1px !important;
}

.clk-p-1 {
    padding: 1px !important;
}

.clk-m-2 {
    margin: 2px !important;
}

.clk-p-2 {
    padding: 2px !important;
}

.clk-m-3 {
    margin: 3px !important;
}

.clk-p-3 {
    padding: 3px !important;
}

.clk-m-4 {
    margin: 4px !important;
}

.clk-p-4 {
    padding: 4px !important;
}

.clk-m-5 {
    margin: 5px !important;
}

.clk-p-5 {
    padding: 5px !important;
}

.clk-m-6 {
    margin: 6px !important;
}

.clk-p-6 {
    padding: 6px !important;
}

.clk-m-8 {
    margin: 8px !important;
}

.clk-p-8 {
    padding: 8px !important;
}

.clk-m-10 {
    margin: 10px !important;
}

.clk-p-10 {
    padding: 10px !important;
}

.clk-m-12 {
    margin: 12px !important;
}

.clk-p-12 {
    padding: 12px !important;
}

.clk-m-15 {
    margin: 15px !important;
}

.clk-p-15 {
    padding: 15px !important;
}

.clk-m-16 {
    margin: 16px !important;
}

.clk-p-16 {
    padding: 16px !important;
}

.clk-m-20 {
    margin: 20px !important;
}

.clk-p-20 {
    padding: 20px !important;
}

.clk-m-24 {
    margin: 24px !important;
}

.clk-p-24 {
    padding: 24px !important;
}

.clk-m-30 {
    margin: 30px !important;
}

.clk-p-30 {
    padding: 30px !important;
}

/* Add directional spacing for better layouts */
.clk-mt-10 {
    margin-top: 10px !important;
}

.clk-mb-10 {
    margin-bottom: 10px !important;
}

.clk-ml-10 {
    margin-left: 10px !important;
}

.clk-mr-10 {
    margin-right: 10px !important;
}