/* 
 * ========================================================================
 * TABLET RESPONSIVE ENHANCEMENTS
 * ========================================================================
 * Optimized styles for tablet devices (768px - 1024px)
 * ========================================================================
 */

/* Tablet Breakpoints */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* ===== HEADER OPTIMIZATIONS ===== */
    .top-bar {
        font-size: 0.875rem;
        padding: 6px 0;
    }
    
    .top-bar-link {
        font-size: 0.875rem;
        padding: 4px 8px;
    }
    
    .main-header {
        padding: 12px 0;
    }
    
    .brand-name {
        font-size: 1.35rem;
    }
    
    .brand-tagline {
        font-size: 0.7rem;
    }
    
    /* ===== SEARCH BAR ===== */
    .google-search-box {
        height: 42px;
        padding: 0 14px;
    }
    
    .google-search-input {
        font-size: 15px;
    }
    
    /* ===== NAVIGATION ===== */
    .secondary-nav {
        padding: 10px 0;
    }
    
    .secondary-nav a {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    
    .secondary-nav .gap-4 {
        gap: 0.75rem !important;
    }
    
    /* ===== BUTTONS ===== */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-sm {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
    
    /* ===== CARDS & CONTENT ===== */
    .card {
        margin-bottom: 1.25rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    /* ===== BOOK CARDS ===== */
    .book-card {
        margin-bottom: 1.25rem;
    }
    
    .book-card .card-body {
        padding: 1rem;
    }
    
    .book-card .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .book-card .card-text {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .book-card .price {
        font-size: 1.15rem;
    }
    
    /* ===== GRID LAYOUTS ===== */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .row > * {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* ===== FORMS ===== */
    .form-control,
    .form-select {
        padding: 10px 14px;
        font-size: 15px;
    }
    
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    /* ===== TABLES ===== */
    .table {
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: 10px;
    }
    
    /* ===== MODALS ===== */
    .modal-dialog {
        max-width: 600px;
        margin: 1.5rem auto;
    }
    
    .modal-content {
        padding: 1.25rem;
    }
    
    .modal-header {
        padding: 1rem 1.25rem;
    }
    
    .modal-body {
        padding: 1.25rem;
    }
    
    .modal-footer {
        padding: 1rem 1.25rem;
    }
    
    /* ===== DROPDOWNS ===== */
    .dropdown-menu {
        min-width: 200px;
        font-size: 0.9rem;
    }
    
    .dropdown-item {
        padding: 10px 16px;
    }
    
    /* ===== USER DROPDOWN ===== */
    .user-dropdown-modern {
        min-width: 340px;
        max-width: 380px;
    }
    
    .quick-actions-grid {
        gap: 8px;
    }
    
    .quick-action-btn {
        padding: 10px 6px;
        font-size: 0.7rem;
        min-height: 52px;
    }
    
    .quick-action-btn i {
        font-size: 1.05rem;
    }
    
    .menu-item {
        padding: 10px 14px;
    }
    
    .menu-item-icon {
        width: 34px;
        height: 34px;
    }
    
    .menu-item-title {
        font-size: 0.9rem;
    }
    
    /* ===== SPACING ===== */
    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .py-4 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2.5rem !important;
    }
    
    .mb-4 {
        margin-bottom: 1.75rem !important;
    }
    
    /* ===== TYPOGRAPHY ===== */
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.85rem;
    }
    
    h3 {
        font-size: 1.6rem;
    }
    
    h4 {
        font-size: 1.35rem;
    }
    
    h5 {
        font-size: 1.15rem;
    }
    
    p {
        font-size: 0.95rem;
        line-height: 1.65;
    }
    
    /* ===== HERO SECTION ===== */
    .hero-section {
        padding: 3rem 0;
    }
    
    .hero-section h1 {
        font-size: 2.25rem;
    }
    
    .hero-section .lead {
        font-size: 1.05rem;
    }
    
    /* ===== FOOTER ===== */
    footer {
        font-size: 0.9rem;
    }
    
    footer h5 {
        font-size: 1.1rem;
    }
    
    /* ===== ALERTS ===== */
    .alert {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    /* ===== BADGES ===== */
    .badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    /* ===== PAGINATION ===== */
    .pagination .page-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    /* ===== BREADCRUMBS ===== */
    .breadcrumb {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
    
    /* ===== TOUCH TARGETS ===== */
    a,
    button,
    .btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* ===== CONTAINER WIDTHS ===== */
    .container {
        max-width: 720px;
    }
    
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== LANDSCAPE TABLET (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    /* Optimize for landscape viewing */
    .main-header {
        padding: 10px 0;
    }
    
    .secondary-nav {
        padding: 8px 0;
    }
    
    .hero-section {
        padding: 2.5rem 0;
    }
    
    /* Compact spacing for landscape */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ===== PORTRAIT TABLET (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* Optimize for portrait viewing */
    .book-card {
        margin-bottom: 1.5rem;
    }
    
    /* Better use of vertical space */
    .card-body {
        padding: 1.5rem;
    }
    
    /* Larger touch targets in portrait */
    .btn {
        padding: 12px 24px;
        min-height: 48px;
    }
}

/* ===== ADMIN TABLET OPTIMIZATIONS ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    
    .admin-header {
        padding: 0 1.25rem;
    }
    
    .admin-logo {
        font-size: 1.15rem;
    }
    
    .category-nav-item {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
    
    .admin-avatar {
        width: 38px;
        height: 38px;
    }
    
    .main-content {
        max-width: 100%;
        padding: 1.5rem;
    }
    
    /* Admin tables */
    .admin-table {
        font-size: 0.9rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 10px;
    }
    
    /* Admin forms */
    .admin-form .form-control,
    .admin-form .form-select {
        padding: 10px 14px;
    }
}

/* ===== SPECIFIC TABLET BREAKPOINTS ===== */

/* iPad (768px - 834px) */
@media (min-width: 768px) and (max-width: 834px) {
    .container {
        max-width: 700px;
    }
    
    .book-card .card-title {
        font-size: 0.95rem;
    }
}

/* iPad Pro 11" (834px - 1024px) */
@media (min-width: 834px) and (max-width: 1024px) {
    .container {
        max-width: 800px;
    }
    
    .book-card .card-title {
        font-size: 1.05rem;
    }
    
    .secondary-nav a {
        font-size: 0.95rem;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* Better touch targets */
    .nav-link,
    .dropdown-item,
    .btn,
    a {
        -webkit-tap-highlight-color: rgba(0, 59, 100, 0.1);
        touch-action: manipulation;
    }
    
    /* Prevent text selection on interactive elements */
    .btn,
    .nav-link,
    .dropdown-toggle {
        user-select: none;
        -webkit-user-select: none;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better scroll performance */
    .dropdown-menu,
    .modal-body,
    .user-dropdown-modern {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ===== GRID IMPROVEMENTS ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* 2-column layout for book cards */
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* 3-column for smaller items */
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    /* Full width for forms */
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    
    /* Reduce animations for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Optimize transforms */
    .book-card:hover,
    .category-card:hover,
    .author-card:hover {
        transform: translateY(-3px);
    }
    
    /* Disable complex animations */
    .float-animation,
    .shimmer,
    .neon-glow {
        animation: none !important;
    }
}