/* assets/css/style.css */

:root {
    --brand: #0ea5f0;
    /* light blue brand */
    --sidebar-bg: linear-gradient(180deg, #e6f4ff 0%, #d8efff 100%);
    /* light blue background */
    --sidebar-border: #b7f3c6;
    /* light green border */
    --sidebar-width: 220px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background: #f8f9fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.card img {
    background: #fff;
}


/* Left sidebar layout */

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.app-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: #073040;
    padding: 1.5rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    border-right: 4px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
}

.app-sidebar .brand {
    font-weight: 700;
    color: var(--brand);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    word-break: break-word;
}

.app-sidebar .nav {
    flex: 1;
}

.app-sidebar .nav-link {
    color: rgba(7, 48, 64, 0.85);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    word-break: break-word;
    min-height: 40px;
}

.app-sidebar .nav-link:hover {
    color: #052022;
    background: rgba(6, 34, 48, 0.08);
}

.app-sidebar .nav-link.active {
    color: #052022;
    background: rgba(6, 34, 48, 0.12);
    font-weight: 600;
    border-left: 3px solid var(--brand);
    padding-left: calc(0.75rem - 3px);
}

.app-sidebar .nav-link.text-danger {
    color: #dc3545;
}

.app-sidebar .nav-link.text-danger:hover {
    background: #ffe5e5;
}

.app-sidebar .nav-divider {
    height: 1px;
    background: rgba(7, 48, 64, 0.1);
    margin: 0.5rem 0;
}

.app-content {
    margin-left: var(--sidebar-width);
    padding: 1.5rem;
    flex: 1;
    overflow-x: hidden;
}

.app-content .container-fluid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/* Small helpers */

.card.shadow-sm {
    border: 0;
}

.swal2-input {
    width: 100% !important;
}


/* SweetAlert2 custom styles */

.swal2-popup.swal2-custom {
    max-width: 560px !important;
    width: 96% !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.2) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.swal2-popup.swal2-custom .swal2-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #052022;
}

.swal2-popup.swal2-custom .swal2-html-container {
    color: #0b2a2c;
}

.swal2-popup.swal2-custom .swal2-input {
    padding: .6rem .75rem !important;
    border-radius: 8px !important;
    border: 1px solid rgba(3, 7, 12, 0.08) !important;
    box-shadow: none !important;
}

.swal2-container {
    z-index: 20000;
}


/* File input inside Swal */

.swal2-popup.swal2-custom input[type="file"] {
    width: 100%;
}


/* Image cards responsive layout */

.card-body.d-flex {
    flex-wrap: wrap;
    gap: 1rem;
}

.card-body.d-flex>div:first-child {
    flex-basis: auto;
    flex-shrink: 0;
}

.card-body.d-flex>div:last-child {
    flex: 1;
    min-width: 200px;
}


/* Responsive buttons */

.btn-group-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    white-space: nowrap;
}


/* Table responsive improvements */

.table {
    font-size: 0.95rem;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* Form improvements for mobile */

.form-control {
    min-height: 44px;
    font-size: 16px;
}

.form-label {
    margin-bottom: 0.5rem;
}


/* MOBILE BREAKPOINTS */

@media (max-width: 992px) {
    .app-sidebar {
        width: 200px;
        --sidebar-width: 200px;
    }
    .app-content {
        padding: 1.25rem;
    }
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .card-body.d-flex {
        flex-direction: column;
    }
    .card-body.d-flex>div:first-child {
        flex-basis: auto;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }
    .btn-sm {
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 768px) {
    .app-shell {
        flex-direction: column;
    }
    .app-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 4px solid var(--sidebar-border);
        padding: 1rem;
        gap: 0.5rem;
        align-items: center;
        overflow-y: visible;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem;
    }
    .app-sidebar .brand {
        margin-bottom: 0;
        margin-right: auto;
        font-size: 0.9rem;
    }
    .app-sidebar .nav {
        display: none;
        flex: none;
    }
    .app-sidebar .nav-divider {
        display: none;
    }
    .app-content {
        margin-left: 0;
        padding: 1rem;
        margin-top: 0;
    }
    .app-content .container-fluid {
        padding: 0;
    }
    /* Show hamburger menu toggle */
    .app-sidebar::after {
        content: '☰';
        margin-left: auto;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--brand);
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(var(--font-size) * 0.9);
        margin-bottom: 0.75rem;
    }
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .d-flex.justify-content-between>* {
        flex: 1 1 auto;
        min-width: 150px;
    }
    .btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.6rem;
    }
    .btn-sm {
        padding: 0.35rem 0.55rem;
        font-size: 0.75rem;
    }
    .card {
        margin-bottom: 1rem;
    }
    .card-body {
        padding: 1rem;
    }
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .col-md-4,
    .col-md-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.g-3>div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .table {
        font-size: 0.85rem;
    }
    .table th,
    .table td {
        padding: 0.5rem;
    }
    .form-control {
        font-size: 16px;
        padding: 0.5rem;
        height: auto;
    }
    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
        padding: 0.5rem;
    }
    .alert {
        margin-bottom: 1rem;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    .container,
    .container-md,
    .container-sm {
        padding: 0;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .app-sidebar {
        padding: 0.5rem;
    }
    .app-sidebar .brand {
        font-size: 0.85rem;
    }
    .app-content {
        padding: 0.75rem;
    }
    h1 {
        font-size: 1.25rem;
    }
    h2 {
        font-size: 1.1rem;
    }
    h3,
    h4,
    h5,
    h6 {
        font-size: 1rem;
    }
    .btn {
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem;
        min-width: auto;
    }
    .btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
    }
    .card-body {
        padding: 0.75rem;
    }
    .table {
        font-size: 0.75rem;
    }
    .table th,
    .table td {
        padding: 0.35rem;
    }
    .form-control {
        font-size: 16px;
        padding: 0.45rem;
    }
    .badge {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }
    .me-1,
    .me-2,
    .me-3 {
        margin-right: 0.25rem !important;
    }
    .mb-1,
    .mb-2,
    .mb-3,
    .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    .d-flex.justify-content-between {
        flex-direction: column;
    }
    .d-flex.justify-content-between>* {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}