* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #fefefe;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1088px;
    margin: 24px auto 0;
    padding: 0 20px;
    flex-shrink: 0;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: #41ad45;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-text {
    font-size: 24px;
    font-weight: 600;
    color: #41ad45;
    line-height: 1;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-name {
    font-size: 16px;
    font-weight: 500;
    color: #6c6c6c;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border: 1px dashed #41AD45;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 2px 0px 0px rgba(65, 173, 69, 0.1);
    transition: all 0.2s;
}

.btn-icon:hover {
    background: #f0f8ff;
}

.btn-icon svg {
    width: 24px;
    height: 24px;
}

/* Icon button variant for title section */
.title-with-icon .btn-icon {
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
}

.title-with-icon .btn-icon:hover {
    background: #f6f6f6;
}

/* Main Content */
.main-container {
    width: 100%;
    max-width: 986px;
    margin: 102px auto 0;
    padding: 20px 24px;
    background: #fcfdfc;
    border: 1.5px solid #f2faf3;
    border-radius: 20px;
    box-shadow: 0px 1px 3px 0px rgba(156, 156, 156, 0.07),
                0px 6px 6px 0px rgba(156, 156, 156, 0.06),
                0px 13px 8px 0px rgba(156, 156, 156, 0.04),
                0px 23px 9px 0px rgba(156, 156, 156, 0.01);
    flex-shrink: 0;
}

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title {
    font-size: 28px;
    font-weight: 600;
    color: #737373;
    line-height: 1;
}

.badge {
    background: #f7f7f7;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #919191;
}

.actions-section {
    display: flex;
    gap: 16px;
    align-items: center;
}

.btn-primary {
    background: #41AD45;
    color: white;
    border: 1px solid transparent;
    padding: 8px 20px;
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0px 2px 0px 0px rgba(65, 173, 69, 0.1);
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary:hover {
    background: #389c3c;
}

.btn-primary svg {
    width: 24px;
    height: 24px;
}

.btn-secondary {
    background: white;
    color: #41AD45;
    border: 1px solid #41AD45;
    padding: 8px 16px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0px 2px 0px 0px rgba(65, 173, 69, 0.1);
    transition: all 0.2s;
    text-decoration: none;
}

.btn-secondary:hover {
    background: #f0faf0;
}

.btn-secondary svg {
    width: 15px;
    height: 15px;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
}

.empty-icon {
    width: 80px;
    height: 70px;
    margin-bottom: 8px;
}

.empty-icon img {
    width: 100%;
    height: 100%;
}

.empty-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.empty-title {
    font-size: 20px;
    font-weight: 500;
    color: #454545;
    line-height: 1;
}

.empty-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #5d5d5d;
    line-height: 1;
}

/* Footer */
.footer {
    width: 100%;
    max-width: 1088px;
    height: 80px;
    margin: auto auto 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
}

.footer-plants-container {
    position: relative;
    width: 100%;
    max-width: 487px;
    height: 80px;
    flex-shrink: 1;
    overflow: hidden;
}

.footer-plant-left {
    position: absolute;
    left: 0;
    top: 0.2px;
    height: 79.755px;
    width: 50%;
    max-width: 243.618px;
    object-fit: contain;
}

.footer-plant-right {
    position: absolute;
    left: 48.19%;
    top: 0;
    height: 79.755px;
    width: 50%;
    max-width: 243.618px;
    object-fit: contain;
}

.footer-logo {
    font-size: 24px;
    font-weight: 600;
    color: #b0b0b0;
    line-height: 1;
    flex-shrink: 0;
}

/* Drag and Drop Styles */
.list-item {
    transition: all 0.2s ease;
}

.list-item.drag-over {
    border-top: 3px solid #41AD45;
    margin-top: 8px;
}

.list-item:active {
    cursor: grabbing !important;
}

.drag-handle {
    transition: color 0.2s;
}

.drag-handle:hover {
    color: #41AD45 !important;
}

.drag-handle svg {
    stroke-width: 3;
    stroke-linecap: round;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* Header adjustments */
    .header {
        margin: 16px auto 0;
        padding: 0 16px;
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .logo-text {
        font-size: 20px;
    }

    .user-name {
        font-size: 14px;
    }

    .btn-icon {
        width: 28px;
        height: 28px;
    }

    .btn-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Main content adjustments */
    .main-container {
        margin: 40px auto 0;
        padding: 16px;
        border-radius: 16px;
    }

    /* Content header - stack on mobile */
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
    }

    .title-section {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-title {
        font-size: 24px;
    }

    /* Actions section - stack buttons */
    .actions-section {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
        font-size: 15px;
    }

    /* List items adjustments */
    .list-item {
        padding: 12px;
        flex-direction: column;
        gap: 12px;
    }

    .list-item > div:first-child {
        width: 100%;
    }

    .list-item > div:last-child {
        width: 100%;
        justify-content: flex-end;
    }

    /* Empty state */
    .empty-icon {
        width: 60px;
        height: 52px;
    }

    .empty-title {
        font-size: 18px;
    }

    .empty-subtitle {
        font-size: 14px;
    }

    /* Footer adjustments */
    .footer {
        width: 100%;
        height: 60px;
        padding: 0 16px;
        gap: 10px;
    }

    .footer-plants-container:first-child {
        display: none;
    }

    .footer-plants-container {
        width: 100%;
        max-width: 300px;
        height: 60px;
    }

    .footer-plant-left,
    .footer-plant-right {
        height: 60px;
        width: 48%;
    }

    .footer-logo {
        display: none;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .header {
        margin: 12px auto 0;
        padding: 0 12px;
    }

    .logo-text {
        font-size: 18px;
    }

    .user-name {
        display: none; /* Hide username on very small screens */
    }

    .main-container {
        margin: 24px auto 0;
        padding: 12px;
    }

    .page-title {
        font-size: 20px;
    }

    .badge {
        font-size: 11px;
        padding: 3px 6px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Adjust footer for very small screens */
    .footer {
        height: 50px;
        padding: 0 12px;
    }

    .footer-plants-container {
        max-width: 240px;
        height: 50px;
    }

    .footer-plant-left,
    .footer-plant-right {
        height: 50px;
    }

    .footer-logo {
        display: none;
    }

    /* List item adjustments */
    .drag-handle {
        display: none; /* Hide drag handle on small mobile as it's hard to use */
    }

    .list-item {
        cursor: default;
        padding: 10px;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1100px) {
    .header,
    .footer {
        max-width: calc(100% - 40px);
        padding: 0 20px;
    }

    .main-container {
        max-width: calc(100% - 40px);
        margin: 80px auto 0;
    }

    .footer-plants-container {
        width: 400px;
    }
}

/* Form styling for better mobile responsiveness */
#add-item-form {
    display: none;
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

#add-item-form input[type="text"],
#add-item-form input[type="url"],
#add-item-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

@media (max-width: 768px) {
    #add-item-form {
        padding: 16px;
        margin: 16px 0;
    }

    #add-item-form h3 {
        font-size: 18px;
    }

    #add-item-form input[type="text"],
    #add-item-form input[type="url"],
    #add-item-form textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    #add-item-form > div:last-child {
        flex-direction: column;
        width: 100%;
    }

    #add-item-form > div:last-child button {
        width: 100%;
    }
}