/* Custom theme styles for Work Management System */
/* Based on DashLite Design System v3.1.1 */

:root {
  /* Brand Colors - DashLite Standard */
  --bs-primary: #6576ff;      /* Blue primary */
  --bs-secondary: #364a63;    /* Dark blue-gray */
  
  /* Semantic Colors */
  --bs-success: #1ee0ac;      /* Green */
  --bs-info: #09c2de;         /* Cyan */
  --bs-warning: #f4bd0e;      /* Yellow */
  --bs-danger: #e85347;       /* Red */
  
  /* Neutral Colors */
  --bs-light: #e5e9f2;        /* Light gray */
  --bs-dark: #1f2b3a;         /* Dark navy */
  --bs-gray: #8091a7;         /* Medium gray */
  --bs-white: #fff;
  
  /* Gray Scale System */
  --bs-gray-100: #ebeef2;  /* Lightest */
  --bs-gray-200: #e5e9f2;
  --bs-gray-300: #dbdfea;
  --bs-gray-400: #b7c2d0;
  --bs-gray-500: #8091a7;  /* Base gray */
  --bs-gray-600: #3c4d62;
  --bs-gray-700: #344357;
  --bs-gray-800: #2b3748;
  --bs-gray-900: #1f2b3a;  /* Darkest */
  
  /* Extended Palette */
  --bs-blue: #559bfb;
  --bs-indigo: #2c3782;
  --bs-purple: #816bff;
  --bs-pink: #ff63a5;
  --bs-orange: #ffa353;
  --bs-teal: #20c997;
  --bs-cyan: #09c2de;
  
  /* Typography */
  --bs-font-sans-serif: Roboto, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-size: 0.875rem;    /* 14px */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.65;
  --bs-body-color: #526484;
  --bs-body-bg: #f5f6fa;
  
  /* Border Radius */
  --bs-border-radius: 4px;        /* Default */
  --bs-border-radius-sm: 3px;     /* Small */
  --bs-border-radius-lg: 5px;     /* Large */
  --bs-border-radius-xl: 8px;     /* Extra Large */
  --bs-border-radius-2xl: 2rem;   /* 2X Large */
  --bs-border-radius-pill: 50rem; /* Pill shape */
  
  /* Border Properties */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dbdfea;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  
  /* Shadows */
  --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bs-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --bs-box-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* Auth pages styling */
.nk-auth-body {
    max-width: 420px;
    margin: 0 auto;
}

.brand-logo {
    margin-bottom: 2rem;
}

.logo-img-lg {
    height: 40px;
    width: auto;
}

/* Form styling with DashLite standards */
.form-control.error {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.2rem rgba(232, 83, 71, 0.25);
}

.form-note-error {
    color: var(--bs-danger);
    font-size: var(--bs-body-font-size);
    margin-top: 0.25rem;
}

/* Alert styling with DashLite colors */
.alert-pro {
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.5rem;
}

.alert-success {
    background-color: rgba(30, 224, 172, 0.1);
    border-color: var(--bs-success);
    color: var(--bs-success);
}

/* Button styling */
.btn-block {
    width: 100%;
}

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

.btn-primary:hover {
    background-color: #5a6cff;
    border-color: #5a6cff;
}

/* Card enhancements */
.card-bordered {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Text utilities */
.text-soft {
    color: var(--bs-gray-500) !important;
}

/* Status badges with DashLite colors */
.badge-dot.badge-success {
    background-color: var(--bs-success);
}

.badge-dot.badge-warning {
    background-color: var(--bs-warning);
}

.badge-dot.badge-danger {
    background-color: var(--bs-danger);
}

.badge-dot.badge-info {
    background-color: var(--bs-info);
}

/* Icon colors */
.text-primary {
    color: var(--bs-primary) !important;
}

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

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

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

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

/* Link colors */
.link-primary {
    color: var(--bs-primary);
}

.link-primary:hover {
    color: #5a6cff;
}

/* Dark mode support */
.is-dark {
    --bs-body-bg: #1a1d29;
    --bs-body-color: #c4cdd5;
    --bs-card-bg: #232837;
    --bs-border-color: #2d3748;
    --bs-sidebar-bg: #232837;
    --bs-header-bg: #232837;
}

.is-dark .card {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

.is-dark .nk-sidebar {
    background-color: var(--bs-sidebar-bg);
}

.is-dark .nk-header {
    background-color: var(--bs-header-bg);
    border-color: var(--bs-border-color);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .nk-auth-body {
        padding: 1rem;
    }
    
    .brand-logo {
        margin-bottom: 1.5rem;
    }
}

/* Grid gutter spacing - DashLite standard */
.g-gs {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Typography enhancements */
body {
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bs-secondary);
    font-weight: 700;
    line-height: 1.1;
}

/* Transitions - DashLite standard */
.btn {
    transition: color 0.15s ease-in-out, 
                background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, 
                box-shadow 0.15s ease-in-out;
}

.form-control {
    transition: border-color 0.15s ease-in-out, 
                box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(101, 118, 255, 0.25);
}

/* Custom utilities */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

/* Kanban specific styles */
.kanban-board {
    min-height: 500px;
}

.kanban-column {
    background-color: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    min-height: 400px;
}

.kanban-card {
    background-color: var(--bs-white);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow-sm);
    cursor: move;
    transition: box-shadow 0.15s ease-in-out;
}

.kanban-card:hover {
    box-shadow: var(--bs-box-shadow);
}

/* Table enhancements */
.table {
    color: var(--bs-body-color);
}

.table th {
    color: var(--bs-secondary);
    font-weight: 600;
    border-color: var(--bs-border-color);
}

.table td {
    border-color: var(--bs-border-color);
}

/* Notification styles */
.toast {
    background-color: var(--bs-white);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

.toast-success {
    border-left: 4px solid var(--bs-success);
}

.toast-error {
    border-left: 4px solid var(--bs-danger);
}

.toast-warning {
    border-left: 4px solid var(--bs-warning);
}

.toast-info {
    border-left: 4px solid var(--bs-info);
}