/* ==========================================================================
   Left Toolbar — Responsive overrides
   Structural / positioning queries only.
   Button sizing is handled dynamically by toolbar-responsive.js
   via CSS custom properties (--dt-btn-size, --dt-gap, --dt-icon-size).
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Mobile (< 768px): always-visible compact sidebar */
@media (max-width: 767px) {
    #drawing-toolbar {
        position: fixed !important;
        top: 44px !important;
        left: 0 !important;
        width: 40px !important;
        bottom: 38px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        overflow-x: hidden;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        z-index: 100 !important;
        box-shadow: none;
        transition: none !important;
        scrollbar-width: none;
    }
    #drawing-toolbar::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}

/* Small mobile (< 480px): adjust positions */
@media (max-width: 479px) {
    #drawing-toolbar {
        top: 44px !important;
        bottom: 36px !important;
        width: 40px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   WIDTH-BASED POSITIONING OVERRIDES
   ══════════════════════════════════════════════════════════════ */

/* Laptop (1024–1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    #drawing-toolbar { top: 46px; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #drawing-toolbar { top: 44px; }
}

/* Small tablet / large mobile (480–767px) */
@media (min-width: 480px) and (max-width: 767px) {
    #drawing-toolbar { top: 44px; }
}

/* Landscape (short viewport) */
@media (max-height: 500px) {
    #drawing-toolbar { top: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   TOUCH / ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */

/* Touch targets (WCAG) — override icon size for coarse pointers */
@media (hover: none) and (pointer: coarse) {
    .dt-btn svg {
        min-width: 20px;
        min-height: 20px;
    }
}

/* Safe areas (notched devices) */
@supports (padding: max(0px)) {
    #drawing-toolbar {
        margin-left: max(0px, env(safe-area-inset-left));
    }
}

/* Print */
@media print {
    #drawing-toolbar { display: none; }
}