/**
 * Portfolio Admin Plugin - Admin Styles
 * 
 * Styles for the portfolio management interface
 * Requirements: 4.1, 5.1, 6.1, 8.1
 *
 * @package Portfolio_Admin_Plugin
 */

/* ==========================================================================
   View Containers
   ========================================================================== */

.portfolio-admin-container {
    position: relative;
}

.portfolio-list-view,
.portfolio-edit-view,
.portfolio-group-manager-view {
    width: 100%;
}

.portfolio-edit-view.loading {
    opacity: 0.6;
    pointer-events: none;
}

.portfolio-edit-view.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Base Styles & Layout
   ========================================================================== */

.portfolio-admin-wrap {
    margin: 20px 20px 0 2px;
}

.portfolio-admin-wrap .wp-heading-inline {
    margin-right: 10px;
}

/* ==========================================================================
   Messages (Success/Error)
   ========================================================================== */

.portfolio-messages {
    margin: 15px 0;
}

.portfolio-message {
    padding: 12px 15px;
    margin: 10px 0;
    border-left: 4px solid;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.portfolio-message.success {
    border-left-color: #46b450;
    background-color: #ecf7ed;
}

.portfolio-message.error {
    border-left-color: #dc3232;
    background-color: #fef7f7;
}

.portfolio-message.warning {
    border-left-color: #ffb900;
    background-color: #fff8e5;
}

.portfolio-message.info {
    border-left-color: #00a0d2;
    background-color: #e5f5fa;
}

.portfolio-message p {
    margin: 0.5em 0;
    padding: 2px;
}

.portfolio-message .message-icon {
    display: inline-block;
    margin-right: 8px;
    font-weight: 600;
}

/* ==========================================================================
   Portfolio List View
   ========================================================================== */

.portfolio-list-table {
    margin-top: 20px;
}

.portfolio-list-table .column-thumbnail {
    width: 80px;
    text-align: center;
}

.portfolio-list-table .column-name {
    width: 30%;
}

.portfolio-list-table .column-group {
    width: 20%;
}

.portfolio-list-table .column-date {
    width: 15%;
}

.portfolio-list-table .column-actions {
    width: 150px;
}

/* Portfolio Thumbnail */
.portfolio-thumbnail {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

.portfolio-no-image {
    display: inline-block;
    padding: 8px 12px;
    background: #f0f0f1;
    color: #646970;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
}

/* Portfolio Actions */
.portfolio-list-table .column-actions .button {
    margin-right: 5px;
    margin-bottom: 5px;
}

.portfolio-edit-link {
    text-decoration: none;
    font-weight: 600;
}

.portfolio-edit-link:hover {
    color: #0073aa;
}

/* Empty State */
.portfolio-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    margin-top: 20px;
}

.portfolio-empty-state p {
    font-size: 16px;
    color: #646970;
    margin: 15px 0;
}

/* Filter Controls */
.tablenav .actions {
    padding: 8px 0;
}

.tablenav .actions select {
    margin-right: 8px;
    border-color: #00294b;
}

.tablenav .actions .button {
    vertical-align: middle;
}

/* ==========================================================================
   Portfolio Edit/Add Form
   ========================================================================== */

.portfolio-edit-form {
    margin-top: 20px;
}

.portfolio-edit-form #poststuff {
    padding-top: 10px;
}

.portfolio-edit-form #post-body {
    position: relative;
}

.portfolio-edit-form #post-body-content {
    margin-bottom: 20px;
    float: none;
    width: auto;
}

/* Two column layout fix - Equal width columns */
.portfolio-edit-form #post-body.columns-2 {
    display: flex;
    gap: 20px;
    margin-right: 0;
}

.portfolio-edit-form #post-body.columns-2 #post-body-content {
    flex: 1;
    width: 50%;
    float: none;
}

.portfolio-edit-form #post-body.columns-2 #postbox-container-1 {
    flex: 1;
    width: 50%;
    float: none;
    margin-right: 0;
}

.portfolio-edit-form .postbox {
    margin-bottom: 20px;
    border: 1px solid #c3c4c7;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.portfolio-edit-form .postbox-header {
    border-bottom: 1px solid #c3c4c7;
    padding: 12px;
}

.portfolio-edit-form .postbox-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
}

.portfolio-edit-form .postbox .inside {
    padding: 12px;
    margin: 0;
}

.portfolio-edit-form .postbox .inside:after {
    content: "";
    display: table;
    clear: both;
}

/* Form Fields */
.portfolio-field {
    margin-bottom: 20px;
}

.portfolio-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d2327;
}

.portfolio-label .required {
    color: #d63638;
    font-weight: bold;
}

.portfolio-input,
.portfolio-select {
    width: 100%;
    max-width: 600px;
}

.portfolio-field .description {
    margin-top: 8px;
    color: #646970;
    font-size: 13px;
}

/* Field Errors */
.portfolio-field-error {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef7f7;
    border-left: 4px solid #dc3232;
    color: #dc3232;
    font-size: 13px;
    border-radius: 2px;
}

.portfolio-field-error.visible {
    display: block;
}

/* Image Preview */
.portfolio-image-preview {
    margin-bottom: 15px;
    padding: 20px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-preview-image {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio-no-image-preview {
    color: #646970;
    font-size: 14px;
    padding: 40px 20px;
}

.portfolio-image-actions {
    margin-top: 10px;
}

.portfolio-image-actions .button {
    margin-right: 8px;
}

/* Publish Box */
.portfolio-publish-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portfolio-publish-actions .button {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.portfolio-publish-actions .button-primary {
    padding: 8px 12px;
    height: auto;
    font-size: 14px;
}

.portfolio-publish-actions .button-link-delete {
    margin-top: 5px;
}

/* Add Group Link */
.portfolio-add-group-link {
    text-decoration: none;
    font-size: 13px;
}

.portfolio-add-group-link:hover {
    color: #0073aa;
}

/* ==========================================================================
   Group Manager
   ========================================================================== */

.portfolio-groups-table {
    margin-top: 20px;
}

.portfolio-groups-table .column-name {
    width: 35%;
}

.portfolio-groups-table .column-count {
    width: 20%;
}

.portfolio-groups-table .column-date {
    width: 20%;
}

.portfolio-groups-table .column-actions {
    width: 200px;
}

/* Group Name Editing */
.group-name-display {
    display: inline-block;
}

.group-name-edit {
    display: none;
}

.group-name-edit .group-name-input {
    width: 100%;
    max-width: 400px;
}

tr.editing .group-name-display {
    display: none;
}

tr.editing .group-name-edit {
    display: block;
}

tr.editing .group-edit-btn {
    display: none;
}

tr.editing .group-save-btn,
tr.editing .group-cancel-btn {
    display: inline-block !important;
}

/* Group Portfolio Count */
.group-portfolio-count {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f0f1;
    border-radius: 12px;
    font-size: 13px;
    color: #2c3338;
}

/* Group Info Box */
.portfolio-group-info {
    margin-top: 30px;
    padding: 20px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

.portfolio-group-info h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
}

.portfolio-group-info p {
    margin: 10px 0;
    color: #646970;
}

.portfolio-group-info ul {
    margin: 15px 0;
    padding-left: 25px;
    color: #646970;
}

.portfolio-group-info ul li {
    margin: 8px 0;
}

/* ==========================================================================
   Modal Dialogs
   ========================================================================== */

.portfolio-modal {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease-in;
}

.portfolio-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.portfolio-modal-content {
    background-color: #fff;
    margin: auto;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.portfolio-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #dcdcde;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portfolio-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    letter-spacing: 1px;
}

.portfolio-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: 300;
    color: #646970;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 1;
    transition: color 0.2s;
}

.portfolio-modal-close:hover {
    color: #d63638;
}

.portfolio-modal-body {
    padding: 24px;
}

.portfolio-modal-body .portfolio-field {
    margin-bottom: 15px;
}

.portfolio-modal-body .portfolio-field:last-child {
    margin-bottom: 0;
}

.portfolio-modal-body label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d2327;
}

.portfolio-modal-body input[type="text"] {
    width: 100%;
}

.portfolio-modal-body .description {
    margin-top: 8px;
    color: #646970;
    font-size: 13px;
}

.portfolio-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #dcdcde;
    background: #f6f7f7;
    text-align: right;
    border-radius: 0 0 4px 4px;
}

.portfolio-modal-footer .button {
    margin-left: 8px;
}

/* Delete Modal Specific */
.portfolio-delete-name,
.group-delete-name {
    font-weight: 600;
    font-size: 15px;
    color: #1d2327;
    margin: 10px 0;
}

.group-delete-warning {
    margin-top: 15px;
    padding: 12px;
    background: #fff8e5;
    border-left: 4px solid #ffb900;
    border-radius: 2px;
}

.group-delete-warning strong {
    color: #996800;
}

.page-title-action.portfolio-back-to-list {
    margin-left: 10px; /* Sol taraftan 10px boşluk ekler */
}

#portfolio-name,
#portfolio-content {
    border: 1px solid #2789da;   
    padding: 10px 14px;          
    border-radius: 12px;        
    outline: none;               
    transition: border-color 0.3s; 
    width: 100%;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button-danger {
    background: #d63638;
    border-color: #d63638;
    color: #fff;
}

.button-danger:hover,
.button-danger:focus {
    background: #b32d2e;
    border-color: #b32d2e;
    color: #fff;
}

.button-link-delete {
    color: #b32d2e;
    border-color: transparent;
    background: transparent;
    text-decoration: none;
}

.button-link-delete:hover,
.button-link-delete:focus {
    color: #d63638;
    background: transparent;
    border-color: transparent;
}

/* ==========================================================================
   Spinner/Loading States
   ========================================================================== */

.portfolio-loading {
    opacity: 0.6;
    pointer-events: none;
}

.portfolio-loading .spinner {
    visibility: visible;
    float: none;
    margin: 0 5px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablets and below (max-width: 782px) */
@media screen and (max-width: 782px) {
    .portfolio-admin-wrap {
        margin: 10px 10px 0 0;
    }

    /* Stack columns on mobile */
    .portfolio-edit-form #post-body.columns-2 {
        margin-right: 0;
    }

    .portfolio-edit-form #post-body.columns-2 #postbox-container-1 {
        float: none;
        margin-right: 0;
        width: 100%;
    }

    .portfolio-edit-form #post-body.columns-2 #post-body-content {
        float: none;
        width: 100%;
    }

    /* Stack buttons on smaller screens */
    .page-title-action {
        display: inline-block;
        margin: 5px 5px 5px 0;
    }

    /* Table adjustments */
    .portfolio-list-table .column-thumbnail,
    .portfolio-list-table .column-group,
    .portfolio-list-table .column-date {
        display: none;
    }

    .portfolio-list-table .column-name {
        width: auto;
    }

    .portfolio-list-table .column-actions {
        width: auto;
    }

    .portfolio-list-table .column-actions .button {
        display: block;
        width: 100%;
        margin: 5px 0;
        text-align: center;
    }

    /* Group table adjustments */
    .portfolio-groups-table .column-date {
        display: none;
    }

    .portfolio-groups-table .column-name {
        width: 50%;
    }

    .portfolio-groups-table .column-count {
        width: 30%;
    }

    .portfolio-groups-table .column-actions {
        width: auto;
    }

    /* Form adjustments */
    .portfolio-input,
    .portfolio-select {
        max-width: 100%;
    }

    /* Modal adjustments */
    .portfolio-modal-content {
        width: 95%;
        margin: 20px auto;
    }

    .portfolio-modal-header {
        padding: 15px;
    }

    .portfolio-modal-body {
        padding: 15px;
    }

    .portfolio-modal-footer {
        padding: 12px 15px;
    }

    .portfolio-modal-footer .button {
        display: block;
        width: 100%;
        margin: 5px 0;
        text-align: center;
    }

    /* Filter controls */
    .tablenav .actions {
        display: block;
        margin-bottom: 10px;
    }

    .tablenav .actions select,
    .tablenav .actions .button {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .tablenav .alignleft,
    .tablenav .alignright {
        float: none;
        display: block;
    }
}

/* Mobile phones (max-width: 600px) */
@media screen and (max-width: 600px) {
    /* Reduce padding and margins */
    .portfolio-admin-wrap {
        margin: 5px;
    }

    .portfolio-empty-state {
        padding: 40px 15px;
    }

    .portfolio-message {
        padding: 10px 12px;
    }

    /* Image preview smaller */
    .portfolio-image-preview {
        min-height: 150px;
        padding: 15px;
    }

    .portfolio-preview-image {
        max-height: 200px;
    }

    /* Group info box */
    .portfolio-group-info {
        padding: 15px;
    }

    .portfolio-group-info h3 {
        font-size: 14px;
    }

    /* Modal full width on mobile */
    .portfolio-modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }

    .portfolio-modal-header h2 {
        font-size: 16px;
    }
}

/* ==========================================================================
   WordPress Admin Compatibility
   ========================================================================== */

/* Ensure compatibility with WordPress admin color schemes */
.portfolio-admin-wrap .button-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.portfolio-admin-wrap .button-primary:hover,
.portfolio-admin-wrap .button-primary:focus {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus styles */
.portfolio-admin-wrap a:focus,
.portfolio-admin-wrap button:focus,
.portfolio-admin-wrap input:focus,
.portfolio-admin-wrap select:focus,
.portfolio-admin-wrap textarea:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
    box-shadow: none;
}

/* Skip to content link */
.portfolio-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2271b1;
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    z-index: 100001;
}

.portfolio-skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .portfolio-message {
        border-width: 2px;
    }

    .portfolio-thumbnail,
    .portfolio-preview-image {
        border: 2px solid currentColor;
    }

    .button {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .portfolio-modal,
    .portfolio-modal-content {
        animation: none;
    }

    * {
        transition: none !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .portfolio-admin-wrap .page-title-action,
    .portfolio-admin-wrap .column-actions,
    .portfolio-modal,
    .tablenav {
        display: none !important;
    }

    .portfolio-admin-wrap {
        margin: 0;
    }

    .portfolio-list-table,
    .portfolio-groups-table {
        border: 1px solid #000;
    }

    .portfolio-thumbnail,
    .portfolio-preview-image {
        max-width: 100px;
        max-height: 100px;
    }
}