@tailwind base;
@tailwind components;
@tailwind utilities;

/* =====================================================
   ASITEC ERP UI SYSTEM
   ENTERPRISE MODERN STYLE
===================================================== */

:root{

    --primary:#7A0014;
    --primary-light:#980019;

    --sidebar-bg:#ffffff;
    --sidebar-hover:#f5f7fa;
    --sidebar-active:#fdf2f4;

    --text:#1f2937;
    --muted:#6b7280;

    --border:#e5e7eb;

    --topbar:#ffffff;
    --body:#f4f6f9;

    --success:#16a34a;
    --warning:#f59e0b;
    --info:#2563eb;
}

/* =====================================================
   GLOBAL
===================================================== */

body{
    background:var(--body);
    font-family:'Inter',sans-serif;
    color:var(--text);
}

/* =====================================================
   MAIN CONTAINER
===================================================== */

.min-h-screen{
    background:var(--body) !important;
}

/* =====================================================
   HEADER / TOPBAR
===================================================== */

header{
    background:#ffffff !important;

    border-bottom:1px solid var(--border);

    box-shadow:
    0 2px 10px rgba(0,0,0,.03);
}

/* =====================================================
   NAVIGATION
===================================================== */

nav{
    background:#ffffff !important;

    border-bottom:1px solid var(--border);

    box-shadow:
    0 2px 10px rgba(0,0,0,.03);
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar,
aside,
.left-side-menu{

    background:var(--sidebar-bg) !important;

    border-right:1px solid var(--border);

    box-shadow:
    4px 0 20px rgba(0,0,0,.03);
}

/* =====================================================
   MENU LINKS
===================================================== */

nav a,
.sidebar a,
aside a{

    border-radius:14px;

    transition:all .22s ease;

    font-weight:600;
}

nav a:hover,
.sidebar a:hover,
aside a:hover{

    background:var(--sidebar-hover) !important;

    color:var(--primary) !important;

    transform:translateX(2px);
}

/* ACTIVE */

nav a.active,
.sidebar a.active,
aside a.active{

    background:var(--sidebar-active) !important;

    color:var(--primary) !important;

    font-weight:700;

    box-shadow:
    inset 3px 0 0 var(--primary);
}

/* =====================================================
   CARDS
===================================================== */

.card,
.bg-white{

    border-radius:20px;

    border:none;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

/* =====================================================
   TABLES
===================================================== */

table{

    border-collapse:separate;
    border-spacing:0;
}

thead{

    background:#fafafa;
}

thead th{

    color:#374151;

    font-size:13px;

    font-weight:700;

    padding:18px 16px;

    border:none !important;
}

tbody td{

    padding:18px 16px;

    border-top:1px solid #f3f4f6;

    vertical-align:middle;
}

tbody tr{

    transition:all .2s ease;
}

tbody tr:hover{

    background:#fafafa;
}

/* =====================================================
   INPUTS
===================================================== */

input,
select,
textarea{

    height:48px;

    border-radius:14px !important;

    border:1px solid #dfe3ea !important;

    background:#ffffff !important;

    transition:all .2s ease;

    box-shadow:none !important;
}

/* REMOVE AUTOFILL BLUE */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-box-shadow:
    0 0 0px 1000px white inset !important;

    -webkit-text-fill-color:#000 !important;
}

/* FOCUS */

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary) !important;

    box-shadow:
    0 0 0 4px rgba(122,0,20,.08) !important;

    outline:none !important;
}

/* =====================================================
   BUTTONS
===================================================== */

button,
.btn{

    border-radius:14px !important;

    font-weight:600 !important;

    transition:all .2s ease;
}

/* PRIMARY BUTTON */

.btn-primary{

    background:var(--primary) !important;

    border:none !important;

    color:#fff !important;
}

.btn-primary:hover{

    background:#5f0010 !important;

    transform:translateY(-1px);

    box-shadow:
    0 10px 20px rgba(122,0,20,.18);
}

/* SUCCESS BUTTON */

.btn-success{

    background:var(--success) !important;

    border:none !important;
}

/* =====================================================
   BADGES
===================================================== */

.badge{

    border-radius:30px !important;

    padding:8px 14px !important;

    font-weight:600 !important;
}

/* =====================================================
   PAGE TITLES
===================================================== */

h1,h2,h3,h4,h5{

    color:var(--text);

    font-weight:700;
}

/* =====================================================
   LINKS
===================================================== */

a{

    text-decoration:none !important;
}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

    background:#9ca3af;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    .card,
    .bg-white{

        border-radius:16px;
    }

    input,
    select,
    textarea{

        height:46px;
    }
}
body{
    background:red !important;
}