/*
 * Bootstrap and AdminLTE compatibility wrappers for legacy Blade templates.
 *
 * Keep this file focused on old Bootstrap-era markup so the rest of the theme
 * can stay tokenized and component-driven.
 */
@layer components {
    /* Panels and containers. */
    .panel,
    .panel-default,
    .panel-squared,
    .panel-stack-shadow {
        @apply rounded-[var(--radius-box)] border border-base-300 bg-base-100 shadow-sm;
    }

    .panel-transparent {
        @apply border-transparent bg-transparent shadow-none;
    }

    .panel-heading {
        @apply border-b border-base-300 px-6 py-5;
    }

    .panel-body {
        @apply px-6 py-6;
    }

    .panel-title {
        @apply text-lg font-semibold text-brand-ink;
    }

    .container-focus,
    .container-centered,
    .container-centered-large,
    .container {
        @apply mx-auto w-full max-w-[1170px] px-4 md:px-8;
    }

    .container-centered {
        @apply max-w-xl;
    }

    .container-centered-large {
        @apply max-w-5xl;
    }

    .container-fluid {
        @apply mx-auto w-full px-4 md:px-8;
    }

    /* Visibility helpers. */
    @media (max-width: 575.98px) {
        .hidden-xs {
            display: none !important;
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .hidden-sm {
            display: none !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .hidden-md {
            display: none !important;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .hidden-lg {
            display: none !important;
        }
    }

    @media (min-width: 1200px) {
        .hidden-xl {
            display: none !important;
        }
    }

    .hidden {
        display: none !important;
    }

    /* Bootstrap grid compatibility for legacy row/column markup. */
    .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .row > [class^="col-"],
    .row > [class*=" col-"] {
        box-sizing: border-box;
        min-height: 1px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        flex: 0 0 calc(100% * var(--bootstrap-span, 12) / 12);
        max-width: calc(100% * var(--bootstrap-span, 12) / 12);
    }

    .col-xs-1 { --bootstrap-span: 1; }
    .col-xs-2 { --bootstrap-span: 2; }
    .col-xs-3 { --bootstrap-span: 3; }
    .col-xs-4 { --bootstrap-span: 4; }
    .col-xs-5 { --bootstrap-span: 5; }
    .col-xs-6 { --bootstrap-span: 6; }
    .col-xs-7 { --bootstrap-span: 7; }
    .col-xs-8 { --bootstrap-span: 8; }
    .col-xs-9 { --bootstrap-span: 9; }
    .col-xs-10 { --bootstrap-span: 10; }
    .col-xs-11 { --bootstrap-span: 11; }
    .col-xs-12 { --bootstrap-span: 12; }

    .col-xs-offset-1 { margin-left: 8.333333%; }
    .col-xs-offset-2 { margin-left: 16.666667%; }
    .col-xs-offset-3 { margin-left: 25%; }
    .col-xs-offset-4 { margin-left: 33.333333%; }
    .col-xs-offset-5 { margin-left: 41.666667%; }
    .col-xs-offset-6 { margin-left: 50%; }
    .col-xs-offset-7 { margin-left: 58.333333%; }
    .col-xs-offset-8 { margin-left: 66.666667%; }
    .col-xs-offset-9 { margin-left: 75%; }
    .col-xs-offset-10 { margin-left: 83.333333%; }
    .col-xs-offset-11 { margin-left: 91.666667%; }

    @media (min-width: 576px) {
        .col-sm-1 { --bootstrap-span: 1; }
        .col-sm-2 { --bootstrap-span: 2; }
        .col-sm-3 { --bootstrap-span: 3; }
        .col-sm-4 { --bootstrap-span: 4; }
        .col-sm-5 { --bootstrap-span: 5; }
        .col-sm-6 { --bootstrap-span: 6; }
        .col-sm-7 { --bootstrap-span: 7; }
        .col-sm-8 { --bootstrap-span: 8; }
        .col-sm-9 { --bootstrap-span: 9; }
        .col-sm-10 { --bootstrap-span: 10; }
        .col-sm-11 { --bootstrap-span: 11; }
        .col-sm-12 { --bootstrap-span: 12; }

        .col-sm-offset-1 { margin-left: 8.333333%; }
        .col-sm-offset-2 { margin-left: 16.666667%; }
        .col-sm-offset-3 { margin-left: 25%; }
        .col-sm-offset-4 { margin-left: 33.333333%; }
        .col-sm-offset-5 { margin-left: 41.666667%; }
        .col-sm-offset-6 { margin-left: 50%; }
        .col-sm-offset-7 { margin-left: 58.333333%; }
        .col-sm-offset-8 { margin-left: 66.666667%; }
        .col-sm-offset-9 { margin-left: 75%; }
        .col-sm-offset-10 { margin-left: 83.333333%; }
        .col-sm-offset-11 { margin-left: 91.666667%; }
    }

    /*
     * Legacy form validation markup still uses Bootstrap offset classes inside
     * .has-error blocks. Under the new theme we want those error messages to
     * align flush-left instead of inheriting the old horizontal offset.
     */
    .has-error [class^="col-sm-offset-"],
    .has-error [class*=" col-sm-offset-"] {
        margin-left: 0;
    }

    @media (min-width: 768px) {
        .col-md-1 { --bootstrap-span: 1; }
        .col-md-2 { --bootstrap-span: 2; }
        .col-md-3 { --bootstrap-span: 3; }
        .col-md-4 { --bootstrap-span: 4; }
        .col-md-5 { --bootstrap-span: 5; }
        .col-md-6 { --bootstrap-span: 6; }
        .col-md-7 { --bootstrap-span: 7; }
        .col-md-8 { --bootstrap-span: 8; }
        .col-md-9 { --bootstrap-span: 9; }
        .col-md-10 { --bootstrap-span: 10; }
        .col-md-11 { --bootstrap-span: 11; }
        .col-md-12 { --bootstrap-span: 12; }

        .col-md-offset-1 { margin-left: 8.333333%; }
        .col-md-offset-2 { margin-left: 16.666667%; }
        .col-md-offset-3 { margin-left: 25%; }
        .col-md-offset-4 { margin-left: 33.333333%; }
        .col-md-offset-5 { margin-left: 41.666667%; }
        .col-md-offset-6 { margin-left: 50%; }
        .col-md-offset-7 { margin-left: 58.333333%; }
        .col-md-offset-8 { margin-left: 66.666667%; }
        .col-md-offset-9 { margin-left: 75%; }
        .col-md-offset-10 { margin-left: 83.333333%; }
        .col-md-offset-11 { margin-left: 91.666667%; }
    }

    @media (min-width: 992px) {
        .col-lg-1 { --bootstrap-span: 1; }
        .col-lg-2 { --bootstrap-span: 2; }
        .col-lg-3 { --bootstrap-span: 3; }
        .col-lg-4 { --bootstrap-span: 4; }
        .col-lg-5 { --bootstrap-span: 5; }
        .col-lg-6 { --bootstrap-span: 6; }
        .col-lg-7 { --bootstrap-span: 7; }
        .col-lg-8 { --bootstrap-span: 8; }
        .col-lg-9 { --bootstrap-span: 9; }
        .col-lg-10 { --bootstrap-span: 10; }
        .col-lg-11 { --bootstrap-span: 11; }
        .col-lg-12 { --bootstrap-span: 12; }

        .col-lg-offset-1 { margin-left: 8.333333%; }
        .col-lg-offset-2 { margin-left: 16.666667%; }
        .col-lg-offset-3 { margin-left: 25%; }
        .col-lg-offset-4 { margin-left: 33.333333%; }
        .col-lg-offset-5 { margin-left: 41.666667%; }
        .col-lg-offset-6 { margin-left: 50%; }
        .col-lg-offset-7 { margin-left: 58.333333%; }
        .col-lg-offset-8 { margin-left: 66.666667%; }
        .col-lg-offset-9 { margin-left: 75%; }
        .col-lg-offset-10 { margin-left: 83.333333%; }
        .col-lg-offset-11 { margin-left: 91.666667%; }
    }

    /* Alerts, badges, and labels. */
    .alert,
    .flash-message {
        @apply rounded-[var(--radius-box)] border px-4 py-4 text-sm font-medium shadow-sm;
    }

    .alert-default {
        @apply border-base-300 bg-base-100 text-base-content;
    }

    .alert-info,
    .flash-message.alert-info {
        @apply border-info/20 bg-info/10 text-info;
    }

    .alert-danger,
    .flash-message.alert-danger {
        @apply border-error/20 bg-error/10 text-error;
    }

    .alert-warning,
    .flash-message.alert-warning {
        @apply border-warning/20 bg-warning/10 text-warning;
    }

    .alert-success,
    .flash-message.alert-success {
        @apply border-success/20 bg-success/10 text-success;
    }

    .badge,
    .label {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold;
    }

    .badge-light,
    .label-default {
        @apply bg-base-200 text-base-content;
    }

    .label-success {
        @apply bg-success text-success-content;
    }

    /* Buttons and button groups. */
    .btn {
        @apply inline-flex items-center justify-center rounded-xl border border-transparent px-4 py-3 text-sm font-semibold normal-case shadow-none transition;
    }

    .btn:hover {
        @apply no-underline;
    }

    .btn-sm {
        @apply rounded-lg px-3 py-2 text-xs;
    }

    .btn-xs {
        @apply rounded-lg px-2.5 py-1.5 text-xs;
    }

    .btn-block {
        @apply flex w-full;
    }

    .btn-flat {
        @apply rounded-none shadow-none;
    }

    .btn-primary,
    .btn-success {
        @apply border-primary bg-primary text-primary-content hover:border-primary;
    }

    .btn-primary:hover,
    .btn-success:hover {
        background-color: var(--color-primary-strong);
    }

    .btn-default,
    .btn-tertiary {
        @apply border-base-300 bg-base-100 text-base-content hover:border-base-300 hover:bg-base-200 hover:text-base-content;
    }

    .btn-danger {
        @apply border-error bg-error text-error-content hover:border-error hover:bg-error/90;
    }

    .btn-group {
        @apply inline-flex items-stretch;
    }

    .btn-group > .btn {
        @apply rounded-none;
    }

    .btn-group > .btn:first-child {
        @apply rounded-l-xl;
    }

    .btn-group > .btn:last-child {
        @apply rounded-r-xl;
    }

    .btn-group-vertical {
        @apply flex flex-col;
    }

    .btn-group-sm > .btn {
        @apply px-3 py-2 text-xs;
    }

    .btn-group-xs > .btn {
        @apply px-2.5 py-1.5 text-xs;
    }

    .btn-group-lg > .btn {
        @apply px-5 py-4 text-base;
    }

    /* Forms and fields. */
    .form-group {
        @apply mb-5;
    }

    .form-inline {
        @apply flex flex-col gap-4 md:flex-row md:items-center md:justify-between;
    }

    .form-actions {
        @apply flex flex-wrap items-center justify-center gap-3;
    }

    .control-label,
    .form-label,
    .theme-label {
        @apply mb-2 block text-sm font-semibold text-base-content/80;
    }

    .form-control {
        @apply block w-full rounded-xl border border-base-300 bg-base-100 px-4 py-3 text-base text-base-content shadow-none outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/20;
    }

    .form-control:disabled {
        @apply cursor-not-allowed bg-base-200 text-base-content/50;
    }

    .input-group {
        @apply flex w-full items-stretch;
    }

    .input-group .form-control {
        @apply rounded-none;
    }

    .input-group > .form-control:first-child,
    .input-group > .input-group-addon:first-child {
        @apply rounded-l-xl;
    }

    .input-group > .form-control:last-child,
    .input-group > .input-group-addon:last-child {
        @apply rounded-r-xl;
    }

    .input-group-addon {
        @apply inline-flex items-center rounded-xl border border-base-300 bg-base-200 px-4 py-3 text-sm text-base-content;
    }

    .form-control-feedback {
        @apply pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-base-content/50;
    }

    .has-feedback {
        @apply relative;
    }

    .checkbox,
    .radio {
        @apply relative flex items-start gap-2;
    }

    .checkbox-inline,
    .radio-inline {
        @apply inline-flex items-center gap-2;
    }

    .checkbox-container {
        @apply flex flex-wrap items-center gap-3;
    }

    /* Tables and media. */
    .table {
        @apply w-full border-collapse text-sm;
    }

    .table-bordered {
        @apply border border-base-300;
    }

    .table-bordered > :not(caption) > * > * {
        @apply border border-base-300;
    }

    .table-striped > tbody > tr:nth-child(odd) {
        @apply bg-base-200/60;
    }

    .table-condensed > :not(caption) > * > * {
        @apply px-2 py-1;
    }

    .table-responsive {
        @apply block w-full overflow-x-auto;
    }

    .img-responsive {
        @apply h-auto max-w-full;
    }

    .img-circle {
        @apply rounded-full;
    }

    /* Tabs, dropdowns, and progress widgets. */
    .nav-tabs-custom {
        @apply overflow-hidden rounded-[var(--radius-box)] border border-base-300 bg-base-100;
    }

    .nav-tabs-custom > .nav-tabs {
        @apply flex flex-wrap gap-2 border-b border-base-300 px-4 pt-4;
    }

    .nav-tabs-custom > .nav-tabs > li > a {
        @apply inline-flex rounded-t-lg px-4 py-2 text-sm font-medium text-base-content/70 no-underline transition;
    }

    .nav-tabs-custom > .nav-tabs > li.active > a,
    .nav-tabs-custom > .nav-tabs > li > a:hover {
        @apply bg-base-200 text-base-content;
    }

    .nav-tabs-custom-toolbar {
        @apply flex flex-wrap items-center justify-between gap-3 px-4 py-4;
    }

    .tab-content {
        @apply px-4 py-4;
    }

    .tab-pane {
        display: none;
    }

    .tab-pane.active {
        display: block;
    }

    .dropdown {
        @apply relative;
    }

    .dropdown-toggle {
        @apply inline-flex items-center gap-2;
    }

    .dropdown-menu {
        @apply absolute z-50 mt-2 min-w-48 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg;
    }

    .dropdown-menu > li > a {
        @apply block rounded-lg px-3 py-2 text-sm text-base-content no-underline transition hover:bg-base-200;
    }

    .progress {
        @apply h-2 overflow-hidden rounded-full bg-base-200;
    }

    .progress-bar {
        @apply h-full rounded-full bg-primary;
    }

    .progress-bar-striped {
        background-image: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.18) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.18) 75%,
            transparent 75%,
            transparent
        );
        background-size: 1rem 1rem;
    }

    .progress-bar-warning {
        @apply bg-warning;
    }

    /* Control sidebar and legacy navigation chrome. */
    .control-sidebar {
        @apply fixed right-0 top-0 z-50 h-full w-80 overflow-y-auto bg-base-100 shadow-2xl;
        transform: translateX(100%);
    }

    .control-sidebar-bg {
        @apply fixed inset-0 z-40 bg-base-content/40 opacity-0 transition-opacity;
    }

    .control-sidebar-light {
        @apply bg-base-100 text-base-content;
    }

    .control-sidebar-heading,
    .control-sidebar-subheading {
        @apply px-5 py-3 text-sm font-semibold text-base-content;
    }

    .control-sidebar-menu {
        @apply space-y-1 px-3 pb-4;
    }

    .control-sidebar-tabs {
        @apply flex gap-2 border-b border-base-300 px-4 py-3;
    }

    .menu-icon {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-full bg-base-200 text-sm text-base-content;
    }

    .menu-info {
        @apply flex-1;
    }

    /* Dashboard metrics and file browser widgets. */
    .metric-panel {
        @apply rounded-[var(--radius-box)] border border-base-300 bg-base-100 shadow-sm;
    }

    .metric-body {
        @apply px-5 py-5;
    }

    .metric-label {
        @apply text-sm font-medium text-base-content/70;
    }

    .metric-value {
        @apply text-2xl font-bold text-brand-ink;
    }

    .metric-change {
        @apply inline-flex items-center gap-2 text-sm font-medium;
    }

    .metric-icon-bg {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-full bg-base-200 text-base-content;
    }

    .metric-help {
        @apply text-sm text-base-content/60;
    }

    .metric-graph-full,
    .metric-bottom-graph,
    .metric-bottom-sparkline {
        @apply mt-4 w-full;
    }

    .chart-metric,
    .chart-stat,
    .chart-donut,
    .chart-gauge,
    .chart-line,
    .chart-table {
        @apply block;
    }

    .file-browser {
        @apply rounded-[var(--radius-box)] border border-base-300 bg-base-100 shadow-sm;
    }

    .file-browser__files {
        @apply grid gap-4 sm:grid-cols-2 lg:grid-cols-3;
    }

    .file-browser__file {
        @apply overflow-hidden rounded-xl border border-base-300 bg-base-100;
    }

    .file-browser__file--selected {
        @apply border-primary ring-2 ring-primary/20;
    }

    .file-browser__file-thumbnail {
        @apply flex items-center justify-center bg-base-200;
    }

    .file-browser__file-thumbnail--image {
        @apply aspect-square object-cover;
    }

    .file-browser__file-thumbnail--document {
        @apply min-h-24;
    }

    .file-browser__file-icon {
        @apply text-base-content/50;
    }

    .file-browser__file-extension {
        @apply text-xs font-semibold uppercase tracking-wide text-base-content/50;
    }

    .file-browser__file-info {
        @apply space-y-1 px-4 py-4;
    }

    .file-browser__file-actions {
        @apply flex flex-wrap gap-2 px-4 pb-4;
    }

    /* Legacy AdminLTE surfaces and utility wrappers. */
    .box,
    .box-default,
    .box-primary,
    .box-danger,
    .box-solid {
        @apply rounded-[var(--radius-box)] border border-base-300 bg-base-100 shadow-sm;
    }

    .box-body {
        @apply px-5 py-5;
    }

    .box-header,
    .box-footer {
        @apply border-b border-base-300 px-5 py-4;
    }

    .box-footer {
        @apply border-b-0 border-t;
    }

    .box-title,
    .box-subtitle {
        @apply text-base font-semibold text-brand-ink;
    }

    .box-tools {
        @apply flex items-center gap-2;
    }

    .box-group {
        @apply space-y-4;
    }

    .with-border {
        @apply border-t border-base-300;
    }

    .section {
        @apply block;
    }

    .section-header {
        @apply mb-4 text-lg font-semibold text-brand-ink;
    }

    .content,
    .content-wrapper,
    .main-header,
    .main-sidebar,
    .main-footer,
    .navbar,
    .navbar-default,
    .navbar-header,
    .navbar-nav,
    .navbar-brand,
    .navbar-text,
    .navbar-link,
    .navbar-left,
    .navbar-right,
    .sidebar,
    .sidebar-toggle,
    .control-sidebar,
    .control-sidebar-bg,
    .control-sidebar-light,
    .control-sidebar-heading,
    .control-sidebar-menu,
    .control-sidebar-subheading,
    .control-sidebar-tabs,
    .nav,
    .nav-tabs,
    .nav-pills,
    .nav-stacked,
    .nav-stacked-menu,
    .nav-stacked-item,
    .nav-stacked-row,
    .nav-tabs-custom,
    .nav-tabs-custom-toolbar,
    .dropdown,
    .dropdown-menu,
    .dropdown-toggle,
    .breadcrumb,
    .progress,
    .progress-bar,
    .progress-bar-striped,
    .progress-bar-warning,
    .modal,
    .modal-dialog,
    .modal-content,
    .modal-header,
    .modal-body,
    .modal-footer,
    .modal-title,
    .modal-lg,
    .error-page,
    .error-content,
    .register-box,
    .register-box-body,
    .login-box,
    .login-box-body,
    .login-page,
    .login-logo {
        @apply box-border;
    }

    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    .no-margin {
        margin: 0 !important;
    }

    .no-padding {
        padding: 0 !important;
    }

    .no-radius {
        border-radius: 0 !important;
    }

    .no-border {
        border: 0 !important;
    }

    .pull-left {
        float: left !important;
    }

    .pull-right {
        float: right !important;
    }

    .bg-gray-light {
        @apply bg-base-200;
    }

    .text-body {
        @apply text-base-content;
    }

    .text-gray {
        @apply text-base-content/60;
    }

    .text-muted {
        @apply text-base-content/60;
    }

    .text-primary {
        @apply text-primary;
    }

    .text-secondary {
        @apply text-secondary;
    }

    .text-success {
        @apply text-success;
    }

    .text-info {
        @apply text-info;
    }

    .text-warning {
        @apply text-warning;
    }

    .text-danger {
        @apply text-error;
    }

    .text-light {
        @apply text-base-content/50;
    }

    .text-dark {
        @apply text-base-content;
    }

    .text-white {
        @apply text-white;
    }

    .text-reset {
        @apply text-inherit;
    }

    .text-red {
        @apply text-error;
    }

    .text-green {
        @apply text-success;
    }

    .bg-yellow {
        @apply bg-warning;
    }
}
