// =============================================================================
// OCEANIC THEME
// =============================================================================
// A professional admin dashboard theme inspired by Oceanic's design language.
// Features a distinctive navy-blue palette with clean, modern aesthetics.
// Supports both light and dark mode variants.
// =============================================================================

@import 'theme-base';

// =============================================================================
// OCEANIC LIGHT MODE PALETTE
// =============================================================================

$oceanic-light: (
  // Primary palette - Oceanic signature blue
  'primary': #2C7BE5,
  'primary-hover': #1A68D1,
  'primary-light': #D5E5FA,
  'secondary': #6E84A3,

  // Status colors
  'success': #00D97E,
  'success-light': #CCF7E5,
  'warning': #F6C343,
  'warning-light': #FDF3D9,
  'danger': #E63757,
  'danger-light': #FAD7DD,
  'info': #39AACB,
  'info-light': #D4EEF5,

  // Backgrounds
  'bg-body': #F9FBFD,
  'bg-card': #FFFFFF,
  'bg-secondary': #EDF2F9,
  'bg-muted': #F1F4F8,
  'bg-input': #FFFFFF,

  // Text colors - Navy-based for Oceanic
  'text-primary': #12263F,
  'text-secondary': #6E84A3,
  'text-muted': #95AAC9,
  'text-heading': #12263F,

  // Borders
  'border-color': #E3EBF6,
  'border-light': #EDF2F9,

  // Links
  'link-color': #2C7BE5,
  'link-hover': #1A68D1,

  // Shadows
  'shadow-sm': 0 0.125rem 0.25rem rgba(18, 38, 63, 0.075),
  'shadow-md': 0 0.5rem 1rem rgba(18, 38, 63, 0.1),
  'shadow-lg': 0 1rem 3rem rgba(18, 38, 63, 0.125),

  // Navigation
  'nav-bg': #12263F,
  'nav-text': #6E84A3,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #CCF7E5,
  'label-success-color': #00864E,
  'label-warning-bg': #FDF3D9,
  'label-warning-color': #9A7500,
  'label-danger-bg': #FAD7DD,
  'label-danger-color': #BE1931,
  'label-primary-bg': #D5E5FA,
  'label-primary-color': #1A68D1,
  'label-secondary-bg': #EDF2F9,
  'label-secondary-color': #6E84A3
);

// =============================================================================
// OCEANIC DARK MODE PALETTE
// =============================================================================

$oceanic-dark: (
  // Primary palette
  'primary': #2C7BE5,
  'primary-hover': #4A90EC,
  'primary-light': #1E3A5F,
  'secondary': #6E84A3,

  // Status colors - slightly adjusted for dark mode
  'success': #00D97E,
  'success-light': #0A3D2C,
  'warning': #F6C343,
  'warning-light': #3D3112,
  'danger': #E63757,
  'danger-light': #3D1620,
  'info': #39AACB,
  'info-light': #123040,

  // Backgrounds - Deep navy palette
  'bg-body': #0B1727,
  'bg-card': #12263F,
  'bg-secondary': #1E3A5F,
  'bg-muted': #243B55,
  'bg-input': #1E3A5F,

  // Text colors
  'text-primary': #E3EBF6,
  'text-secondary': #95AAC9,
  'text-muted': #6E84A3,
  'text-heading': #FFFFFF,

  // Borders
  'border-color': #2C4057,
  'border-light': #1E3A5F,

  // Links
  'link-color': #6EB2F7,
  'link-hover': #A1CFFA,

  // Shadows
  'shadow-sm': 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2),
  'shadow-md': 0 0.5rem 1rem rgba(0, 0, 0, 0.3),
  'shadow-lg': 0 1rem 3rem rgba(0, 0, 0, 0.4),

  // Navigation
  'nav-bg': #0B1727,
  'nav-text': #6E84A3,
  'nav-active': #FFFFFF,

  // Labels/Badges
  'label-success-bg': #0A3D2C,
  'label-success-color': #00D97E,
  'label-warning-bg': #3D3112,
  'label-warning-color': #F6C343,
  'label-danger-bg': #3D1620,
  'label-danger-color': #E63757,
  'label-primary-bg': #1E3A5F,
  'label-primary-color': #6EB2F7,
  'label-secondary-bg': #243B55,
  'label-secondary-color': #95AAC9
);

// =============================================================================
// REGISTER OCEANIC THEME
// =============================================================================

$oceanic-theme: (
  'light': $oceanic-light,
  'dark': $oceanic-dark
);

@include register-theme('oceanic', $oceanic-theme);

// =============================================================================
// OCEANIC THEME SELECTOR STYLES
// =============================================================================
// These styles are applied when the oceanic theme is selected via data attribute

[data-skin="oceanic"] {
  // Light mode (default)
  @include apply-theme-variables('oceanic', 'light');

  // ==========================================================================
  // TYPOGRAPHY & BASE
  // ==========================================================================

  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
    font-family: 'Cerebri Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9375rem; // 15px - Oceanic default
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  // Headings - Oceanic style
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
  }

  h1, .uk-h1 { font-size: 1.625rem; } // 26px
  h2, .uk-h2 { font-size: 1.25rem; }  // 20px
  h3, .uk-h3 { font-size: 1.0625rem; } // 17px
  h4, .uk-h4 { font-size: 0.9375rem; } // 15px
  h5, .uk-h5 { font-size: 0.8125rem; } // 13px
  h6, .uk-h6 { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; } // 10px

  // Small/muted text
  small, .small, .uk-text-small {
    font-size: 0.8125rem; // 13px
  }

  // ==========================================================================
  // HEADER / NAVBAR
  // ==========================================================================

  header {
    background: var(--theme-bg-card) !important;
    border-bottom: 1px solid var(--theme-border-color);

    .uk-navbar {
      min-height: 70px;
    }

    .uk-logo {
      font-weight: 600;
      color: var(--theme-text-heading);
    }

    .uk-navbar-item {
      padding: 0 0.75rem;
    }

    .uk-icon-link {
      color: var(--theme-text-secondary);

      &:hover {
        color: var(--theme-text-primary);
      }
    }
  }

  // ==========================================================================
  // CARDS - Oceanic signature style
  // ==========================================================================

  .uk-card {
    background: var(--theme-bg-card);
    border: none !important;
    border-radius: 0.5rem; // 8px
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    transition: box-shadow 0.15s ease-in-out;

    &:hover {
      box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.1);
    }
  }

  .uk-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-color);
    background: transparent;

    .uk-card-title {
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0;
    }
  }

  .uk-card-body {
    padding: 1.5rem;
  }

  .uk-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border-color);
    background: var(--theme-bg-muted);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  // ==========================================================================
  // BUTTONS - Oceanic style
  // ==========================================================================

  .uk-button {
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    text-transform: none;
    letter-spacing: normal;
  }

  .uk-button-primary {
    background-color: var(--theme-primary);
    color: #fff;
    border: none;

    &:hover,
    &:focus {
      background-color: var(--theme-primary-hover);
      color: #fff;
    }
  }

  .uk-button-default {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);

    &:hover,
    &:focus {
      background-color: var(--theme-bg-secondary);
      border-color: var(--theme-border-color);
    }
  }

  .uk-button-secondary {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    border: none;

    &:hover,
    &:focus {
      background-color: #dce4f0;
    }
  }

  .uk-button-danger {
    background-color: var(--theme-danger);
    color: #fff;
    border: none;

    &:hover,
    &:focus {
      background-color: #d32642;
    }
  }

  .uk-button-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .uk-button-large {
    padding: 0.75rem 1.25rem;
    font-size: 1.0625rem;
  }

  // ==========================================================================
  // FORM INPUTS - Oceanic style
  // ==========================================================================

  .uk-input,
  .uk-select,
  .uk-textarea {
    background-color: var(--theme-bg-input);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.375rem;
    color: var(--theme-text-primary);
    font-size: 0.9375rem;
    padding: 0.5rem 0.75rem;
    height: auto;
    min-height: 2.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 0.15rem rgba(44, 123, 229, 0.25);
      outline: none;
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  .uk-textarea {
    min-height: 5rem;
  }

  .uk-form-label {
    color: var(--theme-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .uk-form-help,
  .uk-form-stacked .uk-form-help {
    color: var(--theme-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  // ==========================================================================
  // TABLES - Oceanic style
  // ==========================================================================

  .uk-table {
    font-size: 0.8125rem;

    th {
      color: var(--theme-text-muted);
      font-size: 0.625rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--theme-border-color);
      background: transparent;
    }

    td {
      padding: 1rem;
      border-top: 1px solid var(--theme-border-color);
      vertical-align: middle;
    }

    tbody tr {
      transition: background-color 0.15s ease;

      &:hover {
        background-color: var(--theme-bg-muted);
      }
    }
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background: var(--theme-bg-muted);
  }

  // ==========================================================================
  // TABS - Oceanic style
  // ==========================================================================

  .uk-tab {
    border-bottom: 1px solid var(--theme-border-color);

    &::before {
      display: none;
    }

    > li {
      margin-bottom: -1px;

      > a {
        color: var(--theme-text-muted);
        font-size: 0.8125rem;
        font-weight: 600;
        padding: 1rem 0;
        margin-right: 1.5rem;
        border: none;
        border-bottom: 2px solid transparent;
        background: transparent;
        border-radius: 0;
        transition: all 0.15s ease;

        &:hover {
          color: var(--theme-text-primary);
          border-bottom-color: var(--theme-border-color);
        }
      }

      &.uk-active > a {
        color: var(--theme-primary);
        border-bottom-color: var(--theme-primary);
        background: transparent;
      }
    }
  }

  // ==========================================================================
  // SUBNAV - Oceanic style
  // ==========================================================================

  .uk-subnav {
    margin-left: -1rem;

    > * {
      padding-left: 1rem;
    }

    > li > a {
      color: var(--theme-text-muted);
      font-size: 0.8125rem;
      font-weight: 600;
      padding: 0.5rem 0.75rem;
      transition: color 0.15s ease;

      &:hover {
        color: var(--theme-text-primary);
      }
    }

    > li.uk-active > a {
      color: var(--theme-primary);
    }
  }

  // Subnav Pill - Oceanic style
  .uk-subnav-pill {
    > li > a {
      background: transparent;
      border-radius: 0.375rem;
      padding: 0.5rem 1rem;

      &:hover {
        background: var(--theme-bg-secondary);
        color: var(--theme-text-primary);
      }
    }

    > li.uk-active > a {
      background: var(--theme-primary);
      color: #fff;
      box-shadow: 0 0.125rem 0.25rem rgba(44, 123, 229, 0.4);
    }
  }

  // Subnav Divider
  .uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
    border-left-color: var(--theme-border-color);
  }

  // ==========================================================================
  // LABELS/BADGES - Oceanic pill style
  // ==========================================================================

  .uk-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
  }

  .uk-label-success,
  .label-success {
    background-color: var(--theme-label-success-bg) !important;
    color: var(--theme-label-success-color) !important;
  }

  .uk-label-warning,
  .label-warning {
    background-color: var(--theme-label-warning-bg) !important;
    color: var(--theme-label-warning-color) !important;
  }

  .uk-label-danger,
  .label-danger {
    background-color: var(--theme-label-danger-bg) !important;
    color: var(--theme-label-danger-color) !important;
  }

  .uk-label-primary,
  .label-primary {
    background-color: var(--theme-label-primary-bg) !important;
    color: var(--theme-label-primary-color) !important;
  }

  // Badge (circular count)
  .uk-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 10rem;
    background-color: var(--theme-primary);
  }

  // ==========================================================================
  // LINKS
  // ==========================================================================

  a:not(.uk-button) {
    color: var(--theme-link-color);
    text-decoration: none;
    transition: color 0.15s ease;

    &:hover {
      color: var(--theme-link-hover);
      text-decoration: none;
    }
  }

  // ==========================================================================
  // NAVIGATION
  // ==========================================================================

  .uk-nav-default > li > a {
    color: var(--theme-text-secondary);
    padding: 0.5rem 0;
    font-size: 0.9375rem;

    &:hover,
    &:focus {
      color: var(--theme-text-primary);
    }
  }

  .uk-nav-default > li.uk-active > a {
    color: var(--theme-primary);
  }

  .uk-nav-header {
    color: var(--theme-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0;
  }

  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
    margin: 0.5rem 0;
  }

  // ==========================================================================
  // DROPDOWNS
  // ==========================================================================

  .uk-dropdown {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem rgba(18, 38, 63, 0.1);
    padding: 0.75rem 0;
    min-width: 12rem;
  }

  .uk-dropdown-nav > li > a {
    color: var(--theme-text-primary);
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;

    &:hover {
      background: var(--theme-bg-muted);
      color: var(--theme-text-primary);
    }
  }

  .uk-dropdown-nav .uk-nav-header {
    padding: 0.375rem 1rem;
  }

  .uk-dropdown-nav .uk-nav-divider {
    margin: 0.5rem 0;
  }

  // ==========================================================================
  // MODALS
  // ==========================================================================

  .uk-modal-dialog {
    background: var(--theme-bg-card);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(18, 38, 63, 0.125);
  }

  .uk-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-color);
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .uk-modal-body {
    padding: 1.5rem;
  }

  .uk-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border-color);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .uk-modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
  }

  // ==========================================================================
  // ALERTS
  // ==========================================================================

  .uk-alert {
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    border: none;
  }

  .uk-alert-primary {
    background: var(--theme-label-primary-bg);
    color: var(--theme-label-primary-color);
  }

  .uk-alert-success {
    background: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }

  // ==========================================================================
  // PROGRESS BARS
  // ==========================================================================

  .uk-progress {
    height: 0.25rem;
    border-radius: 0.125rem;
    background: var(--theme-bg-secondary);

    &::-webkit-progress-value {
      background: var(--theme-primary);
      border-radius: 0.125rem;
    }

    &::-moz-progress-bar {
      background: var(--theme-primary);
      border-radius: 0.125rem;
    }
  }

  // ==========================================================================
  // UTILITIES
  // ==========================================================================

  .text-muted {
    color: var(--theme-text-muted) !important;
  }

  .text-secondary {
    color: var(--theme-text-secondary) !important;
  }

  .uk-text-meta {
    color: var(--theme-text-muted);
    font-size: 0.8125rem;
  }

  // Status colors
  .status-success,
  .uk-text-success {
    color: var(--theme-success) !important;
  }

  .status-warning,
  .uk-text-warning {
    color: var(--theme-warning) !important;
  }

  .status-danger,
  .uk-text-danger {
    color: var(--theme-danger) !important;
  }

  .status-info,
  .uk-text-primary {
    color: var(--theme-primary) !important;
  }

  // ==========================================================================
  // AVATARS
  // ==========================================================================

  .avatar,
  [class*="uk-border-circle"] {
    border: 2px solid var(--theme-bg-card);
    box-shadow: 0 0 0 2px var(--theme-border-light);
  }

  // ==========================================================================
  // LISTS
  // ==========================================================================

  .uk-list > li {
    margin-top: 0.75rem;
  }

  .uk-list-divider > li:nth-child(n+2) {
    border-top-color: var(--theme-border-color);
    padding-top: 0.75rem;
  }

  // ==========================================================================
  // CONTAINER ADJUSTMENTS
  // ==========================================================================

  .uk-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  // Page title area
  .uk-heading-small {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
}

// =============================================================================
// OCEANIC DARK MODE
// =============================================================================

[data-skin="oceanic"][data-theme="dark"] {
  @include apply-theme-variables('oceanic', 'dark');

  // Body
  body {
    background-color: var(--theme-bg-body);
    color: var(--theme-text-primary);
  }

  // Headings
  h1, h2, h3, h4, h5, h6,
  .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    color: var(--theme-text-heading);
  }

  // Header
  header {
    background: var(--theme-bg-card) !important;
    border-bottom-color: var(--theme-border-color);
  }

  // Cards
  .uk-card {
    background: var(--theme-bg-card);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);

    &:hover {
      box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
    }
  }

  .uk-card-header {
    border-bottom-color: var(--theme-border-color);
  }

  .uk-card-footer {
    border-top-color: var(--theme-border-color);
    background: var(--theme-bg-secondary);
  }

  // Buttons
  .uk-button-default {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:hover,
    &:focus {
      background-color: var(--theme-bg-muted);
    }
  }

  .uk-button-secondary {
    background-color: var(--theme-bg-muted);

    &:hover,
    &:focus {
      background-color: var(--theme-border-color);
    }
  }

  // Form elements
  .uk-input,
  .uk-select,
  .uk-textarea {
    background-color: var(--theme-bg-input);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);

    &:focus {
      border-color: var(--theme-primary);
      box-shadow: 0 0 0 0.15rem rgba(44, 123, 229, 0.35);
    }

    &::placeholder {
      color: var(--theme-text-muted);
    }
  }

  // Tables
  .uk-table {
    th {
      border-bottom-color: var(--theme-border-color);
    }

    td {
      border-top-color: var(--theme-border-color);
    }

    tbody tr:hover {
      background-color: var(--theme-bg-secondary);
    }
  }

  .uk-table-striped tbody tr:nth-of-type(odd) {
    background: var(--theme-bg-secondary);
  }

  // Tabs
  .uk-tab {
    border-bottom-color: var(--theme-border-color);

    > li > a:hover {
      border-bottom-color: var(--theme-border-color);
    }
  }

  // Dropdowns
  .uk-dropdown {
    background: var(--theme-bg-card);
    border-color: var(--theme-border-color);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
  }

  .uk-dropdown-nav > li > a:hover {
    background: var(--theme-bg-secondary);
  }

  // Modals
  .uk-modal-dialog {
    background: var(--theme-bg-card);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
  }

  .uk-modal-header {
    border-bottom-color: var(--theme-border-color);
  }

  .uk-modal-footer {
    border-top-color: var(--theme-border-color);
  }

  // Alerts
  .uk-alert-primary {
    background: var(--theme-label-primary-bg);
    color: var(--theme-label-primary-color);
  }

  .uk-alert-success {
    background: var(--theme-label-success-bg);
    color: var(--theme-label-success-color);
  }

  .uk-alert-warning {
    background: var(--theme-label-warning-bg);
    color: var(--theme-label-warning-color);
  }

  .uk-alert-danger {
    background: var(--theme-label-danger-bg);
    color: var(--theme-label-danger-color);
  }

  // Code blocks
  code,
  pre {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
  }

  // Progress bars
  .uk-progress {
    background: var(--theme-bg-secondary);

    &::-webkit-progress-value {
      background: var(--theme-primary);
    }

    &::-moz-progress-bar {
      background: var(--theme-primary);
    }
  }

  // Tooltips
  .uk-tooltip {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
  }

  // Offcanvas
  .uk-offcanvas-bar {
    background: var(--theme-bg-card);
  }

  // Navigation
  .uk-nav-divider {
    border-top-color: var(--theme-border-color);
  }

  // Lists
  .uk-list-divider > li:nth-child(n+2) {
    border-top-color: var(--theme-border-color);
  }

  // Avatars
  .avatar,
  [class*="uk-border-circle"] {
    border-color: var(--theme-bg-card);
    box-shadow: 0 0 0 2px var(--theme-border-color);
  }

  // Scrollbars for webkit browsers
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--theme-bg-body);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--theme-border-color);
    border-radius: 4px;

    &:hover {
      background: var(--theme-text-muted);
    }
  }
}

// =============================================================================
// OCEANIC COMPONENT ENHANCEMENTS
// =============================================================================
// Special Oceanic-specific component styles

[data-skin="oceanic"] {
  // Oceanic-style stat cards
  .stat-card {
    .stat-value {
      color: var(--theme-text-heading);
      font-weight: 600;
    }

    .stat-label {
      color: var(--theme-text-muted);
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
    }

    &.stat-primary .stat-icon {
      background: var(--theme-primary-light);
      color: var(--theme-primary);
    }

    &.stat-success .stat-icon {
      background: var(--theme-success-light);
      color: var(--theme-success);
    }

    &.stat-warning .stat-icon {
      background: var(--theme-warning-light);
      color: var(--theme-warning);
    }

    &.stat-danger .stat-icon {
      background: var(--theme-danger-light);
      color: var(--theme-danger);
    }
  }

  // Avatar styling
  .avatar {
    border: 2px solid var(--theme-bg-card);
    box-shadow: var(--theme-shadow-sm);
  }

  // Activity feed
  .activity-feed {
    .activity-item {
      border-left: 2px solid var(--theme-border-color);

      &::before {
        background: var(--theme-primary);
        border: 2px solid var(--theme-bg-card);
      }
    }
  }

  // Chart placeholder backgrounds
  .chart-container {
    background: var(--theme-bg-muted);
    border-radius: 0.375rem;
  }
}

// =============================================================================
// OCEANIC RESPONSIVE STYLES
// =============================================================================

[data-skin="oceanic"] {
  // ==========================================================================
  // TABLET BREAKPOINT (max-width: 959px)
  // ==========================================================================

  @media (max-width: 959px) {
    // Header adjustments
    header {
      .uk-navbar {
        min-height: 60px;
      }

      .uk-navbar-item {
        padding: 0 0.5rem;
      }

      .uk-logo {
        font-size: 0.875rem;

        span:first-child {
          width: 28px !important;
          height: 28px !important;
          font-size: 10px !important;
        }
      }

      // Hide text next to profile on tablet
      .uk-visible\@m {
        display: none !important;
      }
    }

    // Cards
    .uk-card-body {
      padding: 1.25rem;
    }

    .uk-card-header,
    .uk-card-footer {
      padding: 0.875rem 1.25rem;
    }

    // Modals
    .uk-modal-body {
      padding: 1.25rem;
    }

    .uk-modal-header,
    .uk-modal-footer {
      padding: 0.875rem 1.25rem;
    }

    // Tables - make scrollable
    .uk-table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    // Tabs
    .uk-tab {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;

      > li > a {
        white-space: nowrap;
        padding: 0.75rem 0;
        margin-right: 1rem;
      }
    }

    // Subnav
    .uk-subnav {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;

      > li > a {
        white-space: nowrap;
      }
    }

    // Container padding
    .uk-container {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    // Typography adjustments
    h1, .uk-h1 { font-size: 1.375rem; }
    h2, .uk-h2 { font-size: 1.125rem; }

    .uk-heading-small {
      font-size: 1.375rem;
    }

    // Dropdowns
    .uk-dropdown {
      min-width: 10rem;
    }
  }

  // ==========================================================================
  // MOBILE BREAKPOINT (max-width: 639px)
  // ==========================================================================

  @media (max-width: 639px) {
    // Body font size
    body {
      font-size: 0.875rem;
    }

    // Header
    header {
      .uk-navbar {
        min-height: 56px;
        padding: 0;
      }

      .uk-navbar-left {
        padding-left: 0.5rem;
      }

      .uk-navbar-right {
        padding-right: 0.5rem;
      }

      .uk-navbar-item {
        padding: 0 0.375rem;
      }

      .uk-logo {
        font-size: 0.8125rem;

        // Hide app name on very small screens
        .uk-margin-small-left {
          display: none;
        }
      }

      // Smaller icons
      .uk-icon-link [uk-icon] {
        width: 18px;
        height: 18px;
      }

      // Badge position adjustment
      .uk-badge {
        font-size: 9px;
        padding: 1px 4px;
      }
    }

    // Cards
    .uk-card {
      border-radius: 0.375rem;
    }

    .uk-card-body {
      padding: 1rem;
    }

    .uk-card-header,
    .uk-card-footer {
      padding: 0.75rem 1rem;
    }

    .uk-card-header .uk-card-title {
      font-size: 0.9375rem;
    }

    // Buttons
    .uk-button {
      padding: 0.4375rem 0.875rem;
      font-size: 0.8125rem;
    }

    .uk-button-small {
      padding: 0.3125rem 0.625rem;
      font-size: 0.75rem;
    }

    // Forms
    .uk-input,
    .uk-select,
    .uk-textarea {
      font-size: 0.875rem;
      padding: 0.4375rem 0.625rem;
      min-height: 2.25rem;
    }

    .uk-form-label {
      font-size: 0.75rem;
    }

    // Tables
    .uk-table {
      font-size: 0.75rem;

      th {
        font-size: 0.5625rem;
        padding: 0.5rem 0.75rem;
      }

      td {
        padding: 0.75rem;
      }
    }

    // Tabs - stack or scroll
    .uk-tab {
      > li > a {
        font-size: 0.75rem;
        padding: 0.625rem 0;
        margin-right: 0.75rem;
      }
    }

    // Subnav
    .uk-subnav > li > a {
      font-size: 0.75rem;
      padding: 0.375rem 0.5rem;
    }

    .uk-subnav-pill > li > a {
      padding: 0.375rem 0.75rem;
    }

    // Labels/Badges
    .uk-label {
      font-size: 0.5625rem;
      padding: 0.1875rem 0.375rem;
    }

    // Modals
    .uk-modal-dialog {
      margin: 0.5rem;
      border-radius: 0.375rem;
    }

    .uk-modal-body {
      padding: 1rem;
    }

    .uk-modal-header,
    .uk-modal-footer {
      padding: 0.75rem 1rem;
    }

    .uk-modal-title {
      font-size: 0.9375rem;
    }

    // Alerts
    .uk-alert {
      padding: 0.75rem 1rem;
      font-size: 0.75rem;
    }

    // Dropdowns
    .uk-dropdown {
      min-width: 100%;
      left: 0 !important;
      right: 0 !important;
      margin: 0;
      border-radius: 0;
    }

    .uk-dropdown-nav > li > a {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }

    // Container
    .uk-container {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    // Typography
    h1, .uk-h1 { font-size: 1.25rem; }
    h2, .uk-h2 { font-size: 1rem; }
    h3, .uk-h3 { font-size: 0.9375rem; }
    h4, .uk-h4 { font-size: 0.875rem; }

    .uk-heading-small {
      font-size: 1.25rem;
    }

    .uk-text-meta {
      font-size: 0.75rem;
    }

    small, .small, .uk-text-small {
      font-size: 0.75rem;
    }

    // Lists
    .uk-list > li {
      margin-top: 0.5rem;
    }

    .uk-list-divider > li:nth-child(n+2) {
      padding-top: 0.5rem;
    }

    // Navigation
    .uk-nav-default > li > a {
      padding: 0.375rem 0;
      font-size: 0.875rem;
    }

    .uk-nav-header {
      font-size: 0.5625rem;
      padding: 0.375rem 0;
    }

    // Progress
    .uk-progress {
      height: 0.1875rem;
    }

    // Avatars - smaller on mobile
    .avatar,
    [class*="uk-border-circle"] {
      border-width: 1px;
    }
  }

  // ==========================================================================
  // TOUCH DEVICE OPTIMIZATIONS
  // ==========================================================================

  @media (hover: none) and (pointer: coarse) {
    // Larger touch targets
    .uk-button {
      min-height: 44px;
    }

    .uk-input,
    .uk-select,
    .uk-textarea {
      min-height: 44px;
    }

    .uk-dropdown-nav > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .uk-nav-default > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    .uk-tab > li > a {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    // Remove hover effects on touch
    .uk-card:hover {
      box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
    }

    .uk-table tbody tr:hover {
      background-color: transparent;
    }
  }
}